If you’re using Mechanize through Webrat though, things are a little different. The nice thing though, is that you can do this in a step definition – allowing features to be based on different browser scenarios (this is great if you’re developing across devices).

First off there are two accessors of interest in mechanize, “user_agent” and “user_agent_alias”. The former is fairly self evident and lets you define the user agent at will, the latter gives you shortcut access to a list of common user agents baked into mechanize. You can see that list in the mechanize.rb source. It contains some desktop browsers, the iPhone and the default Mechanize UA strings.

If you’re happy with the default alias list, you can just write a step definition like this:

Given /^I am using the "(.*)" browser$/ do |browser|
  webrat.adapter.mechanize.user_agent_alias = browser
end

And then you can use this in your features:

Given I am using the "iPhone" browser
When I visit the home page
Then I should see "You are using an iPhone!"

If you want to be able to specify your own UA strings, and as I said this is especially likely if you are developing cross-device applications where capabilities are important, then you can just use your own hash instead, and set “user_agent” rather than “user_agent_alias”:

Given /^I am using the "(.*)" browser$/ do |browser|
  UA_ALIASES = {
    "Nokia N95" => "Mozilla/5.0 (SymbianOS/9.2; .....",
    "Palm Pre" => "Mozilla/5.0 (webOS/1.0; ....."
  }
  webrat.adapter.mechanize.user_agent = UA_ALIASES[browser]
end

With a little tweaking you could use both the included list and, if the string from your feature isn’t there, look in a custom list too.

Waha, a user on the chromeplugins.org site posted a much more complete list of URL schemes that Chrome uses. Waha was looking at the url_constants.cc source file, along with some other stuff, to work this list out.

I’ve ignored the virtually universal set of protocols that are in just about every browser: http, https, ftp, file, data, feed and javascript, and also the URLs that cannot be entered into the address bar (not using Chrome 5 on OS X Snow Leopard anyway).

Without further ado, here’s the list:

• about:blank – the empty page
• about:cache – disk and memory cache information
• about:net-internals – network information including Proxy, HostResolver, URLRequest, HTTPCache and SocketStream
• about:crash – the page shown when a tab process crashes
• about:credits – list of libraries and other code used in Chrome, with links
• about:hang – this seems to kill a tab for me (I haven’t linked for that reason – use at your own risk)
• about:memory – memory usage of the various processes
• about:shorthang – see about:hang above
• about:terms – Google Chrome Terms of Service
• about:inducebrowsercrashforrealz – not many lolz here
• chrome://extensions/ – installed extensions
• chrome://history/ – your browsing history
• chrome://newtab – the new tab page
• chrome://thumb/http://www.google.com/ – thumbnail for a page you’ve visited
• chrome://favicon/http://www.google.com/ – favicon for a page you’ve visited
• view-source:http://otaqui.com/blog/539/complete-list-of-special-google-chrome-urls – view the source of a web page

It’s really great to see this extension continue to improve not only in terms of stability and useful features without getting bloated.

The original note about this feature is on the Firebug 1.6a5 blog post.

This gem was originally designed to work with Cucumber, and initially was intended to just validate pages against the XHTML Strict doctype that BBC pages are usually required to use. Since it uses Nokogiri for validation – against the XML Schema rather than the Doctype for what it’s worth – the testing is a) strict and b) *fast*. There are no external webservice calls, so it is fine to test all page loads within Cucumber, even testing the same URI many times over (since the bottleneck will almost certainly be your app by some margin.

I’m currently working on a post about using the gem for the BBC Web Developer blog, but I thought I’d point any interested parties at the code here and now.

[NB: I always have an external cake core directory, for easy swapping. The code examples all assume you have done this, or at least created an alias in your terminal to point to the core cake directory with something like: alias cake='../cake/console/cake'

First off, to find out about the current console applications you are running jump into a terminal and cd to your app directory, then simple run the “cake” command to see what you have available:

app_dir $ cake

This will output a list of available shells in the core cake library and the two “vendors” directories.

So how do you go about creating your own? The CakePHP documentation on creating Shells & Tasks is a good place to start.

An application I’ve needed to automate with a cron-job, and also have available as an in-app, on-demand function is the sending of emails. I’m not talking about writing a mass mailer here, but rather just sending out course information to users who are booked to attend – and doing so both automatically and on-demand when an administrator decides it is necessary. This is an obvious instance where you don’t want to duplicate the code in the controller and the shell.

In my case, I have several kinds of email I want to send, so I set up a generalised Task, used by several different Shells. The advantage of doing things this way around is that any other Shells can also make use of the emailer Task in the fututre.

Here’s some simplified code from one of the Shells, a “booking reminder” for delegates:

// file app/vendors/shells/booking_reminder.php
<?php
class BookingReminderShell extends Shell {
  var $uses = array("Booking","User","Course");
  var $tasks = array("Emailer");
  public function main() {
    // use $this->Booking etc as if we were in a controller
    // use $this->Emailer for the task
  }
}

And then we have the Task:

// file app/vendors/shells/tasks/emailer.php
<?php
class Emailer extends Shell {
  public function execute() {
    // this method is called when the task is instantiated,
    // gives you a chance to setup
  }
  public function send($to,$from,$subject,$message,$attachments=null) {
    // called from shell with: $this->Emailer->send();
  }
}

Note how both Shells and tasks extend from the base “Shell” class. Also note how Shells use a method called “main()” when they are run, whereas Tasks use “execute()” when they are created.

First adding comments, which means a “#” mark at the start of every line
sed -i '' 's/^\([^#]\)/#\1/g' ~/.ssh/config

Second removing the comments, just stripping out the “#” marks.
sed -i '' 's/^#//g' ~/.ssh/config

A few things to note here, on the assumption that you can see how Regular Expressions work and are vaguely familiar with sed’s /find/replace/ style syntax:

1. the “-i” flag means “edit in place” and requires an extra argument for the backup file’s extension. I’ve given an empty string so that no backup is made
2. sed requires escaping of capturing parentheses, hence the \( and \) in the first example
3. the final ‘g’ at the end of the expressions means “global”, i.e. replace all occurences


When /^I am on (.+)$/ do |page_name|
webrat.adapter.mechanize.set_proxy('proxy.host.com',8080)
visit path_to(page_name)
end


I’m sure there’s a tidier way to do this, but it’s quick and it works with the following gem versions:

Cucumber 0.3.11
Webrat 0.5.3
Mechanize 0.9.3

The trick is to use JRuby and its gems, and also to install libxml2-devel

$ cd ~
$ wget http://jruby.kenai.com/downloads/1.4.0/jruby-bin-1.4.0.tar.gz
$ tar -C /usr/local/ -xzvf jruby-bin-1.4.0.tar.gz

You should now have Jruby. Add it’s bin directory to your path, presumably in your ~/.bash_profile file:
$ export PATH=$PATH:/usr/local/jruby-1.4.0/bin
$ jruby -v

Now install some mechanize requirements:
$ sudo yum install libxml2-devel libxslt-devel

If you don’t already have the “normal” ruby installed, you can get to the jruby “gem” command by just typing “gem”. If you do have ruby, or want to be absolutely sure, type the commands like this:
$ jruby -S gem install cucumber mechanize webrat

You’re good to go! You should now be able to run your features with:

$ cucumber features/

As well as adding some PHP 5 functionality on PHP 4 servers, the script also adds a fair number of utility functions to the global namespace, such as:

// similar to print_r(), but dumps to the view and
// is disabled if debug isn't > 0 in config.php
pr($anything); 

// returns the correctly internationalised plural or
// singular depending on locale.
__n($singular, $plural, $count, $return);

It’s definitely worth going one step beyond google’s own instructions on the matter and correctly configuring the drafts, sent and trash folders in both clients:

Mail.app

Choose the google folder for drafts in the sidebar. From the os x menu bar at the top of your screen choose ‘mailbox’ and then ‘use this mailbox for’ and then ‘drafts’. Do the same with the other folders.

iPhone Mail

Having done the basic setup, go to the settings app, choose ‘mail, contacts and calendars’, navigate to your mail account and choose ‘advanced’ and then setup the ‘mailbox behaviours’ as required.

NB if you are a fan of ‘labels’ in gmail, bear in mind that these equate to copies of the email in IMAP folders. That means that if you have, as I did, several thousand labelled emails from a different account you will have more than one copy of each downloaded to mail.app, assuming you chose to download your messages- and who wouldn’t?

The iPhone seems to work pretty flawlessly, but mail.app sometimes seems to take a while to catch up with changes (especially emails you’ve read on the iPhone while mail.app was offline) although it always seems to get there in the end.

Things from Cultured Code also comes as an iPhone app, and the duo update each other fairly well. They miss out on being being “excellent” because the iPhone-to-mac syncing only happens when both your devices are on the same wifi network, and short of closing one of the pair and re-opening it, I can’t fnd a way of forcing a sync to happen whenever you would like.

That being said, they do both work extremely well. The desktop version has a very nice quick-entry interface which feels a little bit like Quicksilver (and is accessed by pressing Ctrl+Alt+Space) which is a nice touch. Both apps use “dock badge” numbers although the number shown can only be customised on the desktop version which lets you set the number as Due, Due+Today and Due+Today+Inbox; the iPhone dock badge will only show Due+Today so personally although I would like the full count I leave the setting so that both are the same.

Neither app is free. The desktop client is (at the current exchange rate) £37.13 ($49.95) and you can buy Things from the App Store for £5.99 ($7.99). The desktop version is also available as a 5-license bundle for £55.72 ($74.95)

There are occasions though where it makes perfect sense – for example where you are fixing a known bug in a specific version of a browser. A good example is the bug in IE 6 that resets the selected index of a Select tag that has a label and the for attribute. This bug doesn’t affect IE 7 or 8, or any other browser, but does make for a bad user experience if you are doing the right thing and including labels for your select tags.

Microsoft has published some javascript to fix this and I adapted their code to work with with the Prototype Javascript Library.

This fix will look for all select tags on the page (you could adapt it to only look for those with the “for” attribute but I have a sneaking suspicion that if anything that would in fact be a bit slower) and observe the onfocusin and onfocus events as suggested in the knowledge base article.

// Select with 'for' attribute fix for IE
Event.observe(window,'load',function() {
	if ( !Prototype.Browser.IE || !(parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5))==6) ) return;
	$$('select').each(function(eSelect) {
		eSelect.observe('focusin',function(e) {
			try {
				var eSrc = window.event.srcElement;
				if ( eSrc ) eSrc.tmpIndex = eSrc.selectedIndex;
			} catch(e) {}
		});
		eSelect.observe('focus',function(e) {
			try {
				var eSrc = window.event.srcElement;
				if ( eSrc ) eSrc.selectedIndex = eSrc.tmpIndex;
			} catch(e) {}
		})
	});
});

I must admit that although it’s ok for short posts I can’t imagine I’m going to be writing any very long posts on a touchscreen keyboard (although I am starting to get the hang of it even after only two days of light use). Please pardon any smelling pistakes!

The application is open source, which I’ll definitely appreciate if I ever get around to building an app myself.

You can work with multiple blogs, both self hosted and on wordpress.com. Once you have set up a blog you configure the amount of recent posts to show, I found that he default 10 was a usefaul number

When writing a post, you can set both the tags and choose from the current categories or create ones. Draft posts are saved locally, and when you have finished editing you can either publish immediately or at some future date. You can alternatively set the post as a draft or pending review, which will upload it to the server.

There is also support for adding images to posts – from the photo library or a new shot although no ability to control where in the post the images appear – you only get them defaulting to the bottom of the post.

Overall I would say that the app is as good as the iPhone allows.

In order to circumvent this add this to your “app_controller.php” file (which sits directly inside the “app/” dir, rather than in “app/controllers”):

<?php
class AppController extends Controller {
  var $components = array('RequestHandler');
  var $helpers = array('Html','Form','Ajax');
  function beforeFilter() {
    if ( $this->RequestHandler->isAjax() ) {
      Configure::write('debug',0);
    }
  }
}
?>

Note that while this will disable the debugging output, it will also have other affects too (for the life of the Ajax Request) like extending the length of time that the “schema” is cached. This should make little or no difference, but is worth remembering.

I think almost regardless of it’s performance improvements the real game-changing potential here is the inevitable swathe of add-ons and extensions that will be, and in some cases such as NoScript already are, available.

I don’t think that any web developer who has used it would want to go back to a world without Firebug and I also think that it’s influence on WebKit’s developer tools is fairly clear to see.

So I really hope that support for Fennec spreads beyond the Nokia 810 soon, and that it’s as instrumental as Firefox was in re-igniting browser development, especially from a developer-tool perspective.

This is usually considered to mean “before the user has to scroll down” but can also just mean “the stuff they look at first” even if they have a really big monitor. This gives us a slightly more useful thing to think about – the first “batch” of content that will be at the top of the page, and incidentally will be the entirety of what a considerable portion of our users see first.

So, I have a suggestion to all the web *designers* out there to mull over: introduce the idea of “Two Rows” in your design. By having a single row that is for content “above the fold” and a second one for everything below, we can get the absolute minimum “perceived load time” of the page.

Let’s have a look at a fairly standard wireframe of a page:

Normal three column page layout

This will be more or less as you expect, a header and footer with 3 (or however many) columns in between.

Now let’s have a look at a wireframe designed for the fold:

Optimised For the Fold Layout

As you can see, I’ve changed the structure to split the main content completely into two distinct rows.

The advantage here is that we developers can do several things to make the first row appear as quickly as possible:

1. Firstly we don’t have to do anything. The source order itself will mean that the content of the first row is loaded first, meaning that you won’t have that all-to-common “pause for the right-hand-column” to load.
2. Place all styles at the top of the page, and all required scripts between the two rows – this will make the page appear correctly styled and have javascript-driven functionality available.
3. Taking the point above to a further degree, we could in fact *split* the javascript (and possibly even css) files, which is normally a abad idea, to provide only the functionality required for the “first row”, and then load other resources afterwards. This is a rather extreme approach, but could help if your site really needs the content “above the fold” to be absolutely as fast as possible even at the cost of overall page performance.
4. With a dynamic site, we can flush the buffer after the first row, and leave any further processing overhead to happen after that much of the page has been sent to the browser.

There is no real need for the actual design to exagerate the rows in the same way that the wireframe does – but you would need a horizontal split of the content at that point to make things as easy and flexible as possible. This limitation can be overcome with CSS, and possibly javascript, but this will rapidly become fiddly and hard to maintain.

To demonstrate what I mean, I took the Guardian’s homepage, and reworked it (as a graphic) to have the horizontal split required for Two Rows, without really appearing much different to the current, pure-column structure.

Before:

Original Guardian Homepage

And after (with the “second row” being slightly greyed out):

Modified Guardian Page

This example worked fairly well in terms of “hiding” the row lines since some things are bumped right up to them and others have varying amounts of whitespace either side.

I must admit that I’ve never implemented this technique, but I certainly believe that it could have significant impact for a site like the Guardian that has a large amount of content “below the fold”.

<?php
require_once (LIBS . 'model' . DS . 'datasources' . DS . 'dbo' . DS . 'dbo_mysql.php');
class DboMysqlEx extends DboMysql {
   var $description = "MySQL DBO Driver - Extended";
   // Override resultSet to allow for Model__field type aliases
   function resultSet(&$results) {
		if (isset($this->results) && is_resource($this->results) && $this->results != $results) {
			mysql_free_result($this->results);
		}
       $this->results =& $results;
       $this->map = array();
       $num_fields = mysql_num_fields($results);
       $index = 0;
       $j = 0;
       while ($j < $num_fields) {
           $column = mysql_fetch_field($results,$j);
           if (!empty($column->table)) {
               $this->map[$index++] = array($column->table, $column->name);
           } else {
               if (strpos($column->name, '__')) {
                   $parts = explode('__', $column->name);
                   $this->map[$index++] = array($parts[0], $parts[1]);
               } else {
                   $this->map[$index++] = array(0, $column->name);
               }
           }
           $j++;
       }
   }
}
?>

This code, which overrides the default MySQL DBO, allows you to SELECT something AS Modelname__Fieldname (with a double underscore) and will end up populating your result set as you would like it to ($results['Modelname']['Fieldname']).

In order to use a custom datasource, copy the code and save it as “/cake_dir/app/models/datasources/dbo/dbo_mysqlex.php” and edit your “/cake_dir/app/config/database.php” file so that it uses the “mysqlex” driver instead of plain old “mysql”.

This all came from a discussion on the excellent CakePHP Google Group

Grigri posted a copy of his modified MySQL Extended DBO online if you want some more of his nice features like backtracing.

I have a particular setup where values across two tables – a course table and a schedule table which relates to it – can be effectively “overridden”. The idea is that for any given course, one can set “default” values, and then these can be overridden every time a course is actually scheduled to happen.

The courses table looks something like this:

COURSES
id INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY
title VARCHAR(255) NOT NULL
subtitle VARCHAR(255) NOT NULL
description TEXT NOT NULL

SCHEDULES
id INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY
course_id INT(11) NOT NULL
subtitle VARCHAR(255) NULL
description TEXT NULL

Hopefully you can see what I would want during a SELECT – to get the values from the schedules table if they aren’t null, or otherwise get the value from the courses table if they are.

This is achieved with the IFNULL built in function in MySQL. IFNULL takes two arguments, and returns the first argument if it (the first argument that is) is not null, or the second argument if it is. The actual SQL for my example looks like this:

SELECT courses.title, IFNULL(schedules.subtitle,courses.subtitle) AS subtitle, IFNULL(schedules.description,courses.description) AS description FROM schedules LEFT JOIN courses ON schedule.course_id=course.id;

This will give you the “subtitle” and “description” values from the linked table (schedules) if they exist, or the default values from the original table (courses) if they don’t.

Before I lept to a programming language like PHP to do a load of selects, manipulate the data and then run inserts I thought I’d try and do it in pure SQL. It turns out this is fairly straightforward.

Let’s assume we have two databases, db_source and db_target and that we want to copy stuff from the former into the latter. Both of these have identical tables called ‘users’ and ‘posts’ like so:

USERS
id INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL

POSTS
id INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
user_id INT(11) NOT NULL,
title VARCHAR(255),
post TEXT

Now, let’s assume that in db_target we *already* have some posts and some users, and what we really want to do is merge the records from db_source with the ones that already in db_target, obviously maintaining all the related keys.

In this example we will say that we have 5 current users in db_target, and 100 posts; and also that the auto_increment values are 1 to 1 in both tables (that is the next auto_increment value will be 6 and 101 for users and posts respectively in db_target).

With these two commands, which will run SO much faster than some kind of programmatic loop, we can copy all the users and posts at a stroke without losing any associations:

# copy the users, adding 5 to the user id while we’re at it:
INSERT INTO db_target.users ( id, name ) SELECT (id+5) AS id, name FROM db_source.users;

# copy the posts, adding 5 to the user_id and 100 to the post id:
INSERT INTO db_target.posts ( id, user_id, title, post ) SELECT (id+100) AS id, (user_id+5) AS user_id, title, post FROM db_source.posts;

Note that I have selected “as” where I have been using the addition operator. Given that we are also specifying which columns we are updating I’m not 100% sure that it’s necessary, but I find it helpful anyway.

I’m really happy to hear that, as the official google blog points out, Gmail now has support for Google Gears allowing you to view your mail offline.

This has caused quite a stir in the blogging community – TechCrunch invites you to throw off your chains, GoogleWatch speculates that it might be the tipping point for Gears adoption, Colin Charles mentioning SSBs such as Fluid and Prism (which this article is about), Google Operating System giving a basic overview and also the GadgetWise NYT blog giving it a spread.

So far, so good. Now what if we want to use a Site Specific Browser, such as those created by Fluid and Mozilla Prism? These “SSBs” are essentially entire browsers, but used only for a single web app – which is quite handy really. I think that Google’s paradigm of basically making each tab / window in your browser it’s own application instance may well remove the need for things like this eventually, but for the time being it would be great to use Gmail’s new offline capability in an SSB.

Well – we can’t do much about enabling Gears in Fluid, since it’s based on WebKit. Check back if you here that Google releases some frm of plugin for WebKit (although actually WK already has HTML5 style “local storage” using SQLite so it could be native support).

We can however do some hacking to get Gears installed in a Prism browser, so let’s go through the process. By the way – I am using Mac OS X 10.5, but I think this should work for any platform that can get Firefox and Google Gears.

I’m using a Google Apps For Your Domain account, it’s worked fine there, although your account will have to have Offline access enabled by google (patience, young grasshopper!).

Step 1: Split a Beam

Go and install Mozilla Prism. I did this by installing it as an extension to my current Firefox.

Once it’s installed and you have restarted the browser, login to your Gmail and from the Tools menu choose “Convert Website To Application.”

Choose whatever options you like in terms of where to put the shortcut. Personally I grabbed Chris Ivarson’s awesome Fluid Gmail Icons and used Preview.app to convert the 128×128 version into a PNG file.

I *also* had a slight issue with not being able to create the app inside the Applications folder, because it needed to Authenticate but just failed silently – YMMV.

Assuming that’s done you should have a nice new Gmail SSB, which you can start and log in to Gmail with. Funky.

Step 2: Start The Fans, Please!

[Note: you have to be older than young, from the UK and to know who Richard O'Brien is to get that "start the fans" bit]

So now we need to get Google Gears installed. You can try doing this from Gmail’s own interface but it will fail complaining that “Gears is not compatiable with XYZ” (where XYZ is the name you gave it and a version number). This is because, even though your Gmail webapp *is( Firefox under the hood, it doesn’t report itself as such to the extension. What we need to do is convince the extension that it is in fact compatible with it.

[Note: it might be more efficient if you want to install several extensions to make your SSB report itself as really being Firefox, but I'm happy with a one-at-a-time approach].

The next thing to do is actually download Google Gears manually. I suggest that you really do try (and fail) to install it from inside the Prism app, because you will be told the current, valid URL for the XPI in the process. If you’re super lazy, here’s where I got mine from (not a link so that you’re encouraged to FIND THE RIGHT URL FOR YOURSELF!):

http://dl.google.com/gears/current/gears-osx-opt.xpi

You might want to use Safari / Opera / wget / IE to actually download it.

Step 3: Unpack, Tweak, Repack

An XPI file is in fact just a ZIP file with delusions of grandeur. Rename the file to “gears-osx-opt.zip” and unpack it.

Now open up “install.rdf” and find the bit that looks like this:

<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>3.0.*</em:maxVersion>
</Description>
</em:targetApplication>

The big long string in curly brackets is the Firefox GUID.  We will need to change this, and also the version numbers.

I found the GUID and version numbers inside my (OS X-specific) “Gmail.app” that Prism created.  Control+Click on it and choose “Show Package Contents” then navigate to “Contents/Resources/application.ini” and open this in a text editor.  It is the “Version” and “ID” values that you want from the “[App]” section.

Applying these to the original install.rdf file we get this (I’ve extended the version numbers just for the hell of it):
<em:targetApplication>
<Description>
<em:id>prism@developer.mozilla.org</em:id>
<em:minVersion>0.1.*</em:minVersion>
<em:maxVersion>10.0.*</em:maxVersion>
</Description>
</em:targetApplication>

Save the edited “install.rdf” file and now you need to repack the zip / xpi.  Take note – you should compress the *files* and not the *directory* or it won’t work.

Change your newly created zip file’s extension back to XPI – and we’re ready to install!

Step 4: Install

This may vary across platforms, I’m not sure.

From the *status bar* (an unusual place to get to the Add Ons / Extensions list) of your Prism app, click the cog and choose “Tools”, “Addons”.  This should pop open the Add Ons panel.

Drag and drop the XPI onto the Add Ons panel and, hopefully, bingo!

If you get an error about “version support” then you might have got the ID or version number wrong somewhere.  If you get one about “cannot find install script” then your XPI / zip is badly formed.  Leave a comment if you need more help here.

Step 5: Enable Gears for Gmail

You’ll need to restart your browser and log back in to GMail.  Then you should be able to click the “Offline” icon at the top of the interface and go through the normal Gears “I trust this application” process.

That’s it! You should now be able to access your mail offline. It’s worth noting that the shortcut that gears can create for you to open your email while offline seems to work fine too.

[Update 31st Jan 2009: It looks like Fluid may support Gears sometime soon!]