Delivering Quality

Upgrade to Git

Mark — Fri, 30 Dec 2011 22:25:36 +0000

Remember when Subversion was the new tool that all the cool kids were flocking to? Well, Subversion is now the old and busted, and it’s time to move to Git.

It’s time to upgrade your Subversion repo (if your still using it) to Git because of the benefits you will gain from moving to a more flexible tool.

Distributed: When you checkout (or clone in the git world) a repository, you are checking out all the files in the repository, which means you can work independently of others. You can commit and make changes on master, or another branch without imposing your incomplete changes on the rest of the team.
Simple Merging: Compared to Subversion, merging is fun. Because its so easy, as a developer you are more inclined to make additional branches and use them as they should be used. This adds a lot of flexibility in where and when the changes are pushed to master.
Speed: A subversion commit doesn’t end until all the files have been transferred to the remote server, with git, commits are completed instantly because you are committing to the local repository, not the remote one. Therefore, you don’t have to wait for actions to complete as they are almost instantaneous.

I could go on, but those are the big ones for me. Note: I’m not against other DVCS systems like Mercurial, Bazaar, but I chose Git because of it’s popularity and ability to handle the Linux kernel.

Download GIT now.

Cache Password Protected Website

Mark — Tue, 22 Nov 2011 02:03:08 +0000

I needed to write a simple web app to automatically cache a password protected tumblr admin account, so I wrote simple symfony app to do it. It was pretty simple to do because I could leverage the sfWebBrowserPlugin which provides most of the heavy work for simulating a browser and logging into the site.

While this project is setup to cache tumblr, you can easily modify it to cache any website. It’s built in PHP on the symfony framework.

Configure it by changing the apps/frontend/config/app.yml file to add in the blog name, email, and password, with these config parameters: app_tumblr_blog_name, app_tumblr_email, app_tumblr_password

To cache a page, run it via command line:

./symfony tumblr:cache

Source is on github: Cache Tumblr Admin

WordPress Needs a Default Caching Plugin

Mark — Sat, 29 Oct 2011 17:44:23 +0000

I find it curious that WordPress, one of the biggest and best blogging platforms currently around does not come default with a caching plugin. I think the WordPress developers should either include one of the excellent WordPress caching plugins, or build their own and then enable it by default. Users and blog hosts worldwide would have better page load performance and improved scalability.

This blog is build with WordPress, and in my first year of blogging, one of my posts received a lot of hits. Unfortunately, the default WordPress install I had setup wasn’t able to cope with the demand effectively. It was taking 2-5 seconds for visitors to load a page. That’s unreasonable for a simple blog and I’m sure I lost a lot of visitors because of it. So I looked into ways to make my blog load faster without paying extra for better hosting hardware. That’s when I found an excellent caching plugin called Hyper Cache.

With Hyper Cache, I made my blog page load from 2-5 seconds under heavy load, to down to less than a second,Â under load the same load. The HTML itself only takes about 230ms to download, down from 4000ms, allowing the other resources to start downloading in a paralleled fashion much earlier. How is this possible? Well a caching mechanism works like this: The first time a page is requested, it will render it as normal, but what’s different is that it will save the rendered page in a special cache file. Then, subsequent visitors simply get handed this same cache file immediately, without much PHP processing required. It’s like skipping to the front of the line.

So we can see a cache has a huge effect on performance, and made a big difference to my blog, but what other benefits are there?

Many people won’t know what a cache is, or how to install one
Better experience for blog owners because they don’t have to learn how to install one after they experience poor site performance
Blog is more ready to handle getting slashdotted
Will ultimately give WordPress a much better image

In my opinion, well worth it. So WordPress team, please?

Sanitize User Input for XSS in PHP

Mark — Thu, 01 Sep 2011 06:04:39 +0000

The best way to sanitize any input from your user is to use the HTML Purifier library. HTML Purifier will remove any XSS from your code, produce valid HTML, and generally make you sleep just a bit safer at night. It doesn't completely sanitize user input, and you still need to be careful with it before using it anywhere (such as an SQL statement), but it will remove all XSS attacks against your website.

Here's a simple example of how to use it:

PLAIN TEXT

PHP:

$purifier = new HTMLPurifier();
$purifier->purify($user_string);

Yii Override Command Parameters

Mark — Mon, 11 Jul 2011 14:35:48 +0000

The Yii Framework is very flexible and has a variety of way you can configure it. Here I will show you how you can customize parameters on a Command task.

The default Yii Migration command asks the user for a confirmation before running if there are any tables that have been changed, this is quite a sensible default, but I don't want to be asked if the command should be run after a deployment. Of course it should be.

To see what options can be configured, open the Migrations file

vendors/framework/cli/commands/MigrateCommand.php

Any of the public class variables can be configured in your config/console.php file. Using the commandMap parameter, you can configure values for Yii Commands. Then specify the migrate task, and then the config values you want to change. In this case, I want to change interactive to false, so it won't ask for a confirmation.

Sample config/console.php:

PLAIN TEXT

PHP:

return array(
...
// database migration, don't ask for confirmation
'commandMap'=>array(
'migrate'=>array(
'class'=>'system.cli.commands.MigrateCommand',
'interactive'=>false,
),
),
);

How to add Local Config Variables to Yii

Mark — Thu, 30 Jun 2011 22:13:58 +0000

Often times you want to be able to specify configuration parameters or settings that only apply to a single environment. These local configuration don't need to, and shouldn't be entered into version control, and should over ride default values. I needed a solution for a project I was working on so I wrote one for Yii.

The main configuration file protected/config/main.php returns an array of parameters. Edit this file to merge 2 arrays, 1 from main.php, and another from local.php.

Edit main.php to look like this:

PLAIN TEXT

PHP:

<?php
return CMap::mergeArray(
array(
'basePath'=>dirname(__FILE__).DIRECTORY_SEPARATOR.'..',
'name'=>'Web app',
... other parameters ...
'params'=>array(
// this is used in contact page
'adminEmail'=>'webmaster@example.com',
),
),
local_config()
);
// return an array of custom local configuration settings
function local_config()
{
if (file_exists(dirname(__FILE__).'/local.php'))
{
return require_once(dirname(__FILE__).'/local.php');
}
return array();
};

And then add any of your own configuration to local.php in the same config directory.

PLAIN TEXT

PHP:

<?php
return array(
'components'=>array(
'db'=>array(
'connectionString' => 'mysql:host=localhost;dbname=db_name',
'username' => 'my_user',
'password' => 'secret',
'enableParamLogging'=>true,
),
'log'=>array(
'class'=>'CLogRouter',
'routes'=>array(
'file'=>array(
'class'=>'CFileLogRoute',
'levels'=>'trace, info, error, warning',
),
'profile'=>array(
'class'=>'CProfileLogRoute',
'report'=>'summary',
),
),
),
),
'params'=>array(
// this is used in contact page
'adminEmail'=>'yourself@example.com',
),
);

Here we've overridden the adminEmail parameter to yourself@example.com, we've added in custom database username and password, and we've enabled logging.

Feel free to use this as a straightforward way to add custom config values to your Yii project. Just remember to make local.php an ignored file in Git or Subversion.

Add an i18n Static Page to Symfony

Mark — Mon, 16 May 2011 02:00:48 +0000

My last post explained the basics on how to add static pages in symfony, this post expands on that and shows you how to do it for a multilingual site.

We split the template finding code out for code maintainability, and we enhance it on where to look for the file. First it tries to find the template in the language and country eg: en_CA, then it tries to find the template in the matching language, and if that is not found, it falls back to the default language.

PLAIN TEXT

PHP:

/**
* Load a static page.
* @param sfRequest $request A request object
*/
public function executePage(sfWebRequest $request)
{
$template = $this->findTemplate($request->getParameter('view'), $this->getUser()->getCulture());
$this->forward404Unless($template);
$this->setTemplate($template);
}
/**
* Check if a template page exists for a given culture.
* Be intelligent and check if language & country exist, try language, and then default to english.
* @param string $name Template filename to check
* @param string $culture Symfony culture string
*/
protected function findTemplate($name, $culture)
{
// for safety, strip out all non-alphanumeric characters
$name = preg_replace('/[^a-zA-Z0-9\s]/', '', $name);
$directory = $this->getContext()->getModuleDirectory() . DIRECTORY_SEPARATOR ."templates";
// try language and country: en_CA
if (is_readable($directory . DIRECTORY_SEPARATOR . $culture. DIRECTORY_SEPARATOR . $name ."Success.php"))
{
return $culture. DIRECTORY_SEPARATOR . $name;
}
// try langage only: en
elseif (is_readable($directory . DIRECTORY_SEPARATOR . substr($culture, 0, 2). DIRECTORY_SEPARATOR . $name ."Success.php"))
{
return substr($culture, 0, 2). DIRECTORY_SEPARATOR . $name;
}
// try default language
elseif (is_readable($directory . DIRECTORY_SEPARATOR . $name ."Success.php"))
{
return $name;
}
return false;
}

The template directory should have the default language file as usual, eg: templates/helpSuccess.php, and then there should be folders for each language and possibly language & country with the same filename, but localized. eg: templates/fr/helpSuccess.php

Add a Static Page to Symfony

Mark — Mon, 28 Mar 2011 15:02:19 +0000

Static pages can be added to Symfony quite easily.

Edit your routing.yml file which is probably located at apps/frontend/config/routing.yml, and add the following routes to add an about, a privacy, and a terms and conditions page.

PLAIN TEXT

CODE:

# static pages
about:
url: /about
param: { module: home, action: page, view: about }
privacy:
url: /privacy
param: { module: home, action: page, view: privacy }
terms:
url: /terms
param: { module: home, action: page, view: terms }

If you are going to keep the generic rules, make sure you add these new rules before the default actions.

Clear your cache:
./symfony clear-cache

Then inside the module named home (create it if it doesn't exist), add the following action:

PLAIN TEXT

PHP:

/**
* Load a static page.
* @param sfRequest $request A request object
*/
public function executePage(sfWebRequest $request)
{
$directory = $this->getContext()->getModuleDirectory().DIRECTORY_SEPARATOR."templates";
$name = $request->getParameter('view');
// for safety, strip out all non-alphanumeric characters
$name = preg_replace('/[^a-zA-Z0-9\s]/', '', $name);
if (is_readable($directory.DIRECTORY_SEPARATOR.$name."Success.php"))
{
return $this->setTemplate($name);
}
else
{
$this->forward404();
}
}

The template files will be on the home/templates directory, called aboutSuccess.php, privacySuccess.php, and termsSuccess.php

This action will check if the template file exists, and if so load the template, if not it will forward to the 404 not found page. Easy and safe static templates. Add more routes and the appropriate template file as required.

Web Development Best Practices

Mark — Mon, 10 Jan 2011 05:01:47 +0000

Choosing a Technology Framework

Does it really matter if you use ASP.NET MVC, Struts 2, Yii, or Rails? Well it might, but for many websites these modern frameworks are just as competitive as the next. Use the stack that is most appropriate for your customer's situation and is the best choice at the time. Since this is the real world, it will probably change a couple of years in the future.

Leverage Community Extensions

Each framework out there has libraries of modules, extensions or plugins that enhance functionality and provide features that would you otherwise would need to write yourself. If it exists, and it's in good shape, don't write it yourself, leverage existing extensions that are appropriately licensed for your project.

Future Proof your URLs

It no longer makes sense to have a web site with extensions, be it .html, .php, .jsp, or .whatever you can think of. Arstechnica even created their own .ars, for no reason that I could tell. Yes the web started with .html because websites were simply serving static files, but that is no longer relevant anymore.

If you build a website with .jsp as the suffix to all URLs, and then a couple of years later your boss wants to re-write the website in python, does that mean you change all URLs to be .py, and setup mass url re-writing schemes to handle the old URLs? No, this would be a nightmare. Protect your future self by completely leaving the actual technology used to build the website outside of the URL.

Another bonus is that these URLs also end up being more SEO friendly!

Use a JavaScript Framework (maybe)

If you are building an AJAX heavy website such as GMail or Facebook, use a JavaScript framework. This is not relevant for many sites that simply use JavaScript to provide some enhanced functionality, but for websites that are heavily dependent upon JavaScript and simply cannot function without it.

I'm not talking about jQuery or Prototype, while those are good libraries that abstract the differences between browsers and provide easy to use functions, they are not built as a comprehensive framework. I'm suggesting you use a framework like JavaScriptMVC, SproutCore, or Spry. These frameworks can be used in tandem with jQuery, but go much farther in helping you organize and control your JavaScript code.

Watch a demo video of what JavaScriptMVC can do for you.

Multiple Drag and Drop with jQuery

Mark — Tue, 30 Nov 2010 07:25:15 +0000

I took inspiration from David Walsh and updated his Drag and Drop script to be able to handle multiple Drag and Drop sections on one page at the same time. Plus I cleaned it up a bit by adding all the functions to a JavaScript object. As jQuery is my preferred JavaScript library this code is using the jQuery version.

Checkout the demo

PLAIN TEXT

JAVASCRIPT:

/* create object */
function DragNDropList(selector){
this.list = $(selector);
this.sortInput = jQuery('#sort_order');
/* store values */
this.list.children('li').each(function(){
var li = jQuery(this);
li.data('id',li.attr('title')).attr('title','');
});
/* sortables */
var obj = this;
this.list.sortable({
opacity: 0.7,
update: function(){
obj.submit();
}
});
this.list.disableSelection();
}
/* worker function */
DragNDropList.prototype.submit = function(){
var sortOrder = [];
this.list.children('li').each(function(){
sortOrder.push(jQuery(this).data('id'));
});
this.sortInput.val(sortOrder.join(','));
this.request();
}
DragNDropList.prototype.request = function(){
var obj = this;
jQuery.ajax({
success: function(data){
$("#status").text('Saved');
},
error: function(){
$('#status').text('Failed to save sort order').show();
},
data: 'sort_order=' + obj.sortInput[0].value,
dataType: 'json',
type: 'post',
url: '/site/update'
});
};
// init drag-n-drop lists
var list1 = new DragNDropList('#list1');
var list2 = new DragNDropList('#list2');