Blog

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 ...

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 ...

Jelly and Micecream.com

Over the last few months I have been wanting to polish up some existing skills and learn some new ones. Over this time I haven't had much time to work on projects that had the scope to play around with these skills so I decided to find a simple project that I could use as a test bed. Since the vet had recently estimated my cat's age I decided on a cat age calculator.

Does the internet need more cat based websites? Probably not, but the internet loves cats and I needed a project. The project needed a suitable name and so jellyandmicecream.com was born.

I prototyped the basic functionalities and interactions in javascript and jQuery. It could have continued as a js only app but I made the decision to move the calculations to the backend so that I could use some server side languages. I did consider creating a Rails app for the project, but not knowing enough about ruby or rails I decided it would be better to work ...

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 ...

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 ...

Updated site

I have spent the last few months working on this update to my site. The update is due in part to some of the skills I have developed over the past 6 months.

Apart from the style change to the overall site design the main changes are the responsive mobile first layout, responsive image, web fonts and the addition of a new comments system. There are of course a few other updates to the backend code and html, for enhancing load times and adding some extra enhancements here and there.

Take a look at my portfolio , read another random blog post or get in touch .

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 ...

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 will ...

Facebook App Center Images Template

Facebook's app center has opened it's doors to apps but there seems to be quite a few images that need to be created to get it live. To keep them all neatly together and easy to keep in track I thought it would be handy to have a .psd with all the image sized layed out as smart layers so they are all just a click away. As a bonus I have also setup the slices so it's ready to export and upload to Facebook.

It's still rough around the edges, but here it is. Please download, use and modify as you see fit :)

Download the .PSD on github

BT Homehub Port Forwarding for RDC

Getting a remote desktop client to work can be a pain. Having used OS X's default share screen option on a local network and found it good, but lacking in some respects, I typically wanted more control. Apple Remote Desktop seemed the logical extension to that.

Getting it to work in anyway with the BT Homehub 3 was far from clear, but after many attempts at trying everything possible, and asking the IT guy at work, it's now working. For my own sanity and those in the same situation it's only good to share, so here is my solution.

  1. Log in the home hub ( http://bthomehub.home )
  2. Navigate to Advanced > Port forwarding > Supported applications
  3. Add a new 'Game or Application' with the following ports and click apply when done
    • Any 5900-5900 -> 5900 -5900
    • Any 3283-3283 -> 3283 -3283
    • Any 5988-5988 -> 5988 -5988
    • Any 22-22 -> 22 -22
  4. Go to Configuration
  5. Select your newly named 'Game or Application' and importantly for the device use the internal IP of your computer. If you use the device ...