Over the past few months I’ve been working on a new little app. Yes a few months is a long time to spend on a ‘little’ app but I’ve been working on it by myself and only in my spare time, also my designing skills definitely aren’t on par with my development skills so designing stuff takes me ages.

Anyway, the main reason I created this app was because it is an app I really would like to use myself. In fact I’ve actually been using it as I’ve been developing it!

The new app is called bindrr. It lets you log in and store all of your favourite recipes in one place whether the recipe is from a website, book or anywhere else. All of the recipes you add are easily searchable and you can access them from any computer or mobile device with an internet connection (native, offline mobile applications will hopefully follow soon).

I’m looking for a few beta testers who enjoy cooking and would like to try out the app before anybody else. If you like the sound of bindrr, head over to the site and fill out the form! I’ll be sending out the beta invitations pretty soon.

I was half way though a new theme that looked totally different to this one but then decided to go for a really clean, minimal look to the site so that it’s easier to browse and read content which I hope is what most people come here for anyway.

The new theme uses the Thematic WordPress Framework as it’s base which meant I could get the site ready in super quick time!

Dropbox – Free

Not only is this (in my view) an essential iPhone app but it is an essential app to use on OSX, Windows, Linux, iPhone, Android and probably more. Dropbox allows you to sync a folder with the web so that you can access the files on any computer you have Dropbox installed on. It also does a load of other things such as allowing you to retrieve deleted files. Head over to the Dropbox site to see a full description of what the application does.

The Dropbox iPhone app lets you access all of the files in your Dropbox from anywhere. It’s also a great way of getting PDF files onto your iPhone which can sometimes be a pain.

Instapaper – Free / $4.99

I’m sure I’m not the only developer (and probably other professions) that has an RSS reader full of really interesting articles just waiting to be read that I never seem to get around to reading. This is where Instapaper gets useful. Once you have signed up you can add a ‘Read Later’ button to your browser, simply go to an article you want to keep for later and click this button. Instapaper will add the articles you choose and next time you open up the app whilst you have a wifi connection it will save nice easy to read versions of the article onto your phone that you can open and read whenever you get a free minute no matter where you are!

Reeder – $2.99

Pretty simple this one. Reeder is the best looking, easy to use, feature packed RSS reader I have found for the iPhone. It works in unison with my Google Reader account (which I use on my desktop). Plus you can save straight to Instapaper from it!

They are also working on a version for the Mac.

Wunderlist – Free

Wunderlist is a very good to do list application that has versions for Windows, Mac and iPhone. All of your items are synced via the web so you can have multiple instances running in unison.

They have been adding a lot of new features lately which worries me a bit because I hope they don’t go the way of a lot of other to do list apps by trying to do so much that it becomes a bit of a pain to use. So far though everything works very well and looks great so maybe I’m being a tad harsh there.

Instagram – Free

Instagram is a nifty little app that lets you take photo’s, add a cool filter to them and then share them with your friends on Twitter, Facebook and some other places.

Whilst not really helping with productivity like the other apps I’ve mentioned, I think Instagram deserves a mention for being so much fun.

Hopefully those apps will give you something new to try out and like I said before feel free to add your own in the comments, I’m sure there are hundreds of great apps that I’ve missed!

Now that my portfolio is out of the way I’m working on the new version of this site, unfortunately me being predominantly a developer means it takes me ages to design something that even resembles something good so you might have to make do with this theme for a little bit longer.

Any free time I’ve had has been spent either on my xbox or on Forrst. Forrst is a pretty awesome, invite only site for designers and developers to connect, show their work and get help. Anyway, I’ve got a spare invite so if someone thinks Forrst is something they’d like (and would use) leave a comment with a link to some of your work and I’ll send it over.

This is where Postmark comes in, they say that sending your transactional emails through their API can make them look better to the recieving server so they’re less likely to be marked as spam. What’s more, they even allow you to track how many emails you’ve sent and how many went into the intended recipients spam box. This promise plus the offer of 1000 free emails on registration and at only $1.5 for 1000 emails I decided to test Postmark out on a new application I was working on.

Setting up Postmark is as easy as whoever you manage your DNS through makes it! First off I signed up for a free Google apps account for my domain, this part it really straight forward. Next I signed up for Postmark account, again nice and easy. The next step was to set up the sender signatures, this is where it got tricky.

My main server is with 1&1 and so the DNS was pointed at the 1&1 name servers. I discovered that 1&1 will not let you add the required settings to the DNS, it’s a no-go. Luckily, I had registered my domains with NameCheap who do let you add TXT information to the DNS, it just takes a bit of digging to find out how so I thought I’d share it as it might help somebody.

First of all you need to make sure the DNS is with NameCheap. When you are looking at your domain in the ‘Modify Domain’ section there will be a button that says ‘Transfer DNS Back to Us’ (see below).

I saw a lot of people trying to do the next step before this one and get stuck. You won’t be able to see the button in the next step until you have done this!

Once I’d transferred the DNS back to NameCheap I needed to point the domain at my hosting so that my site still worked. You should see a new button that says ‘All Host Records’ (see below). This is the button you couldn’t see without transferring the DNS to NameCheap.

Pointing the domain at your hosting is simple. Copy the settings below but use your own IP (I’ve blurred mine out to stop people getting confused).

The top two make sure that http://yourdomain.com and http://www.yourdomain.com both point to your site. The third one points any subdomains at your site. As far as the server is concerned http://something.yourdomain.com is a different domain to http://yourdomain.com. This just points them all to the same place (this one is optional really). The fourth one just lets you use FTP on your site by going to ftp.yoursite.com.

Next we need to do the last bit, adding the SPF and DKIM values given to us in the Postmark application. As far as I know, each signature has its own values given to it by the app. You will have to log in to your account, select the correct server (you will only have one if you’re setting your first site up) and then click the ‘Sender Signatures’ link. Anyway, the codes will be something along the lines of:

v=spf1 a mx include:spf.mtasv.net ~all

k=rsa; p=MHwwDQYJKoZIhvcNAQEBBQADawAwaAJhALZllb8wNEhCMSNSdMXG3eL...

The top code is the SPF one and the bottom code is the DKIM one. You should still be in the ‘All host records’ section of namecheap. We’ll do the DKIM one first as that one took me longest to get right.

Under the * and ‘ftp’ subdomains add another entry. In the first box you want to type:

pm._domainkey

In the second box copy and paste the whole second line of code that Postmark gave to you (starting with k=rsa; p=MHww…). In the third box select ‘TXT Record’ and put 1800 in the TTL box.

That should do it for the DKIM. For the SPF. I put an @ symbol in the first box because it says in the legend at the bottom of the page that @ = none. Just leaving the first box blank might work for this one but I haven’t tested it, the @ worked for me.

Again in the second box paste the text from the first line of the code the app gave you. Choose ‘TXT Record’ and 1800 again and save it. That should do it, you might have to wait a little while before the app can see the changes you have made.

Here’s an image of how my finished entries look:

Also, if you have any problems head over to the Postmark support section where I found Chris to be very helpful.

First for a re-haul is my portfolio site, because I wasn’t doing a totally new design, just a pretty major upgrade/re-design sort of job I decided to start with that one. The design for that is about 80% – 90% done so I’ll be starting to code it in the next few days, I’ll get some links up to that when there is something to see.

Second in line for a facelift is this site. I’ve decided I should really do a custom design for this site rather than use one from ThemeForest (aff link). I did toy with the idea of switching to Tumblr so that I could have a go at making a skin for Tumblr but I decided against it since it could pretty much destroy the traffic I get from search engines if I started moving links and pages around. In the end I decided I’m just going to go for a nice simple WordPress theme (made by me this time!).

After that I’m going to finish the project I’ve been working on for the last month so that I can launch it. I’d also like to make an Android / iPhone app and an API for it if I get the time.

Some other suff you might like

First off, Forrst. I got invited to Forrst by Kyle the creator and it’s one of the first social things that I’ve really got hooked on. I might look on Twitter or Facebook from time to time but I seem to be on Forrst multiple times every day. It’s invite only at the minute so if you’re a developer / designer get your name down and you’ll get an invite eventually!

Next up, I’ve been a CodeIgniter addict for a while now (in fact, that new project I was talking about is written in it!) but I only found out about the CodeIgniter Podcast recently. So far I’ve only listened to the first episode but I found it really informative and I’ll definitely be listening to the rest.

Today I came across a great little site that lets you get the links to the latest versions of the most popular javascript libraries quickly and easily.

You find your library on the page and click the ‘Copy’ button. Then all the code you need to include the library in your page is copied to your clipboard.

I really like simple, easy to use sites like this that do one thing and do it well rather than trying to do too much.

The Google Font API allows you to use any font from their font directory or you can use the font loader to load other fonts which they co-developed with TypeKit.

Using the Google Font API

There’s no point in re-inventing the wheel so I’ll just link to a great article and video guide by Jeffrey Way over at Nettuts. You can have a look at his article here.

Other Info

The great thing about the Google Fonts API is the fact that you can still use CSS3 effects on your text if you want to. As for page performance, obviously the initial download may slow your page down slightly but they do try to cache everything to minimise and extra loading times, just make sure you don’t try and load too many fonts!

I wanted to make a quick bit of javascript that would enable or disable a text input based on whether a checkbox was checked or not. I thought this might come in handy so I made it into a tutorial and posted it here. This script will work for any amount of checkboxes and text inputs on a page. You can see a working demo of it here.

First we start off with our blank HTML page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enabling and disabling a text input with a checkbox using jQuery</title>
</head>
<body>
</body>
</html>

Next include the jQuery js file from Google.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
</body>
</html>

Next we add our text inputs and check boxes. I have also added some labels so that you can see which check box goes with which input. I have added 3 inputs so to show that you can use this technique with multiple boxes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox"/>
<input type="text" name="test3" />
</body>
</html>

Now I add a class to each check box so that I know which check boxes I want jQuery to watch for clicks on. You don’t have to do this but you might get some strange results if you didn’t and you had other check boxes on your page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox" class="input_control"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox" class="input_control"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox" class="input_control"/>
<input type="text" name="test3" />
</body>
</html>

I’ll also add a value to each check box, this will match the name of the input I want it to control.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox" class="input_control" value="test1"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox" class="input_control" value="test2"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox" class="input_control" value="test3"/>
<input type="text" name="test3" />
</body>
</html>

Next, the jQuery. First of all we need the javascript tags, this normally goes at the end of the document so that the HTML & CSS are loaded before any javascript, giving the user the impression that the page is loading faster.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox" class="input_control" value="test1"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox" class="input_control" value="test2"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox" class="input_control" value="test3"/>
<input type="text" name="test3" />

<script type="text/javascript">
	$(document).ready(function(){
//Our code will go in here
	});
</script>
</body>
</html>

This tutorial will only deal with inputs that are all enabled when the page first loads (I might write another one in the future that covers having some disabled when the page loads) so we need to make sure that all the checkboxes are checked when the page loads. I did this with javascript, this might not be the right way to do it if you want it to degrade gracefully. To check all of my checkboxes when the page loads I use the code.

	$(document).ready(function(){
		$('.input_control').attr('checked', true);
	});

Next I write some jQuery code that tells jQuery to do something whenever someone clicks one of the checkboxes with the class of ‘input_control’.

	$(document).ready(function(){
		$('.input_control').attr('checked', true);
		$('.input_control').click(function(){
//Do this when someone clicks something with the class input_control
		});
	});

Now we do a simple if statement that says ‘if the check box was checked then set the disabled attribute to false, if the check box was unchecked then set the disabled attribute to true.

	$(document).ready(function(){
		$('.input_control').attr('checked', true);
		$('.input_control').click(function(){
			if($('input[name='+ $(this).attr('value')+']').attr('disabled') == false){
				$('input[name='+ $(this).attr('value')+']').attr('disabled', true);
			}else{
				$('input[name='+ $(this).attr('value')+']').attr('disabled', false);
			}
		});
	});

And that’s it! I’ve added the code of the completed page below and you can see a demo here. There are probably other ways of doing this, but this is the simplest way that I came up with. I did try doing this with toggle rather than using an if statement but although the disable/enable checkbox worked, the checkbox didn’t check/uncheck.

Completed Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox" class="input_control" value="test1"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox" class="input_control" value="test2"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox" class="input_control" value="test3"/>
<input type="text" name="test3" />

<script type="text/javascript">
	$(document).ready(function(){
		$('.input_control').attr('checked', true);
		$('.input_control').click(function(){
			if($('input[name='+ $(this).attr('value')+']').attr('disabled') == false){
				$('input[name='+ $(this).attr('value')+']').attr('disabled', true);
			}else{
				$('input[name='+ $(this).attr('value')+']').attr('disabled', false);
			}
		});
	});
</script>
</body>
</html>