Web development articles - Page 2

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'

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'

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

Store

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.

manifest.json

 {
  "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'

Arabic web fonts

I've been looking for a good solution for Arabic web fonts for while now and have been hitting my head against the wall with the lack of options available to me or the cost of buying a font and hosting it myself.

Just as I was contemplating making my own arabic font (no easy feat) it would seam that some of web services are beginning to add some decent options. Since I use Typekit I would prefer this to be the service with the Arabic fonts, but at the time of writing this isn't the case. This currently means that I would need to get a subscription to one or more of these, but hopefully it means that a change is coming across all the services so hopefully Typekit is right behind the others.

Here is a list of services with Arabic web fonts

google.com/webfonts/earlyaccess
Google has it's Early Access (Beta) list. Along side Arabic web fonts it also includes Korean, Thai, Tamil and Hindi.

webink.com/fonts
Webink ...

Read post... Posted in 'Web development'

Changing the version of SASS in LiveReload

LiveReload is great a great tool for any web developer. One of the most useful of it's features is the ability to compile SASS on save. Unfortunatly the version of SASS that is included in LiveReload isn't the latest one and it just so happened that was the version I needed (3.2 alpha). Long story short, I updated the version of SASS that LiveReload uses on my machine. I'm not sure if it will break anything but backup your LiveReload App just in case. If you ever update LiveReload you will need to redo the process (unless the app is updated with the ability to choose the version of SASS). If you don't already use LiveReload or SASS then I would recommend taking a look into them.

Step by Step

First install the latest version of SASS on your machine using terminal

 >sudo gem install sass --pre

Check that it has worked and see what the latest version is

 >sass --version
Sass 3.2.0.alpha.261 (Bleeding Edge)

Now ...

Read post... Posted in 'Web development'

A Responsive Image jQuery Plugin

There are a whole variety of ways that responsive images can be accomplished, but as of yet there is no perfect way of doing it without using a combination of .htaccess, javascript or css. My solution is no different and uses javascript (in the form of jQuery) as the coordinator of the images.

responsiveBreakpointJQ works by specifying the images that will show if the screen of the device is big enough. The data-XXX values are how the appropriate image is specified. If a screen is wider than the XXX value then that image is selected as the best one for the job.

 <img src="small.jpg" data-480="medium.jpg" data-960="large.jpg" alt="Image Alt text" />

If you would like to read more then take a look at the responsiveBreakpointJQ project on github . If you feel you can make it better then be my guest :D

Download the jQuery Responsive Breakpoint Image Plugin from git hub to checkout the code: https://github.com/Designer023/responsiveBreakpointJQ

Pros:

  • Can add as many breakpoints as needed.
  • Breakpoints ...
Read post... Posted in 'Web development'

Creating a chrome extension that uses jQuery to manipulate the DOM of a page

There are plenty of tutorials and guides on how to make a chome extension and there are hundeds for jQuery manipulation of the DOM. There are also a few about using jQuery in a chome extension, but only for the popup window. There seems to be a lack of using jQuery to actually do something on a page.This is something that too me a while to get my head around and a bit of googling to figure out, so now it's time to share.

Create a folder for the extension files. It's probably best to name it after your extension so you can find it later on.

In a plain text editor such as Notepad, Textmate or TextEdit create 3 blank documents. You can save the files as manifest.json, background.js and background.html. Using your favorite image editing software create a png icon with a transparent background (20px x 20px should be ok for now). Chome should scale the icon for the different areas it shows. Later we can create ...

Read post... Posted in 'Web development'