Articles - Page 3

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 has it's Early Access (Beta) list. Along side Arabic web fonts it also includes Korean, Thai, Tamil and Hindi.
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:


  • 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'

Installing specific versions with easy install

Recently I have been working on quite a few projects that require different versions of packages to run. Each setup has been running in a virtual environment (that is a post for another day) and setting them up with the required package rather than the latest that easy_install can find is really simple.

    easy_install "django == 1.3"

That will find and install Django version 1.3... simple as that!

Read post... Posted in 'Programming'

Flipping a UIImage

Flipping an image using objective-c is so easy once you know how...

//Create a normal image
UIImage* img = [UIImage imageNamed:@"myImage.png"];
//Flip it
UIImage* flippedImage = [UIImage imageWithCGImage:img.CGImage scale:1.0 orientation:  UIImageOrientationDownMirrored];

That's it! Now to have it as an method we can use more conveniently, try this:

-(UIImage *)flipImage:(UIImage *)img {
    UIImage* flippedImage = [UIImage imageWithCGImage:img.CGImage scale:1.0 orientation:  UIImageOrientationDownMirrored];
    return flippedImage;

Then we can send any image to it and it will return a flipped version.

Read post... Posted in 'Programming'

Basics of the NSNotificationCenter

The uses of NSNotificationCenter can be many; It is handy for using to notify the app that a background download of data, a post of some kind is done, or some calculation is finished. It can also be useful for letting sub views know when some root level functions happen in the app such as shutdown/sending to background because the user tapped the home button. In this example I will be doing just that.

In the AppDelegate you should find a method named:

- (void)applicationDidEnterBackground:(UIApplication *)application

This is called when the app starts the process to pause into the background state. Since this method can only be called by the app delegate and not a sub view notifications are ideal for subviews so that they can do what they need such as save data or stop heavy processing of data.

- (void)applicationDidEnterBackground:(UIApplication *)application{
   [[NSNotificationCenter defaultCenter] postNotificationName:@"UIApplicationDidEnterBackgroundNotification" object:self];

'UIApplicationDidEnterBackgroundNotification' is the name of the notification we send out. If we name notifications in a smart way it makes sense when ...

Read post... Posted in 'Programming'

Getting Django & Python to work with MySQL on OS X 10.6.8

When setting up a new mac or fresh install of Mac OS X there is a issue that many developers may come across. The issue is with getting MySQL-python to work properly. This guide was written with 10.6.8 in mind, but it will probably work for earlier versions of the OS as well as (hopefully) 10.7 a.k.a.Lion.

EDIT: This will get you up and working, but for some reason it needs you to type the following into terminal before you start each time:

export DYLD_LIBRARY_PATH=/usr/local/mysql/lib/

After you have typed this it will work until you next quit/restart. I will update this when I have figured out the best way of adding this into your paths so that you don't have to do it each time. If you know then feel free to comment below. Thanks.

The way to get this to work is a good clean install. You can google for how to remove older versions of MySQL , and I wouldn't remove ...

Read post... Posted in 'Web development'

Why I decided to have more than one photographic blog

For the whole time I have been taking photographs I have been bothered by one issue more than any others. It all boils down to the publishing of images. This issue is that of keeping images in distinct streams for what they are. A small number of my images are portfolio worthy, more are pretty good (if I do say so myself), a few are for keeping track of camera setups, ideas and plans and others are no more than 'visual tweets'. The issue of publishing was that of keeping them separate and with strong enough content on each of them that they could stand on their own.

With all the sites that have sprung up with the whole 'web 2.0' thing and one of those that manages to survive from round one I finally feel that the issue is almost at an end… only time will tell how well this new policy of mine stands.

Here is how it boils down:

Portfolio worthy: Coming soon - hosted on this site;

The good: Flickr - http ...

Read post... Posted in 'Photography'

Detecting Javascript on pageload to preempt slow jQuery

jQuery is great, but sometimes on some browsers/devices it can be pretty slow to be implemented and take effect. I'm looking at you iPad/iPhone!

Why is this such a problem?

In the case I came across this was a problem because the jQuery .hide() I was using was acting after the DOM was loaded and the iPad was slow to do this. It was creating a noticable 'pop' when the page was loaded before elements then disappeared. Not the end of the world, but annoying. I asked on stackoverflow and this is the best solution that was provided, not to mention being a bit of genius.

It works by applying the class to the document if javascript is present, otherwize the hide class is not applied and we get a nicely enhanced page for the javascript users.

You will need to put in javascript tags in the head of the document:

document.documentElement.className = 'js';

Then add this to your css, and target any of the elements you want to hide stright ...

Read post... Posted in 'Web development'