Nigel Bunner

Little Music List - a music recommendation site

2021-12-14T20:00:00Z

I recently finished creating a new website. It's a music recommendation site called Little Music List. The genesis of the site began from a list I've been creating on my phone.

I listen to music all the time, mostly on BBC 6music. When I hear a song I like I use a Drafts.app action to add it to a markdown list inside Dropbox.

The list has been growing over the years so I decided to make a website from it. At first I thought it would be good to take one song from either end of the list. But the songs I chose like this ended not sounding right when placed together. So I looked for songs on the list that would compliment each other, not in a songs that sound like each other way, but more like how songs follow each other as part of a playlist. That's when I came up with the idea of making a song recommendation website with the tagline "if you like this song, you might like this one too"

The site is built using Eleventy. It's all standard HTML generated from Nunjucks templates. I’ve used big JavaScript frameworks such as GatsbyJS and NextJS before on other projects, but for this I wanted something less complicated that produced a fast loading site without the large Javascript files those other Static Site Generators produce. The only JavaScript on the site is a small piece of inline code in the footer that allows me to lazy load the YouTube videos by displaying the default image for that video instead of the iframe. The image is replaced with the iframe when the user clicks on the image.

For each video added to Youtube there are a set of preview images at different sizes you can access via a simple URL. You just add the Video ID into the URL and then choose the size of the image by using a number from 0 to 3 for the filename, where 0 is the largest.

e.g.

https://img.youtube.com/vi/xMDwqeFQuKg/0.jpg

Eleventy produces a pretty good Lighthouse score out of the box without any extra optimisations.

The backend runs on Sanity. I've used this before in another project and found it so simple and yet powerful to work with that I knew I wanted to manage this website using it. It takes a bit of setting up at first but once the site grows larger I know I'm going to grateful for the better user experience it provides. I use the same YouTube preview image url to grab the preview image for the video. Within the Sanity Studio CMS I have also given myself the option of using an image directly uploaded to Sanity in case the default YouTube one is unsuitable. Whatever source image is used is transformed to both an optimised WebP and JPEG by the Eleventy Image plug-in.

I plan to add some more functionality to the site in the future such as links to related posts at the bottom of each post. I’ll also need to add pagination at some point before the homepage becomes too unwieldy. Pagination is incredibly simple to add with Eleventy and I’ve already started categorising the posts in Sanity in anticipation of adding related posts.

I’m really happy with the result. It amazes me how a powerful setup like this can be made so easily and for pretty much no cost.

www.littlemusiclist.com

Modern web development on an 8 year old Mac

2020-07-12T20:00:00Z

There’s a question that often gets asked on computer and web development forums. Is the current, cheapest Mac laptop going to be powerful enough for web development? Usually the computer in question is something like the 2019 MacBook Air.

Common questions include:

Will the base i5 processor will be fast enough or should they move up to the top spec i9?
Do they need more than 8gb of ram and a 1tb SSD?
Will the 13” Retina screen be big enough?

Whenever I see one of these questions I smile, and glance down at the computer I use to do my web development on. It’s a base 11” MacBook Air with 8gb Ram, an i5 processor and a 500gb SSD. Oh and it’s from 2012, that’s 8 years old at the time of writing. And yes, it is perfectly capable of doing the job.

Just to clarify things a little, here’s a breakdown of the sort of tasks I use it for.

Caveat: this article is Mac OS based as that’s what I use. The general principle of using an older computer for web development may apply equally well to Windows, Linux etc.

Web development

Most of my web development work for my personal sites is done in NodeJS. For this my old laptop is perfectly fine. It’s not until you start building really large sites with tens of thousands of pages that you start to need something more powerful.

I also used to build sites in both Wordpress and basic PHP, and the laptop was fine for this too.

Browsers

My web browser of choice for web development is usually either Firefox or Chrome.

Why? I just prefer the development tools that come with them compared to those in Safari. I do use Safari, just mainly for non work related browsing and for double checking websites display properly.

The only time my laptop starts to slow down is if I have multiple browsers open and am running memory intensive apps in them such as Codesandbox. This is one of those times when the 8gb of memory starts to become a problem.

IDE

I use either Sublime Text or VS Code. I do notice VS Code runs a little slower than Sublime Text at times. There’s the occasional pause every now and then, but it’s not enough to disrupt my general workflow.

Graphics

I usually deal with simple graphics such as touching up photos, resizing images, creating SVGs or creating a multi layered mockup. For this I either use the original version of Pixelmator, Affinity Photo or Affinity Designer. As I do all of this at 72dpi the 8Gb of RAM is plenty. If I was doing higher resolution photo or video work then I can imagine I would need more RAM.

I have also made a few music videos using Final Cut. This obviously wasn’t as fluid to work with as a faster machine and the render took a while to complete but it was perfectly usable and got the job done ok.

What this is not good at

So that’s a break down on what works well. Now, here’s a list of tasks that don’t work quite so well.

Very large sites involving a multi platform setup

There are a few use cases where I wouldn’t recommend using a laptop as old and as underpowered as this. One of those are when you are working on really large websites. For my day job, one of the sites I work on in development has a PHP based API backend running in Docker. This has a Redis Cache that uses several Gb of memory. On top of this I have the front end NuxtJS codebase running in development mode. This is a large site consisting of over 100,000 pages.

I also work on another large React based site that also has a PHP backend running in a Docker container.

Developing sites like these can eat away at your Macs memory so it could be slow going working with just 8Gb of ram.

For reference my work laptop is a 2019 15” i7 MacBook Pro with 32Gb of ram.

Screen size - use an external monitor

The 11” non retina screen doesn’t prove to be too much of a problem for me, but it may be for some. Sure, it isn’t as clear or as large as my work laptop. But I learned web development many years ago on an old 12” iBook which seemed ok at the time. I find I just adjust how I work to whatever screen size is in front of me.

That said, I usually plug whatever laptop I’m working on into a 32” external monitor. This is non Retina, but large enough to allow me to view my IDE on one side of the screen and a web browser on the other.

When I’m working on just the laptop screen I run each app using the full width of the smaller screen and switch between apps using command tab.

Future MacOS support

One thing to note is that Apple has followed a pattern in the last couple of years where they have dropped support for Macs over 7 years old. That means that I won’t be able to upgrade to Mac OS Big Sur when it comes out later in the year.

This affects hardware support too, so If something goes wrong with the hardware then I’ll need to take it to a 3rd party supplier to be fixed instead of Apple.

That’s not too big an issue as it will still receive security updates for a number of years to come, just something to bear in mind.

There’s a list on 9to5mac showing which Macs will run MacOS Big Sur

Summary

Modern macs are so powerful these days that even the basic model can be fine for developing simple websites. When I say modern, this may also include those from a few years ago. There’s really no need to spend thousands of pounds on the latest Mac just to code up small Wordpress or Node based websites. Save some money and get something second hand instead.

Just make sure you have at least 8Gb of ram and an SSD instead of a spinning hard drive. Retina screens are nice but you can get by without and use the money saved on a much larger external monitor instead.

7 tips for working from home

2020-05-28T21:00:00Z

It seems like more and more companies are realising that working from home can be just as, if not more productive than commuting into an office everyday.

I’ve worked from home for a few years now and have picked up a number of tips on the way. Seeing as more and more of us are now doing this, I thought I’d share some of the tips I’ve picked up over the past few years.

Ergonomics and posture
Designate a space just for work
Pomorodo technique
Keep a schedule
What music or background noise to use
Communication
Footwear

Ergonomics and posture

Chances are you’ve been given a laptop to work from and you’ve placed it straight down on a table. This is fine but after a while working like this you may find your neck and back start to ache. To achieve a better working posture with a laptop you basically have 2 options.

Raise the laptop and attach an external keyboard and mouse/trackpad.
Plug your laptop into an external monitor.
Both of the above.

Before doing anything though, I suggest checking out this website which gives you precise measurements for screen height etc based on your own height.

Desk height calculator

Done that? Good.

Raising the laptop

I use a stand to place my laptop on. You could also use a pile of books or anything else stable and the right height. You’ll also need a separate keyboard and mouse or trackpad. These could be Bluetooth or wired. The final setup should have the monitor high enough for you to look straight ahead while working with the keyboard and mouse/trackpad lower down on the table. This should help your shoulders stay nice and relaxed from your arms being at a more comfortable angle.

Use an external monitor

Most laptops have a socket that allows you to connect it to an external monitor. You may need an adaptor or a new lead depending on your laptop and monitor. Most monitors have a few different sockets on them but be aware that not all of them will allow you to view your content in the full resolution available.

Using a monitor gives you the option of using the keyboard and trackpad on the laptop. The laptop remains on the desk as before, but your head is now looking straight ahead at the monitor instead of down at the laptop screen. You can also use the laptop as a second screen.

On a Mac, you also have the option of running the laptop in what’s known as clamshell mode. This is when the laptop is running closed but connected to an external monitor, keyboard and trackpad. Again, you could splash out on a stand to place the laptop in this position, or just use the Ikea napkin holder hack.

Feel free to mix things up a little too if you can and work on the sofa or in the garden if you have one. A change of scenery can really help you stay focused and the advantage to using a laptop is you can use it to work in multiple different setups and places.

Another option is to make yourself a standing desk. There are lots of examples of this on the internet. You can buy fully adjustable standing desks that go from standing to sitting position at the flick of a switch, and adjustable monitor stands that you place on your existing desk.

Don’t worry about spending much money on this for now as it’s relatively easy to make your own temporary solution first to see how you get along with the idea.

I use a monitor arm that allows me to move the monitor easily from standing to sitting position. When I’m standing I place my keyboard and trackpad on a piece of wood which has short metal legs from IKEA attached to it.

If you work for a company it’s worth checking if they have any budget available to spend on any of this. Your HR department might also have a set protocol to go through to ensure you have a comfortable working environment.

Designate a space just for work

Try to do all of this in a designated space if possible. Even if you have to share a space and go to another part of your home for, say the afternoon, make it clear that space is yours for the period of time you’re using it.

This will help you stay focused while you’re working as you’ll find it easier to fit into work mode when you’re in your work space.

If you’re keeping a schedule then this should also help you keep to that and avoid working extra in the evenings. When your office is no longer a train ride away it can sometimes be very tempting to just work a bit extra to finish a tricky project or to just check your work email. Before you know it that five minutes has turned into an hour and most of your evening has gone.

If you can’t shut the door on your workspace then place your laptop away after you’ve finished for the day.

There’s a famous video of someone being interviewed for a BBC news programme when his children wander into the room in the middle of the interview. Another younger child joins shortly after, followed by their Mother rushing in and taking them out of the room as discretely as possible. However hard you try to avoid it, these things can happen. Don’t worry if they do. These are difficult times and most people will be understanding.

Pomodoro Technique

This is something that isn’t exclusive to working from home but can be really useful if you’re struggling to stay focused on your work.

From Wikipedia...

The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s. The technique uses a timer to break down work into intervals, traditionally 25 minutes in length, separated by short breaks.

If you are having trouble staying focused give the Pomodoro Technique a go. By working in short 20-25 minute bursts and then having a proper short break it can really help with getting focussed.

Schedule

Along with the Pomorodo technique, try to stick to a regular schedule. It doesn’t have to be 9-5, just do what works best for you and your work colleagues if you have any. You could try starting earlier and then finishing earlier, but just having some kind of routine really helps.

Music or other background noise

Having some music to work to can be really helpful but this is very much a personal thing. Some people prefer working in silence, others the radio, and others to the background hum of a coffee shop. I knew one person who even preferred working with films playing in the background. Here are a few places where you can download or stream some of these different options.

Ambient music

I’ve set up a Spotify playlist of music that I sometimes use myself. This also includes my own album of piano music called Piano Days, released under the moniker Jigsaw Goldrush, which you can also download for free here too.

Ambient working playlist on Spotify

Piano Days by Jigsaw Goldrush

Background noise

There are various different apps and websites you can use for this.

Communication

If you work with colleagues or have clients you usually speak to it’s important to keep this line of communication going when working from home. If you work for a company then they will most likely have their own system setup already, using something like Slack, Zoom, Skype etc.

Try to have regular meetings with your work colleagues, via video if possible. Also, make it clear when you’d prefer not to be disturbed as regular interruptions can affect your flow when you’re hard at work.

Footwear

You may find yourself wearing different footwear now you’re no longer in the office. No more fancy heels or brogues whilst walking around the lounge.

The typical office shoe barely resembles the shape of a natural foot, and usually provides arch support along with a raised heel. There’s plenty of evidence to show that this combination can make our feet weak and affect our overall posture.

Whilst working from home, many people may spend all day either barefoot or in much less restrictive footware. This sudden change may result in your feet starting to ache as the muscles are being made to work more without any time to adapt.

If you don’t have a medical condition that could be the cause then this change may be something to consider. It’s a bit like taking a limb out of a plaster cast and expecting to be able to use it at full strength straight away.

Maybe look at doing some foot strengthening exercises to help your feet adapt.

Engage your feet with a spot of Toega

Summary

There you go then. Hopefully you’ve found something useful here to make your working from home easier.

A simple way to lazy load embedded YouTube videos using vanilla Javascript

2019-04-17T21:00:00Z

A couple of years ago I wrote an article about how to use lazy loading on YouTube videos. It's the code I use for the videos on my Sugardrum music site and I went to reference from it myself when I needed a similar solution for the videos on this site.

Only thing is that the example is done using jQuery, but I don't use jQuery on this site. I use hardly any JavaScript at all except for the code used to toggle the main menu on mobile devices and setting up the service worker for the progressive web app version of the site. So I needed another solution. I ended up coding it up myself using vanilla JavaScript and thought I'd share it here in case anyone else found it useful.

To recap, lazy loading of videos is a technique where you replace a video on your site with a static image. This is faster for the browser to load due to its smaller file size than the video hence making the overall initial page load faster. This is especially useful when you multiple videos on a page. Clicking on the image then swaps it for the video.

The HTML

Here is the HTML for our player:

<div class="youtube-container home-youtube-container embed-responsive embed-responsive-item videoPlayer" id="vid-ijo0I2xD9gM">
  <div class="homeVideoThumbnail video-player">
    <img src="//img.youtube.com/vi/ijo0I2xD9gM/0.jpg" alt="YouTube video" />
    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" class="video-player__btn homeVideoPlayButton"
    width="96" height="96" viewBox="0 0 48 48" 
    style=" fill:#000000;"><g><path style=" fill:#FF3D00;" d="M 43.199219 33.898438 C 42.800781 36 41.101563 37.601563 39 37.898438 C 35.699219 38.398438 30.199219 39 24 39 C 17.898438 39 12.398438 38.398438 9 37.898438 C 6.898438 37.601563 5.199219 36 4.800781 33.898438 C 4.398438 31.601563 4 28.199219 4 24 C 4 19.800781 4.398438 16.398438 4.800781 14.101563 C 5.199219 12 6.898438 10.398438 9 10.101563 C 12.300781 9.601563 17.800781 9 24 9 C 30.199219 9 35.601563 9.601563 39 10.101563 C 41.101563 10.398438 42.800781 12 43.199219 14.101563 C 43.601563 16.398438 44.101563 19.800781 44.101563 24 C 44 28.199219 43.601563 31.601563 43.199219 33.898438 Z "></path><path style=" fill:#FFFFFF;" d="M 20 31 L 20 17 L 32 24 Z "></path></g></svg>
  </div>  
</div>

The first div is container with some classes that set the styling. This also has an id containing the id of the video which is used by the Javascript . Then there is another div and inside this is an image. For every video on their site, Youtube generates a set of 4 thumbnails - 1 large and 3 small. These are named with the numbers 0 to 3 with 0 being the largest and the other smaller thumbnails featuring different scenes from the video.

Every video also has an id which yo can obtain from the url in your browser when you are watching it. i.e.

https://www.youtube.com/watch?v=ijo0I2xD9gM

In this case the id is:

ijo0I2xD9gM

We pass this id via the id of the container in the html, with the prefix vid- added to it.

Then we have a SVG icon. In my previous article I used a Fontawesome. This is still perfectly ok if you prefer but if you don’t already use Fontawesome, or have no need to use any of its other icons on your site then the SVG is, in my opinion the best option. This particular icon is the same as the play button on Youtube videos and is positioned on top of and in the centre of the photo using the CSS code.

The CSS

Here is the CSS used to style the youtube image before the video is loaded:

.embed-responsive {
  display: block;
  margin-bottom: 12px;
  padding: 0;  
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  border: 0;
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  
}
.embed-responsive-16by9 {
  height: 0;
  padding-bottom: 56.25%;  
}
.video-player {
  max-width: 640px;
  position: relative;
}
.video-player__btn {
  color: #fff; 
  font-size: 72px; 
  left: 50%; 
  margin: -33px 0 0 -44px; 
  position: absolute; 
  text-shadow: 0 1px 1px #4ab4d7; 
  top: 50%;}

There isn’t much going on here except for the some styling to make sure the iFrame remains responsive, a max-width setting on the container so the image doesn’t become larger than its default size and positioning the play button over the top and in the centre of the video image.

You could also position the play button using flex box but this would involve changing the video image so it’s a background on the container div the play button is in. I may change this in the future when I have time.

The Javascript

Here’s the Javascript. Remember, this is just Vanilla Javascript which means there’s no need to load in jQuery, or any other dependancies.

const v = document.getElementsByClassName('videoPlayer');
    function updateVideo() {                
        const id = this.id.replace('vid-','');
        this.classList.add("embed-responsive-16by9"); // adds responsive styling to the video iframe via a css class
        this.innerHTML = 
            '<iframe src="//www.youtube.com/embed/' 
            + id 
            + '?autoplay=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>';
        }           
        for (i = 0; i < v.length; i++) {
            v[i].addEventListener("click", updateVideo);
        }

First we define a constant, v that get’s all the elements containing the classname videoPlayer. This allows us to have multiple videos on the same page. Note that I use camelCase for the class name keeping line with my recommendtions on a previous blog post about using this for CSS classnames associated with Javascript - Some CSS style naming and layout tips.

Then there’s a function that is run when the user clicks on the video image. This does the following:

We get the id of each of these elements and create a new const called id with the vid- part removed. The reason I added the vid- in the first place was that ids and classnames in CSS cannot begin with a number and there’s no guarantee the id of our video won’t begin with one.

Then we replace the content of this element with the code for the video player. This is the standard iframe code usually used for embedding YouTube videos. To this we add the id of the video to the src of the iframe. I’ve set the width and height to common values but feel free to change these if you wish them to be different. Remember the CSS code makes sure the initial image of the video fits on devices with smaller screens such as mobile phones . It also makes sure it never becomes larger than 640px across. Feel free to change this if you wish the initial image to be larger, but be sure to test this to make sure the image is large enough for the chosen maximum size.

Finally we add a click event to all of the elements we found at the start of the code with the classname videoPlayer which runs the function and all the code explained above when the user clicks on the relevant element.

Bonus tips: how I use this with Jekyll

I use a Static Site Generator (SSG) called Jekyll to generate the code on this site. Here’s how I set up the lazy loading for Jekyll.

I created an include file called youtube-static-image.html for the html. In here I replaced the video id in both places where it is used with a variable that is passed in, i.e.

<div class="youtube-container home-youtube-container embed-responsive embed-responsive-16by9 embed-responsive-item videoPlayer" id="vid-{{ include.youtubeId }}">

In my blog post I then include this file using the following code:

{% include youtube-static-image.html youtubeId="zSIDRHUWlVo" %}

Where the value for youtubeId is the id of the chosen youtube video.

I also pass in a variable in the YAML front matter of the post indicating that it has videos .

useVideo: true

As I use hardly any Javascript on this site I simply load it inline towards the bottom of the html. In my default layout file I added an if statement to only load the youtube lazy loading Javascript code if the useVideo variable is present.

{% if page.useVideo == true %}
< javascript code goes here >
{% endif %}

Demo

You can see an example of this code below and on my recent blog post about running technique - A simple guide to good running form.

If you like the music in the video below feel free to download the album and share it using the links on my Sugardrum website.

Bubble Clouds by Sugardrum. From the album Postcards, available to stream from Apple Music, Spotify and download/buy from Bandcamp

A simple guide to good running form

2019-01-08T21:00:00Z

I started running just around the time I turned 40. I can't remember the exact day or how far I went but I remember running around the local park for 10mins thinking to myself how this was the furthest I had run for over twenty years.

I soon became hooked and started running regularly a couple of times per week. Then I did some research on running technique.

I read loads about different ways of landing on your feet - forefoot was supposed to be best. I was a bit confused as to exactly what this meant so the next day I ran purely on my toes. Mmm, big mistake. The next day my calves felt like they had sharp pointy things in them and I could hardly walk for several days from the pain.

It was a valuable lesson as I realised you were supposed to allow the heel to drop down as your foot landed. This was what I had been doing naturally before I started messing around with the running on my toes thing so I just went back to that - much happier calves!

One thing I remember when I first started was people telling me to be careful with my knees. In fact people still say it to me, the line usually being ”oh I tried running for a while but it was too hard on my knees. You should be careful the same thing doesn’t happen to you.“

Other injury warnings followed until I had a list of areas of the body that I would inevitably damage at some point if I carried on; knees, shins, hamstring, calves and fallen off toenails. In fact before I started running I was a little scared of it due to the litany of injuries various people kept telling me to expect to end up with.

Fortunately, I didn’t listen to these horror stories and ran anyway, and those injuries never happened. I also discovered a love for running that I never realised I had before and that it was something I was fairly good at it.

Along the way, I’ve done a fair amount of reading on running technique, spoken to various different professionals on the subject and realised why so many people get these particular injuries when they start running, and why I never have.

Below is a summary of what I have learnt. I believe there are a few basic things most people can do to improve their running style if they wish/need to.

Do with this info as you will. If you’re happy with your current technique and never get injured or aren’t fussed about a possible way to run faster then feel free to ignore it and carry on as you are.

I’m not a doctor or a physiotherapist. These are just tips I have picked up from lots of reading, my personal experiences as a runner and taking advice from professional running coaches (links to these at the bottom of this article).

Whatever you do, make any changes slowly. Listen to your body, as making changes to your technique can take time for your body to adjust. You may need to drastically reduce your mileage and running intensity to allow for this. If you notice any unusual aches or pains then stop running and seek medical advice.

A summary of running technique tips

Here’s a quick summary of the key points, followed by further detail about each one.

Don’t over stride
Take lighter smaller steps with a higher cadence
Practise deep squats to improve your technique
Run tall
Relax your hands and arms

Don’t over stride

Painful knees is most likely a sign of overstriding (reaching out your leg too far in front of you), landing on your heels and running with a slow cadence or steps per min. This creates a braking effect, sending a shockwave up through your leg and hence hurting joints like the knees.
It’s better to try to take shorter strides, landing on the front or mid part of your foot with your heel coming down straight after (don’t just run on your toes as your calves won’t be too happy).
Try to land with your foot beneath you so your centre of gravity is beneath you too and take more steps per min. That way you have more spring in your step and reuse the energy to move yourself rather than hurting your joints. This leads onto my next tip...

Take lighter smaller steps with a higher cadence

Imagine a boxer jumping up and down in the ring or training with a skipping rope. The faster they bounce up and down the more spring they have and the easier it becomes.

Try jumping up and down barefoot, first at a slow plodding pace and then a faster one i.e. about 180 jumps per min or 3 per sec - you should find the latter much less tiring. This number is what I mean by cadence.

You could use a metronome to mark out the beats for you or just try counting 3 steps every second. It also helps counting in threes as you may find yourself landing at first with slightly more emphasis on the first beat and counting in threes avoids this happening on the same foot each time.

If you’re used to running at a much slower cadence than 180 then increase it slowly, a little at a time.

Practise a deep barefoot squat

Children are the best example of how to run - nearly all will run with a short stride, landing on their mid foot and with a high cadence.

Another thing that most toddlers are experts at doing is a deep squat. Most adults in Western society do this balancing on our toes with our heels in the air and our feet pointed outwards. But if you look at how most young children do this it’s with their feet flat on the ground and straight.

The deep squat is a natural resting stance in various cultures around the world. This is mainly due to them having less muscle imbalances from sitting down all day or wearing shoes with an elevated heel.

It's also a really good exercise to work on the muscles and ligaments you need to run efficiently.

Try practise holding a deep squat for a minute each day or at various times throughout the day when you would usually kneel down. Do this with your heels in the ground, not balancing on your toes. See the links below for more info on this.
If you find it difficult to do this at first then try doing something called the assisted squat. This is the same but holding onto something as you move down, e.g. a door frame or table leg.
If you can, do this without your shoes on.
Here are a couple of good articles on this. Daily Exercise Tutorials | Vivobarefoot and Foot Function and Squatting — Functional Foot Map by Lee Saxby

Run tall

Too many people look down at their feet when running. This can affect your posture, causing your head to drop forward and your back to become arched.

Try keeping your head more upright but relaxed. A good way to do this is to imagine a vertical cord coming out of the top of your head. Whilst doing this aim to look straight ahead but keep glancing down to the ground a few feet ahead of you for possible obstacles.

Relax your hands and arms

Try not to clench your fists whilst you run. Keep you fingers relaxed instead and your arms at a roughly 90 angle but relaxed down from your shoulders. Be aware of any tension in your neck and shoulders and allow your shoulders to relax downwards if you notice them tensing up.

Take it slowly at first

One word of warning regarding the points I’ve mentioned. Your body may need time to adjust to a new style of running so take it slowly. If you start feeling pain in your feet or calves etc then stop running and try again when you feel better.

This may mean drastically cutting down your mileage until your body has adapted to the change in running style. Maybe intersperse running with walking to help this.

Changing running technique means your body will be using different muscles which may not be used to the extra work being put on them. Doing too much too soon is a sure way to become injured so listen to your body.

If possible, try barefoot running once a week for part of a training run. Find a park with a smooth tarmac path and run on it for a while with no shoes or socks on.

Your bare feet will usually start to hurt before you get the chance to injure yourself elsewhere from overtraining.

This is a great way to notice possible problems with your technique. If you still try things like over striding, landing on your heels, or sliding your foot forwards as you land then your bare feet will soon let you know about it.

Many people suggest barefoot running on grass but unless the grass is very short and the ground nice and even then you run the risk of stepping on a small stone, down a hole or onto dog poo.

Example videos

Here are a couple of videos that help demonstrate some of the points I’ve mentioned.

A short video by Champions Everywhere about simple methods to improve your technique.

A much longer video from The Natural Running Center, but one of the best and most comprehensive on showing you how to improve your running style.

Everybody’s body is slightly different so If you want advice specific to you here are a couple of places you can go to.

Vivobarefoot - Walking Barefoot & Natural Running Transition & Courses

Stride UK Running rehab, performance and 3D analysis.

I have no affiliation with either of them, just a happy customer of both.

That’s a general summary of things. In part two I plan do go into more detail about footwear. Until then, happy running!

References

Short Story collection free all this week

2018-04-02T21:00:00Z

My book of short stories, For You I Hide This, is available for free all this week from the Amazon Kindle store.

Go download it now while it's free.

Here's a preview:

For you I hide This

A fascinating collection of twelve short stories drawn from Nigel’s experiences and imagination. A magical trail under the stairs offers a glimpse into a future self, the hidden words written on postcards on a wall, a cat who tries to break free from its natural instinct to eat everything that moves, the joy of taking the day off to play in a snow covered landscape and the heartfelt tale of living with dementia. Each story is based on a song from Nigel's debut album Postcards performing as indie folk artist Sugardrum.

New Sugardrum live video

2017-10-15T12:28:00Z

I have a new live video over on my Sugardrum music website, and a little story behind the making of it.

Social media for musicians

2017-07-19T20:30:00Z

There are a fair number of guides on the web, listing what the author thinks are the best social media websites for musicians to use. Most of them pick the usual popular big two of Facebook and Twitter, ignoring some of the slightly lesser known sites.

This guide is slightly different in that I list the websites and services I have used as a musician over the past 19 years with the added knowledge that comes from being a web developer. I was inspired to write it after a friend of mine posted a request on Facebook for suggestions on sites to sell their music via iTunes, Spotify etc. None of the suggestions matched what I currently use which made me wonder if some of the other sites I use were that well known by other musicians too.

Most of what follows is in the end down to personal preference. One website that works well for one person might not be so useful to the next, so choose what you think will work best for you. If it doesn't work then try something else - as musicians we're a bit spoilt for choice.

The ones to try

Here is my list of the social websites I currently use to promote my music.

Bandcamp
Buffer
Facebook
IFTTT
Music Brainz
Routenote
Songkick
Soundcloud
Twitter
YouTube

and that's it. That's still a fairly long list, but wait until you see the ones that I've tried over the years and no longer use.

14 tracks
Amazing tunes
Bandwagon gigs
Beat100
Coverium
Eventim
Exposed vocals
Flickr
Gigs and tours
Instagram
Last.fm
LinkedIn
Music X-ray
Music clout
MySpace
Ourstage
Peoplesound
Ping
Reverbnation
Reviewshine
Songkick
Sonicbids
The sixty one
Vimeo

Some of these are now defunct, others I'm still a member of but no longer actively use as I found them not worth my time doing so.

Rather than go into why the above do not work for me I'll list the reasons why I use the websites I do use.

All of these should hopefully save you time setting up and maintaining your online presence so you can spend more time being a musician.

Bandcamp

When I first created a website for Sugardrum the only way to add music to your website was to create and upload the mp3s yourself, then add some code such as a Flash based music player so people could listen to them. Before doing this the mp3s had to have their ID3 tags and file names set correctly. You also had to attempt to hide the actual location of the mp3s in case someone tried to bypass the online player and download the tracks for free.

On top of this if you wanted to sell your music on your site you either added some PayPal buttons or setup your own shopping cart software. I tried both of these and even created my own shopping cart software which was used on a couple of other sites for a while.

Nowadays I don't bother with any of this as I just use Bandcamp.

This is a great way to sell your music online. They have HTML5 players that you can easily style and embed onto your own website. You also get your own set of pages on their site where you can market and sell your music. These pages can be styled with images and colours to match your own branding. Once you've setup a new album or EP and uploaded the tracks in WAV format they take care of all the file conversion into other formats for you and the tracks have the correct ID3 information added based on the album you add them to.

Users are given the option of downloading in MP3, Ogg and WAV formats and they even give you the option to sell CDs or other physical merchandise on their site too. They send you an email when a purchase has been made which, if it's a physical item, you post yourself.

Here's an example of one the simplest of their music player layouts:

Postcards by Sugardrum

Soundcloud

You've setup your tracks in Bandcamp and have them grouped together by the albums they belong to. But what if you want to upload a track to your website that isn't in an album? Maybe it's a new demo version or a live recording and you want to send someone a link to this file where they can listen to it online. This is where Soundcloud is really useful.

Many people may only be aware of a Soundcloud as a streaming service similar to Spotify or Apple Music. What sets Soundcloud apart is it's used extensively by musicians, blogs and radio stations as a way to both promote and share music.

I used to use their widgets on my own site before I decided it made more sense to just use the Bandcamp embedded player. I still upload tracks there though as it's such a great tool for sharing. I can create private playlists with demos or unreleased tracks and send people the URL to download or listen to them online.

It can also be used to submit tracks to competitions, record labels or radio stations via an inbox facility that you upload one of your tracks on Soundcloud to. I've had great results from this, uploading tracks to the Freshonthenet Soundcloud page run by Tom Robinson's BBC 6music show.

Soundcloud have a free and a pro plan, the latter giving you more recording time and playlists for a small annual fee. Despite the recents cuts they've made to their workforce and the rumours of an imminent buyout I still think it's worth creating an artist account if you haven't already and taking a look at what they have to offer.

IFTTT

The best kind of websites are those that update themselves using data from other sites. I use the If This Then That (IFTTT) service to link my Instagram and Twitter accounts together. Now, whenever I post a picture to Instagram a tweet of the photo is automatically created in my Twitter account. You can do so much more with IFTTT, linking thousands of different services together and all for free.

Buffer

I use Buffer to write posts for Twitter, Facebook or Google Plus when I think of them in advance. These are then scheduled to go live at the best time possible.

This is my only point of contact with Google plus; I just set up the posts via Buffer and check their stats to see how they are performing.

Facebook

Just as hardly any non musicians use MySpace, the opposite can be said about Facebook. It can be a great promotional tool for gigs, videos and new releases. I usually post a short summary of any blog posts on there to direct people to my website and have also paid to promote a few posts using Facebook ads.

One of my more successful promotions was a live video I made of my acoustic cover of The Smiths song, There is a light and it never goes out. Using targeted ads I was able to get this seen by thousands of Smiths fans and received some lovely feedback as a result. I've found that posting videos directly to Facebook creates more user engagement than a link to a video on YouTube or Vimeo.

The one annoying thing about Facebook is that when you set up an event for one of your gigs, you cannot then go and invite all the people who have liked your page unless you are friends with them. I know, it's odd. It's as if they went to loads of trouble allowing us to setup artist pages, but then refused to also adapt this feature to work better with them. As I don't really use Facebook in my personal life I just don't bother using the event pages for my gigs anymore, unless it's something the venue has set up already.

Musicbrainz

This is used by the BBC to supply your profile page with the data it needs. Musicbrainz isn't the most stylish or easy to use website there is but it does the job it was meant to do and you need to have a profile on there if you have an artist page on the BBC website and wish it to have all the relevant information.

Routenote

The reason why I haven't included iTunes, Spotify etc is that this UK website allows you to upload your releases to these and a load of other online shops and streaming services. They have two pricing tiers - I find the no fee option where they instead take a 15% cut off your sales suffices for my needs. If I sold more online then I'd look into changing to the premium package where you get 100% of your sales for a small fixed monthly fee.

YouTube

More people are listening to music on YouTube than ever before. I usually upload my music videos to both YouTube and Vimeo but have had more success promoting them on YouTube. Recording live videos of unique cover versions and uploading them to YouTube can be a great promotional tool. My Smiths cover mentioned earlier has become one of the top 3 most listened to acoustic covers of the song on there.

You can add keywords and create playlists grouping videos together. They also provide a simple widget to display them on your own site with options to further refine the load times using Lazy Loading .

Songkick

It used to take me ages having to enter gigs onto MySpace, then copying them over to Facebook, Peoplesound and a number of other sites which all had their own gigs implementation. Now I just post them onto Songkick via their Tour Box subsite and the data is then used by a number of other websites. It's become the one stop place on the web to enter your gig dates.

You just create an artist account, then go ahead and enter any gigs you are doing. They have a large database of venues which means you don't have enter that data again yourself.

You can also share the gig details you've just entered on your own site, either with a widget or as text using their API.

Summary

As musicians we're often encouraged to join every new music related website. Each one promises to help us get that big break or to reach out to our fans. But the reality is, it's best to focus your time on just a handful of sites, otherwise you end up doing nothing else but managing your web presence. If your current social media usage has left your efforts to promote your music feel like they've been spread too thinly, then hopefully this guide may help you decide which ones to no longer use.

A simple way to lazy load embedded Youtube videos

2017-06-06T20:55:00Z

Like most musicians I use embedded YouTube videos on my website. They look great, but can really slow the page down. This is especially true if you have more than one of them and is due to the browser having to download extra content from another server. Not only can this affect the experience for the user but it could also have an affect on your page ranking on Google.

Fortunately, you can get around this by replacing the video iframe with a static image of the video. The video itself is then loaded in when the user clicks on the image. You can make it look even more userfriendly by adding a play icon over the top of the static image.

This is called Lazy Loading and you can see an example of this on my Sugardrum website. I use this on both the home and on the videos pages, the latter of which uses some additional code to have just the one placement for multiple embedded videos. This is then refreshed depending on which video thumbnail you click on. I'll show how that is done in another blog post, for now here's how you do the lazy loading featured on the home page.

The HTML

Here is the HTML for our player:

<section class="videos-section">
  <div class="col-cont">
    <div class="youtube-container home-youtube-container embed-responsive embed-responsive-16by9 embed-responsive-item" id="videoPlayer">
      <div class="homeVideoThumbnail home-videoplayer" id="vid-4pM6WphmRhQ"><img src="//img.youtube.com/vi/4pM6WphmRhQ/0.jpg" /></div>
      <i class="fa fa-youtube-play homeVideoPlayButton"></i>  
    </div>
    <p class="col-xs-12">Postcard (Official Video) by Sugardrum</p>
  </div>
</section>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

First there is a div with some classes on it which set up the styling. Inside this is another div with two classes; one called home-videplayer which does some additional styling and another called homeVideoThumbnail which is used by the jQuery. This matches with the naming conventions I recommended in my blog post about CSS styling tips, where I suggest using camelCase names just for classes used by jQuery.

Then there is an image. The url for this is a link to the image Youtube uses for it's own thumbnails for your video. There are 4 featured images available for each video. To get the image for your video just add your Youtube ID to the url and the number of the thumbnail from 0 - 3 at the end, i.e.

https://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg

So in my example I've added the ID of the video, which is 4pM6WphmRhQ and selected the first thumbnail which is named 0.

You may have noticed that this div also has an id with the video id as part of it. This is used by the jQuery to add the correct YouTube ID into the URL for the iframe.

Finally, there is an i tag. This is a Fontawesome video player play icon that is positioned over the top of the image to make it look more like a video. I've included the link and script tags to load in Fontawesome and jQuery but you should check the Fontawesome website for the latest version, which at the time of writing this (January 2019) is version 5.6.3.

The CSS

Here is the CSS used to style this:

.col-cont {margin: 0 auto; max-width: 640px;}
.home-youtube-container {cursor: pointer;  position: relative;}  
.home-youtube-container img {max-height: 360px; max-width: 640px; width: 100%;}
.home-youtube-container i {color: #fff; font-size: 72px; left: 50%; margin: -33px 0 0 -31px; position: absolute; text-shadow: 0 0 8px rgba(0, 0, 0, .5); top: 50%;}
.embed-responsive {height: 0;}
.embed-responsive-16by9 {padding-bottom: 56.25%;}
.embed-responsive iframe {border: 0; bottom: 0; height: 100%; position: absolute; left: 0; top: 0; width: 100%;}

and a media query for slightly larger screens:

@media only screen and (min-width: 481px) {
	.home-youtube-container img {max-height: 360px; max-width: 640px;}
}

This adds a cursor to the container and gives it a relative position so we can position the play icon in the middle. It also sets the width of the image inside the container, which is the video thumbnail, to 100% but with a maximum setting for both height and width. The height is set to auto by default so there's no need to set this in our CSS. The code inside the media query increases the maximum settings for height and width for the slightly larger screen. This is the largest our video will be but you could set this to be larger if you wanted to and if your video was a high enough resolution.

The other classes are part of the Bootstrap responsive embed code which I won't go to here as they aren't required for the lazy loading of the video but they help keep the image and video looking right at different screen sizes.

The jQuery

Then we have the jQuery.

$(document).ready(function($) {
  $('.homeVideoThumbnail').click(function(){
    var id = $(this).attr('id').replace('vid-', '');
    var title = $(this).children("span").html();
    var descrip = $(this).children("em").html();                       
    var vid = '<iframe src="//www.youtube.com/embed/' + id + '?autoplay=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>';            
    if (typeof title != 'undefined') {
        var vid = vid + '<p>' + title + ' &mdash; <em>' + descrip + '</p>';
    }
    $('#videoPlayer').html(vid);    
  });
  $('.homeVideoPlayButton').click(function(){
      $('.homeVideoThumbnail').click();
  });  
});

A click event is added to the div with the class name .homeVideoThumbnail. Then we set some variables.

id is the YouTube video ID and is obtained from the ID of the container div we clicked on with the the vid- part removed. This was added as CSS class names cannot start with a number and Youtube Video IDs usually start with one.
title is the name of the video and is taken from the span that follows this div
The description for the video is also taken from a child element, this time em.
Then we have the html that is inserted into our HTML page. This consists of the standard iframe code that Youtube supplies for embedding videos with our video ID.
Below this we display the title and description of the video if we have one.
The following code then replaces the contents of the container with the id videoPlayer with our iframe html.

$('#videoPlayer').html(vid);

Making the play icon work

There's one last step. At the moment clicking on the play icon won't actually do anything as our click event is linked to its parent div with the class homeVideoThumbnail. As the play icon is positioned absolutely above this it obscures the div and so clicking on it does nothing. To fix this we need to add one more piece of jQuery code.

$('.homeVideoPlayButton').click(function(){
    $('.homeVideoThumbnail').click();
});

This creates a click event on the parent div when a click is made on the play button.

And that's it. Some fairly simple jQuery code to lazy load your Embedded Youtube videos.

Demo

See the Sugardrum homepage for an example of this in action.

Updated January 2019 with new Fontawesome link tag for their CDN.

Photo: Early Morning Running Is Usually The Prettiest

2016-12-14T04:36:00Z

I was fortunate to go for a run early enough yesterday morning to catch the view below with the mist still hanging over the lake and grass. It was a beautiful sight.

I also nearly got a photo of the geese flying low across the lake but they were a little too quick for me - next time.

A photo posted by Sugardrum (@sugardrum) on Dec 13, 2016 at 1:02am PST

Moving From Wordpress To Jekyll

2016-12-09T23:17:00Z

Wow, it's been exactly a year since I last updated this website. Much has happened since then, including changing how this site is created. It used to be powered by Wordpress but now I'm using a static website generator called Jekyll.

Advantages of moving from Wordpress to Jekyll

No more plugin and security updates to worry about.
No more security plugins to maintain.
No more faffing around keeping a local copy of the database as a backup and to use for development, as there is no database.
Whilst on the subject of databases no more having to search and replace hard coded links in the database export to be used locally, i.e. Wordpress saves links as https://www.nigelbunner.co.uk/link.html instead of /link.html which makes it a pain when you need to change the first part to be used in a local dev environment such as www.nigelbunner-dev.co.uk
Jekyll generates static HTML files from the templates I setup so the site loads much, much faster.
I can now host it on Amazon S3 or Github Pages which are both faster and much cheaper.
Everything is stored in a Github repository which means I now have version control. This makes it easier to roll back any edits if I need to and keep a track of updates.
Did I mention it loads way faster? :)

Disadvantages

And the disadvantages? Well there is no CMS as such - all the post and pages are created using a text editor in the form of Markdown or HTML templates, which are then used by Jekyll to generate the static HTML pages. I can, however create and edit the content via the Github Pages admin and I'm going to investgate using a simple online CMS called Prose written especially for Jekyll.

Third times a charm

This is the 3rd site I've converted to Jekyll and I can feel myself becoming more confident now I've done so a couple of times already. The 1st site was my music website at https://www.sugardrum.com which I did earlier in the year. The 2nd was a little website I created way back in 2008 - https://www.amnestyfreedomfestival.org. This was for a festival I helped to organise and took part in. It's so old that pretty much nobody ever looks at it any more, so was the perfect site to experiment on without causing too much disruption. It also was only 4 pages in size and was put together using PHP templates, so was also pretty simple to move to Jekyll.

Replacing Bones with Twitter Bootstrap

When this site was on Wordpress I used a fantastic starter theme called Bones as a starter to build the rest of the design on. This was great as it improved upon the basic Wordpress install by removing some of the bloat, adding its own grid system for CSS layout, setingup some nice typography defaults to work with and creating a set of useful break points to make your design Adaptive. I used the same theme as a starter for my Sugardrum website and just left the CSS and JavaScript as is when I copied it over to use Jekyll. For this site however, I decided to spend the time removing the existing CSS and startfrom scratch. There was a fair amount of code in the Bones style sheets I knew I'd never need, such as styling for Wordpress comments. This all ended up taking less time than I thought as I used Bootstrap instead, changed the layout to use the Bootstrap grid, nav and pagination and then created a new style sheet with the few bits of code required for the rest of the old design. The end result was much cleaner and smaller CSS code.

Some useful links

If you're thinking of using Jekyll for a website yourself, here are links to some of the sites I used to help me:

Photo: a heron in a tree again

2015-12-09T18:26:28Z

Same bird as yesterday, this time giving his/her wings a lovely stretch.

A photo posted by Sugardrum (@sugardrum) on Dec 9, 2015 at 1:52am PST

I saw the same bird in the tree as yesterday on my morning running today. This time he/she was giving their wings a lovely stretch so I had to take a photo. I think the bird is enjoying posing for photos 🙂

I thought the photo would make nice background to my website so I updated it to use it.

Some CSS style naming and layout tips

2015-12-09T18:11:58Z

After doing CSS development work for a number of years there’s a few little tips that I’ve picked up that I thought it might be helpful to pass on.

List the styles alphabetically

I saw this tip listed on another website a few years ago and have been doing this myself ever since. It makes it so much easier to quickly scan across and see which styles you have used. Here’s an example of what I mean:

.container {color: #fff; background: red; padding: 5px; margin: 1.5em 0;}

becomes

.container {background: red; color: #fff; margin: 1.5em 0; padding: 5px;}

Use a different naming convention for class names used by JavaScript and keep them exclusive

I learnt this after working on larger websites and changing a class name in the HTML only to find this broke the JavaScript. It’s sometimes tricky to know if changing a class name would do this.

Using a different naming convention for classnames that are going to be used by the Javascript helps avoids this confusion. Here’s what I mean:

for CSS only use:

.btn-top or .btn_top

leaving the following just for JavaScript only:

.btnTop

Doing this means you always know if a class name in the HTML is used by the CSS or the JavaScript. The same holds true for ID’s too although I try not to use them at all if possible.

Which brings me on to my final tip…

Use a hyphen instead of an underscore in between words in class names and IDs

This becomes really useful when you use the keyboard to navigate around your code; the cursor always stops at a – which makes it so much easier if you want to change one of the words in the middle of a class and or ID. Using a _ instead would means the cursor keys take you to the end of the class name as it just treats _ the same as a letter.

Photo: a heron doing his thing on a tall tree

2015-12-08T08:14:47Z

Mr Heron in the park this morning

A photo posted by Sugardrum (@sugardrum) on Dec 8, 2015 at 1:57am PST

I saw a heron doing his or her thing on a very tall tree whilst running in the park today and had to stop to take a photo.

Photo: new guitar strings

2015-11-12T08:19:01Z

Shiny new strings ready for recording next week! #nofilter

A photo posted by Sugardrum (@sugardrum) on Nov 12, 2015 at 10:16am PST

I forget how nice my guitar can sound when I haven’t changed the strings for a while.

Photo: autumn is here

2015-11-01T08:23:32Z

Autumn is here! #nofilter

A photo posted by Sugardrum (@sugardrum) on Nov 1, 2015 at 5:31am PST

The autumn leaves are falling from the trees…

Photo: Wupadupa gig at grey horse

2014-10-15T00:20:52Z

Wupadupa gig at grey horse

A photo posted by Sugardrum (@sugardrum) on Oct 21, 2013 at 3:53am PDT

Fixing race numbers without using pins

2014-03-25T10:19:53Z

I’ve taken part in a couple of races recently and didn’t want to risk making holes in my top by fixing my race number to it with safety pins.

Fortunately, I had a Spi-Belt that I was going to wear anyway so I folded the number over, stuck the 2 ends together and looped the belt through it. Most race numbers have a bit of excess paper at the top and the bottom which is perfect for doing this whilst still leaving the number visible.

Here are some photos below to show what I mean…

Fixing a race number using tape and a Spi belt.

You can see how the number is still clearly visible from this photo, and no holes in my running top…

Thursday photo – a misty morning in the park

2014-01-23T20:26:00Z

Here’s a photo from my morning run the other day on a particularly misty morning…

Using a microphone stand as a bike stand

2013-10-18T11:11:55Z

Bike stands are great when you need to do some maintenance work on your bicycle. If you can’t afford to buy one though and happen to have a spare microphone stand lying around then give this a go.

Using an old belt, rope or fabric tie it in a loop around the top tube of the bike.

Set your mic stand to the required height.

Lift the loop up so it rests on the top of the stand. If it’s not high enough then simply take it off and raise the mic stand up a bit more before lifting the loop back onto the stand again. You could also tie the end of the belt around the top of the stand to keep it extra secure.

As you can see in the next photo it allows you to raise the back wheel up by a considerable height and you can also turn the pedals as they have room to travel to the side of the stand.