Generate your own free SSL certificate in Ubuntu

|
For my Passbook project I wanted it to work over a secure connection, however I did not want to pay the $50 to $500 per year that I would've needed to pay for a single site or wild card certificate. Therefore I decided to create my own.

Please note that before following this guide you need to know self signed certificates will cause error like messages to be shown to your website visitors because the browser cannot identify the certificate issuer (you). Also, while I did this on my Ubuntu server most of the commands will work as long as you have OpenSSL installed.

For this example I will generate a wild card certificate for my site: 24 Hour Apps; therefore all certificate related file names will be 24ha.

The first step to create a home for your certificate files; I did this in my root home directory. Then generate your RSA private key. The commands achieve this are:

mkdir ssl
cd ssl
openssl genrsa -des3 -out 24ha.key 1024

You will be asked a few questions. Fill them out as accurately as you can. You will also need to set a password for your private key. Please remember this as you will need to later on.

The next step is to generate your own certificate signing request. You can do this with:

openssl req -new -key 24ha.key -out 24ha.csr
You will be prompted to enter the password you typed before for your private key. Enter it and create your CSR.

The following step is optional and removes the password from your private key so that when you launch Apache with mod_ssl you do not get requested to type in a password. For servers with monitoring software that automatically restarts processes this is quite handy. The code for removing the password is:

cp 24ha.key 24ha.key.original
openssl rsa -in 24ha.key.original -out 24ha.key

Please note that your original key still exists and is now called 24ha.key.original.

We can now generate our SSL certificate with the command:

openssl x509 -req -days 365 -in 24ha.csr -signkey 24ha.key -out 24ha.crt
You will be promoted to answer more questions. The most important answer you give will be to the question "Common Name (e.g., YOUR name)", you need to enter your website address ie. www.example.com or for wild card entries *.example.com

Now that we have our certificate we need to make it available to Apache. This part of the guide becomes more Ubuntu specific as other Linux distributions will have their Apache files located elsewhere. However, to give Apache access the first step is to copy the SSL files over and enable mode SSL. To do so type:

cd /etc/apache2/
mkdir ssl
cp ~/ssl/24ha.key .
cp ~/ssl/24ha.crt .
a2enmod ssl


Now we need to enter a virtual host entry for our SSL enabled domain. The following is an entry I have in the file /etc/apache2/sites-available/passbook.24hourapps.com

<VirtualHost passbook.24hourapps.com:443>
SSLEngine On
SSLCertificateFile /etc/apache2/ssl/24ha.crt
SSLCertificateKeyFile /etc/apache2/ssl/24ha.key
ServerName passbook.24hourapps.com
DocumentRoot /home/passbook/www/

<Directory /home/passbook/www/>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Order allow,deny
allow from all
</Directory>
</VirtualHost>

Once you have created your virtual host entry restart Apache (using /etc/init.d/apache2 restart) and test your new secure site. For my example this is https://passbook.24hourapps.com

If all went well you should see the Firefox's, or whatever browser you are using, message saying the secure connection has failed due to an unknown issuer. You will need to add an exception for the certificate before viewing the secure page. Adding the except is a 3 or 4 click process that is not very intuitive. However once it is done you can have cheap secure connections between your server and your web browser.

Linux Tips 9: Find recently modified files

|
Back when I was developing at a company where no version control systems were used and CSV was the pain it still is now, going without a system at all was preferable than trying to get a working CSV system. However as expected I often find my self unable to find some code that has been overridden by a college and would find it difficult to locate the files he had changed.

Luckily find, the Linux command, is quite powerful and can show you a list of all recently modified files. For example, if you come in to work on Monday and found out that a weekend coder was brought in and made some changes without leaving any documentation all you would need to do is type:

find . -mtime -3
The above code will find files that have been modified less than 3 days ago. To be more specific and just check for the file change time, use:

find . -ctime -3
To be even more specific you can set a date range by using:

find . -ctime +1 -a -ctime -3
Which will find all files changed, and thus modified, at least one day ago but within three days ago.

For those wanting to check whether their employees are doing what they said they are, doing this check is also an easy way to see just how many files were updated to implement the "super comprehensive overhaul" that just had to be done.

CakePHP model component for quick model actions

|
CakePHP's scaffolding controller actions provide a very nice template for basic model actions such as add, edit, delete. However my problem with them is that they are too verbose for something used so often. Therefore I set out to abstract them into their own component that can achieve the same code that an entire scaffold action does with just a few lines.

The results of my efforts is the model component, available in full at paste2.org. Please go there to see and download the source code. I will just outline its features here. Please note that the component uses a global function called dot, which is simply a dot notation array access function I wrote. Please see my PHP array dot notation access article for the source code to that.

The component contains two main methods for use. They are add and edit. Both methods will automatically check the parent controller's data variable, which is automatically filled if you used CakePHP's form helper for all form inputs. Add and edit are basically the same method with add calling the create method on a given model prior to saving and edit checking that an id is provided before saving.

Add/edit accepts the following parameters: $modelName is the name of the model that is to be saved, ie. User. $params is an array with the following optional items:
  • success: Sets the flash message to display on success
  • successUrl: Redirects to this URL after the model data have been successfully saved
  • fail: Sets the flash message to display on failure
  • failUrl: Redirects to this URL if the results of the save is false
A sample call from a controller looks like the following:

$this->Model->edit('User', array('success' => 'Your account details have been saved', 'successUrl' => '/messages/thanks', 'fail' => 'Sorry, your account details could not be saved please correct the following errors and try again'));
That code will redirect the user to /messages/thanks and show the success message while leaving the user at the current page to correct any errors that were detected by the User model.

The component also auto-loads any model that it does not find in the controller so one does not need to worry about specifying the model in the $uses array if the model will not be used often. However I find that if you are performing creation and update actions then you will need to load the model for the viewing page anyway.

It is possible to extend the component to support delete as well although I do find that just calling the default del method is simple enough, which is why I did not include it in the component.

Linux Tips 8: Time stamp file names for backups or archives

|
When doing simply backups (non-incremental) it is useful to be able to automatically time stamp or date stamp file names. This makes archives much easier to navigate when it comes time to retrieve a backup.

The command for doing this is quite simple. To just create a file with a time stamped file name, use the following command:

touch myfile-$(date '+%Y-%m-%d-%T')
The command will produce a file called myfile-2009-02-25-17:32:01 You can also use it to make backups when combined with tar. The following code will create a date stamped gzipped tar file of a directory called test.

tar czvf test_backup_$(date '+%Y%m%d').tgz test/
Using the above commands with cron can allow you to quickly create a very simple, yet effective, backup system for any important folders that you need to archive.

Switching CakePHP debug mode based on URL

|
For me I like to maintain at least two versions of any code base. One for development and one for production. For larger projects where an approval process tends to occur slowly one would also need to have a client testing/staging version as well. Each of those versions ideally should operate differently and use at least different databases.

To manage all these versions and configurations one could branch and update the database configuration files manually each time. However I believe the best way is to have the code detect what URL it is in and change settings based on the URL detected. Therefore if the cake application is being access from http://dev.example.com it will retrieve all data from the development database.

Setting this up is quite easy and I do this before I begin every project. The first step is to alter app/config/core.php, which is where the debug mode is normally specified. In it you will want to include a function before everything else to detect whether or not the application is being accessed from the development URL. The code required is below:

function dev() {
if (isset($_SERVER) and preg_match('/^dev/', $_SERVER['HTTP_HOST'])) {
return true;
} else {
return false;
}
}

Then you will make your core config file's debug mode line be conditional based on the results of your dev() function.

if (dev()) {
Configure::write('debug', 2);
} else {
Configure::write('debug', 0);
}

By placing the dev() function in the core configuration file it means that it will be available to all files in your application. The config file is imported even earlier than the bootstrap file.

To make your database configuration switch based on the URL create the following function in app/config/database.php

function DATABASE_CONFIG() {
if (dev()) {
$this->default['database'] = 'mydevdb';
}
}

The above code assumes you have created a mirror development database the same as your live version with the same login and password.

The dev() function can also be used in emails, which allows for simplified email debugging, which I will write about in another tip, but if you want a quick method simply update any destination email with your own to allow you to test all email functions with live data without having puzzled clients.

Project alpha: Passbook - 90% complete, finally

|
Wow, it seems like not so long ago that I dreamed of having this project done within a week. Now, almost two months later, it is still ongoing. The project is now functionally complete and that is why I am posting about it. I personally would use it now, although I will not until I move it away from the development only URL and on to a live URL. Once that is done I look forward to moving away from Google Notebook as my main password keeper.

Spending a few hours a day on the project has not been easy. With an eight hour work day, family, friends, and spouses to manage it is not simply a matter of just sitting down and working. Juggling everything have been a great learning experience for me and although I did not achieve what I originally wanted I do believe that by setting myself up for failure, in a limited sense, has been helpful in making me achieve far more than I otherwise would've.

The site really is only 90% functionally complete. I still need to write a lot of copy and do a lot of screen shots so that other people can understand my vision for the program, which is to be the easiest to use password keeper online. That is why I have added a lot of AJAX candy to make actions such as saving, editing, etc. as fast as possible. My goal is to be able to enter a new account within about 30 seconds of me logging in. With my limited testing I believe I have achieved that.

I key decision for me with regards to the completion of this project was whether to allow myself to feature creep on the project. While I have been "editing", to copy a commonly used phrase on Project Runway, a lot I have allowed two features through that I felt were important enough to launch with. They are: SSL support and export functionality. My decision to implement those features are purely based on the fact that I would not sign up to a password keeping service unless I knew they supported SSL (although I do not always use Google Notebook with SSL enabled; but they are Google and they have already established a high level of trust with me), as well as allowing me to leave without thinking twice about it.

Therefore I have implemented SSL, with my own signed certificate as there is no budget for a paid one, and will implement CSV export this week. Although I am unsure how successful the project will be I am really quite glad to just be able to scratch my own itch. That is what I believe development should be about. Projects of passion whose success or failure is inconsequential because it fulfills a need you feel is not adequately being met by whatever is on the market now.

iPhone calendar recreated in jQuery and HTML

|
Stefano Verna has created a very nice iPhone calendar like display using just jQuery and HTML. The calendar is constructed with a basic style-less table serving as its base with hover over popups showing even information for dates of interest. It is both a visually elegant and very easy to implement using only 64 lines of Javascript. In theory it should be very easy to convert this to a plugin so that it can be reusable in an AJAX context with dynamic paging and re-initialization. The screenshot is shown below.

The only problem I have with it is the it is not a printable calendar by default. However the apple calendar style should be easily ported into a printable CSS stylesheet.

Linux Tips 7: Pushd and popd command how to for easy directory traversal

|
Moving around directories can sometimes be a real pain in Linux/Unix/OS X. With more descriptive directory names and source code trees that group all sub-folders in a MVC pattern means that you will often need to jump between three or more directories to edit the one page in your application. Therefore it is very important to be able to quick jump between directories. One way is to always start at the base and re-launch your cd commands from history. The alternative is to use the Linux command to enable quick traversal between directories of interest.

The basic commands in this how to are: pushd and popd. They work based on the concept of a stack and you can cd into directories using pushd, which adds the new directory on to the stick, and return to previously visited directories using popd. An example is shown below:

[1014 paul:~] pushd Downloads/
~/Downloads ~
[1015 paul:~/Downloads] pushd ~/Documents/Contracting/
~/Documents/Contracting ~/Downloads ~
[1016 paul:~/Documents/Contracting] dirs -v
0 ~/Documents/Contracting
1 ~/Downloads
2 ~
[1017 paul:~/Documents/Contracting] popd
~/Downloads ~
[1018 paul:~/Downloads] popd
~
[1019 paul:~]

The above code shows me going from my home directory (~) and navigating to my downloads folder, then my contracting folder. You can see with each pushd command it is giving me a view of the stack, with the most recently executed pushd target on top (top being left most). You can also explicitly view the stack by executing the dirs -v command. Finally I use two popd
commands to pop items off the stack which brings me back to my home directory.

PHPMailer UTF8 unicode charset support in email messages

|
I recently came across a problem where email being generated from our system contained user input that used the UTF8 unicode charset. PHP UTF8 support is normally pretty good however it seems that PHPMailer does not do automatic charset detection on outgoing emails. The solution though is quite simple. Just set the charset to UTF8 manually in PHPMailer and UTF8 encoding will be used. The code required is:

$myPhpMailerObj->CharSet = 'UTF-8';

Project alpha: Passbook - Tag clouds Cake PHP tutorial

|
A key feature I wanted for Passbook that I found lacking in other password applications is a tag cloud of my password groups/lists. A HTML tag cloud is actually a very simple element. All it contains is a list of links with classes that adjusts the font size based on the weight of each link. In the case of Passbook the weight is determined by the number of passwords in a group. I will start by showing the end result:
From that it is easy to see that the group efwfe (yeah, I am pretty lazy with test data) has the most passwords and is what I am most likely to refer to often. Less popular groups fade into the background with their smaller font so that focus can quickly be placed on the high weight items.

The first step in creating a tag cloud is setting up how you want your fonts to look. I have the following CSS styles set for the font sizes (.c1 to .c5) as well as the spacing between tag items (.cloud .a).

.c1 { font-size:100%; }
.c2 { font-size:120%; }
.c3 { font-size:140%; }
.c4 { font-size:160%; }
.c5 { font-size:180%; }
.cloud a { margin-left:0.8em; }
.cloud a:first-child { margin-left:0; }

Calculating the weights is a bit more involved. I wrote the following function in my Pgroup model, which is what my main tag cloud elements of password groups are, with each PGroup model containing a cache field called pitem_count that stores the number of password items belonging to that group. The function setCloudWeights(groups) takes the output of a $Pgroup->find('all') and sets the weights.

// Set cloud weights, expects $groups to be results of find('all')
function setCloudWeights($groups) {
// Vars
$cloud = array('min_weight' => 1, 'max_weight' => 5);
$ceil = max(array_keys(Set::combine($groups, '{n}.Pgroup.pitem_count')));
if ($ceil < $cloud['max_weight']) $cel = $cloud['max_weight']; $floor = round($ceil / $cloud['max_weight']); for ($gi = 0; $gi < g ="&"> $cloud['max_weight']) $g['cloud_weight'] = $cloud['max_weight'];
}

return $groups;
}

The function returns an array containing a cloud_weight attribute that is between 1 and 5, which we can use to reference the correct CSS style. The function uses minimum and maximum weights to stop all tag items looking like the maximum font size; the maximum is also used to scale down counts into weights that fit between 1 and 5 when a tag item with more than the preset max is found. You can change 1 and 5 to anything you want and the code will do the rest. Although you will need to create CSS class for n..m depending on what you change 1..5 to.

The function makes very little actual change to the result set created from Cake PHP therefore you can still use it normally. Therefore to generate the cloud I use the following code in my view. It assumes that you have put the results of setCloudWeights(...) into a view variable (using $this->set(...) in the controller) called $cloud. The view code is shown below.

<div class="cloud">
<? if (empty($cloud)): ?>
You have no groups right now.
<? else: ?>
<? foreach ($cloud as $group): ?>
<? $g =& $group['Pgroup'] ?>
<a href="<?= $html->url("/passwords/{$g['name']}") ?>" class="c<?= $g['cloud_weight'] ?>"><?= $g['name'] ?></a>
<? endforeach; ?>
<? endif; ?>
</div>

The code provides the basics of a tag cloud by creating our list of links and setting the link class between c1 and c5. You will need to change the model names and attributes to suit your circumstances, however implementing the three sections should not be too difficult. If it is, then leave a comment and I'll try to help our as well as improve on this Cake PHP tutorial.

Class design using the behaviour tree diagram system to create jQuery plugin class models

|
In a previous post I wrote about my experience using behaviour trees diagram system with Javscript. The result of which was quite good. However I still found the way I was coding the behaviors from the chart into the function to be quite inefficient. Furthermore the singleton class design I was using to implement my the Javascript functionality in Passbook did not fit well into the object oriented paradigm that behaviors trees were intended for, which meant that my class models became much larger than it needed to be.

One idea that sparked my interest in further research into create good Javascript objects was seeing how a complex object such as a jQuery calendar date picker could be have a class model that was completely modularized to the point where one could attach it to pretty much any input on the page and have it set up to fill data for that input. My research led me to find the basic pattern on how to create a jQuery plugin. The jQuery plugin scoping actually makes coding objects in jQuery very easy with minor syntactic overhead. Using my previous example the design that combined state and actions can be combined into one object and method.

State:View > Action:Edit > Behavior:View.Title.Hide, Editor.Attach(View.Title)
State:Edit > Action:Save > Behavior:Editor.Controls.Hide, Editor.Loading.Show, Editor.Form.Submit

Can become:

As you can see, the design now becomes a nice bridge between the mockup and the final class model. The abstraction of the actual code becomes more relevant and less confusing by removing state information. And this charge can be created by simplifying reviewing mockups and all user interaction elements on the mockup. For those interested the above chart was created using the free and very fast mind mapping tool MindNode (OS X).

I will write about how to create fully modular object oriented code in jQuery using the plugin pattern in another post. However I can state now that it took me a few implementations before I was fully rid of the singleton class design habit that was developed from reading too much simple Javascript even handling examples. For now I will show you skeleton plugin code for the above object, which is really very elegant. Please note that the object name is now objectt to avoid conflicts with language reserved words.

(function($) {
$.fn.objectt = function() {
this.each(function() {
// Initialize object
var obj = $(this);
obj.title = obj.find('h1');
obj.loading = '<div><img src="loading.gif"/></div>';

// Events
obj.find('.edit').click(function() { edit(obj); });
obj.find('.save').click(function() { save(obj); });
});
}

function edit(obj) {
// Do stuff with obj here
}

function save(obj) {
// Do stuff with obj here
}
})(jQuery);

The above plugin can be called by calling $('.myobject').objectt(); when the document is ready and it shall be transformed from a simple HTML element into a Javascript enabled interactive object. Furthermore unlike singleton class models you can use this object on multiple matching elements and scoping and referencing the correct elements will not be an issue to be worried about.

PHP mail using GMail SMTP and PHPMailer

|
I have been a fan of PHPMailer for quite some time. It is a very easy to use class that offers much more power than the regular PHP mail function. Although one problem I have had PHPMailer have been its rather poor documentation. Methods and attributes are split up with examples and tutorials seemingly overlapping but disconnected as well. However this is a small fault for such a great contribution to the PHP development community.

A thing I found hard to find was a specific example of how to set up PHPMailer to work with a GMail SMTP server. The results are actually quite simple and I managed to get it working with only a few tries. However if you are reading this you probably do not want to waste that 10 minutes, so I'll just show you the sample code below.

$pm = new PHPMailer();
$pm->IsSMTP(true);
$pm->Host = 'ssl://smtp.gmail.com:465';
$pm->SMTPAuth = true;
$pm->Username = 'yourusername@gmail.com';
$pm->Password = 'yourpassword';

The above code shows all the configuration settings that need to be set. I will not reproduce the normal message attribute settings needed for sending mail in PHP with PHPMailer as you can find them at the PHPMailer website.

Replicate Textmate html editor's code completion functionality in ViM with the close tag plugin

|
Being a long time Vim user I have rarely been enticed by another source editor as Vim really is the Swiss army knife of editors. I was surprised when trying out Textmate to find that it really does make editing HTML and code much easier with its range of auto code completion rules. My problem comes from HTML and XML's need to close tags, which when compared to programming languages, are quite verbose. Closing tags are hard to type because they require the use of the shift key for both the start and the end of the tag. Whereas most programming languages will allow you to close with just a } or end.

Pure HTML editors like Dreamweaver do solve the problem with their auto tag closing however Dreamweaver is limited by its focus on web page, and some web application, development environment. Textmate on the other hand appears to take a finely balanced approach between offering time saving automation and high extendability. But Vim, being the king (in my humble opinion anyway) of extensible text editors does have a plugin that allows users that want to utilize it as a great free HTML editor to benefit from the automated code completion offered by others.

The solution lies in the closetag.vim plugin written by Steven Mueller. The plugin is not fully automatic like previously mentioned HTML editors but it does offer the same functionality when the [ctrl]-_ (underscore) keys are pressed. I personally find this to be a better solution than another auto tag closer I found previous, which would have issues with code formatting. Using closetag means I can have the cursor where I needed then just press the mapped keys to close off whatever HTML section I was working on.

To install the plugin simply download the file and place it in your ~/.vim/scripts directory; which you may need to create. Then just include the following line to your ~/.vimrc file.

:au Filetype html,xml,xsl source ~/.vim/scripts/closetag.vim
For Cake PHP coders just add ,ctp to the end of html,xml,xsl. Other file types can also be added the same way.

Linode: Upgrading Ubuntu 8.04 LTS to 8.04.2

|
Ubuntu have recently released an update for their long term service release of 8.04, the updated release is versioned as 8.04.2. According to Ubuntube.net, there are over 200 updates that include security and general bug fixes. Being a LTS update, instead of a distro-upgrade, special care were exercised to ensure maximum compatibility and disturbance of existing systems. I found this to be true as my system ran file after the update.

To update your Linode Ubuntu 8.04 release, or any Ubuntu 8.04 release, first check that you are infact running this release by going to /etc and executing: cat *release You should see output similar to:

DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=8.04
DISTRIB_CODENAME=hardy
DISTRIB_DESCRIPTION="Ubuntu 8.04"

Once you have confirmed you are working with the correct version, type the following commands:

sudo apt-get update
sudo apt-get upgrade

The first command updates your apt-get repository records, the second performs your required upgrade. After the upgrade has completed you should see the output of cat *release as:

DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=8.04
DISTRIB_CODENAME=hardy
DISTRIB_DESCRIPTION="Ubuntu 8.04.2"

The upgrade is now complete. Ideally you should test some websites, especially ones that uses a lot of non-standard packages, to make sure that the upgrade has not negatively impacted them. Although in most cases upgrade issues should be non-existent.

Backing up and restoring OpenPGP keys in Ubuntu

|
I have recently set up Amazon S3 backups for my server using Duplicity; something I will write about later. A key feature of Duplicity is that it can encrypt your backups so that no one can really access your files. The upside to this is that your data will be not compromised, the downside is a more difficult backup restore process.

Encryption is implemented in Duplicity using OpenPGP. OpenPGP is basically an open public key cryptography tool similar to what is used to verify SSL certificates. You can see all your OpenPGP keys by executing the following command:

gpg --list-keys
The command should return results similar to:

/root/.gnupg/pubring.gpg
------------------------
pub 1024D/484808AA 2009-02-14
uid Paul Chiu
sub 2048g/780E7E92 2009-02-14

What you are looking for is the 484808AA string. This is the key id for a particular key. My output shows that I have only one key so there are no other lines beginning with pub 1024D. Using this id you can export your key with the following command:

gpg -ao public.mypgp.key --export 484808AA
The command will output public key id 484808AA and store it in public.mypgp.key file. It is important for you to keep this file somewhere safe as you will need to use it during restore. For those interested the contents of your key file should look like:

-----BEGIN PGP PUBLIC KEY BLOCK-----
Version: GnuPG v1.4.6 (GNU/Linux)

mQGiBEl....
-----END PGP PUBLIC KEY BLOCK-----

My actual key has 30 lines with the encoded block consisting of about 25 lines.

The next step is basically the same, however you are using slightly different commands to get your private key. The commands are:

gpg --list-secret-keys
gpg -ao private.mypgp.key --export-secret-keys [key id]
Another difference that should be noted is that secret key lists start with sec instead of pub. Otherwise using the secret key commands works basically the same way as the public key commands.

Restoring the keys is a very easy process. You may wish to restore when you migrate your server/computer or when you need to recover from a system failure. The commands you need to use are:

gpg --import public.mypgp.key
gpg --import private.mypgp.key
After restore you can execute the key listing commands again to check that everything was restored properly. You can now continue using your encryption programs such as Duplicity to fully restore a system or create new backups that are compatible with the old.

Mint's low level view of the U.S. economy

|
TechCrunch has an interesting article on Mint's ability to analyze their users' spending habits to see the impact of the current economic downturn. With over 900,000 users managing over $50 billion dollars in assets Mint is able to provide a statistically significant assessment of a particular segment of the economy.

What I found interesting in the article were the charts showing the rapid decline in spending between May 2008 and November 2008. While spending picked up in December for Christmas it only rose to the same level as June 2008. The overall spending pattern pretty much matches home related transaction volumes, which seem to reaffirm the common wisdom that most people's greatest expense is their shelter.

While decreased spending is good the problem with the economic decline is its affects on the net worth of those with non-cash investments. This was visible in Mint's chart showing people's assets and liabilities. With most asset values down the liabilities increased (loan) or remained steady (credit).

Overall I found the article to be a very interesting read and hope that they will release more data in this form each quarter because their statistics are quite authoritative given their user base and helps provide everyone with another perspective on the currently puzzling economy.

jQuery international phone number validaiton method for jquery.validate.js

|
The validate plugin for jQuery by Jörn Zaefferer is the best form validation tool I have used. It is very simple to set up and offers many built in functions. Furthermore error message insertion is clean and easy to follow. One thing I found that was missing from the default set of rules was a rule for validating international phone numbers. I understand why it was not included, because it can be difficult to verify so many possible variations. However I have written a fairly loose validator that should work for most cases and keep out completely wrong data.

To use the validation rule simply add the method to the validate plugin using the code below to a place where it is called before form validation.

$.validator.addMethod('phone', function(value) {
var numbers = value.split(/\d/).length - 1;
return (10 <= numbers && numbers <= 20 && value.match(/^(\+){0,1}(\d|\s|\(|\)){10,20}$/)); }, 'Please enter a valid phone number');

The validator will allow between 9 and 19 digit numbers with a hard character limit between 10 and 20. The special characters allowed are: '(', ')', '+', and ' '. Play around with it to see just what formats are accepted and tweak to your needs.

Verify your Blogger custom domain site with Google Webmaster Tools

|
When using Blogger custom domain it is not always convenient to upload files on to the domain as configuration of a fallback url is required. The problem becomes apparent when setting up services such as Google Webmaster Tools, which require some form of website verification. Luckily Google Webmaster Tools, unlike Google Applications for your domain, offers an option of just inserting a meta tag into your site's home page.

Using the meta tag option with Blogger is the easiest to do. All that is required is to go to Layout, click HTML, then just under the <head> tag, place your meta tag verification code. Go click verify in Google Webmaster Tools and everything should be fine.

Creating an AJAX loading icon in Photoshop CS 3

|
For the logo of 24 Hour Apps I wanted to use an AJAX loading icon to convey the fact that all my projects are ongoing and that I am constantly thinking about, creating, and working on applications as that is what I care about. The problem was that while there are many AJAX loading graphic generators, none of them provided scalable icons that I could quickly apply to 24 Hour App's header image. This meant I had to resort to creating it on my own.

To create a basic loading icon is actually very simple. First you create a new blank image and a new layer then choose the Rounded Rectangle Tool. Make sure that the created object is set to just Fill Pixels and set the radius to something that is appropriate the for image size you are using. I have it set as 10 pixels.
Once you have configured your round rectangle icon just draw it in the middle (doesn't need to be exact) of your canvas. It should look something like the picture below:
This is the basic shape that we will use to construct our loading icon. Now we need to duplicate it by dragging our layer to the Create a New Layer icon in the layers window and now you should have two straight bars.
We now need to rotate it by 30 degrees. To do so press command-t or choose from the Edit menu, Transform->Rotate. You should see a bounding box around the bar and be able to type 30 degrees in the transform toolbar.
After the transformation you should see your icon start to take shape.
Now repeat the process (continue using the first layer as the duplicate source) and rotate by 30 degree increments (60, 90, etc) until you reach 150. You icon should be very recognizable now with many layers.
To turn the layers of rounded bars into a single icon you need to merge the layers. You can do so by picking the top layer and pressing command-e or in the menu choose Layer->Merge Down. After the merge is complete and you have a single image draw a vertical and horizontal guide so that they intersect at the exact center of your icon. This will give you a mark to create the center hole with.
To create the center hole use the Elliptical Marquee Tool and draw a perfect centered circle from the guide cross hair by holding down the alt and shift keys while you drag. You can make the circle as big or small as you like; depending on the desired icon effect.


Then all you need to do is clear the circle contents by pressing delete. Now your icon is complete. You can shade each bar individually and create multiple images to make a loading gif or just use layer gradient effects to create something similar to the 24 Hour Apps logo.

Creating good Javascript GUI interfaces through state and behaviour engineering

|
In web applications there is a lack of formalized GUI components that can be reused quickly. Therefore a lot of times developers need to re-create custom GUI components for them selves. However do the the level of interactivity involved in JS heavy pages this task can end up out of hand when dealing with multiple on page elements.

My solution to this problem is to adopt my software engineering professor's (Geoff Dromey) approach of using behaviours to engineer software. The name for this discipline is behaviour engineering. Behaviour engineering involves mapping requirements into behaviour trees (PDF) that allows the engineer to express functionality as a series of behaviours and states in a system. Using their publicaly available example an oven would allow the user behaviour of Door Open, which would cause the Door state to be Open, which would trigger the states of Power to be Off.

For Passbook's group name managing inteface I used a similar technique to ensure that I have covered all user interactions and system states that can occurr with it to ensure a quality user experience. I started with the basic inteface design of three states, which are: view and edit/create. Edit and create are really derivatives of each other and can be implemented as a single bit of code or two separate components. The GUI states are visible below.

Create

Edit

View

The three GUI states may look simple but due to the need for them to transition into and out of each other and other page elements it can become quite a complex dance of showing and hiding elements. To get my head around all of that I used a three column table that mapped the state, action, and behaviours of each action. I will not reproduce the whole table, but the following are a few examples.

State:View > Action:Edit > Behaviour:View.Title.Hide, Editor.Attach(View.Title)
State:Edit > Action:Save > Behaviour:Editor.Controls.Hide, Editor.Loading.Show, Editor.Form.Submit

The above shows that when the edit icon is clicked in view mode I need to hide the title then attach the editor to that group. The technicalities of how it is implemented is not as important as making sure that you have covered all needed GUI and state transitions. The second line of saving an Edit form is a better demonstration of how we can abstract the complexity of what is involved in updating through edit.

To translate the above action and reactions list into Javascript is pretty simple. The view can be created as an object that associates it self with a page element that encapsulates a group view, or in the way I implemented it in Passbook, to be a group of functions that initializes click events for all views. Edit behaviour is more complicated as it deals with a lot of page elements and off-page behaviour. However each behavioural item can be translated into a function in the Editor object, ie. function hideControls(editor), showLoading(editor). Alternatively you can nest objects for further abstraction, ie. var controls = { hide:function(editor) { ... } };

For me using behaviour engineering on Javascript GUI design was a bit of an experiment as behaviour engineering was intended to work at a higher level of software design to allow a good overview of how requirements translates into object states and functionality. However this experiment has shown that it is also possible to apply the theory at a much lower level to allow the programmer to gain clarity on what functionality must be implemented and what states need to be set with each user action.

The results of this exercise were positive enough for me to want to try it on my password records management feature before implementation. With my limited time per day dedicated to my project without proper design and engineering I would be spending more time re-thinking over the same problem instead of just implementing properly thought out functions.

To conclude, I would encourage other developers to take a look at the behaviour engineering documentation and try it for a sample function in their current projects. If it doesn't work you may have wasted 1 or 2 hours max, but when it works your productivity will increase and stress will decrease.

January 2009 traffic review

|
One of my quarterly goals for this website is to reach 50 visitors per day by March. I launched this site just before the new year in 2009 with zero traffic and have decided to actively pursue traffic in the hopes of getting some ad revenue. While I am realistic about ad revenue prospects being financially meaningless until I am getting much more than tens of thousands of visitors a month it is nonetheless important to have a vision of what you want to achieve and to track it so that there is a strategic direction in your actions.

The results for this month are not that accurate as I only installed Google analytics about half way through this month so I only have statistics for about half the month. Nevertheless, they are:


The stats do some some good and bad news. The good news is that my traffic level is already reaching the high 30s and consistently getting around 20, so my quarterly goal of 50 a day appears to be attainable. Most of my traffic are coming from Google with very few referrals. Google traffic is good, direct traffic shows people are coming back (I try not to visit my own site more than a couple of times a week to check for post visual errors), however the lack of referrals show that I am not really being linked to. The most popular pages are all Linux related with a lot of my other posts going unread.

This quick analysis allowed me to see areas of improvement I can make to get even more traffic. The first item is to submit my site to other search engines. I have only submitted to Google because they are the number one search engine for me, but I am clearly missing out by not even being aware of what the traffic potential of other search engines are.

The second item I need to focus on is writing more quality content. Clearly people are more interested in guides on how to set up their own Linux servers instead of posts on my own personal projects that have not yet been released. So writing more guides is clearly an easy way to boost traffic.

The final item I see require improvement is making easier for people to link to me. The only thing I can think of right now is to add social bookmarking buttons to every page (ie. Digg this, etc). Also by increasing the number of subscription buttons it should make it easier for people to keep updated on site items and have them come back.

I have added all improvement ideas to my to do list and will carry them out over the course of the month. Hopefully the results can be seen before the end of February, however their impact should be able to be determined by the end of March at the latest.

Objective J - Getting started tutorial

|
One of my goals for the year is to learn Objective J. It is an intriguing project for me as it combines two languages I already know: Objective C and Javascript. Personally I prefer the flexibility of Javascript, which becomes even more appealing when combined with the syntactically concise jQuery. I will try to document my journey into discovering and learning Objective J and hopefully provider other newcomers some help on getting started.

The first step is to become familiar with the Objective J language. If you find your self having trouble following the guide or am not too sure about the syntax of Objective J I would recommending reading some ultra basic Objective C primers. Once you feel like you have a grasp on the basic concepts of the language guide scan through the starter tutorial to see how it can be used.

If you want to try the tutorial I would recommend downloading the starter pack. The starter package contains all the files you need to get started. Although Cappuccino is designed to enable the coding of web applications the starter package does not need a server such as Apache to run.

If you are more serious about development, download and install the Cappuccino developer tools. The tools are geared more towards a *nix work environment and contain syntax highlighting files for SubEthaEdit, Coda, Textmate, and ViM. The tools also contain a couple of command line tools to help you manage and develop in Objective J.

I installed the vim syntax coloring rules as as well as the steam project manager and the objj command line interpreter. From what I've read from the documentation steam allows creation of a template application as well as doing code packing/minifying (through the option build) when it is ready for release. I have already used steam to set up my first tutorial project, which can be achieved by typing steam myproject in the command line, but I am still not sure how to use objj.

Steam generated all the basic files I found in the starter package although it is more convenient since it does not include documentation and the NewApplication folder, which would normally have to be renamed. For the rest of this guide I will walk through my experience with the starter tutorial. My first step in trying to understand the code is to comment blocks of code that I can identify in the default AppController.j file.

The code is pretty self explanatory. If my comments aren't enough, try reading the original document. Loading it in Firefox gives me the expected "Hello World" message. I have also enabled Firebug so I can see just what the basic program is doing.

The good news is my commenting did not affect the program's operation by introducing unexpected errors. As the screenshot above shows, AppController.j and main.j will trigger a number of imports, which are re-tried until import is successful. This shows that the file import library is both fast and error tolerant.

The next step is to go through the tutorial and add my first GUI element: the button. The start tutorial provides all the code required to get a button on the screen and attach an event to it. I typed it all out myself just to reinforce my memory with the classes and methods being introduced.

To add a button the first step is to create a new button object and add it to the view. I have decided to break up the starter package's code so that each line is easier to understand. To get all button on the screen you really only need 3 statements. You can see them on line 21.

To better understand the initWithFrame method, I looked at the documentation that came with the start package. It can be found in Classes->CPButton. Once you reload your application you should see the button rendered nicely in the middle of the page. Without the extra code in the original tutorial, which I will add later, you will find that clicking the button will have no effect and resizing the window will cause the button to no longer be centered in the window.

The centering code can be inserted anywhere, as all objects are added by reference, although I added it above the setTitle method call, just like in the tutorial. The code you need to add for dynamic centering is:

[button setAutoresizingMask:CPViewMinXMargin | CPViewMaxXMargin | CPViewMinYMargin | CPViewMaxYMargin];
The next step is hooking up the click event. This can be achieved by adding the following lines (again, just above setTitle).

[button setTarget:self];
[button setAction:@selector(swap:)];

Then, just above @end, insert the function being called. Because Objective J does not treat functions like just any other object the way Javascript does, the syntax @selector is used to make reference to a function. Because I wanted to explore as much about the workings of Objective J as I can, I once again deviated from the original tutorial and did a log (Firebug required) on the sender object using the code below.

- (void)swap:(id)sender {
console.log(sender);
}

The result produced when the button is clicked show that sender is a <CPButton 0x000144> __address=324 isa=Object _subviews=[1] _tag=-1 This is similar to what one would expect when checking this in a jQuery click event handler. The remainder of the tutorial is pretty straight forward. The label variable is turned into a class variable by declaring it in @implementation AppController and the swap method's contents are replaced with something more visually responsive. The final code is:

That is basically the whole starter package tutorial. It has shown quite a few native functions. It has also shown me some of the limitations of the API documentation. I wanted to understand the commands used for CGRectMake but could not find a class for it as all classes were CP...; it turns out in CPWindow the file CoreGraphics/CGGeometry.h is included, which defines CGRectMake parameters as (x, y, width, height).

For me the tutorial was quite a lot to take in. Even for myself, who has worked with Objective C in the past, it took some adjusting to. The main benefit I am seeing though is the clear object pattern that is being applied and the much more intuitive instance management through setTarget and setAction. I am hoping to learn a lot more through other tutorials.

Linux Tips 6: Getting rid of ViM swap (.swp) files

|
I really do love ViM, it is my favorite editor for coding, writing, and anything where I would be doing a lot of cutting, pasting, and general text manipulation. However it has a swap file feature that becomes annoying to use when you are using it remotely via SSH and experience constant disconnections; a common problem with Window's limited connection timeout settings.

While there are fixes to Window's problems, as well as the option to disable swap files, I find the solutions to either be difficult to apply or limiting to ViM's functionality. Therefore I use a simple Linux one liner to find and delete all swap files as soon as I know that I have been disconnected from a session and there are swap files lying around but everything I was working on have been saved.

The command is a combination of find and xargs: find . -name ".*.swp" | xargs rm -f

To test out the command just use find . -name ".*.swp" to see if any ViM swap files are found in the current directory. If you are happy with the files found the full command will pipe the resulting file list into xargs, which will call rm -f on each entry, thereby deleting it for you. I use this command so often that I no longer test the results of find and just delete away so that when I re-edit the files I am working I do not get the "restore, load, delete" etc. prompt from ViM.

Linux Tips 5: Getting more out of "ls" directory listing

|
I have previously discussed how to use .bashrc to make re-typing commands a relatively pain free process and now I am sharing some more aliases for .bashrc that makes getting directly listings that you want quick and easy as well.

The commands for .bashrc are:

alias ls="ls -h --color"
alias l="ls -lh --color"
alias la="ls -lah --color"
What the code does is changes the default ls command to show human readable size counts as well as use color coding. The l command, which is what I use the most, provides a basic new ls with the long option so that I can see all file attributes, etc. To see hidden files just type la.

Type man ls to find other options in ls that you find useful and create an alias using it. These are highly personalized commands that can be used over and over and really saves time over the long run. So don't limit yourself to my examples and experiment to find what works for you.

The MySpace tell-all book's lessons for developers

|
TechCrunch reviewed a new book that focuses on MySpace and its journey from conception to current day operations. While current day operations appears to contain limited information it does include a "where are they now" sort of review on the founders of the site. The site started as a copy of Friedster, a one time star in the social networking arena, with simple goals of being faster and less strict.

By not cracking down on profile accuracy and by loading personal pages within one to two seconds, MySpace improved upon the main criticisms of Friendster and became one of the biggest websites online. Their key to growth was to really attack problems that plagued Friendster, who squandered away their first mover advantage, by giving users what they really want so that MySpace became the site of choice for many social networkers.

For developers and entrepreneurs it means that when tackling the competition it really pays off to identify the real problems the competitor is having trouble overcoming and making the lack of those problems a key feature in your competing product. In doing so a new product can enter a space and quickly become competitive by immediately poaching those frustrated with the existing service.

New Cake PHP API viewer now on Cake's website

|
Cake PHP has a new API viewer. I am not really a fan. The overall theme has been cleaned up and replaces the previously tight and compact layout. Where as before I could easily view all classes on the screen I now need to use vertical scrolling to find the class I need. Furthermore the actual class viewer has also been put through the CSS style machine and now uses far bigger headings and wastes about 1/4 of the left side of the page for a mysterious margin.

I am a big Cake PHP fan and it is the framework I am most proficient with at this time. Unlike Ruby on Rails, Cake PHP has all the niceties in a programming language that is pretty much ubiquitous on all web hosts meaning that it is suitable for any client whether they are on a strict shared hosting environment or have complete control over their own dedicated server. Pretty much everything is easier to manage with PHP simply due to the amount of resources available due to its existing popularity before mature development frameworks.

Getting back to the point of the post. The new API viewer is not really an improvement over the old one and I do wish that they kept a copy of the old generator available so people can use that view of the API which is definitely leaner and meaner; a probable cause of why  this new pacified version is introduced.

Solving AJAX caching in Internet Explorer (IE) using Cake PHP

|
With my latest project, Passbook, there are a lot of AJAX events and a lot of GUI behaviour that is enabled using jQuery. While using a good library keeps most things cross-browser compatible there are still a few IE specific issues that can only be addressed through special commands. One of those issues is IE's overzealous caching of page content.

Common behaviour of IE AJAX calls are a lack of change between calls. So if you are loading a value it stays the same no matter what if only the POST variable changes. This makes it pretty much unusable as well as extremely difficult to debug as it becomes impossible to observe the imapct of code changes. The solution is quite simple and only involves one line of code: $this->disableCache()

Calling disableCache() in the controller before the view is rendered will cause Cake to output header values that tells the browser to not cache the results. Doing so explicitly is a necessity for IE when dealing with functions that primarily return results to AJAX calls. You can also use it for dynamic content that should not be cached as well.

Solving Javascript multiple click event trigger bug

|
The past couple of days I have been struggling with a Javascript bug in Passbook that had left me scratching my head. One of the GUI controls for editing password group names has two linked images that are attached to the on click events for editing and deleting a group name. The controls are destroyed and replaced with an input box with save and cancel buttons and restored upon cancel. The bug occurs when cancel is pressed and the edit & delete controls are re-bound to their required click events. The GUI code is similar to the following:

<a href="#" class="edit"><img src="edit.png"></a>
<a href="#" class="delete"><img src="delete.png"></a>
The code is dynamically saved (along with the static group name) as an invisible attribute in the containing div and is not altered at all. The bug however occurs when the code is restored. What happens is when edit.png is bound to function edit(e) and delete.png is bound to del(e), when edit.png is clicked edit(e) and del(e) functions are both triggered while when delete.png is clicked only del(e) is triggered.

Even at this time I have no idea what is the cause of the bug. However the fix is quite simple. After playing around with global flags and setTimeout flag reset I discovered a simple check to ensure that the event is being intentionally triggered. The trick is to check e.target.src which will be undefined for del(e) when edit.png is clicked because it was not actually triggered by the user but by either a browser or html bug. While I did not test it, a check for only e.target should work fine for this problem as well.

Hopefully this tip can save you a lot of time as I tried Googling for a solution for about just as long as I tried to code a solution for it my self, shifting around the link/image positions, adding separator divs, and other crazy solutions to no avail. Unfortunately the trick to solving these kinds of problems are not always clear however the general rule should always be to check whatever data is available; doing that would've saved me at least 3 hours.