Development Progress 2013, Wrap Up

Another Years Progress

Now that 2013 is coming to an end we thought it would be good to have a review of the year and the progress we have made developing The Care Home Directory website.

It has been a great year for development and it has been enjoyable working on improving the experience and products we offer to our visitors.

Below is a list containing some of the improvements we have made this year,

• Improved gallery, support for five 1Mb images
• Gallery image thumbnail support, smaller asset files
• Improved homepage layout
• Home promo rotation cells on homepage
• Region accordion on homepage
• New improved notification system, unified across panels
• Google wallet payment support (ported from Checkout)
• Simplified enhanced listing sign up form
• Improved landing pages for advertising campaigns
• Dropped IE7 support
• Home activities list
• Social media buttons, Google+, Facebook, Twitter
• Local amenities list
• New improved edit provider form, enhanced listings
• Site wide search widget
• Improved website accessibility (WCAG WAI-AA)
• Compact town listings layout
• Improved enhanced listing town layout
• Added current bed/room vacancies support
• New Care Homes social media accounts on Reddit and Google+
• Mobile website version for smart phones and tablets
• Released native Android app
• Released Care and Nursing News System
• Improved Geocoding support for homes
• Moved templates over to HTML5 and CSS3
• Migrated to new server
• Improved API features

There have been some under the hood changes which are not listed above such as interfaces or traits and any other refactoring work we have done.

With the new year brings new opportunities and we have a lot planned in the new year improving our website even more.

We all hope you have a happy new year.

New Feature Release: Bed Vacancies

Available Bed/Room Number

Now you can update the number of vacancies at your home using the edit provider form under the my data tab. If your home has no vacancies you can leave it empty or set it to zero otherwise set it to the number of rooms that are available for residents.

You can also set the total rooms your home offers this can help give visitors to your listing an impression of the homes size.

Edit Room/Bed Numbers

Gallery Thumbnail Support using Imagick

Real Thumbnail Assets

Recently we improved our gallery offering for enhanced listings and the UI we use to show these gallery images displays them as 120x80px thumbnails with click to enlarge displaying the original image.

For our first release of the gallery we just set the height and width using CSS on the original image. This approach is simple although the gallery page can be slow loading due to it downloading full sized copies of the assets rather than scaled down versions.

Using imagick we created 180x180px thumbnails which gave us some big file size savings leading to much faster loading times of the main gallery. Some of the images have gone from 250Kb+ right down to between 10Kb and 20Kb.

Creating Existing Image Thumbnails

For creating thumbnail versions of images that have already been uploaded we wrote a basic PHP script to transverse the gallery directory and use imagick to convert them into their respective thumbnails.

We decided to use _small as a suffix for thumbnail images so if we had an image named image.png its thumbnail would be image_small.png we also have a fixed image name.

The command to convert the image is simple and only has a few parameters,

/usr/bin/convert -thumbnail 180 /path/to/image/image.png /path/to/image/image_small.png

The script we used was PHP but you could accomplish this using a simple bash script,

$baseDir = '/path/to/the/gallery';
$dh = opendir($baseDir);
while (($filename = readdir($dh)) !== false) {
    if ($filename != '.' && $filename != '..') {
        $fileArray = explode(".", $filename);
        $newFileName = $fileArray[0] . '_small.' . $fileArray[1];
        exec('/usr/bin/convert -thumbnail 180 ' . $baseDir . '/' . $filename . ' ' . $baseDir . '/' . $newFileName);
    }
}

Create Uploaded Image Thumbnail

When a user uploads an image to their gallery we also create a thumbnail of the upload using the imagick PHP module.

Another approach would be to use exec or passthru to execute the system command above although we feel using the module give us more control and we also do not need to make a system call etc..

$nameArray = explode(".", $filename);
$newFileName = $nameArray[0] . '_small.' . $nameArray[1];
$thumb = new Imagick($filename);
$thumb->thumbnailImage($width, $height);
$thumb->writeImage($newFileName);

It is as simple as that we decided not to use GD for creating the thumbnails although this is a possible path you could go down. One good thing about using GD is it has better support as a module if your using a shared host but we can install all the modules we need using APT.

Conclusion

Adding support for true thumbnails to our gallery offering has allowed us to decrease page load time and save bandwidth as well which are both good things. It also saves downloading 1Mb files that may not be viewed.

Soon we will be adding support for unlimited image uploads to enhanced listings so providers can then upload as many images as required so keep a look out for this in the new year.

On a side note this is our 50^th blog post and we will be writing a round up of 2013 by having a look at what has been release and the new features and products The Care Homes Directory offers.

New Look Homepage

New Region List Accordion

Our homepage has recently had a new addition of a town list accordion allowing users to get direct access to care, nursing homes and care and nursing agency information, by doing this we have effectively pulled our main content up a level.

We hope this will allow our visitors to get to the content on our website quicker, allowing a more seamless visit and also removing a step that they would have to take to drill down to the town page.

For the accordion we used jQuery UI to provide the functionality this made sense due to the fact our rotation panels use this library and it also provides cross browser support. Our town lists are grouped by region rather than county.

As always we will be reviewing our new addition soon to see if we can improve upon the current offering. We hope you enjoy our new addition.

New Look Homepage

Debugging and Profiling PHP Scripts

Using xDebug with PHP

This article discusses installing and using xDebug for debugging and profiling PHP scripts we also touch on using kcachgrind to help interpret the results of our profiling.

Recently we profiled the most commonly used sections of our website to see if we could improve upon our wait time and generally improve our code base.

xDebug

Setting Up xDebug

Our first task we need to setup our alpha test bed to use xDebug we like to use pear when installing packages like this as it sets the system up for us. Simply running the following command as root will install all that is needed.

root@chic:~# pecl install xdebug

Once you have issued this command you need to configure PHP to use the extension

/etc/php5/apache2/conf.d/xdebug.ini

You need to add the following to the above file remembering to change the value of profiler_output_dir and trace_output_dir to reflect your own directory structure. Also your module location could vary if so use find or locate to find xdebug.so

zend_extension=/usr/lib/php5/20090626/xdebug.so
[xdebug]
xdebug.profiler_enable=on
xdebug.profiler_output_dir=/home/chic/cachegrind
xdebug.trace_output_dir=/home/chic/traces
xdebug.auto_trace=on
xdebug.profiler_output_name=callgrind.out.%t-%s
xdebug.collect_assignments=on
xdebug.collect_return=on
xdebug.collect_vars=on

Once you have done this you need to reload Apache so the module is loaded and the configuration changes are read.

/etc/init.d/apache2 reload

You will want to create the directories for profile output files and give it the appropriate file permissions you may want to use something other than 777 but our alpha machines are single user so we can be a bit more relaxed.

mkdir /home/chic/cachegrind && chmod 777 /home/chic/cachegrind

We now need to do the same but for the stack trace file output.

mkdir /home/chris/traces && chmod 777 /home/chris/traces

Now the system should be ready to start generating debugging data although you should remember that quite a few files can be generated while debugging especially if you are throwing a lot of requests at your server. You should also never install xDebug on your production server as it is bad form.

Setting Up Kcachegrind

The last thing we need to install is kcachegrind which is the program we will use to interpret and visualise the generated profiler reports.

root@chic:~# apt-get install kcachegrind

You should now be able to run kcachegrind either using the shell or maybe your distribution has added a nice menu item for it. On Mint Linux it is located under programming in the main menu.

Start Profiling

To start the profiling of your scripts simply accesses the web address of the page you want to profile or run it via the command line if it is a cli application.

This will create a new file under the directory you specified in the configuration file for us its called callgrind.out.%t-%s where %t is the time stamp and %s is the script name.

At this point you will need to open kcachegrind to help interpret the results from the profiling we like to use the Callee tab in the right window panel which allows you to visualise the amount of time each action is taking.

Using this helps us to check which parts of our script are taking up the biggest percentage in total execution time.

We used the information we gained from using this tool to improve one of our scripts by removing an unneeded function call which we more than likely would have missed if we did not profile the calling script.

By using this approach we managed to knock 40% of the execution time of our script which is a huge saving in execution time.

Debugging

We use xDebug on our development workstations to improve the output when something goes wrong it also adds some more information to var_dump() such as the type of the variable etc..

xDebug should not be used on live servers for the reasons mentioned above and we would also advise not to use it on production machines.

Conclusion

Hopefully this article has given you an insight into debugging and profiling PHP scripts using xDebug and kcachegrind. Using these tools can help decide which parts of your script need the most attention.

Being able to visualise the execution of a script is a good way to see what exactly is going on during run time.