Wake Up Better

29th January 2020

Bleep bleep bleep ….. bleep bleep bleep …..

You probably hear that every morning when your alarm goes off. That jarring sensation of shock and confusion. Where are you? It is ever so tempting to snooze…..

Bleep bleep bleep ….. bleep bleep bleep …..

Again you are shocked awake by that sound 10 minutes later.

I don’t want to preach about how early I get up but I do want to tell you that 3 years ago I started using a silent alarm & it changed my mornings forever.

Imagine being gently tapped on your wrist to wake up vs being shouted at. You wouldn’t like someone screaming “wake up” at you but that is what you are doing to yourself using an audible alarm. It is called an alarm for a reason – to alarm you and whilst it may be effective, it is not the nicest thing to be awoken by.

I can’t say you won’t be tempted to snooze it but you certainly will prefer being woken up this way. You don’t even need any special hardware.

Got an Apple Watch or Android Wear watch? These have the option for a silent alarm. There are also loads of apps that claim to wake you up at the optimal time. Concerned about battery life? Just change when you charge the watch – maybe put in on charge for an hour before you go to bed to make sure it will last through the night. Put it back on charge in the morning whilst you shower or do your morning routine to make sure it then lasts through the day.

Not got a smartwatch? Most of the Fitbit trackers have a silent alarm feature, as do most of the fitness trackers made by Garmin, Huawei & Xiaomi.

All these online gurus and tutorials sing the praises of how getting up early can increase your productivity, make you healthier & generally change your life for the better. “I can’t get up early as I don’t want to wake my partner” is often given as a reason for why you can’t get up early. With a silent alarm, you won’t disturb anyone……

Give it a go tomorrow morning. You might be surprised by how nice it feels plus that extra time in the morning could really be useful.

Let me know in the comments how it worked for you.

Comments

Review of Osram Lightify Hub

6th July 2018

Following on from my previous post about not wanting to get the Philips Hue hub, I bought an Osram Lightify hub. Well, that was a mistake and a bit of a waste of time.

To keep this post simple there was one major issue I was struggling with: Range. The Lightify hub just does not have the range to see bulbs from one side of my house to the other – it even struggled to connect to lights in the next room sometimes. It would work to turn the light on then wouldn’t be able to turn it off later.  This was a big disappointment as I had already spent some time working with their API to build my own rules etc. That hub is now sitting on a shelf never to be used again.

I got a Philips Hue hub, but I didn’t pay £50 for it. A colleague at work had a few spare so I bought one from him for £10. It is slightly annoying that this hub needs power and an ethernet connection (that was one nice thing about the Lightify hub only needing to be plugged in to a power socket) – maybe this is what makes its range better as I am now not having any range issues. Setting it up was easy and it can see all my bulbs, even the none Hue bulbs with no issues. The app also has sunset on/off settings right out of the box so the code I wrote to add the functionality to the Lightify hub is not needed anymore.

I do need to carry on with building my own gate sensor……

Comments

Turning My Lights On At Sunset

5th June 2017

Last week I bought & wrote about some wi-fi controlled lights. The Osram iOS app allows you to schedule a time when the lights will turn on & off. I don’t really want to mess around changing the time the lights will come on as the time of sunset changes throughout the year. I want the lights to come on at sunset, then go off at 11pm – currently something the iOS app does not support.

This weekend I started playing with some code to build this functionality. I plan on adding it to my Raspberry Pi based home automation system.

The solution I came up with is split into two main parts – the first one being to figure out what time the sun will set (on a day to day basis) then the second part is to turn the lights on at that time.

Figuring out what time the sun will set

I found a rather neat NPM module called SunCalc which can be used to calculate everything from sunset times & lunar phases, right through to planetary positions. It may be a little overkill for what I need, but it works. Another good feature is the ability to calculate based on coordinates so I can get the exact sunset time for my house.

// include module
const SunCalc = require('suncalc')
// get the sunset time based on coordinates (of Tower Bridge)
let times = SunCalc.getTimes(new Date(), 51.5055, 0.0754)
// extract the time (hours and minutes) 
let sunSet = `${times.sunset.getHours()}:${times.sunset.getMinutes()}`

The above code is pretty self-explanatory and will give me the sunet time.

Turn the lights on at sunset – cron

Now that I can figure out the time of sunset, I want to do it every day using a cron job. The initial cron will run at a set time every day. It will get the sunset time, then initiate another cron using that time to turn the lights on.

I chose a NPM module called node-cron which make creating cron jobs really easy.

// include modules
const SunCalc = require('suncalc')
const cron = require('node-cron')
// run at 12:15 every day
cron.schedule('15 12 * * *', () => {
      // get the sunset time
      let times = SunCalc.getTimes(new Date(), 51.5055, 0.0754)
      // format the minutes & hours for the cron job
      let sunSet = `${times.sunset.getMinutes()} ${times.sunset.getHours()}`
      // create a new cron job to run at the sunset time
      let sunsetLightsON = cron.schedule(`${sunSet} * * *`, () => {
        // turn the lights on here
        // only needs to run once a day so destroy after it has run once
        sunsetLightsON.destroy()
      })
      // start the cron job to turn the lights on
      sunsetLightsON.start()
    })

The code above is the basic structure which makes use of 2 cron jobs. One runs every day which creates another one which will turn the lights on then destroy itself ready for another to be created the next day. This process will just repeat over & over turning the lights on at sunset without me having to change a time manually.

Comments

An Alternative to Philips Hue

27th May 2017

Following on from my original post about building my own gate sensor, the project has grown into a home automation system. Now I am living in my new house, I want to be able to control some lights (inside & out). All the outside light fittings take GU10 bulbs. The inside fittings are a mixture of the same, plus a few B22 fittings. Feature wise I am not fussed about bulbs which can change color. I just want a decent API for controlling the lights from Node.

My research kept leading me to Philips Hue, but is it so expensive. The hub alone is nearly £50. Just to replace the 8 bulbs outside would cost me a few pennies under £450 (including the hub). I spent quite a while looking for alternatives.

I found Osram Lightify. It is a similar setup to how Philips Hue works – a hub & lightbulbs which communicate via wi-fi. The price is a lot less. The Hub cost me £29.95 & is a lot smaller than the one used by the Hue system.

Osram Lightify Hub

For the bulbs, I was recommended some by a company called Innr. Their bulbs are actually compatible with both Lightify & Hue systems. The GU10 bulbs are £15.99 each, which gave me a total cost of £157.91 (including the hub) to replace all my outside bulbs. A massive saving over going with the Hue system.

Innr GU10 Bulb

The bulbs work perfectly with the Lightify hub. Currently, I am using them on a time-based schedule set in the Lightify App but have found some Node modules which will allow me to control them in any way I want via my own code.

Check back soon to see how I use Node to control them.

Comments

Getting AirSonos Working

10th April 2017

AirSonos is a node based implementation of the AirPlay protocol which allows you to wirelessly stream any audio from an iOS device to your Sonos speakers. Why does this matter?

I listen to a lot of podcasts on my iPhone using Overcast & really love the Smart Speed & Voice Boost features. AirSonos allows me to stream from the app to my Sonos system and still use the features. The speakers appear as any Airplay speaker would in the pop-up menu at the bottom.

Whilst setting this up I had 2 main issues which seem to be common for lots of other users. After spending a few hours on forums to fix the issues, I thought it may be helpful to document the fixes in this short article.

Issue One

Once AirSonos is installed, it won’t run. You see an error that looks like this:


$ airsonos
Searching for Sonos devices on network...

/usr/local/lib/node_modules/airsonos/node_modules/bluebird/js/main/promise.js:677
throw e;
^
Error: Internal Server Error
at maybeWrapAsError (/usr/local/lib/node_modules/airsonos/node_modules/bluebird/js/main/util.js:70:12)
at /usr/local/lib/node_modules/airsonos/node_modules/bluebird/js/main/promise_resolver.js:41:50
at /usr/local/lib/node_modules/airsonos/node_modules/sonos/lib/logicalDevice.js:112:20
at done (/usr/local/lib/node_modules/airsonos/node_modules/sonos/node_modules/async/lib/async.js:126:15)
at /usr/local/lib/node_modules/airsonos/node_modules/sonos/node_modules/async/lib/async.js:32:16
at /usr/local/lib/node_modules/airsonos/node_modules/sonos/lib/logicalDevice.js:106:22
at done (/usr/local/lib/node_modules/airsonos/node_modules/sonos/node_modules/async/lib/async.js:126:15)
at /usr/local/lib/node_modules/airsonos/node_modules/sonos/node_modules/async/lib/async.js:32:16
at /usr/local/lib/node_modules/airsonos/node_modules/sonos/node_modules/async/lib/async.js:251:17
at done (/usr/local/lib/node_modules/airsonos/node_modules/sonos/node_modules/async/lib/async.js:126:15)
at /usr/local/lib/node_modules/airsonos/node_modules/sonos/node_modules/async/lib/async.js:32:16
at /usr/local/lib/node_modules/airsonos/node_modules/sonos/node_modules/async/lib/async.js:248:21
at /usr/local/lib/node_modules/airsonos/node_modules/sonos/node_modules/async/lib/async.js:572:34
at /usr/local/lib/node_modules/airsonos/node_modules/sonos/lib/events/volumeListener.js:24:14
at Listener. (/usr/local/lib/node_modules/airsonos/node_modules/sonos/lib/events/listener.js:123:9)
at Request.self.callback (/usr/local/lib/node_modules/airsonos/node_modules/sonos/node_modules/request/request.js:129:22)

This issue appears to be caused by how your  Sonos network is setup. If you are using a Bridge, the speakers are communicating on a private network separate to your normal Wi-fi network. AirSonos is looking for the speakers on the same network it is running on, but they are are not there.

Try removing your Bridge as it is not needed anymore. In a recent software update, Sonos now made it possible that you can run the system on your existing Wi-fi network.

Following the setup guide on the Sonos website, try setting up your system without the Bridge. Now try running AirSonos again and it should work. You should see a list of all your speakers which will show up in all your Airplay enabled apps.

Issue Two

When AirSonos is running, selecting a speaker to stream too won’t do anything & AirSonos will crash. The error will look something like this:


Error: Invalid key length
at Error (native)
at new Decipheriv (crypto.js:232:16)
at Object.Decipheriv (crypto.js:229:12)
at Object.decryptAudioData (/usr/local/lib/node_modules/airsonos/node_modules/nodetunes/lib/helper.js:141:25)
at RtpServer. (/usr/local/lib/node_modules/airsonos/node_modules/nodetunes/lib/rtp.js:32:23)
at emitTwo (events.js:106:13)
at Socket.emit (events.js:191:7)
at UDP.onMessage (dgram.js:540:8)

This is caused by an issue in the nodetunes package which has been fixed (see the PR here), but not merged into the codebase yet. If you want to apply the fix yourself open up this file:

/usr/local/lib/node_modules/airsonos/node_modules/nodetunes/lib/helper.js 

On around line 141 replace this line:

var decipher = crypto.createDecipheriv('aes-128-cbc', audioAesKey, audioAesIv);

With these 2 lines:

var audioAesKeyBuffer = new Buffer(audioAesKey, 'binary');
var decipher = crypto.createDecipheriv('aes-128-cbc', audioAesKeyBuffer, audioAesIv);

Now start AirSonos & try to play something to one of your Sonos speakers again. It should now be working.

 

I hope you found this quick article helpful – please share it if you did.

Comments

ES6 Basics Part 4 – Classes

8th April 2017

ES6 can be thought of as a new version of Javascript. Currently most JS is ES5.

Over the next few articles, I’m going to break down the new features & syntax of ES6 into bite-size chunks. Please note that some experience writing JS is required to make full uses of these articles.

This is part 4 of many so please keep checking back for the next article in the series.
Part 1 – const & let can be found here.
Part 2 – Template Strings can be found here.
Part 3 – Arrow Functions can be found here.

Anyone that has ever tried to write OOP JavaScript will know that the syntax is very verbose. It is not easy to understand. The example below shows a constructor function setting up a Person class. The person should have 2 properties & there is also a method which will print a short bio based on the properties.

function Person(characteristics) {
 this.name = characteristics.name;
 this.age = characteristics.age;
}

Person.prototype.bio = function() {
 return "Hi my name is " + this.name + ". I am " + this.age + " years old. Who are you?";
}

The code below shows a Person object being created & the method being used to return the short bio.

var person1 = new Person({name: 'Joe', age: 30});
person1.bio();

This will output “Hi my name is Joe. I am 30 years old. Who are you?”.

This code is not the easiest to explain – what is prototype? Why is the word class not mentioned anywhere like it is on other OOP based languages? The above example does not even go into inheritance (sub-classes) which is outside the scope of this article.

Thankfully ES6 classes make OOP JavaScript a lot simpler, as the example below shows.

class Person {
 constructor(characteristics) {
  this.name = characteristics.name;
  this.age = characteristics.age;
 }
 bio() {
  return `Hi my name is ${this.name}. I am ${this.age} years old. Who are you?`;
 }
}

The code above is creating the exact same Person class with the same properties and methods as the first example, but it is much easier to read & understand. Make note of the constructor function inside the class. This carries out the initialization & setup within the class – it is run anytime the new keyword is used to create a new instance of the class. There is also no need to separate the methods with a comma –  doing so will throw an error.

To create a new Person object & call the method the code is the same (using let instead of var keywords).

let person1 = new Person({name: 'Joe', age: 30});
person1.bio();

This will output “Hi  my name is Joe. I am 30 years old. Who are you?”. There is no reference to anything odd looking like a prototype keyword & the code is generally easier to understand.

I have  not included anything about sub-classes (inheritance) in this article – if you want me to do a more detailed article explaining this then please let me know in the comments.

 

Check back shortly for the part 5 – ES6 forEach array helper.

 

As not all browsers support ES6 code yet, Babel should be used to transpile (convert) the code into ES5 code.

Comments

Starting the Gate Sensor Code

28th March 2017

This article is part of a series about a project I am working on. Taken out of context it may be a little random, so make sure you check out the original article about how I am going to build my own gate sensor.

I spent an hour or so yesterday evening working on code which will execute on the Puck.js itself.


// based level of magnetic fields 
let base = Puck.mag();

// advertise value for open/closed gate + batter precentage
let advertise = gate => {
  NRF.setAdvertising({
       0x180A : [gate], 0x180F : [Puck.getBatteryPercentage()]
    },{interval: 100});
}

// set a good base for the magnetic field 
// check if value over threshold then pass value to advertise 
let onMag = level => {
  level.x -= base.x;
  level.y -= base.y;
  level.z -= base.z;
  let magLevel = Math.sqrt(level.x*level.x + level.y*level.y + level.z*level.z);
  magLevel > 3000 ? advertise(02) : advertise(01);
}
Puck.on('mag', onMag);
Puck.magOn();

The magnetic field sensor returns 3 values – coordinates of X, Y & Z which allow me to pinpoint the location a magnetic field is coming from. The 3 values are not really needed for a simple gate sensor. All that is needed is the strength of the magnetic field, such as a single integer, which will give an indication of how close the magnet is. This can be achieved with some basic trigonometry –  I multiply each of the 3 values by themselves, then add them together & take the square root of that sum. This will give me a nice number to work with.

The math needs one further step. Magnetic fields are everywhere so the sensor is picking up background fields without a magnet being close to it. A baseline, or zero reading, needs to be set without the magnet being near the sensor. To do this I am getting an initial single reading of the 3 values when the code is uploaded to the Puck.js which I am then subtracting from the sensor reading before the basic trigonometry mentioned above is executed. This gives a good baseline, but I need to remember to get a new single baseline reading once the Puck.js is in its final location as the background magnetic fields may differ from where it is located now, on my desk.

Now I have a good number to work with which shows me the strength of the magnetic field. For the rest of this article, I will refer that variable as magLevel. When magLevel is larger the field is stronger, so the magnet is closer. When magLevel is smaller the field is weaker, so the magnet is further away. Whilst testing on my desk I have seen that magLevel falls below 3000 with no magnet near it and above 3000 with the magnet next to it. By using a simple if statement it is now possible to tell if the magnet is close or not, which is the basic way of telling if the gate is open or closed. Simple.

So now the Puck.js knows if the gate is open or closed I have to get that data to the Raspberry Pi so it can then trigger the push notification. To achieve this I have decided to make the Puck.js advertise (using NRF.setAdvertising) the information. A simple 01 or 02 is advertised based on the outcome of the above mentioned if statement. I have also included the battery level of the Puck.js in the advertised date so I can extend the functionality to also include a push notification when the battery is running low.

From my research so far I think this is the most battery efficient method. The code has been executing on the Puck.js all night and the battery level has not dropped.

Security wise anyone can pick up the Bluetooth Advertising, but they could also just look to see if the gate is open or closed so I don’t see that as a major security concern.

Next Steps

I need to write the Node.js side of the system which will run on the Raspbery Pi.

I also want to make the security on the Puck.js a little better, not in terms of the Bluetooth Advertising but protect it so no one can connect to it without a password.

 

Check back soon for my next article on the project.

Comments

Building My Own Gate Sensor

26th March 2017

For a while now I have been searching for a cost-effective sensor to put on my garden gate which will send me a push notification when the gate is opened/closed. So far my search has found nothing which is close to what I want.

There is a large selection of SmartThings compatible sensors out there, but they all appear to be from the Japanese or Chinese market and will require some “hacking” to get them to work. Plus I don’t really want to invest into one home automation system over another currently as it is not clear what the future holds for the sector. Will Apple HomeKit become the dominant one or will it be SmartThings? It is far too early to tell.

Having just learned the ins & outs of Node.js for some projects at work, I have decided to build my own.

My plan is to have a sensor on the back gate which can detect when it is open or closed. This will share data with a machine running Node.js which will then trigger an IFTTT Maker Webhook to send a push notification to my phone. The theory of this seems quite simple & it will also be extendable. Carry on reading to find out how.

Hardware

Recently a friend at work told me the look at the Puck.js as it may be useful as the sensor.
This small little device runs the Espruino JavaScript interpreter meaning it can be programmed using vanilla JavaScript. It has a selection of sensors already on its small PCB allowing it to measure light, temperature, magnetic fields & capacitance, control infrared devices (IR), produce any color light & it has a tactile switch that turns into one big button. It also has BLE (Bluetooth Low Energy) allowing it to communicate with other BLE devices.

Having a magnetic field sensor & BLE  means this will be the ideal sensor – this will be attached to the gate post & a small magnet will be attached to the gate itself. When the magnetic field changes, this is how the gate opening/closing will be detected, which will then trigger a message being sent over Bluetooth.

The receiving Bluetooth devices will be a Raspberry Pi Zero Wireless.

This is the latest in the range of Raspberry Pi boards & it is tiny. It has the same spec as the Raspberry Pi Zero but also has Wi-fi (02.11 b/g/n wireless LAN) & Bluetooth (4.1 + BLE).

The cost, size, and features of this Raspberry Pi make it ideal for this project. It can run Node.js meaning it can be programmed using vanilla JavaScript. It can receive a message from the Puck.js over Bluetooth, then over Wi-fi trigger the IFTTT Maker Webhook to trigger the push notification.

In theory, these two small pieces of hardware will allow me to build a gate sensor which will do exactly what I want. Cost wise, so far I have spent less than £50, which also includes the power supply, case & small adaptors for the Raspberry Pi.

How It Will Be Extendable

The Raspberry Pi will just be a Node.js server which can be programmed to do anything I want. I could buy another Puck.js and use it as a sensor on the front door which would trigger a different push notification.

I could build a web interface running on the Raspberry Pi which will trigger Node.js to send various different messages over Bluetooth. One of these could be to another Puck.js which will then use the built-in IR blaster to control an IR light bulb or switch.

I could add more temperature sensors to a smart thermostat, such as a Nest or Hive, to give more granular heating control. I could place a Puck.js somewhere that I want to monitor the temperature, then based on temperature sensor readings, send data to the Raspberry Pi where Node.js will communicate with the smart thermostats API.

Next Steps

Start writing some JavaScript.

The theory is not too tricky & nor should the code be. The Puck.js is battery powered so coming up with an efficient way of not draining the battery too fast is important. Security is also a factor but following security best practices on both the Puck.js & Raspberry Pi should be ok.

The BLE library documentation is a little sketchy so it’s going to be fun playing with the code.

In my next few articles I’m going to document my experiments right through to the finished project.

 

Comments

ES6 Basics Part 3 – Arrow Functions

27th February 2017

ES6 can be thought of as a new version of Javascript. Currently most JS is ES5.

Over the next few articles, I’m going to break down the new features & syntax of ES6 into bite-size chunks. Please note that some experience writing JS is required to make full uses of these articles.

This is part 3 of many so please keep checking back for the next article in the series.
Part 1 – const & let can be found here.
Part 2 – Template Strings can be found here.

Part 4 – Classes can be found here.

Currently, to declare a function in JS you would do this:

const multiply  = function(a, b){
 return a * b;
};

 

With ES6 the function keyword is no longer needed. It is replaced with a fat arrow => after the argument list.

const multiply  = (a, b) => {
 return a * b;
};

 

It is possible to reduce the syntax even further. In functions that only have a single JS expression, it is possible to remove the curley braces & drop the return keyword. This creates an implicit return – just a way of saying automatically return.

const multiply  = (a, b) =>  a * b;

 

In functions with a single argument, you can also drop the parentheses around it.

const tripple  = a => 3 * a;

Where a function has no arguments you need the parentheses.

Why & How?

It can reduce code clutter, making function declarations shorter & easier to read. There is also another benefit. Look at the code below and see if you can spot the issue.

const cars = {
 models: ['s1', 's3', 's4', 's5', 's6', 's7', 's8'],
 manufacturer: 'Audi',
 carSummary: function() {
  return this.models.map(function(model) {
   return `The ${model} is a car made by ${this.manufacturer}`;
  });
 }
};

This code will throw an error – this.manufacturer will not work as the function is being passed off to somewhere else, so the value of this is lost. This could be solved by using bind, but Arrow Functions can help with this issue.

By making use of the fat arrow function below, the code below will now work because it is using Lexical This.

const cars = {
 models: ['s1', 's3', 's4', 's5', 's6', 's7', 's8'],
 manufacturer: 'Audi',
 carSummary: function() {
  return this.models.map((model) => {
   return `The ${model} is a car made by ${this.manufacturer}`;
  });
 }
};

This means that the placement of the this keyword influences how it is evaluated. When it is placed inside a fat arrow function, it is set to the same value as what it would mean in the surrounding code. In the example above,  this = team.

 

Check back shortly for the part 4– ES6 Classes.

 

As not all browsers support ES6 code yet, Babel should be used to transpile (convert) the code into ES5 code.

Comments

ES6 Basics Part 2 – Template Strings

20th February 2017

ES6 can be thought of as a new version of Javascript. Currently most JS is ES5.

Over the next few articles, I’m going to break down the new features & syntax of ES6 into bite-size chunks. Please note that some experience writing JS is required to make full uses of these articles.

This is part 2 of many so please keep checking back for the next article in the series.
Part 1 – const & let can be found here.

Part 3 – Arrow Functions can be found here.
Part 4 – Classes can be found here.

Currently, to declare a template string or template literal in JS, variables need to be concatenated into the final string.

var string = "Hello " + username + ", Welcome back.";

 

With ES6 it is now a lot easier – when declaring the string it should now be wrapped in backticks (“). Within the new string, any variable can be injected into it using ${}.

var string = `Hello ${username}, Welcome back.`;

 

It is possible to include any JS expression inside ${}.

var string = `Here is a random number: ${Math.random()}`;

Why?

Complex strings are a lot easier to write & read – they are more like simple sentences with placeholders inside them instead of a mixture of opening and closing ” with + signs.

 

Check back shortly for the part 3 – Arrow Functions.

 

As not all browsers support ES6 code yet, Babel should be used to transpile (convert) the code into ES5 code.

Comments

ES6 Basics Part 1 – const and let

15th February 2017

ES6 can be thought of as a new version of Javascript. Currently, most JS is ES5.

Over the next few articles, I’m going to break down the new features & syntax of ES6 into bite-size chunks. Please note that some experience writing JS is required to make full uses of these articles.

This is part 1 of many so please keep checking back for the next article in the series.
Part 2 – Template Strings can be found here.
Part 3 – Arrow Functions can be found here.
Part 4 – Classes can be found here.

Currently, to declare a variable in JS the var keyword is used.

var string = 'abc';
var num = 1;

 

With ES6 come two new keywords which can be used to declare variables. They are constlet.

const

When a variable is declared using the const  keyword, the value assigned should not change.  An example of this would be in a user system where once the user is registered, their unique identifier would never change.

const userId = 'somethingUnique';

Once a const is set no changes can be made to it. JS will throw an error if this happens.

let

When a variable is declared using the let keyword, the value assigned is expected to change. An example of this would be a users password. They may at any time chose to change it.

let userPwd = 'Password123';

Variables declared using let can be changed at any time – it can be used in the say way as the var keyword.

Why?

The code is more expressive & easier to read. If you are looking at a large piece of code, it is immediately obvious which variables won’t change and which may change.

 

Check back shortly for the part 2 – Template Strings.

 

As not all browsers support ES6 code yet, Babel should be used to transpile (convert) the code into ES5 code.

 

 

Comments

They Are Being Too Quiet

23rd February 2016

If you follow the news you will no doubt have read about the FBI & Apple spat that is currently happening. I don’t need to go into the technical details as thousands of words have been written about it elsewhere on the internet.

There is something that does strike me as being rather odd – Microsft, Google & all Android handset manufacturers (Samsung, LG etc) have been very quiet about the whole subject. This stood out to me as none of these companies are the quiet type & would usually jump at any opportunity to do some “Apple bashing”.

I have come up with 2 possible reasons why they may all be biting their tongues:

It is too late…

Personal & private information has already been given to the FBI (or any law enforcement agency) via the means of a backdoor or some other method which will allow it to be easily obtained again in the future from other devices. No company wants this to become public knowledge so don’t want to attract any attention.

It is too easy…

Gaining access to personal & private information on a Microsoft or Android device may be so easy that the manufacturer does not even need to be asked for help. The law enforcement agencies can do it already and nobody even knows.

I suspect both of the above are true in part. Either way, if I were an Android or Microsoft device user I would be very cautious about putting any private information on it. It isn’t the law enforcement agencies I am concerned about – if history is anything to go by it will not be long before their methods are in the public domain for anyone with malicious intent to make use of.

Comments

A New Year

2nd January 2016

Another post of new year resolutions? No. Last year I tried to set some & failed at all of them. The problem is that there are two types or resolutions – ones about things which are in your control & things which are outside of your control.

The problem is most people’s resolutions are about things which they have no control over. I was guilty of this last year, so this year I have decided to not set any.

I just want to continue to work & play hard. I don’t need a new year for that.

Comments

Moving a WordPress site

1st September 2015

Comments

Never have a plan B

5th July 2015

You should never have a plan B.

Inevitably when you give yourself the option, you will fall back on it. Often it is easier or has a “good enough” outcome. It is second best.

Stop.

Don’t give yourself the easier option. Not having a plan B means plan A has to work – put all your effort and focus into making sure.

If you do that, why do you even need a plan B.

Comments

Is Apple Music anything new?

14th June 2015

Comments

Native Apps on the Apple Watch

13th June 2015

Comments

WordPress & Responsive Images

3rd June 2015

Comments

Must Have Holiday Tech

28th May 2015

Comments

Use wp_enqueue, Conditionally

24th May 2015

When adding CSS or Javascript files to a WordPress theme it should be done via the functions.php file by using either wp_enqueue_style for CSS files, or wp_enqueue_script for JavaScript files. WordPress will automatically add the necessary code to link to the files either before the closing </head> or </body> tag (based on the parameters passed to either function). This will happen on every page of the website, but sometimes this may not be desired. What if you want to conditionally load certain files on certain pages?

Real Example

On this very website I use a JavaScript library called prism.js (it has a JavaScript file & a CSS file) – it is used to style any code snippets that are on a page, like the ones below. I want this website to be as fast & lightweight as possible, so I want to conditionally load them only on pages which require them – pages with code snippets.

In the snippet below I am adding the base CSS file for the theme, plus the prism.css file & the prism.js file. By using this code all three files will be included on every page of the website.


function add_theme_files() {
     //Theme style sheet
     wp_enqueue_style( 'theme-styles', get_stylesheet_uri() );
     wp_enqueue_style( 'prism', get_template_directory_uri() . '/prism.css' );
     wp_enqueue_script( 'prism-js', get_template_directory_uri() . '/js/vendor/prism.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'add_theme_files' );

This is not ideal as there are not code snippets on every page – the two Prism library files are not needed all the time. By making use of the WordPress Conditional Tags it is possible to control which pages the Prism library files are added too.

On this website any post with a code snippet is in the ‘Code’ category. Using the in_category conditional tag will allow a check to be carried out to see if the current page being displayed needs the Prism library.

On line 5 in the snippet below I am checking to see if the page is in the ‘Code’ category. If it is, the wp_enqeue_style & wp_enqeue_script statements contained within the if statement are executed. If not, they are ignored.


function add_theme_files() {
     //Theme style sheet
     wp_enqueue_style( 'theme-styles', get_stylesheet_uri() );

     if(in_category('Code')){
         wp_enqueue_style( 'prism', get_template_directory_uri() . '/prism.css' );
         wp_enqueue_script( 'prism-js', get_template_directory_uri() . '/js/vendor/prism.js', array(), '1.0.0', true );
     }
}
add_action( 'wp_enqueue_scripts', 'add_theme_files' );

By using this method, the two Prism library files are only added the the pages that need them.

In this example I am using only one conditional tag (in_category) but there are many more available.  Visit the WordPress Conditional Tags Codex page to find out all the ones which you can use.

Comments

Cut Data Usage Whilst Abroad

22nd May 2015

As a Vodafone customer, whilst traveling abroad in certain countries I take advantage of their EuroTraveller service which allows me to use my minutes, texts & data allowance as if I were at home in the UK. The cost for this is £3 per day, which is only billed on the days I use any of my allowances. This may seem expensive, however it is actually quite a good deal – I can use my phone in the same way I normally do in the UK and I won’t be left with any nasty surprises on my next bill. There are no roaming charges etc.

Whilst waiting at the airport for my gate to open, I was thinking about how I usually use my phone abroad. I don’t really call people but I do text (iMessage – so  data), email, use twitter, check instagram, read RSS feeds & use the internet to look for places to go or reviews of places etc. I realised that I mainly use data – quite a lot of data actually. I have 7GB of data included in my monthly tariff and whilst at home I use approx. 6 – 6.5GB a month, not including the data I use when on Wi-Fi.

Solution Found

After quick bit of research online, I found a service called Onavo & their iOS app called Onavo Extend. Their website claims the following:

Onavo Extend helps you save mobile data so you can do more of what you love on your phone without spending more on your bill. Once the app is installed on your phone, it works in the background when you use mobile data to find ways to save.

How it Works

In basic terms, the data is compressed. Any time you make a data request, it is sent to Onavo’s servers via a constant VPN connection (a profile setup on your phone when setting up the Extend app). The data is compressed before being sent back, meaning less data is downloaded by your device. It is exactly the same setup as using any VPN to connect to the internet, with compression thrown in to shrink the data. When connected to Wi-Fi the VPN is disconnected.

Does it Actually Work?

So far I have been away for 2 days –  the screenshot below of the Extend app shows exactly how much data has been saved so far, but also gives a nice breakdown of how much data each app has used.
Onavo Extend App Screen Shot

According to the data the app is showing, yes it does actually work & I have already saved quite a bit of data. Based on my usage over the past 2 days, if I were here for 10 days I would save over half a Gigabyte of data, without doing anything besides installing the app.

Half a Gigabyte may not seem like a lot, but I have quite a large data allowance on my monthly tariff – most people do not, with the average being 1GB per month. A 50% saving on data usage could make all the difference betweeen a normal bill at the end of the month & one that has a nasty extra charge.

Privacy

As all the data is passing through Onavo’s servers, in theory, they can see all the data I use. At first this did start alarm bells ringing in my mind, but after a quick look on thier website I found their Privacy Policy which states the following:

We may share, sell, transmit, or otherwise make available to third parties information that does not include personally identifying information, or for which we have taken reasonable steps to remove all personally identifying information (“Anonymized Information”). Anonymized Information may provide insights into trends in mobile, app, online, and advertising activities.

Two things stood out to me about their Privacy Policy. Firstly it is not hidden away on their website like they have something to hide. It is easy to find, as if they want to show that they are not hiding anything. Secondly, it is easy to read. It is not overcomplicated to try and confuse you whilst hiding things in complex language. It’s easy to understand.

I don’t see any issues with this & my privacy – it is almost exactly the same as what Vodafone & all other network providers  do anyway. It simply means they may sell information about how I use the service, but not information that makes it possible to identify me.

How can it be Free?

Some things do seem too good to be free & this is one of them. As there is no charge for using the service, they make their money by selling “Anonymized Information” (see quote above from Privacy Policy). Most companies that offer their services for free make their money this way. Google is a prime example – you don’t pay for it directly, but they make money selling the data about you using their services as it is valuable to advertisers.

Would I Recommend it?

Simply, yes. From my own experience of using it, it actually works.

There is no reason why I would need to remove it when I get back to the UK. It will save my data allowance anywhere in the world where I have a data connection (except when on Wi-Fi), but I think I will. I have no need to save data at home as I don’t think I will ever go over my 7GB monthly amount.

If you have a smaller montly data amount this may be just the app you are looking for at home, or abroad.

Comments

Back to the Future

14th May 2015

Comments

Sass & Compass Vertical rhythm

9th February 2015

Comments

Should I Get Checked?

21st October 2014

My father was diagnosed with Alzheimer’s when he was 54 years old. He is classed as having Early Onset Alzheimer’s disease as it usually effects people in later life. Some people see 54 as old, but it is not old for this disease. Typically dementia effects everyone in old age. When an 80 year old grandparent gets forgetful that is highly likely to be dementia. Alzheimer’s is a specific form of dementia classified and identified by it’s effect on the brain. I could write pages and pages about it, but I won’t. You can look here to find out more information about Alzheimer’s but be prepared to go down the rabbit hole.

Watching my father decline mentally is not nice. I can not claim to be the only one who goes through this kind of thing and I don’t want or expect any sympathy. I was in my second year of university at the time of his diagnosis. It was hard. I almost dropped out but my friends and lecturers persuaded me otherwise. The university were great and offered me support with my studies & exams. Looking back dropping out would have been a stupid thing to do.

As his disease has progressed over the past 10+ years (he is now 65) the hardest part has been watching him forget everything around him & himself. He has forgotten me, my sister & his friends. It sounds horrible to say it but now when I go to visit I feel I am visiting his body. The man that was my father, his soul, his spirit died about 6 years ago. It took me a year or two to come to terms with it. I know that he would want me to get on with my life. I try to remember him when he was fit and healthy doing the things he loved.

As I have studied the disease over the past 10+ years and seen its effect first hand I have learned of something that has created a conflict in my mind. There is no solid proof that Alzheimer’s is hereditary but having someone in your close family (1 or 2 older generations of yourself) can increase the risks. Early Onset Alzheimer’s in particular is called a ‘familial disease’ because it tends to appear in families with several generations effected. Research has shown that is is caused by mutations in one of three genes – the amyloid precursor protein gene (APP) and two presenilin genes (PSEN-1 and PSEN-2). The research shows that anyone carrying these rare mutations does tend to develop Early Onset Alzheimer’s disease.

This is the conflict in my mind that I wrestle with on an almost daily basis. Do I get tested to see if I have the mutated genes? What if I find out I do? Will it make me change the way I am living my life? What if I get tested and don’t have the mutations, but do get the disease later in life? What if I don’t get tested & just carry on regardless with what could be a ticking time bomb ticking away? Is it fair on my partner & family (maybe future children)?

Even if I do have the mutations it does not guarantee I will get the disease & not having them does not mean I won’t. I don’t believe in fate nor do I believe in predicting the future. Decisions decisions…….

Comments

A Failure – It’s A Failure

8th June 2014

Failing seems to be all the rage these days.

Fail fast. Fail quick. Fail often. Fail fast, quick & often.

A failure is a failure no matter how you spin it. Most things have a higher chance of failing than they do succeeding. That will not change no matter how many times you fail.

Working hard. Committing yourself. These are the things that will increase the chances off success.

Not everything will be a success. The key is not giving up. It’s picking yourself up & moving on to the next thing that will lead to success.

Maybe you just haven’t found the successful thing yet.

Comments

Just Use A Password Manager

28th May 2014

If you follow the news you will know that over the past few months security has been a hot topic. Quite a few high profile web services have been hacked & customer info has been accessed/leaked.

Please just do yourself a favour and use a password manager. I personally use 1Password & can highly recommend it, but there is also LastPass that gets some good recommendations. It does not matter which password manager you use as long as you are using one. If you are using the same password for multiple things, you REALLY SHOULD STOP THAT.

The argument of “Oh it will take too long to setup, I don’t have time” will only last so long. What will happen if you get hacked then have to spend even longer dealing with your bank, credit card supplier, explaining to colleagues why you can’t access email & the online store where an order was fraudulently placed using your details.

Just spend the time now. Reduce your vulnerability. Use a password manager.

Comments

Surface Pro 3 -The Average All-rounder

27th May 2014

Microsoft have touted their new Surface Pro 3 as the only device you need to carry. Their main comparison at the launch event was that you no longer need to have a Macbook Air & an iPad in your bag.

Their main focus is on making one device that you can use for everything. Is this what people want? Typically when a device tries to be & do all things, it does nothing particularly well. It is when a device is designed & developed with a focus that it becomes great. Look at the Kindle Paperwhite for example.

I want the best device for the task, not one average device.

Comments

Alarm Bells Ring When Your Focus On Price

26th May 2014

Over the years I have honed my skill in judging how well a working relationship will be with a client. This is not just for my own sake, but also for the clients. I don’t want to waste their time or cause them any stress. I want them to be satisfied not only with the finished website, but the entire process from start to finish. This is what will hopefully lead to a recommendations & future work.

When in the initial stages of a new project, the budget has to be discussed. There is no getting away from it & I always favour approaching it head on. That way there is no confusion. The client is getting a fair trade – my knowledge & skills used to  build them a website for which they pay me some money.

Every client likes to negotiate & often get a few different quotes. I have no problem with this & in most cases actually prefer it. I want the client to have made an informed choice. I want them to know their options & not go into this blindly. If they are prepared to do the research, ask the questions & do the analysis it shows they are willing. A willing client is always a good client.

Last week I had a client who was doing all the research, asking interesting questions & getting various quotes. My alarm bells started ringing when I realised that to them, the price was the most important factor in making a decision. They wanted the cheapest website possible. Now don’t get me wrong – everyone haggles the price – I do it when there is the scope to do so. This was different as this client was not really interested in the quality or features of what they were getting. All that mattered to them was that it was the cheapest. For me a website is designed to satisfy business needs & goals. You should not have a website just for the sake of it. Essentially they were willing to throw money away getting a website, just as long as it was the least amount of money. Some people would say “great, take the money” but I couldn’t.

I have been in this situation before. I have learned that when a clients main focus is the price, it is the project outcome and working relationship that suffers. The saying  of “you get what you pay for” rings true. Now I am not saying that the more you pay, the better the project will be. Be realistic and focus on the bigger picture. The balance of features, quality & cost where the client is happy and so are you will lead to the best outcome for all involved.

I think most of us in this industry want to produce the best work we can. There is nothing wrong with walking away from a potential client. I would rather do that than product work that I am not happy with & have an unhappy client.

Comments

Scripted Adverts

11th May 2014

I listen to quite a few web  & tech related podcasts. I don’t want to mention any specifically but they are all well known shows. Some are on networks, such as 5by5 & TWIT, whilst others are independent. Some of them are sponsored, which I think is great –  these shows take time & have costs (hosting & bandwidth etc) that need to be covered.

Over the past few months there has been one sponsor that has cropped up everywhere, not only on podcasts but in general advertising all over the place. Their podcast adverts have started to annoy me as they are obviously scripted – no matter which show, no matter which presenter or host – it is an identical script that is read out. It is a well written script, but that is all it is. If I had heard it once I may have thought it was an honest recommendation by the presenter, but now I know it isn’t. Not that there is anything wrong with a paid recommendation – that is sponsorship. The issue I have is all the presenters say they use the service, so why do they need a script? Why isn’t the advert unique to each. I don’t think I am the only one listening to this selection of podcasts, so I can’t be the only one to hear the advert over & over again. A broken record (maybe that should be a jumping CD?) springs to mind.

Before I name the company I just want to say that I do really like their service – I recommended them to someone recently & would do so again.

Squarespace. Please stop with the script.  Your service is great. Most people in the industry know it. If they don’t they will hear of it via word of mouth recommendation. Think of other widely used services & products. SASS, Sublime Text, Node.js etc – do any of these have scripted adverts?

Comments

Facebook mins Messages equals Facebook & Facebook Messages

11th April 2014

So Facebook have announced that they are removing messages from their main app. You should now use the standalone Facebook Messages app to access them. Ok that seems pretty simple, if only slightly annoying. Its another app to download, but ok. But wait, this only applies to the phones. Tablet versions of the Facebook app will still allow you to use messages. If you visit the website the messages will still be usable, you don’t need to visit another separate website.

I’m not really sure why Facebook have made this decision & made it apply only to phones. If anything, it is just going to confuse users as it is no longer a similar experience cross platform. Now how you use the service will change based on your device, where previously it did not matter what device you were using – it was the same everywhere.

I wonder what their logic & reasoning is behind this change.

Comments

A square peg in a round hole – Android Wear devices

4th April 2014

So Google have announced Android Wear. Currently it looks like it is going to be Google Now on your wrist, which actually could be really useful. Quick, glanceable information and alerts accessible without the need to pull your phone out of your pocket or bag.

Two watches were previewed in the developer preview video. Motorola’s Moto 360 & LG’s G Watch. No specs have been released as of this posts writing, but from the images of the watches alone, a big issue has been identified. The Moto 360 has a round face, much like a tradition mechanical watch, which makes it stand out from the crowd of existing smart watches. The G Watch is similar to existing smart watches with a square face. Here in lies the issue. Most app developers or interface designers will tell you that a grid & coordinate system is used when layout out an interface on a screen. This is the grid of pixels used to make up the screen. Typically 0,0 in the top left and so on.

Simply, if you want to position an element near the top left of the screen, you would use the coordinates 3,3 which is based on the pixel grid.

Example Grid 1

With a square screen, the grid is quite simple and obvious. Having a round screen complicates things. In effect, you start with a square pixel grid, then chop pixels off at the corners to make it a round pixel grid.

pixelgrid2

This means any app developers or interface designer will have to take this loss of screen space into account when designing their app, which is actually pretty obvious. What is not so obvious is how do they design/develop their app to make sure it is usable on all devices, regardless of  if they have a round or square screen? What will stop a square apps design simply being cut off on a round screen?

pixel_grid4

It is going to lead to a few possible outcomes:

None of these outcomes are ideal. They cause issues for developers & could lead to a poor experience for device users. In effect it could be the existing Android device screen size fragmentation issue, just moved onto smaller devices which are worn on users wrists.

It is hard to think of a simple solution to this. Developers & users are at the mercy of the device creators. Do you have any ideas?

Comments

Are companies too quick?

18th October 2013

So today I saw an advert for a car warranty company. I was curious about how much it would cost for my car so I went onto the website and filed in the short form to get the quote. Thankfully they gave the quote instantly and didn’t do the annoying thing where they e-mail it to you. Companies need to learn that a user goes to a website for a quote, so give them a quote there. Don’t send it somewhere else. Anyway, back to the point. Within 5 minuts of reading the quote on the website my phone rang. It was the warranty company asking if everything was ok. I informed them everything was fine & that I was just comparing quotes & would make a decision soon, which is entirely true.

This got me thinking about the speed of their response to me. The time between me filling in the form online & them calling me. Was it too short? Would there be a benefit to them & to me if they had waited maybe a day or so? Now I will go about my day & probably totally forget about their quote. Bad for me as it may have been the best quote & bad for them as they won’t get the business. If they had left it a few days it would have been a nice reminder for me & also maybe shown that they care about potential customers. It may have also been the reminder that led to them gaining my business. Now it just seems like they are trying to pressure sell. Instantly calling the user as soon as they fill in the form online is like a salesman in a shop walking straight up to you when you first walk through the door. Maybe it also shows that they are not busy, meaning they can call instantly.

In this modern world speed is important. Fast payments, fast websites. Time is money and all that but I do feel certain things are better done a little slower. Adjusting speed for the situation & action may lead to better outcomes.

Comments

Do not get into the web industry if you are not willing to learn

5th July 2013

This industry moves so fast. What is relevant one day is outdated the next. Version 1.0 soon becomes version 6.0 & it’s totally different to the version before it. Design trends change, programming language functions become deprecated & development methodologies evolve.

Whilst taking some time off I got talking to someone who said he could not wait to graduate and get on with his web industry career. He could not wait until he could “stop learning”. My response was “this is not the industry for you”. In this industry you are constantly learning. Things are constantly changing, updating & evolving. To stay current you have to keep learning otherwise you get left behind.

In life do we ever stop learning?

We not longer have teachers, white boards or exercise books which we had in school & university. They have been replaced by wallets, handbags and smartphones. We drink coffee instead of milk at break time. We use words like innovation & are constantly striving to better ourselves. As human beings we question everything.

Comments