Project alpha: Passbook - Group management completed

It has been a while since I made a post on my personal project. The main reason is that progress have been much slower than expected. The main challenge is still managing my time. By waking up at 1 and 2AM each day and working until 3:30 AM I am making far more progress than before. However, after some reflection on what I achieved after 5 working days using this schedule, I find that what I've done is only about as much as I do in a normal working day.

Stopping and resuming work requires about 5 to 10 minutes each time so a lot of momentum is lost in the project by simple fact of not having enough time dedicated to it. Nevertheless I am still very hopeful and am personally pleased with the project. I will most definitely use Passbook once it is complete and my pursuit of perfect is a nice change when compared to a much more deadline/time-to-delivery focused approach to development that I am forced to adopt at work.

Given the limited progress this month it looks like it may take up to the end of Feburary before the project is complete. But I have realigned my goals and have decided that for me quality is most definately more important than qantity.

Linux Tips 4: Finding out which Linux distribution and version is currently being used

When working on client SSH accounts where you were not responsible for choosing the service provider it can sometimes be hard to find out just which version of Linux is being used. Luckily there is a very simple method. I have tested this in Redhat, Cent OS, and Ubuntu distros with success. The command is: cat /etc/*-release On this server it prints out:

DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=8.04
DISTRIB_CODENAME=hardy
DISTRIB_DESCRIPTION="Ubuntu 8.04"
With Redhat and Cent OS I find the output to be just one line, but it is informative nonetheless when searching for specific configuration or administration instructions.

Linux Tips 3: Finding system files greater than a certain size

If you have a high traffic site and keep detailed Apache logs you may find your Apache suddenly failing for no reason and spawning a a lot of processes even though site traffic is no greater than usual. The most likely problem is that the site logs have gotten too large for Apache to handle. Two gigabytes is pretty much the max and you need to delete or shorten your log files for Apache to be happy again. When I dealt with this situation I had no idea where the files were or how many there were as the server ran multiple high traffic sites. The solution is a simple Linux command.

To find all files in your operating system that is greater than 2 gigabytes type:

find / -size +2000000k -printf "Size: %kK\tPath: %p\n"
This will find all files greater than 2 million kilobytes, aka 2 gigs, and print its actual size as well as where it resides so you can do something about it. You can update the script to work in the current directory only by replacing the first "/" with a "." and changing your file size filter by changing the 2000000 value.

Linux Tips 2: Password-less SSH logins

Working in SSH is a common thing for me. Instead of developing on my computer with a separate webserver I have evolved into using SSH as much as possible and developing on the deployment server. This approach was learned through headaches with integration errors and frustrations with minor differences in PHP/MySql versions that can really make things hell when there is a tight deadline.

A problem that occurs when you work with SSH a lot is trying to remember all the passwords as well as making sure that your online shell accounts are safe from hackers, which normally means that long and impossible to remember passwords win out. The good news is that there is an alternative method to using passwords and that is using SSH keys. To use SSH one must first generate it on the client side computer (ie the one typing ssh example.com).

In *nix (linux, unix, OS X), type in your home directory: ssh-keygen -t rsa Just enter default values in the prompt if you are not sure what they mean. The command will create a .ssh directory in your home directory with two files. id_rsa is a file ssh uses to authenticate with, and id_rsa.pub contains the public key that you copy to servers.

For Windows users there is a guide for Putty using the Putty Key Generator.

After you have generated the key it is a simple matter of logging into your SSH server with a password for the last time. In your home directory execute the following commands to create a permission correct SSH authentication keys list.

mkdir $HOME/.ssh
touch $HOME/.ssh/authorized_keys
chmod go-w $HOME $HOME/.ssh
chmod 600 $HOME/.ssh/authorized_keys
The above commands will create a .ssh directory and create a file called authorized_keys and sets the permissions of both to something that the SSH server accepts as secure enough to use. The final step is copying your SSH key (id_rsa.pub) into the authorized_keys document. Remember that the SSH key is one line even if your default editor may have wrapped the line to make it look like four or five.

Log out of your shell account then back in to see if it works. If it does not check that the key is entered correctly and that your SSH daemon (sshd) settings are correct as well.

Dot notation array access in PHP

Javascript has a nice piece of syntactic sugar of allowing array variables to be access using ".", so that the value myArr[key1][key2] can be accessed through myArr.key1.key2 This is a lot easier to type than the first representation that is similar to what PHP would use. In addition to the square brackets PHP also likes to trigger errors when an array key is not found and one tries to access it. This problem is magnified in Cake PHP where nested arrays are all the rage, especially when generating form inputs.

In an attempt to solve the problem I wrote the following function. In my Cake PHP install for Passbook I placed it in APP/config/bootstrap.php so that it is available everywhere.

// Dot notation array access
function dot(&$arr, $path = null, $checkEmpty = true, $emptyResponse = false) {
// Check path
if (!$path) user_error("Missing array path for array", E_USER_WARNING);

// Vars
$pathElements = split("\.", $path);
$path =& $arr;

// Go through path elements
foreach ($pathElements as $e) {
// Check set
if (!isset($path[$e])) return $emptyResponse;

// Check empty
if ($checkEmpty and empty($path[$e])) return $emptyResponse;

// Update path
$path =& $path[$e];
}

// Everything checked out, return value
return $path;
}
To use this function using the previous example one would simply call dot($myArr, 'key1.key2') The parameter checkEmpty allows you to specify whether you want to check if the variable is empty or not, if not the value will be returned as long as it is set. The parameter emptyResponse lets you specify what to return if the is not found or found to be empty.

Simplifying session variable access in Cake PHP

In Cake PHP sessions are handled in a special component and helper. This is both a good and bad thing. The good aspect of Cake's abstraction is that the component is able to do a lot of things automatically, such as allowing dot notation access of session array contents as well as giving you the ability to check, read, write, and destroy session variables with logical commands. The bad aspect of this is that it becomes quite tedious to work with session variables as you need to type the whole object function call.

A time saving technique I use is to add the following code to my AppController. You can add this to any controller that works heavily with sessions. The code is:

function beforeFilter() {
// Get session data for appllication use
$this->app = $this->Session->read();
}

function beforeRender() {
// Make app variables available to view
$this->set('app', $this->app);
}
What the above lines do is make all your session variables available to all your controller functions in the array $this->app, so that you can quickly get values by checking $this->app['itemKey']. This is enabled by the line in beforeFilter().

The line in beforeRender() makes the session variables available in your views so that you can do checks on $app['itemKey'].

Please note that these just allow simplified access and not writing. To make sure any new session variable you write is kept you need to use $this->Session->write('key', 'value'), and because the above code basically gives us a cache of our session variables I tend to do all my session variable writing near the end of a function.

Cross browser copy to clipboard like Bit.ly

Bit.ly, as well as other modern url shortening services, appears to have implemented a reliable copy to clipboard function. I have always wondered about this as there does not appear to be a Javascript API to do this despite my having read through the very comprehensive Javascript API availabe in the Javascript Bible.

The way the Bit.ly interface is implemented looks like this:


By clicking the Copy button the shortened url is placed into the clipboard and can be pasted anywhere. By inspecting the elements surrounding that area I find the follow code:


The screen shot preview may be hard to read but it turns out that the copy button is a Flash object. This makes sense as further research showed that using pure Javascript would need browser specific code for IE, FF, etc, furthermore it is not guaranteed not to break with browser updates. With Flash the only thing one needs to worry about is Flash updates.

The main bit of Flash code used is System.setClipboard(theTextVar); The text variable can be passed into the Flash object using the flashvars variable, then it is a simple case of calling the set clipboard function on a button click or on load.

A free implementation by Jeffothy is available here. Although his sample script is designed to be variable (letting users copy using JS) so it is not as concise as Bit.ly's, which only copy their shortended url.

Project alpha: Passbook - User authentication complete

This week has been quite good in terms of development progress. I have been able to fit about 40 minutes to an hour each day in the early mornings before work to contribute to my Passbook project. I am rather enjoying taking the time to do things right and create a good baseline for future projects.

I have now done the user authentication, ie. sign in/out, as well as basic menus for authenticated and visiting users. While I was tempted to learn Cake PHP's authentication component I found it was just that much easier to implement my own. All an authentication system needs is be able to create new accounts, check whether an account name and password has a match in the database, then set a session variable. That session variable then determines whether the user has been authenticated or not.

My philosophy when dealing with frameworks is to try and use and follow framework patterns as much as possible. For me the auth component is nice but just too complex for the needs of most work I deal with. Most web applications will only have a couple of user levels and less than 100 real pages. The real determinant of access is user levels and page groups, which if done properly means all your authentication can be handled with a two or three level check.

I will blog more about my authentication methods and hopefully get some feedback about the effectiveness of my approach.

jQuery 1.3.1 released

Just a week after the release of jQuery 1.3, a bug fix update has been released. This release fixes 23 bugs, most of them selector behaviour related. It is good to see that they are so active with bug fixes although it means I will need to update Passbook again despite the fact that I still have not had the chance to try out version 1.3 due to most current Passbook related work revolving around implementing the sign in and authentication process.

Check if a page is loaded in an iframe using Javascript

I am across this solution today after some head scratching. The solution turned out to be quite simple. To do the check just use the follow code:

var isInIFrame = (window.location != window.parent.location) ? true : false;
And that is it. This will work for all cases as long as your are not loading a page in an iframe of it self, which may possibly cause an infinite loop, you are fine. I have tested this in Firefox 3, Chrome 1.x and Internet Explorer 7.

Linux Tips 1: Useful .bashrc commands for managing command history and saving key strokes

I thought I would share some of my Linux, specifically Ubuntu Linux, configuration settings that help me in my everyday productivity. I am not sure how many tips there are but I plan to keep writing until I have covered just about everything I know.

The first tip I have is about ~/.bashrc, which a file in your home directory that is loaded up as soon as you login, making it useful for setting custom settings such as aliases and environment variables. If you use Bash as your shell this will be useful to you; even if you don't some commands may have equivalents. I also use these commands in .bash_profile on my OS X machine.

To start, I will introduce the bash commands are used in this tip, they are:

HISTFILESIZE=1000000000
HISTSIZE=9999
alias hs="history | grep "
PS1="[\! \u:\w] "
The first two lines of the command help you set your command line history file size and the number of commands the history file will store; you can find this file in ~/.bash_history.

If you look in .bash_history you will find many commands you previously typed. Alternatively type history in the command line to have it printed out automatically.

The third line makes use of the history command by piping it to grep and then saving that as an alias called hs. With just the first three lines you can quickly find the text that previously typed. For example when I type hs doc on my computer I get the following output:

[536 paul:~] hs Doc
503 cd Documents/
536 hs Doc
This output shows that in my command history record number 503, I typed cd Documents/ to access the documents folder. Now if I did not want to type all that again all I need to do is type !503 and the same command will be executed from where I currently am. I have used a very simple example, but the longer your command the more time this saves you.

The most regular use I have for this is when editing multiple files in Cake PHP, so I would tell ViM to edit a controller, view, and relevant Javascript file all in one command, then if I need to edit that page again I can just search for the controller name in my history and I can immediately access all relevant files.

Back to the original .bashrc file, the final fourth line allows my prompt to look like [536 paul:~], which contains both the command history number, my currently logged in account, and the file system path I am currently in. So if I wanted to repeat what I typed just then I can type !536 and be done with it.

That concludes my tip for today. Hopefully you find it useful. By the way, you can also retype a series of commands if your initial command is linked with &&. For example I often do bzr merge ../dev && bzr ci -m "Merged from development branch" to quickly bring a live version of the code I am working on up to date using Bazaar Version Control.

O'Reilly Media job cuts

I was saddened to read about O'Reilly's job cuts today. They provide a very good publishing service and I have learnt a lot over the past few years from them. Unfortunately it seems no one is immune from the economic down turn. Hopefully the fired staffers will be able to find new jobs or use their skill set in a new entrepreneurial challenge. Despite the amount of free material that is currently online for anyone that wants to learn anything, nothing beats a concise book in allowing me to quickly become accustomed to a subject and be able to utilize the newly learnt skills in my life.

Stupid Cake PHP mistakes 1: Assuming $model->create() returns true

My new routine of starting my days working on my personal project is working out quite well. The excitement over the project really allows me to work throughout the day with an increased focus. My morning goal was to have the user registration page completed for Passbook, however that did not end up being the case. All I got done was the registration form with error checking. The reason for the delay was simply due to one line of code that took about 20 minutes to debug. So to honour my crazy mistake I decided to start listing my stupid Cake PHP mistakes so that no one else has to repeat it.

The problem I had this morning was caused by my trying to make my code more elegant through the use of the code segment below as my saving code.

if ($this->User->create() and $this->User->save($this->data)) {




Cake PHP recommends calling the create function to re-initialize a model before saving a new record therefore I decided to combine it with the save call, which will also do validation for me. This turned out to be a mistake as the create() function for AppModel does not actually return true. The boolean condition returned evaluates to false therefore the correct method of creating new records remains:




$this->User->create()
if ($this->User->save($this->data)) {

I guess the lesson here is don't refactor until you have a working copy and that sometimes shortcuts aren't worth the time.

Office 14 and the evolution of UI design

Ars Techinca's pictures of Office 14's user interface shows Microsoft extending their Ribbon interface onto more products in the Office suite. While I find Ribbon to be fairly easy to use it has just as much of a learning curve to remember where everything is as the old trim toolbar/menu items. While live preview is a cool feature undoing things isn't exactly rocket science.

The interesting thing for me in the screenshots is the increased focus on making programs really make use of available space. The default screen for Word uses basically a 3, or 4, column layout that lets you a ton of things at once, however at the cost of pretty much requiring the user to full screen the window to perform any action.

Although everything is subject to change what does not appear to be changing anytime soon is the amount of window chrome that goes on all MS applications. As a matter of personal taste I much prefer Safari and Google Chrome's approach of keeping things as far out of the way as possible.

Project alpha: Passbook - Working copy templated, Launchpad project started

The project is finally getting some traction with Cake PHP installed, set up, and basic code generated. The documentation for Cake PHP has really improved since I last looked and it is strange to look as I am used to re-using code from work. However to avoid conflict of interest and intellectual property issues for all my personal projects I am coding everything from scratch. In a way it is quite freeing to be able to start from a clean slate and implement functions using the most efficient methods I am aware of, which far improved from my previous attempts.

I decided to change where my project is hosted from Google Code Project Hosting to Launchpad. The problem with Google Code Project Hosting is that they limit each account to 10 projects. Launchpad on the other hand does not place such restrictions on users as well as supporting my preferred version control system: Bazaar Version Control. The registration process was quite easy and I look forward to hosting various project functions (code, bug tracking, discussions) there.

./cake/console/cake: line 30: exec: php: not found

Just got this error today. It appears that by default Ubuntu does not install the PHP CLI (command line interface). The fix is quite simple. Simply install the PHP CLI by typing the following:


sudo apt-get install php5-cli

jQuery 1.3 released

jQuery 1.3 has just been released. Based on the detailed release notes it appears that this version contains a lot of speed improvements for jQuery's already robust DOM selector as well as new features in the Event object.

While looking at the jQuery 1.3 post I also took the time to check out jQuery UI 1.6 RC4, which is really turning into what I would expect from the jQuery guys. When I reviewed jQuery UI in 2008 it was quite behind in terms of features, quality of widgets, and overall polish. Version 1.6 brings about more eye candy that is easy to use and quite well designed theme system that should prove very useful for my future projects.

Project alpha: Passbook - Database design complete

After failing to come up with a way to juggle work, life, and my projects I finally got around to progressing on my personal projects. The Passbook database design is now complete. There are only five tables, which makes sense for such a small application. The default CakePHP install is also set up as well.

As a side note, it appears my project has come around at just the right time as Google has just announced that they are halting support for Google Notebook as well as many other services. While quite a few services will be shutdown Google Notebook users will still have access to their data at this time. If anything this just gives me more reason to pick up speed in developing Passbook.

Pandora on webOS development

Palm Info Center has an interesting article with a Pandora developer on creating a client for their online radio service on the webOS. The article is quite interesting and goes into greater detail than the normal press releasy superfical information and actually talks about the trade-offs made in the Mojo SDK.

The interview reveals that really any web developer can start coding on the Palm Pre as the development framework really only uses HTML, CSS, and Javascript. For information management applications this model is very productive as web developers are a dime a dozen these days and by keeping everything simple all a developer has to do is learn the API.

An interesting point that is brought up is the difficulty that developers will face when trying to create games as the frame work does not appear to be too focused on graphic performance as it is a fairly high level framework, which nearly always means a penalty in speed when you are trying to do highly computational tasks such as 3D modelling.

Nonetheless the article is a very interesting look at the upcoming OS from Palm and I look forward to trying it out one day.

Ubuntu founder Mark Shuttleworth featured in the New York Times

The New York Times has an interesting piece on Mark Shuttleworth. The article explores Canonical's goals and Ubuntu's desire to become a main competitor to windows. The interesting facts about Ubuntu for me are Canonical's profitable position and its alterier purpose as part of Shuttleworth's legacy that he aims to really change lives with.

While I do not use Ubuntu in my day-to-day computing I do have a lot of respect for what Mark is trying to achieve and by putting his money where his mouth is through starting Canonical and achiving all the things that Ubuntu has done is quite a feat for someone who is already beyond successful in the for-profit sector of providing SSL certificates.

Online YUI compressor

The online YUI compressor is a simple and smart tool that makes me wonder why I didn't think of implementing that. YUI compressor is a great tool that I have used on many projects as it offers Javascript source compression and obsfucation for both faster loading and some minor level of intellectual property protection.

The tool is very simple and easy to use. It has some preset options that you can choose and to compress files just upload them. Once the conversion is complete the file is made available for download. For users on big projects this tool won't be of much help but for small (single script per page) optimizations it is very useful.

Using McDonald's recipe for success in software development

McDonald's restaurants have been on the come back. Returning from years of being cast aside for being unhealthy, unpleasant, and unappetizing food. However, even I have noticed their recent turn around in Australia. With a significant marketing effort advertising their healthy food range, increased choices with chicken related items, McCafe's, better shop fittings, and increased operating hours, McDonalds have become my preferred last food source; a place a would go when no appealing restaurants are nearby or if I don't feel like cooking.

The resurgence of McDonald's is no accident. The company have been focused on the five P's - people, products, place, price, and promotion. It is a simple slogan that is really just an updated 4 P's of marketing. It is a far more externally focused goal when compared to other business analysis tools such as Porter's 5 forces. By adding people into the mix McDonald's have re-oriented their focus on making sure people want to come to their restaurants as often as possible. When that is achieved the normal 4 P's of marketing takes over and ensures that the customer can find something to buy (products), feel comfortable buying (place, price), and if they have doubts, be given incentives to buy (promotion).

For software developers the 5 P's also applies and can be used as a quick evaluation tool to see just who the intended users are (people), how will the software appeal to them (product), where they will be able to find your products (place, distribution), how affordable your product will be (price), and how will you create desire for the product (promotion). Testing any idea using these basic concepts should prevent software developers just creating mindlessly with no end goal.

The 5 P's won't be applicable everywhere as for some personal projects the ability for the product to make profits or gain market share may not be a primary goal. However if you want to pursue a career in software or in any business knowing just how you intend to deliver your products and/or services to customers is always preferable to relying on blind luck.

Project alpha: Passbook - Trying to recreate Gmail AJAX status messages

All mock up screens were completed today. Progress is good and the project appears to be on track with about 10 hours spent so far. I spent a few hours trying to replicate Gmail's informative and non-obtrusive AJAX status messages that appear at the top of the screen. A screen shot is shown below:

As one can see it is a simple div that has the bottom corners rounded. Creating this effect was actually quite simple. The HTML needed are:

<div id="notification"><span id="notifcationContent">Loading ...</span></div>
The CSS required are:

#notification { position:fixed; top:-0.2em; text-align:center; width:100%; z-index:100; }
#notificationContent { background:#FFA; padding:0.3em 1em; font-weight:bold; }
The above code segments will create a fixed top div with centered text that has a light yellow background. This status message will be shown no matter what the vertical scroll position is. It is what I am currently using for Passbook with results below:

Getting to this stage is quite easy however recreating the final effect of the Gmail status message is not so simple. After trying out many rounded corner generation scripts the problem I found was that due to the background color being dynamic (as the user scrolls) one cannot create a flawless look similar to what Google has achieved. Google's status messages only appear to show perfectly because their top header is always there and pretty much do not move. So there status message does not always move with the page.

In the initial version of Gmail the status boxes were just simple boxes, which is now understandable, as it is the easiest to implement if constant visibility is desired. However Gmail does not need a constantly visible status display as its layout is mostly contained within a normal visible window. The few occasions where you do not view the top header is if you had a long email conversation you were viewing, at which point AJAX messages are not so necessary as the available actions to the user will have an immediate effect in the GUI anyway (reply, print, etc.).

So to conclude, if you want to recreate the Gmail AJAX status messaging display you need to incorporate a static header in your design and try to minimize page scroll. If you want your AJAX status messages to be constantly visible to the user then you will need make some aesthetic concessions.

Project alpha: Passbook - Getting things done

A good big of progress was done today on Passbook. The mockups are still coming along with the main listing page about 80% complete. I have decided to use YUI's Panel styling for my main content boxes. The results are actually not too bad as Yahoo's general style is quite generic thus does not clash with the default template too much.

The progress have made me think about publishing issues. While the application will be hosted and free to use for anyone, while ad supported, I will also try to offer downloadable code for self hosting on Google Code Project Hosting. The sign up page looks quite simple although I am unsure as to whether or not Google has a review process similar to SourceForge.

Developing the mockups have also given me ideas about jQuery plugins that could be written. Currently I am interested in creating a status display similar to what Gmail uses to let people know when it is loading, sending, etc. Anyway, I am just taking things one step at a time to see how this project evolves. With a total of 9 hours spent so far and not a bit of PHP written my initial goals do appear rather ambitious.

Remember The Milk and smart date preference option design

I tried out the to-do list service Remember The Milk today and found it to be a very good web application from the start. When signing up you are presented with a very simple Javascript validated form that can be filled out within a minute. What impressed me though is the clever way they managed to present date format to users. My attempts at work have often gone too complex by offering DD/MM/YYY, MM/DD/YYY, YYYY-MM-DD, and other options that people are unlikely to ever use.

Remember The Milk's take on the problem was quite simple, it just asked the user which format they preferred out of 14/02/07 and 02/14/07. What they were asking was very easy to understand and, in my opinion, provided just the right amount of user customization and application simplicity.

Linode Ubuntu Mail Server: Part 2 - Setting up catch all forwarding or Google Apps for your domain with Gmail

Catch all forwarding

My original plans for this mail server was to have everything forwarded to my Gmail account so that I would not need to check a separate 24 Hour Apps account. To set this up was quite simple. The first step is to edit /etc/postfix/main.cf as root and set myhostname = localhost This will prevent postfix conflicts with your virtual alias domains. To specify virtual alias domains add the following lines to main.cf:

virtual_alias_domains = example1.com example2.com
virtual_alias_maps = hash:/etc/postfix/virtual

The setting virtual_alias_domains is a space separated list of all domains that postfix should accept mail for. If you have email addresses for subdomains you should add them to. The virtual_alias_maps setting specifies the file that postfix uses to look up where alias addresses should go.

To create the map file create the file virtual in /etc/postfix and add lines similar to the following:

@example.com example@gmail.com

To do specific email address forwarding (for Alice) and local user forwarding (for Bob) see the following:

alice@example.com alice@gmail.com

bob@example.com bob

The final step after creating your virtual file is to create a hash map of it to speed up postfix. You can do it by using the command sudo postmap virtual from the /etc/postfix directory. Now just call sudo /etc/init.d/postfix restart to restart postfix and test your changes.

Google Apps for your domain and Gmail

If you are using Gmail as your forwarding destination you may find nearly all of your forwarded emails going into the spam folder; I did. Looking into the spam folder found that Gmail's querying of message sources were returning with the error:

Received-SPF: softfail (google.com: domain of transitioning example@example.com does not designate [your server ip] as permitted sender)

The cause of this is most likely the lack of SPF configuration on my mail server. However instead of trying to deal with SPF settings, I opted to have Gmail as my main mail server for incoming emails.

To set up Gmail as your main email server you will need to set up a standard edition account. Then you will need to verify your domain and update your Linode MX DNS records. The Linode settings to use are:

Mail Server   Preference

ASPMX.L.GOOGLE.COM  10

ALT1.ASPMX.L.GOOGLE.COM  20

ALT2.ASPMX.L.GOOGLE.COM  20

ASPMX2.GOOGLEMAIL.COM  30

ASPMX3.GOOGLEMAIL.COM  30

ASPMX4.GOOGLEMAIL.COM  30

ASPMX5.GOOGLEMAIL.COM  30

Note that the mail server addresses do not have an ending ".". While Google's documentation may specify it for other DNS servers Linode's does not require and will fail to add the MX record if you include it.

Once your MX server settings have been verified by Google you can set up a catch all account in Google App's dashboard or create individual email addresses with their own forwarding rules.

Linode Ubuntu Mail Server: Part 1 - Setting up postfix, dovecot, and squirrelmail

My mail server configuration has evolved quite a lot over the paste couple of weeks. Going from basic mail server, to mail forwarding only, to now being a Google hosted server. This two part article will talk about how I set up a mail server on my Linode VPS with Ubuntu Server x64.

The first step is to install postfix. Postfix is the main mail transfer agent (MTA) for many Linux distributions and it is the main one for Ubuntu. The MTA takes care of both sending and receiving of mail and is a critical part of any mail server. You can install it on Ubuntu by following this guide. In it you will also find how to set up most basic postfix functionality. I would recommend following the guide until the Courier installation sections.

The second step is setting up a mail transfer agent. If you installed Courier above, you do not need to do this. I did this because I find Dovecot to be a much better all-in-one solution. The installation is just as painless as postfix and can be found here.

The final step in setting up a mail server is installing a webmail interface. You can skip this and start sending emails to your local accounts and seeing if they show up. However, I preferred to use a web interface as configuring my mail client is a bit of a pain. Squirrelmail is a very simple mail interface that allows you to do the basics. The installation guide explains how to set it up.

An optional final step is to edit /etc/apache2/sites-available/squirrelmail and change it to use a subdomain instead of a subdirectory. You can enable it but un-commenting the following:

<VirtualHost *>
DocumentRoot /usr/share/squirrelmail
ServerName webmail.24hourapps.com
</VirtualHost>
You can replace webmail.24hourapps.com with your desired domain name. Remember to reload Apache (use sudo /etc/init.d/apache2 reload) for it to take effect.

Now you should have an accessible anywhere mail server. Furthermore, as a developer, you can also send mail directly from PHP for notifications and all other kinds of convenience functions..

Project alpha: Passbook - One bit at a time

I finally found some time this morning to work on mocking up the application. It is good to know that I can still have some mornings to do the required work thereby allowing for more time on weekends for other things. Although the constant switching between projects is making it somewhat difficult to maintain momentum. I currently have about four projects on my plate with two main projects at work, one personal project, and a idea that is being developed with a friend.

The mock ups are now version controlled with the main passwords listing page coming along nicely. I still need to do different states of viewing/editing groups as well as individual password records. Then the hardest screen to mock up will be complete. By giving my self a one month time allowance I can now reschedule my goal for the end of this week to be mock up full completion as well as database schema design and implementation. That allows for almost three weeks of implementation, testing, and deployment.

Project alpha: Passbook - The slowdown begins

Work started again today and I sure do feel tired. The combination of working out in the morning, staying at the office for nine hours, and commuting by bicycle to and from, means I do not feel as energized as before to continue with project matters. However, just like blogging I feel that it is important to maintain momentum even if I just complete one HTML screen mock up per day for the current phase of the project. Later on it should be a lot easier when I start coding as I start to employ my core skills.

Nevertheless I look forward to seeing what I can achieve tonight. I have been procrastinating though, especially with no work contributed to the project on a Sunday yesterday, due to the difficulties I am finding in laying out a good template for the main password keeper view. Drawing wire frames already took two tries I do believe that the HTML mock up will take many more attempts before it looks good enough to implement. Now I can see why new years resolutions are so hard to keep - because it is very hard to push your self when it is so much easier to let things be.

Project ambitions

I had a pretty good personal day today. Spent time with the girlfriend, friends, and basically did nothing. While I have not been working extremely hard it does appear to be quite difficult to spend the amount of time required on the projects as well as maintaining non-programming hobbies. 

Personally I quite enjoy programming but with 40 hours a week dedicated to programming at work my enthusiasm for coding is no longer what it used to be back when I was in high school or even university. This lack of excitement over projects seems a waste given my personal ability have improved vastly over the years and I know that I am able to produce 52 projects a year; an initial goal I had for the year.

The idea of scaling back my ambitions to doing one project a month instead of one a week is a tempting one and one I may possibly pursue. However I am also reluctant to do it as I started this site to keep my self in a creative mood by forcing my self to constantly work on new projects that require my creative output as well as challenge me as a software developer. Although my belief is that with more time given per project I can perhaps spend more time researching solutions as well as trying out different technologies that are around.

Re-factoring is a common thing I do during coding therefore I consider "re-factoring" my goals to not be necessarily bad. This post is really a rant/stream-of-thought and I do believe it is in my best interest to take more time on each project and do it right and do it using interesting technologies I do not know. So I guess I look forward to completing Passbook as well as thinking of things to do with Cappuccino and the Google Web Toolkit.

Blogger and Linode VPS - Part 4: Custom favicon

Blogger will use its favicon by default for all of its hosted pages. To change it to something you created is actually very easy.

The first step is to create a square image. Ideally 16x16 as that is the default favicon dimensions. However any square image is technically fine for the next step.

The second step is to use a favicon generator. I used the Dynamic Drive FavIcon Generator. To create a favicon using that tool simply upload your image and then wait a few seconds for the download link.

You will now need to upload the favicon somewhere. I uploaded it to my Linode account where all blog images are hosted. However you may need to find a file host that allows direct linking if you do not have your own web hosting account. For the purposes of this article we will assume you have uploaded the file to http://www.mydomain.com/favicon.ico

The final step is add the favicon to your template. In the Layout tab in Blogger, click Edit HTML. In the Edit Template section scroll down, or find, </head>. Just above it paste the following code:

<link href='http://www.mydomain.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
The whole process is pretty simple. The only counter-intuitive thing is not using DynamicDrive's favicon inclusion sample code. It appears to be either wrong or wrong enough to not be able to override Blogger's default favicon. The code snippet above is based on what Blogger uses to add its own favicon so using that as a template means the favicon change shows up immediately.

Below is a comparison shot of the before and after icons as seen in Firefox. I have the Faviconize extension installed so no page titles are shown.

Project alpha: Passbook - Design decisions

About three hours were spent today, while watching a couple of movies,
on designing HTML mock ups. The HTML mock ups are taking much longer
than I expected as my HTML and CSS skills are quite rusty. Although I
have saved a lot of time using a template from Studio7 Designs found on
their open source templates website. While the open source templates
website was the number one results I looked through a lot of other
disappointing templates before settling on it.

The state of open source icon sets appears to much better than the
state of open source website templates with two of the top ten Google
results giving high quality usable results containing icon sets that
come with a creative commons license. I decided to use the Proxal
icon set with 40 icons as my main source due to my preference for the
artist's style and i also plan to use FAM FAM FAM's Silk icon set as a
backup for anything else that Proxal does not have.

Unfortunately about an hour was wasted as I tried a few design
development environments to see how easily they allowed me to modify
the template. Unfortunately all of them (Coda, KompoZer, and
Dreamweaver) felt like more trouble than they were worth and I ended up
sticking with good old ViM with Firefox, Firebug, and ReloadEvery.

So far I have completed about three and a quarter of the wire frames
and still have about four or five to go, which is not making things
look very good time wise as technically the first weekend of the year
is over tomorrow. However I have decided to take it a bit easier on my
self and give my self a deadline of January the 8th for a completion
date. The deadline will still be very difficult to reach as I return
to work on Monday January 5th and I am unsure whether my mental
stamina is enough to allow me to continue being productive on my hobby
project after an 8 hour work day. I guess I will find out pretty soon.

Site5 migration

My current, and soon to be previous, web host, Site5 is currently doing their data center migration. While I have no problems with internal house cleaning it has been over 20 hours and the migration is still not complete. Nevertheless I plan to move all my current sites to Linode as a way to reduce the redundancies in cost. Although this does mean I need to find a new backup host as Site5 did have a great Flashback feature that basically does the same thing as rsnapshot but uses a much nicer GUI to control everything.

Project alpha: Passbook - Wireframe design complete

After spending about two hours the wire frame design of my first project of the year is complete. I have decided to name the project Passbook and its purpose will be to enable users to keep passwords of insignificant accounts that seem to accrue way too fast online. Because I do not have an SSL certificate for the project and do not plan to get one for the project for the time being I believe the project's audience will be those who want to have different passwords for different sites but do not necessary want to remember them all.

I currently use Google Notebook for this task and it is not the most appropriate solution as sometimes Google tends to wipe out notes if I click on a note before the page has fully loaded. Also the auto-linking of website addresses and emails is rather unnecessary as a password keeper do not need to follow links and simply need to allow quick copying of whatever is stored.

Using Google Notebook as a model does make me appreciate just how much work is involved in streamlining that interface. My current wire frames are already loaded with CRUD access buttons that are duplicated because I use a Group->Items organization method that seems like the most simple yet useful way to organize the possibly large list of access details. The number of features that need to be implemented are quickly adding up as I draw each wire frame and I think the numbers will become even greater as I do the HTML mock ups.

Currently it does not really appear I will be able to complete the project within 24 hours. However I am hopeful that proper planning of each feature and what will get implemented in each hour will mean on time completion for this project.

Blogger and Linode VPS - Part 3: Removing unwanted Blogger icons

New Blogger templates seem to have a lot of editing icons. A few of the templates, including the one I ended up using, had this feature. See below for what I mean.

To remove them for aesthetic purposes requires editing the template's CSS in Blogger's Layout HTML section. You will need to add the following lines within the <style></style> tags.

span.widget-item-control, span.item-control{
display:none;
}

The item-control item is for editing posts and widget-item-control is for widget controls that apply to all Blogger widgets. To restore the icons temporarily without removing the hiding code simply change none to inline.

My template only had those two icons in its contents so it may not cover all control icons. To find the class name for other control icons or elements you want hidden you will need to view the source code. In Firefox this can be done by highlighting a section of the web page, right clicking, and choosing view page source. The class name required should belong to the closest span tag near the image.

Blogger and Linode VPS - Part 2: Templates and custom domains

24 Hour Apps uses a template from Blogger Templates that uses Blogger's XML to define elements. The new template format is actually a very good solution to the template usability and achieves being dead easy for the user with a minor learning curve for the template creator. However using templates with a non-standard configuration does have its share of problems one of which is Blogger's image hosting limitations.

Blogger says that custom domains should be able to load uploaded images less than 400 pixels wide, something I am yet to test, however for templates that rule appears to be even stricter as I was unable to view any images once I updated my blog with a downloaded template. The solution is actually quite simple, although somewhat time consuming.

To fix Blogger template images not loading in custom domains you need to open the XML template file and look for referenced images by looking for either .png, .gif, .jpg, or other image formats used by the template. Once you find some images you need to download and put them on a server with less restrictive linking policies. I already set up an account on my Linode VPS for the 24 Hour Apps blog so I just saved all template images in to a folder that user's account. Then it was just a matter of adding a virtual host entry for that account, ie. blog.mydomain.com to make the image files available to the public.

The final step is to update the image references in the template XML so that they point to your saved images (see screenshot below). This is far more time consuming than it needs to be because Blogger generates extremely long and random URLs for its hosted images. After all image locations have been updated upload the modified template and everything should work as expected.