Sort string array items as integer with PHP

When sorting array items in PHP, normally you can use one of the PHP sort functions such as sort() or usort(). This will sort your array into ascending order for either integer, starting with zero or string, from A – Z.

However, consider the following example:

$scores = array(
    '32-Andy',
    '43-Steve',
    '28-Joe'
);

If you try to sort these by the prefixed ID (28, 32, 48) the sort function will not take just the numbers into account as the criteria. It will also then sort on the string, from A to Z.

There’s a simple way to fix this. We need to augment the usort() function by adding an extra argument. We’ll add the SORT_NUMERIC predefined constant as the second argument and this will instruct PHP to ignore sorting on the string segment of the array values and instead successfully sort the array by the ID only.

Using the following code will output the array in the order: 2, 0, 1 as expected.

usort($scores, SORT_NUMERIC);
print_r($scores);

//0 = 28-Joe
//1 = 32-Andy
//2 = 43-Steve

A simple jQuery add/remove class name pattern

Often when using jQuery and you aim to add or remove a class based on a state variable, you will see a function such as.

function updateInterface () {
    var shouldShowLogout = user.isLoggedIn;

    if (shouldShowLogout)
        $('.logout-button').addClass('active');
    } else {
        $('.logout-button').removeClass('active');
    }
 } 

This function is hard to read and basically repeats itself in the if and else clauses. The function implementation can be refactored down to 2 lines using a ternary if operator.

function updateInterface () {
    var shouldShowLogout = user.isLoggedIn;
    $('.logout-button')[ shouldShowLogout ? 'addClass' : 'removeClass' ]('active');
}

Since you can access functions of a an object in JavaScript like values, you can use the [] accessor to return the correct function based on the ternary if statement and them immediately call it using (), or in this case passing our class name value ('active').

You could even take this down to a single line.

function updateInterface () {
    $('.logout-button')[ user.isLoggedIn ? 'addClass' : 'removeClass' ]('active');
}

Although this final single line approach may be confusing to the next developer who is not already familiar with the pattern.

Day one on the Opera Mobile Store...

At the beginning of 2015 I decided to host my mobile applications Elite Ice Hockey Action and DEL Action on the Opera Mobile Store.

This is the new App Store for Nokia X devices along with other Android platforms such as Yandex.

After uploading my application and releasing it for free download, these were the download statistics I received after day 1.

Opera Mobile Store download statistics

It looks like the Opera Mobile Store is being heavily crawled by bots to find new Apps and marketing information.

Inspirational words...

“To set high goals, to have almost unattainable aspirations, to imbue people with the belief that they can be achieved — these are as important as the balance sheet, perhaps more so”

Joseph C. Wilson (Founder of the Xerox Corporation)

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.

Examples

HTML

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

LESS

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

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

Overrides

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

LESS

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

  &.blue {
    .hexagon-color(#0000ff);
  }
}

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

LESS

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

  &.blue {
    .hexagon-color(#0000ff);
  }

  &.black-text {
    .hexagon-text-color(#000000);
  }
}

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

© Blake Simpson, 2012 – 2018