Hide the iOS 8 status bar for better App Store screenshots

While working on my mobile application Elite Ice Hockey Action, I recently released an update and discovered that I need to add new App Store screenshots for the iPhone 6 and 6+.

Based on the App Store screenshot guidelines the images uploaded should not contain the iOS status bar (containing the time, battery level etc.). However, when using the iOS simulator for taking screenshots the status bar is always visible and simply cutting it out in Photoshop or Preview is not an option because since the iPhone 6 was released the screenshot dimensions must be exactly the same as the iPhone it was taken on.

There appears to be no way to simply turn off the status bar from the iOS simulator so my only option is to temporarily hide the status bar programmatically in Xcode and then disable this effect again after gathering my images.

Read on to find out the steps I performed to achieve this goal.

CSS hexagon, an easy LESS mixin

Based on my previous post where I explored methods to generate a pure-CSS hexagon shape, I have developed this into a LESS mixin that allows the hexagon to be included into your project with ease and efficiency.



<div class="hexagon">
  <div class="text">XYZ</div>


.hexagon {
  .build-hexagon(100px, #ff0000, #ffffff);

This will generate a 100px wide hexagon with a red background and white text.


If you need multiple coloured hexagons these can be styled efficiently by simply updating the colour options for either the background or text.


.hexagon {
  .build-hexagon(100px, #ff0000, #ffffff);

  &.blue {

Now adding a hexagon with the class blue will change the colour. This can also apply to text.


.hexagon {
  .build-hexagon(100px, #ff0000, #ffffff);

  &.blue {

  &.black-text {

Now adding the class black-text will obviously turn the text black.

You can view the full mixin code below.

Scalable CSS Hexagon in SCSS and LESS

In this post you can find two Code Pen examples of how to create a scalable CSS hexagon shape. I have included the examples in LESS.js and SCSS formats, but both are very similar.

This technique is a simple method of replicating the basic hexagon from csshexagon.com without having to use the generator.

The hexagon shape and size are controlled by 2 simple variables.

$hex-size: 180px;
$hex-height: $hex-size / sqrt(3);

This allows you to change the entire shape size by simply editing the value of the $hex-size variable.

Additionally a third variable is used to specify the hexagon colour.

$hex-color: #C6538C;

Try playing with the examples below. With a little modification a dynamic text label can even be added (see final example).

Changing the Twitter Bootstrap input outline color

When using Bootstrap it can be challenging to change the outline colour of an input field that has focus from the user.

By default Twitter uses a blue outline that may not fit all designs.

Default Twitter Bootstrap input outline

Even adding a CSS rule for the outline does nothing.

input:focus { outline: none; }

Twitter Bootstrap input outline still unmodified

This is because Twitter Bootstrap actually adds a border and a box-shadow property to all inputs on :focus that must be overridden.

Chrome DOM inspector

So to change the outline color, just update these properties.

input:focus {
    border-color: #cfdc00;
    box-shadow: 0 0 5px rgba(207, 220, 0, 0.4);

Now you will see the update!

Modified Twitter Bootstrap input outline

Convert all ERB templates to HAML across project

If you have a Ruby on Rails project and would like to convert all .erb templates to .haml across the project, you can follow these simple steps that will result in all .erb's files being parsed to new valid HAML and then the old ERB templates are deleted, in 3 simple steps.

1. Prerequisites

Install the following gems haml, hpricot, ruby_parser and html2haml. You do not necessarily need to have these in your Gemfile, just available on the system. Install in the following order:

gem install haml hpricot ruby_parser html2haml

2. Create new HAML files

Use the following bash script that will find all .erb files and then pipes them to Ruby so that it can run the html2haml command on each one.

To test what files will be generated without making changes:

find . -name '*erb' | xargs ruby -e 'ARGV.each { |i| puts "html2haml -r #{i} #{i.sub(/erb$/,"haml")}"}'

If you are happy with the output, simply pipe the command back into bash to execute the changes:

find . -name '*erb' | xargs ruby -e 'ARGV.each { |i| puts "html2haml -r #{i} #{i.sub(/erb$/,"haml")}"}' | bash

3. Remove old ERB files

Run this similar bash snippet that finds all files with a .erb extension and deletes them:

find . -name '*erb' | xargs rm -rf ARGV

RubyMine: .ruby-version Gemset cannot be loaded

If you have installed RubyMine and the IDE complains that it cannot switch the Ruby SDK because the Ruby environment wasn't found based on your given .ruby-version file, try explicitly stating the ruby executable name.

This means simply change your .ruby-version from:




Prevent "Outlook Office Reminders" reappearing on OS X

If you use Microsoft Outlook on OS X with the Exchange calendar, you will be familiar with the "Office Reminders" dialog window that will pop up and remind you of calendar events.

office reminders dialog

The problem is that this service will continue to pop up for events, even if you have closed the reminder application. Although the application has been closed and cannot be seen in the Dock, Outlook is actually running some background processes that prevent the reminders dialog from closing.

These processes can be stopped if wished, unfortunately in a not so user friendly manner, as you have to manually kill the processes using the Activity Manager.

To open the Activity Manager, open spotlight (⌘ + Space) and start typing "Activity" until you see the application.

Once open, you can filter for running processes, type "Microsoft" in the search bar in the top right.

filter activity monitor for microsoft processes

Finally once you can see these two processes "Microsoft Database Daemon" and "Microsoft Office Reminders", click on each one and click the "Force Quit" button which looks like a cross in a stop sign. Once the processes have ended, the pop up will no longer be able disturb you.

kill reminder process

Cordova "rebuild precompiled header" error

In Cordova 3.5+ you may experience an error while trying to build the iOS platform stating a precompiled header has been modified and needs to be rebuilt.

This is usually caused by deleting an existing Cordova project and rebuilding it in the same directory.


fatal error: file '/Users/blake.simpson/cordova/del-app/platforms/ios/DEL Action/DEL Action-Prefix.pch' has been modified since the precompiled header '/var/folders/bq/1p80g4q56tl2zmcv96c3r3g9fw6s01/C/com.apple.DeveloperTools/6.0.1-6A317/Xcode/SharedPrecompiledHeaders/DEL Action-Prefix-edciowciqplpzxaziffeqsjfaaka/DEL Action-Prefix.pch.pch' was built note: please rebuild precompiled header

'/var/folders/bq/1p80g4q56tl2zmcv96c3r3g9fw6s01/C/com.apple.DeveloperTools/6.0.1-6A317/Xcode/SharedPrecompiledHeaders/DEL Action-Prefix-edciowciqplpzxaziffeqsjfaaka/DEL Action-Prefix.pch.pch'

1 error generated.

The simple option is to delete the existing .pch file. In the previous example that would be done in the terminal by using rm.


$  rm /var/folders/bq/1p80g4q56tl2zmcv96c3r3g9fw6s01/C/com.apple.DeveloperTools/6.0.1-6A317/Xcode/SharedPrecompiledHeaders/DEL\ Action-Prefix-edciowciqplpzxaziffeqsjfaaka/DEL\ Action-Prefix.pch.pch

Once deleted rebuild the iOS project.


$ cordova build ios

Quickly open a web page in all browsers for testing

In order to test a certain web page in all of my development browsers, I wrote a simple shell script that will open a new instance of each of my browsers and automatically point it to a given URL.

This script is designed for OSX and will likely need some tweaks for a Linux distribution (or perhaps a complete rewrite) but the concept can be easily transferred.


# $1: URL

open -a "/Applications/Google Chrome.app" $1 -g -n
open -a "/Applications/Google Chrome Canary.app" $1 -g -n
open -a "/Applications/Safari.app" $1 -g -n
open -a "/Applications/Webkit.app" $1 -g -n
open -a "/Applications/Firefox.app" -g $1 -g -n
open -a "/Applications/FirefoxAurora.app" -g $1 -g -n
open -a "/Applications/Opera.app" $1 -g -n
open -a "/Applications/Opera Beta.app" $1 -g -n

I have configured the script to work for Chrome and Canary (Nightly), Safari and Webkit (Nightly), Firefox and Aurora (Nightly) and finally Opera and Opera Beta (Nightly).

On my setup I additionally load an extra app called "CoRD" which is used to connect to remote Windows machines for Internet Explorer testing.


open -a "/Applications/CoRD.app" -g -n

The -g option after each open command tells the given app to open in the background. Finally the -n switch will force a new instance of the browser, even if you already have one running, so that the browser is in a clean state to test with.

Finally I symlink this file to my /usr/local/bin directory so that the script is always available on my PATH.


$ cd /usr/local/bin
$ ln -s browser-test ~/path/to/browser-test.sh
$ chmod a+x browser-test

Complete these steps in order and you will be able to call browser-test from any directory in the terminal.


$ browser-test http://blog.blakesimpson.co.uk/

Ember Server "Bus Error 10" Fix

If you are using the ember-cli package to access the ember command line tool and experience a "Bus Error 10" that crashes the ember server every time you save a file then it is probably due to an incompatible Node.js version.

To fix this issue simply head to the Node.js downloads page and get the latest version of Node for your operating system.

For a functional ember server you should be using Node.js version 0.10.21 or higher, personally I upgraded from 0.10.20 to 0.10.29 and now the server runs perfectly, including the live reload functionality.

© Blake Simpson, 2012 – 2018