HACKINGON.NET

Put It On a Shirt

liam.mclennan.nospam@nospam.gmail.com (liammclennan) — Sat, 21 Nov 2009 18:26:00 +1000

Sometimes you have a t-shirt idea, but there is no way to try it out – until now. Introducing OnAShirt.net. It is a simple app I coded in a couple of hours today that allows the user to place text over a picture of a t-shirt, or even to conduct t-shirt conversations with themself.

Thanks to jQuery for making this sort of thing so easy.

mocra off railers t-shirt

liam.mclennan.nospam@nospam.gmail.com (liammclennan) — Fri, 20 Nov 2009 12:14:44 +1000

In a little over 5 weeks Dr Nic and the Fair-brothers will begin their Homeric rickshaw running adventure from the Himalayas to the south of India. Their adventure is raising money for some worthy causes so please give generously.

As you can see, Greg was kind enough to send me a mocra off railers t-shirt. It is very comfortable. Thanks Greg and good luck!

Should a Build Environment match Development or Production?

liam.mclennan.nospam@nospam.gmail.com (liammclennan) — Thu, 19 Nov 2009 21:33:00 +1000

Today I had a twittersation about build servers, and how closely they should match the development and production environments. Damian’s position was that the build server should match the development environment, while I held that the build environment should be as close to production as possible. Martin Fowler’s Continuous Integration article says:

Test in a Clone of the Production Environment

The point of testing is to flush out, under controlled conditions, any problem that the system will have in production. A significant part of this is the environment within which the production system will run. If you test in a different environment, every difference results in a risk that what happens under test won't happen in production.

As a result you want to set up your test environment to be as exact a mimic of your production environment as possible.

I can provide an example of why this is a good idea. I am currently working on a project that is using Asp.Net MVC 2, which is installed on developer’s machines as a standalone MSI. The same article I mentioned before also says, “everything you need to do a build should be in there [repository] including: test scripts, properties files, database schema, install scripts, and third party libraries”. Being fallible, I made a mistake and failed to include one of the required MVC DLLs in the source repository. Because the build environment matched production we quickly detected the error because the build broke. If the build server was similar to the development environments then it would have had the required DLL in the GAC and the bug would have gone undetected.

Here are the things that I consider to be important for a build environment:

The build server should, as close as possible, match the production environment
The build server should be fast. Rapid feedback is important
The same build that runs on the build server should also be runnable on the developer’s machines
When a build fails, everyone should know

Automated Acceptance Testing With NGourd and WebAii

liam.mclennan.nospam@nospam.gmail.com (liammclennan) — Thu, 19 Nov 2009 07:45:00 +1000

I have written about about WebAii before. It is functional but the API sucks. I have written about NGourd too.

I am currently working on a project that is using the combination of NGourd and WebAiii for automated acceptance testing. We start with a story:

Feature: Search
    As a user
    I want to search for items
    so that I can find data that I am interested in

and then write some scenarios like:

Scenario: Search for a compensation agreement
    Given I am at the home page
    When I select the Agreements perspective
    And I search for 'agreement 1'
    Then the search results should be displayed

Within the test project we have the following directory structure:

Search.feature is a text file containing the previously listed feature and scenario definitions. For each scenario step we must have a corresponding step definition. For example the step ‘When I select the Agreements perspective’ matches the following step definition:

        [Step(@"search for '([\w\s]+)'")]
        public void search_for(string searchTerm)
        {
            CurrentBrowser.Find.ById("Terms").SetValue("value", searchTerm);
            CurrentBrowser.Click(CurrentBrowser.Find.ById("search_submit"));
        }

Note the use of regular expressions to parameterise the step. Because this step is an action we put it in the ActionSteps file. Everything that we need to do for our tests falls into one of the three categories: Action, ContentAssertion or Navigation. The goal is to avoid defining the same step twice so that the set of steps form a domain specific language that can be used by business analysts and the like.

NGourd is a Cucumber knockoff, but without many of the features. However, it is surprising how far you can get with just the basics. So far it is working nicely.

Have Atlassian Lost Their Minds?

liam.mclennan.nospam@nospam.gmail.com (liammclennan) — Wed, 18 Nov 2009 20:57:00 +1000

Atlassian is the company that I wish was mine. They make cool web products, they have a unique voice and they are successful. But recently they lost their minds, and starting giving their software away (almost).

If you are a small organisation like me you can buy the main atlassian products (jira, confluence, greenhopper, bamboo, fisheye & crowd) for US $10.00 each. User limits apply.

We are using Jira + Greenhopper for agile project management, and confluence for our project wiki. Confluence is VERY nice. It is the best wiki I have worked with. Simple, powerful and it works. It also is very good at converting word documents to wiki pages which is something that our BA has appreciated. JIRA + Greenhopper is a workable solution for agile project management if you don’t want to go with walls and post-it notes. At times it can be a bit confusing because Greenhopper is a JIRA plugin that adds mingle-like functionality to a bug tracking application. Jumping between JIRA and Greenhopper is not entirely smooth, however, it is still one of the better solutions I have tried, and I have tried them all. This is the first project I have been on that has had a burn down chart, and I am finding Green Hopper’s burn down to be an excellent big visible chart / information radiator. JIRA reminds me of Gemini, and Greenhopper reminds me of Mingle. Not sure who copied who. The good news is that unlike Mingle, JIRA does not require a dedicated super computer.

The only disappointed I have is that Atlassian’s code review tool, Crucible, was not included in the deal.

Collection Initializer Syntax for Dictionary

liam.mclennan.nospam@nospam.gmail.com (liammclennan) — Wed, 18 Nov 2009 13:00:00 +1000

Dictionary<TKey, TValue> is a generic type that stores collections of KeyValuePair<TKey, TValue>. It is used heavily (actually the IDictionary<TKey, TValue> interface) in Asp.Net Mvc as a parameter to view helper methods.

I am writing this post because I have a tendency to forget the collection initializer syntax for this type of collection, so here it is:

IDictionary<string, int> collection = new Dictionary<string, int>() 
{
	{ "rows", 7 },
	{ "columns", 2}
}

The nice part is that it supports specifying the collection members as anonymous types, instead of having to instantiate new instances of KeyValuePair<TKey, TValue>.

jQuery UI Dialog: Part 2 – The Modal Dialog

liam.mclennan.nospam@nospam.gmail.com (liammclennan) — Mon, 02 Nov 2009 05:45:00 +1000

This is part 2 of my series on the jQuery UI Dialog. Part 1 – The Default Dialog covered the most basic usage of the dialog widget. In this second part I will demonstrate a simple modal dialog.

A modal dialog is a dialog that takes focus, and disables the rest of the application until it is closed. They are used to force the user to acknowledge something, or to gather some input. It is worth pointing out that modal dialogs can be annoying for users so you should consider carefully if it is absolutely necessary. User Account Control (UAC) in Windows Vista and Windows 7 is an example of an annoying usage of modal dialogs.

The dialog widget is usually configured by passing the dialog() method an anonymous object containing a set of key value pairs that describe the options required. The anonymous object is created using javascript’s object literal notation. My favourite javascript author, Douglas Crockford, describes the notation:

In the object literal notation, an object description is a set of comma-separated name/value pairs inside curly braces. The names can be identifiers or strings followed by a colon.

A simple code example is:

var myObject = {
    firstProperty: 'value 1',
    secondProperty: 2
};

The options I will use to create a modal dialog are:

height	The height of the dialog
modal	Boolean indicating if the dialog should be modal
overlay	Creates a partially transparent modal overlay layer. Very web 2.0.

View a Demo

And here is the code:

<!-- See part 1 for html preamble -->
<body>  
    <p>Some text on the page.</p>
    
    <div class="make_me_a_dialog">Content of div</div>
    
    <script type="text/javascript">

        $(document).ready(function() {

            $('.make_me_a_dialog').dialog({ bgiframe: true,
                height: 200,
                modal: true,
                overlay: {
                    backgroundColor: '#000',
                    opacity: 0.5
                }                
            });

        });
        
    </script>  
</body>
</html>

jquery ui dialog: Part 1 – The Default Dialog

liam.mclennan.nospam@nospam.gmail.com (liammclennan) — Thu, 29 Oct 2009 12:57:00 +1000

This series is going to document increasingly complex usages of the jQuery UI Dialog widget. This first part of the series will demonstrate how to display the default dialog.

Other series members:

jQuery UI Dialog: Part 2 – The Modal Dialog

The jQuery UI Dialog is a powerful client-side dialog control. It is bundled as part of the jQuery UI suite and as such it is available on the Google CDN. Some of its more interesting features are:

Modal / non-modal dialogs
Support for resizing and dragging
Support for buttons
Support for Theming
Stacking
Partially transparent modal overlay layer

The simplest usage of the dialog control is to select a div, and call the dialog() function.

View a Demo

Here is the complete code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Default dialog</title>
    <link href="ui-darkness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
</head>
<body>  
    <p>Some text on the page.</p>
    
    <div class="make_me_a_dialog">Content of div</div>
    
    <script type="text/javascript">

        $(document).ready(function() {

            $('.make_me_a_dialog').dialog();

        });
        
    </script>  
</body>
</html>

Note that the two javascript files, jquery.min.js and jquery-ui.min.js, are loaded from the google content delivery network (CDN). Line 19 selects the div with the class 'make_me_a_dialog' and applies the jquery dialog plugin to it.

An emerging business model for development tool micro isvs

liam.mclennan.nospam@nospam.gmail.com (liammclennan) — Wed, 28 Oct 2009 14:01:41 +1000

The traditional, Paul Graham style of technology start-up is:

Someone has an idea
They try to validate their idea
The idea is implemented
The idea is communicated to the market

While the importance of step 2 has always been emphasized the weakness of the above remains that the product may not gain significant visibility to the market. The products never reach critical mass and so they fade gradually into obscurity.

Recently I have noticed a new model emerging that promises far less risk at the tail end of the product cycle:

Build a personal brand. This is usually done by making open-source contributions.
Develop a product that is related to your brand.
Use your brand to reach a market

The advantage here is that the market is ready and waiting and has a degree of trust in the entrepreneur. Here are some examples of development tool isvs that are using this strategy:

	Brand building activities	Related commercial activities
Ayende	Open source contributions to Rhino Mocks and NHibernate.	NHProf (NHibernate Profiler)
Rob Conery	Subsonic and MVC Storefront	Tekpub (Screencast subscriptions)
Jeff Atwood	Coding Horror blog	stackoverflow Q & A site
Nate Kohari	Ninject IoC Container	Zen Kanban application
Kent Beck	TDD, XP and lots of other things	JUnit Max

I am sure there are others but that is all I can think of right now. Personally, I think it is great that these people are able to leverage their excellent contributions to produce a viable business.

Thoughts on webaii functional / web testing framework

liam.mclennan.nospam@nospam.gmail.com (liammclennan) — Fri, 23 Oct 2009 11:10:00 +1000

WebAii is a proprietary, but free, functional testing framework from ArtOFTest. It has become more visible since telerik started bundling it with their ASP.NET AJAX UI Controls framework.

The Good News

The Achilles heel of most web testing tools is ajax. The good news is that webaii has more support for testing ajax applications than any of the other frameworks I have tried. Methods are provided to wait for elements, or to wait for the entire page to finish rendering. To integrate webaii into your testing project requires referencing a single dll, which is also very nice.

the bad news

CSS selectors are a well designed DSL for selecting dom elements. One of the reasons why people like jQuery so much is that it uses CSS selectors to select dom elements. Webaii uses a clunky API for dom selection. It is ok for basic selectors (by id or class) but more complex queries require dropping down to a nasty low-level API.


// jQuery: $(‘#main’)
Find.ById(“main”);

// jQuery: $(‘.myclass’)
Find.ByAttributes("class=myclass");

After writing a few smoke tests I added them into our team city continuous integration build, which broke the build. ArtOfTest do provide instructions for getting the tests to run in a build but it is complicated and requires significant changes to our build.