Articles

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  
  self.theTimer.invalidate()
}

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

//start the timer - this can be in called as needed from another function or an init
startTimer()
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

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'

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

Read post... Posted in 'Projects'

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'

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 .

Read post... Posted in 'News'

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'