Blake Simpson

Fix locked OS X volume controls

Sunday 12th of July 2015

If your Mac audio controls are locked (greyed out in the control menu and the keyboard buttons don't work), you can open up the Terminal application and run the following command:

sudo killall coreaudiod

You will be prompted for your password and then your audio controls will restart, brining them back to life.

Read More Comments

Prevent the Cordova web view from bouncing

Sunday 7th of June 2015

When building an iOS project with Cordova the setting that allows web views to bounce will be turned on by default, resulting in an effect while scrolling that can look ugly, like so:

My FIlm List web view bounce

Since Cordova versions 1.5+ the cordova.plist file has been replaced with the config.xml that you find in the root directory of your Cordova project. This is where you set the configuration property to inform iOS to disable web view bouncing.

Instead of editing a plist file in XCode, instead we will add the configuration to the /your-project/config.xml file. Open this file with a text editor and add the line to the end of the <widget> block, before the final </widget>.

<preference name="DisallowOverscroll" value="true" />

Now rebuild the iOS application from the terminal.

cordova build ios

When you next run the application in XCode on a simulator or device, the bouncing problem will be solved.

Read More Comments

Sorting a German date format in Tablesorter.js

Friday 15th of May 2015

The German date format is 01.05.2015 as opposed to the UK date format 01/05/2015 which Tablesorter.js comes prebuilt to parse.

To sort by a German date, you have to add a custom parser. Here is one that will work for a date with the German dot notation.

  id: 'dotDate',
  is: function (content) {
    return /\d{1,2}\.\d{1,2}\.\d{1,4}/.test(content);
  format: function (content) {
    content = content.replace(/\-/|:|\.|\//g,' ').split(' ');
    return $.tablesorter.formatFloat(new Date(content[2], content[1]-1, content[0]).getTime());
  type: 'numeric'

Simply add this parser and then tell your tablesorter initializer function which column the German date is in.

  headers: {
    0: { sorter: 'dotDate' }

If your date only has 2 numbers for the year instead of 4, you can adjust the is method to use the regex /\d{1,2}\.\d{1,2}\.\d{1,2}/.

Read More Comments

Customise the Atom fuzzy finder width using custom styles

Friday 8th of May 2015

I find for my projects that the fuzzy finder overlay dialog in the Atom editor is a little short for my liking. I often have long path names with the same file name so I and can't see the full path, therefore I am not sure which file I am choosing.

Atom fuzzy finder original size

The easiest way to do this is to use your custom stylesheet to alter the fuzzy finder interface. Open your Atom stylesheet via the menu options Atom -> Open Your Stylehseet.

Next paste in the following CSS code. Save the file and the Atom styles will automatically reload.

.modal.overlay {
  width: 800px;
  margin-left: -400px;

.fuzzy-finder {
  width: 784px;

Open the finder again and now it looks much better!

Atom fuzzy finder after width customisation

Of course you may want to customise the widths of the modal to fit your workspace better.

Read More Comments

Getting started with the Atom Editor (and tips for switching from Vim)

Wednesday 29th of April 2015

Atom Logo

Today I started working with the awesome Atom Editor instead of my usual tool MacVim.

Atom is open source and free, produced by the people at GitHub. To introduce Atom, what can I say that they can't say for themselves?

Atom is a desktop application based on web technologies. Like other desktop apps, it has its own icon in the dock, native menus and dialogs, and full access to the file system.

Open the dev tools, however, and Atom's web-based core shines through. Whether you're tweaking the look of Atom's interface with CSS or adding major features with HTML and JavaScript, it's never been easier to take control of your editor.

So basically Atom is a code editor built on top of a browser. Meaning, as a web developer you already have all the skills needed to extend the code base, or write a custom Atom package (plugin). Due to Atom being based on a browser engine (Blink) you even have the usual Chrome developer tools available to you!

Atom Editor preview showing Dev Tools

Why Change?

The main reasons I am trying out a new editor are:

  • Ease of use - Vim is powerful but can be painful too
  • Packages - Atom is easy to extend and has a large community, no Pathogen or Vundler required
  • Customisation - I'm a web developer, making packages easy to write
  • Teamwork - Many colleagues don't know Vim, or at least everyone has different key bindings
  • Look and feel - Atom is beautiful

Some Tips for Beginners

Key Combinations

Arguably the most attractive feature of Vim is the powerful key combinations + motions. For example, in Vim you can type 10dd to delete the next 10 lines. Atom does not have this built in, although there is of course a package for that, many of the more common combinations are available by default. A few useful ones that helped me switch are:

Read More Comments

Cordova plugins not working on iOS? Fix the Target Membership

Monday 27th of April 2015

If you have installed a Cordova plugin and it is not working on iOS, for example the expected JavaScript object for the plugin simply doesn't exist. But you have tested and find that the functionality is working fine on Android, this is usually a symptom of an error in the iOS plugin class target membership.

For example this can often happen with the Cordova SplashScreen plugin. See the screenshot below and ensure that the .m implementation file has a checkmark on the "Target Membership" option for your application.

XCode target membership preview

Only the implementation file should have the target membership checked (so not the .h header file).

This is often the reason why a plugin appears simply not to work. It's always good to check this setting first before debugging further.

Read More Comments

An IE8 background-size fallback with SCSS or SASS

Wednesday 22nd of April 2015

In this post I will show you how to get the background-size CSS property working in IE 6 - 8 without using JavaScript. Instead we will use the filter attribute recognised by older versions of Internet Explorer.


As you can see on Can I Use, IE 6 - 8 are the only browsers not supporting background-size at all.

Microsoft does however offer a AlphaImageLoader filter with sizingMethod options that correlate to the CSS3 background-size options.

  • auto = image
  • cover = scale
  • contain = crop

(CSS3 on left, sizingMethod on right)

The Solution

We will write a mixin that applies the filter rule for us. In this example I will use SCSS syntax and implement a fix for background-size: cover, as this is the most common use case.

If you want to convert this to SASS, please check out SASS to SCSS.

The mixin looks as follows:

@mixin background-cover($image-path) {
  background-size: cover;
  background-image: url(#{$image-path});
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{$image-path}', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{$image-path}', sizingMethod='scale')";

This mixin accepts an argument that is the path to the image. So it could be used for example like so:

.foo {
  @include background-cover('images/bar.jpg');
  background-color: #fff;
  background-position: right bottom;

A great advantage of this approach is that if you are using Ruby on Rails and need to include the asset pipeline paths in your CSS, you can use the standard asset-path helper wrapped around the argument.

.foo {
  @include background-cover(asset-path('bar.jpg'));


You may want to note that Internet Explorer filters are not valid CSS, so if you are an advocate of purely valid CSS, you may want to use a JavaScript polyfill or isolate this code in a separate stylesheet.

In general though, I think this is a great solution when older IE support is required. No JavaScript or CSS plugins are necessary and the method can easily be dropped into a SASS/SCSS project.

The solution could also easily be adapted for preprocessors such as LESS.js, or even pure CSS with little effort.

Please let me know if you find any other short solutions to this problem, I'd love to hear about other options.

Read More Comments

Fixing the Internet Explorer absolute link stretching bug

Monday 20th of April 2015

The bug I'm trying to describe here is when you have markup similar to this:

<div class="wrapper">
    <img src="logo.jpg" alt="Logo" />
    <a href="/somewhere">&nbsp;</a>

The goal we are trying to reach is to have the entire "wrapper" element clickable but the <a> tag is not wrapping the actual contents. There are various scenarios where you would do this, as wrapping large areas in a link tag can be either problematic or semantically incorrect.

The solution to make the above wrapper element fully clickable would be to set the wrapper to position: relative and the link to position: absolute, filling the container, like so:

.wrapper {
    position: relative;

.wrapper a {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: block;

Now this solution works just fine in almost all browsers, but (almost understandably) Internet Explorer won't let you click on the <img> or <h1> tags since they are not actually nested within the <a> tag, only the surrounding content.

To fix this, the solution is simply (yet confusingly) to give the link a background image and then all versions of Internet Explorer will place nice.

The best way to do this is to create a 1x1 pixel sized transparent GIF and use it as a repeating background.

Adding the following code will solve this bug:

.wrapper a {
    background: url('blank.gif') top left repeat;

This appears to be another classic IE hack but at least it does not invalidate your CSS or require any complicated filters, JavaScripts or plugins.

Read More Comments