Articles - Page 2

CSS best practices

There are a few ways of writing css. For consistency we will adopt only one naming convention. This is lowercase and hyphen separated. It is the most readable and fits well with other CSS methodologies that are covered below.


.hyphen-separated {...}


.camelCase {...}
.underscore_separated {...}
.alllowercase {...}


Keep your selectors short and with as low a specificity as possible. A maximum of three classes in your selectors is recommended. Why? Two reasons:

  • Selectors with a high specificity can be time consuming to override
  • long selectors can bloat your css.


.my-thing { … }
.my-main-thing .my-thing { … }
.my-main-thing .my-space .my-thing { … }


.my-main-thing .my-sub-thing .my-space .my-thing { … }

Do not include one or mote #ID’s in your selectors…EVER. It’s too specific. Use #ID with javascript … but not styles.

So you like namespacing with #ID’s? Cool…namespacing is good, just do it with a class instead.


.my-thing { … }


#my-thing { … }

!important is ok in a very small number of circumstances. One example is error messages which always display the same way – red and bold. We don’t have a ...

Read post... Posted in 'Web development'

Is your site future ready?

When I first started out building websites, a while back, all that was needed in terms of SEO was a website full of content and a keywords meta tag so that search engines knew what the page was about. Further down the line they became good enough to be able to collect the information off the page and keywords were no more. This is what I dub ‘the collection phase’ as it was just an indexing of the whole internet.

We’re past that phase now and there are a few areas that are going to explode rapidly in the next few years which will greatly affect how we build websites. I’d rather make sure we’re ahead of the curve rather than playing catch up when the changes do happen.

To understand why search engines do what they do we really need to look at the bigger picture.

What is the goal of a website?

Helping visitors complete their goal is the primary aim of any website, even if the business behind it ...

Read post... Posted in 'Web development'

WordPress localhost redirects to live site

When you are developing on WordPress sites it's always quicker to work on a local machine/development server. It's essential to work from the same data as the live site so you can work effectively as possible so taking a copy of the live database and installing it locally is the best and quickest option... but there is one potential pitfall. Because WordPress store site settings in the database it means that all the site addresses that were on the live site are now on your development site, meaning every action you take on your development site such as logging in or saving a post will redirect to the live site and fail. Luckily there is a quick fix:

  1. Login to your local/development database (probably via phpMyAdmin) and find the table 'wp_options'.
  2. Update the entry 'siteurl' to your development server address.
  3. Update the entry 'home' to your development server address.

Once you have updated the entries your links and actions such as logins will work again. This also applies if you ever ...

Read post... Posted in 'Web development'

Updating node.js using npm

Node.js is a rapidly developing open-source cross-platform runtime environment. Because it’s actively developed there are often updates to the current version. Because of this lots of packages end up using versions of node.js that are newer than the one on your machine, and that can mean that the the latest plugins and utils will end up breaking.

To update node.js you can either download the installer from the node.js website or you can type a few lines of code and away you go!

Check the current version:

node -v 
—> v0.10.0

Update npm and install the latest node.js version. You can also specify a particular version of node by replacing 'stable' with a specific version number such as '0.11.00'.

sudo npm cache clean -f  
sudo npm install -g n  
sudo n stable  

Check the latest version just to make sure it’s worked:

node -v
—> v0.12.2
Read post... Posted in 'Programming'

Installing MySQL-Python on OS X with brew

OS X can be an absolute pain to get MySQL running so when you have finally resorted to using brew to install its, as I have on many occasion there is another pitfall you might face when you try to install other python packages that need to know the MySQL path.

The best and probably most common package that this happens to seems to be MySQL-Python so the following example will be what I use to demo the fix.

Assuming your virtualenv is up and running (or your installing straight on your machine) we need to do the following:

export PATH=$PATH:/usr/local/mysql/bin
pip install MySQL-Python

MySQL-Python (or your other MySQL needing package) should now install and you can get back to coding up some awesome websites.

Read post... Posted in 'Programming'

How can front-end developers work more effectively?

As front-end web developers we write code every day. Although we are usually working on one major project, our heads have to be ready to switch between different projects and other tasks at a moments notice.

Some people are naturally better at switching than others, but none the less switching is not something that we think about as we do it. I recently wrote 'How can front-end developers work more effectively?' which explores the problems and some code solutions.

Read post... Posted in 'Web development'

Swift timer

This is a simple timer, using Swift.

var theTimer = NSTimer()

//function to start the timer (if needs be)
func startTimer() {
  //start the timer with a 5 second delay
  self.theTimer = NSTimer.scheduledTimerWithTimeInterval(5, target: self, selector: Selector("timerIsDone"), userInfo: nil, repeats: false)

func stopTimer() {
  //start the timer with a 5 second delay  

//The function called when the timer is done
func timerIsDone() {
  println("Do something")

//start the timer - this can be in called as needed from another function or an init
Read post... Posted in 'Programming'

Selling with Wordpress

I've recently been working on a few different Wordpress commerce websites. What I have found is that it's not quite as simple as getting an eCommerce plugin installed and dropping in the payment details. There are a whole load of considerations that need to be thought of before a solution is even picked. Since I did the research to find out what was the best option, I thought it would be worth sharing.

You’re probably already aware Wordpress is a very versatile framework and offers a whole range of plugins and extras that allow it to be extended to cover almost any option of buying/selling. eCommerce is just the tip of the iceberg. Before I go into specific solutions I’d like to go over the key type of solutions available.

How to sell


Users can buy your products/ services from your store. This is usually you selling to users, like a normal shop. When other vendors are on your store you’re looking at multi-vendor stores or marketplaces. Amazon or the apple ...

Read post... Posted in 'Web development'

The joy of calc()

calc() is a modern css function that allows you to do basic maths in a css file. You can use it to make semi fluid layouts with great ease. This means that you can have layouts with 1 fixed width column (or more) and the rest fluid. It doesn't just stop at columns, but that is the easiest and quickest example to discuss.

The setup of calc is very simple. If we take a 2 column layout as an example, the side column always has 200px of width, the main will take up the rest, so 100% less 200px!

 /* Fixed columns */
.side {
    width: calc (200px);
.main {
    width: calc (100% - 200px);

The only minor issue is support , which extends to almost all browsers except Android and Opera Mini which currently have no support and Blackberry which has partial. IE9+ all have full support.

So using it responsibly just needs some simple fallbacks. There are some compromises, but these are the same as any pre calc fluid layout.

 /* Fixed columns with fallback */
.side {
    width: 20%;
    width ...
Read post... Posted in 'Web development'

Creating a chrome extension - an update

Since I wrote my last post on creating a chrome extension , there have been a few changes to how the extensions are built - mainly that the manifest version has changed to version 2. The original post is still fine, but there are a few tweaks needed. This post is mean mainly as an update to the original, so rather than rehash the old content too much I will skim over the basics quickly.

  • Create a folder for your plugin - name it after your extension so you can find it later!
  • In a text editor create 4 documents.
  • Save them as manifest.json, background.js, background.html and customStyles.css
  • Create a 20px x 20px png file using your favorite image editor!
  • Get a copy of jQuery . and add it to the folder.


  "name": "plugin name",
  "version": "0",
  "description": "What do I do as an extension",
  "background": {"page": "background.html"},
  "manifest_version": 2,
  "browser_action": {
    "name": "Manipulate DOM",
    "icons": ["icon.png"],
    "default_icon": "icon.png"
  "content_scripts": [ {
    "js": [ "jquery-2.0.2.min.js", "background.js" ],
    "css": ["customStyles.css ...
Read post... Posted in 'Web development'