Richard's blog

Creating a snap view with XAML in Windows 8 (WinRT)

Mon, 14 May 2012 12:17:15 GMT

If you create a new WinRT solution using the Grid or Split Application Template you'll get all the code you need to create a layout aware page that shows a different view when in snap view. If you start of your project using the blank project template, you need to do a little bit more work to get it working.

First you need to change the page to be a layout aware page. LayoutAwarePage is a class provided by the template and is in the Common folder.

In BlankPage.xaml.cs change:

public sealed partial class BlankPage : Page

public sealed partial class BlankPage : LayoutAwarePage

In BlankPage.xaml you need to change a view things:

The main page tag now needs to be a LayoutAwarePage so change it from this:

<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="Application1.BlankPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Application1"
    xmlns:common="using:Application1.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

Your page is now a layout aware page, so all you need to do is add a visual state manager that will control how things look in each different view. You may choose to show or hide different elements based on the view, or just change some sizes. Either way you include all the elements you want in the page set at the size you want them to be in the standard view. You hide them if you only want them to be visible in the snap view. Here is a simple example of a visual state manager:

<VisualStateManager.VisualStateGroups>

<VisualStateGroup>
  <VisualState x:Name="FullScreenLandscape"/>
  <VisualState x:Name="Filled"/>
  <VisualState x:Name="FullScreenPortrait"/>

  <VisualState x:Name="Snapped">
   <Storyboard>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyListScroller" Storyboard.TargetProperty="Visibility">
     <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
    </ObjectAnimationUsingKeyFrames>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyGridScroller" Storyboard.TargetProperty="Visibility">
     <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
    </ObjectAnimationUsingKeyFrames>
   </Storyboard>
  </VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

In this example I have a list view which is initially hidden for snap view and a grid view for my full screen view which I hide for the snap view.

Creating app bar buttons in WinRT

Wed, 09 May 2012 20:59:48 GMT

If you start a new blank Windows 8 App in Visual Studio you get loads of app bar button styles to choose from in StandardStyles.xaml including:

SkipBackAppBarButtonStyle
SkipAheadAppBarButtonStyle
PlayAppBarButtonStyle
PauseAppBarButtonStyle
EditAppBarButtonStyle
SaveAppBarButtonStyle
DeleteAppBarButtonStyle
DiscardAppBarButtonStyle
RemoveAppBarButtonStyle
AddAppBarButtonStyle
NoAppBarButtonStyle
YesAppBarButtonStyle
MoreAppBarButtonStyle
RedoAppBarButtonStyle
UndoAppBarButtonStyle
HomeAppBarButtonStyle
OutAppBarButtonStyle
NextAppBarButtonStyle
PreviousAppBarButtonStyle
FavouriteAppBarButtonStyle
PhotoAppBarButtonStyle
SettingsAppBarButtonStyle
VideoAppBarButtonStyle
RefreshAppBarButtonStyle
DownloadAppBarButtonStyle
MailAppBarButtonStyle
SearchAppBarButtonStyle
HelpAppBarButtonStyle
UploadAppBarButtonStyle

If that list doesn't quite cover you then it's really easy to create a metro button style that will. The easiest way is to create a style based on AppBarButton and to use an icon from the font Segoe UI Symbol. The advantage of using a font is that it is automatically scaleable. Segoe UI Symbol has a lot of symbols for you to choose from and is the font used by AppBarButtonStyle, which we are basing our style on. You can use Character Map to find a good one, or I've included some of my favourites at the end of this post.

Here is my style for a crop button. Include this style in a resource dictionary that will be accessible to all the xaml files that need it:

The text in bold is the text you need to change to make different sorts of buttons. The Content property contains the hex unicode value for the font character you want to use as your icon. I wasn't aware of an accepted standard for a crop icon, so I found one that I thought worked pretty well.

To use this style on your button you just x like this:

Here are some font characters from Segoe UI Symbol that you might want to use:

Icon	Code	Description
		Outline heart
		Filled heart
		User
		Group
		Pin
		Peek, look, reveal
		Refresh with angles
		Outline star

There are hundreds more. I'm going to keep updating this list as I find more symbols that I want to use in my apps. Let me know in the comments if there are any symbols you think should be included and what their hex codes are.

Do we need the repository pattern?

Mon, 16 Apr 2012 20:38:50 GMT

As we learn new technologies, we discover new mistakes. The Entity Framework makes data access very quick to develop, but also introduces a new set of mistakes that can be made. On my last project I used the Entity Framework Profiler and found my code blighted with a scourge of N+1 problems. I discussed this in my blog post Reviewing my data access layer using the Entity Framework Profiler.

I was also worried that my code wasn’t testable. From what I’d read, the repository pattern seemed to be the agreed best practice for making your data access testable.

However my N+1 problems led me to read a lot of blog posts by Entity Framework Profiler creator Ayende Rahien. In his post Repository is the new singleton he explains why the repository pattern is no longer required when you have a decent ORM such as NHibernate or Entity Framework. It just adds a layer of abstraction over the ORM, which is in itself a data access abstraction.

This layer of abstraction can distance you from the features of your ORM. One of these features is allowing you to specify exactly which tables you want to be retrieved in your query. This is one of the things that helps prevent N+1 problems. In the Entity Framework you do this using the include method. I’ve seen some Entity Frameworks Repository examples that use the Include method, but most don’t.

I still see the repository pattern put forward as best practice and although I agree with Ayende, the repository still seems to be the majority point of view. This excellent article by Tugberk Ugurlu explains how to create a testable generic repository with EF. I have previously found that using the repository pattern leads to repeating myself a lot, and this implementation fixes that. When I wrote this article his generic repository didn't give you access to the Include method which would have led to N+1 problems. He has informed me in the comments this has now been fixed, and in a nice elegant way. Even with this very nice implementation, does the repository pattern gives us any extra benefit if there is another way to create a testable data access layer?

Ayende’s suggested alternative to using the repository pattern and keeping things testable is to use a mockable interface to your ORM’s data context. In NHibernate it sounds like this is quite straight forward, however it wasn’t immediately obvious how you could do this using Entity Framework. The advice I found online using this approach was quite scattered, so I’ve brought what I found together in this post:

Mocking your Entity Framework data context and testing it in .NET MVC

This approach has worked really nicely in my project and I think it is better than using the repository pattern. I’m still really open to being told I’m wrong and that repositories rock, but I no longer see what they bring to the party.

Drawing TEDx Bradford

Mon, 02 Apr 2012 18:59:29 GMT

I went to TEDx Bradford on Friday. I kept visual notes of the talks using Paper for iPad. I got better at using Paper with practice so my notes start to look better in the later talks. I had to leave a little bit early, so I didn't get to make notes on all the talks.

Tim O’Reilly

Jane MacDonald, Tales of Things & Electronic Memory

Mark Graham, Internet & information geographies

Maureen Pennock, Archiving the Web

Dominic Smith, Open source, Art & Wizardlyness

Dr Kieran Fenby-Hulse, The Modern Mixtape

Launching Font Picker for mac

Sat, 17 Mar 2012 12:57:12 GMT

Font Picker for Mac was waiting for approval in the Mac App Store when I agreed to talk at LSxCafe. Luckily it was approved the morning of the LSxCafe on Tuesday 6 March 2012, so it became my 'high profile' launch.

Font picker is my first mac app and I'm really excited that it's now available for sale. I made the original version of Font Picker in 2008. It's popularity gradually grew and I started to get really nice feedback emails and ideas for new features. I really wanted to improve it and add those extra features, but I couldn't afford the time. The new Mac App Store (hopefully to be followed by other app stores) gave me hope that it will be possible to make a business out of producing apps and the revenue will pay for developing those apps further.

In my talk I talked about how developers can invest their free time best, why I'd decided to make Font Picker and how I'd found switching from .NET development to Cocoa development. When I announced that Font Picker was available in the Mac App Store I got a little cheer, which was cool.

It's been over a week now since the launch and I'm not yet bored of checking my sales figures as soon as they come out at 1am. How well sales go will affect how much time I can afford to put into further development. I had no idea if I would sell a few copies a month, or hundreds a day. The reality so far has been pretty good. I've already earned enough to pay back the money I spent on joining the developer network. Sales have averaged out at 10 a day so far. If this rate continues I will have earned back the time I spent on the project in about 3 months. The hope is that sales might increase as people start telling their friends how amazing Font Picker is. I'm currently on the first page of mac design apps and I think sales will probably drop when I fall off that page. So, I'll probably need to put some more effort into marketing then. Software development is only one part of running a successful software business and I can't forget that.

Font Picker is a simple app that helps you choose a font for your design project. You can find out more at the Font Picker site.

Photo credit: Imran.

Choosing a font

Mon, 12 Mar 2012 21:29:55 GMT

When I do a piece of design that involves typography I spend ages choosing the right font. The font that will endow the work with the right feeling and the font that is most similar to the one I've got pictured in my head.

This normally takes ages, but I've written a Font Picker program in Flash to help me do it. It shows you a sample of your chosen text displayed using all the fonts on your computer. You can then whittle down this list by removing unsuitable fonts.

The best thing is that this works straight from your browser and still displays the fonts that are on your computer. I've also made a version you can download and install if you have a PC or a Mac.

Picking the right font still takes ages, but hopefully you'll find this tool helpful in visualizing the typefaces you're considering.

You can use this fantastic tool here

Font Picker

But how does it work?

In Flash ActionScript 3.0 there is a very useful function called:

Font.enumerateFonts

This allowed me to get a list of all the fonts on the computer running the flash program and display any text I wanted using them.

I've also used Adobe AIR to make a desktop version of this program. I've got some planned extra features for that version, including tagging for fonts and possibly some export features. The great thing about Adobe AIR is that it really was very easy indeed to take my web based Flash App and make it an AIR application.

15,000 people have downloaded Font Picker

Mon, 12 Mar 2012 21:28:28 GMT

I created Font Picker to solve a problem I had and released it in September 2008 hoping that other people would find it helpful. Since then 15,000 people have downloaded it and its page has had 57,000 unique views. That makes it by far my most successful personal project so far.

Font Picker is a simple AIR app that helps you choose a suitable typeface for a project. It's down to word of mouth and the wonders of the Internet that so many people have found it. I got my first peak in traffic when it was mentioned in a Boag World podcast. I'm really greatful for that as it the break that lead to everything else.

It's now been featured in several articles, including ones on:

It's been really exciting to watch my web traffic and see all the spikes. I've really appreciated everyone's feedback. It's helped improved the program and given me ideas of how to improve it further. I'm really pleased that people are finding Font Picker useful and hopefully even more will too. I'll let everyone know if it reaches 30,000 downloads. I'd be over the moon if that happened.

Top five ways to invest your spare freelance time

Mon, 05 Mar 2012 20:11:27 GMT

Since going freelance I started to view my time as an asset. When I’m working for a client I turn my time and skills into money and also a project that I’m proud of and can add to my CV. Between client projects I like to take some time out to work on a small project for myself. I see this time as an investment and it’s essential that I invest this time well if I want to continue doing well with my career.

The problem is there are so many possible time investment opportunities that it’s hard to know what the wisest investment is. Here are five possible ways you can invest your spare freelance time:

Training

Training yourself is always a good solid way to invest your time. This might just be reading some tech manuals or doing some tutorials. I try to do this as I’m going along. You don’t need to have a full break from client work to read a lovely geeky book before you go to bed. I learn best by doing, so I like to make a project using a technology that I want to learn about. When I wanted to learn about the Orchard CMS I made a few simple modules that helped me learn what I needed to know. Since then I’ve done client work where I was able to put those new skills to use. This is a low risk investment. New skills are always useful and even if you spend time learning something that ends up not being useful, you have still learnt that it’s not useful.

Promotion

Promoting yourself and meeting people is an essential part of freelancing if you don’t want to completely rely on recruitment agents. This is also something you must invest time in, and it’s easy to let slip when you’re busy. I’ve been trying to blog more this year, but it takes me a long time and it’s hard to measure the ROI (to borrow a financial term). I have had clients find me through twitter and my blog though, plus I enjoy doing it, so although it’s hard to measure it’s another worthwhile investment. There are also lots of networking events, some of are also fun and/or educational, which is a bonus. Promotion time is a slightly riskier investment. You don’t know which blog posts will be ignored or heralded and you don’t know which events will lead to great opportunities. I’ve heard that titling your blog post as a ‘top 5 something’ is an effective, but slightly cynical way to get attention. So let’s see if this works. Generally with promotion; little and often is a good strategy, but not one that I always manage to follow.

Toolbox

I like the term software craftsmanship. A craftsman has a box of tools. To become a better craftsman it’s a good idea to invest some time in evaluating new tools and building your own. When you’ve worked on a few projects you start to find things that need doing again and again. Sometimes you find that someone else has had to do the same thing and has created a code library or tool to do that job. Trying out those tools can save you a lot of time if you find a good existing solution. Creating your own if you have too is also a good investment. It will save you time in the future and if you choose to share them, it will save other people time. This sort of reciprocal investment, found particularly in open source software is really good; we all save more time if we share.

Product

I have an ideas book that I carry with me and write my ideas in when I’m struck with inspiration. Some of the ideas are product ideas, and some of those are software based products. Thinking from an investment point of view a successful product is one that in its lifetime produces more revenue than you invested in it. As a freelancer with a daily or hourly rate money and time are interchangeable. If a product does really well, the money it brings can buy you more time to add new features to the product, or to invest in one of the other ways I’ve talked about.

This is probably the riskiest strategy. It is something I’ve really wanted to do, but not something I’ve successfully pulled of yet. The problem is that you actually need a lot of time to make most ideas a polished reality. You also need time to market and support the product. And you don’t know if you’ll be able to make enough revenue to pay back the time you put in.

Fun

The danger thinking too seriously about investing your time is that you forget that you need to use some of it for having fun. There are plenty of project ideas in my ideas book which are not potential money making products, but I know I’d enjoy making them. I also love cycling, swimming and catching up with my friends. Finding time for these and other activities is essential if you want to remain sane.

My latest investment

I’m coming to the end of a gap between client projects and this time I chose to invest my time in making a product. I’m generally quite risk adverse so I’ve followed the advice in The Lean Startup and made a minimal viable product. This version one product is a way to test the waters. There are lots of potential features for version 2, but I would need to invest more time that I don’t have at the moment. If the product is a success it will pay for itself and buy me more time to make version 2.

This product is Font Picker for Mac, which will be available in the Mac App Store soon. It’s currently waiting for approval. I’ve tracked the time I’ve spent on it so far and I will need to sell approximately 600 copies to recoup the time I have invested so far. I will also have to invest some more time in marketing it and answering any support emails I get. I don’t know if I’ll break even, but this has also been a fun and education project for me so either way it’s been a winner.

You can follow @FontPicker on twitter to find out more and know when it hits the store.

Photo credit: Stéfan.

Richard's beard

Tue, 28 Feb 2012 17:57:06 GMT

I grew a beard, because I didn't feel like myself. When I shaved it off I expected to feel like myself again. I didn't, but it was the start.

My friend Pete committed the whole thing to film. I wanted to capture what I felt was a deep spiritual moment. Pete added the music, which reveals wonderfully that shaving off a beard, is in fact, quite silly.

I published the video in the same month that You-Tube released it's first beta. However, I didn't know that at the time, so I published it on my own site.

My video was featured on Boing Boing and about 50,000 people flooded to my site in response. My very understanding hosting company decided not to charge me for the extra bandwidth I used. This is lucky as it would have cost me over £1,000 at their stated charges.

The shear ridiculousness of it all really made me smile. It also inspired me to get stuck into playing about with my own ideas outside of the normal 9 to 5. The beard has led to a number of very fantastic things.

Using extension methods to filter IQueryable data collections

Mon, 20 Feb 2012 09:41:48 GMT

As I talked about in my post Do we need the repository pattern? I’ve been thinking about how we can make a testable data access layer with Entity Framework without using a repository pattern. I showed how you could do that in my post Mocking your Entity Framework data context and testing it in .NET MVC. However losing the repository also loses a nice centralised place to keep your query logic. In this post I’ll show you a nice simple way to use extension methods to do this.

Suppose you’re using Entity Framework to store a collection of foos and there are several places in your app that you want to show a list of foos that are special in some way. You want to keep the logic for foo specialness in a central place as you don’t want to repeat it. An extension method gives us a really nice way of doing this.

Here is how our extension method would be used:

var specialFoos = _data.Foos.WhereSpecial();

And here is the implementation:

public static class ModelFilters
{
    public static IQueryable<Foo> WhereSpecial(this IQueryable<Foo> foos)
    {
        return foos.Where(f => f.IsSpecial && HowSpecial(f) > 10);
    }
}

Now all your query logic is in one place and you can test it because the extension method is on the IQueryable interface rather than a concrete collection class.

Mocking your Entity Framework data context and testing it in .NET MVC

Mon, 20 Feb 2012 09:40:51 GMT

I explained in my previous post Do we need the repository pattern? why you might want to mock your Entity Framework context rather than using the repository pattern. In this post I’ll show you how to do that and how to test your .NET MVC controllers with a fake data context.

The way you do this varies slightly depending on whether you're using code first or database first. I’ll cover both in this post.

Using Code First in Entity Framework 4

My implementation of code first is based heavily on the blog post by Rowan Miller.

A mockable data context (EF Code First)

When you create your code first DBContext it is very easy to make it include an interface that can be mocked. Here is a simple example:

public interface IContext
{
    IDbSet<Foo> Foos { get; set; }
    IDbSet<Bar> Bars { get; set; }

    int SaveChanges();
}

public class EFContext : DbContext, IContext
{
    public IDbSet<Foo> Foos { get; set; }
    public IDbSet<Bar> Bars { get; set; }
}

Using you mockable context in a controller (EF Code First)

This is also very easy. I’d recommend using a proper dependency injection framework like AutoFac, but in this example I’m going to use to use poor mans DI to keep it simple.

public class HomeController
{
    private IContext _data { get; set; }

    public HomeController(IContext dataContext = null)
    {
        _data = dataContext ?? new EFContext();
    }

    public ViewResult Index()
    {
        var items = _data.Foos
                .Include(f => f.FooBit)
                .ToList();

        return View(items);
    }
}

The nice thing here is we’ve been able to specify that we want to bring down information from the related entity FooBit. This means our view can show information from both the list of Foo objects and all the separate FooBits without creating a N+1 problem.

Unit testing our controller (EF Code First)

For this to work we need to a fake implementation of IDBSet. I’ve borrowed this one from Rowan Millar:

public class FakeDbSet<T> : IDbSet<T>
    where T : class
{
    HashSet<T> _data;
    IQueryable _query;

    public FakeDbSet()
    {
        _data = new HashSet<T>();
        _query = _data.AsQueryable();
    }

    public virtual T Find(params object[] keyValues)
    {
        throw new NotImplementedException("Derive from FakeDbSet<T> and override Find");
    }

    public void Add(T item)
    {
        _data.Add(item);
    }

    public void Remove(T item)
    {
        _data.Remove(item);
    }

    public void Attach(T item)
    {
        _data.Add(item);
    }
    public void Detach(T item)
    {
        _data.Remove(item);
    }
    Type IQueryable.ElementType
    {
        get { return _query.ElementType; }
    }
    System.Linq.Expressions.Expression IQueryable.Expression
    {
        get { return _query.Expression; }
    }

    IQueryProvider IQueryable.Provider
    {
        get { return _query.Provider; }
    }
    System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
    {
        return _data.GetEnumerator();
    }
    IEnumerator<T> IEnumerable<T>.GetEnumerator()
    {
        return _data.GetEnumerator();
    }
}

Now you’ve got a fake IDBSet you can create a simple test for our controller. I’ve used NUnit and Moq.

[Test]
public void IndexReturnsList()
{
    // Create fake data
    var inMemoryItems = new FakeDbSet<Foos>
    {
        new Foo {Id = 1, Title = "One"},
        new Foo {Id = 2, Title = "Two"},
        new Foo {Id = 3, Title = "Three"},
        new Foo {Id = 4, Title = "Four"}
    };

    // Create mock unit of work
    var mockData = new Mock<IContext>();
    mockData.Setup(m => m.Foos).Returns(inMemoryItems);

    // Setup controller
    var homeController = new HomeController(mockData.Object);

    // Invoke
    var viewResult = homeController.Index();
    var foosFromView = (IEnumerable<Foo>)viewResult.Model;

    // Assert
    Assert.NotNull(foosFromView);
    Assert.AreEqual(4, foosFromView.Count());
    Assert.AreEqual(1, foosFromView.First().Id);
}

And there you have it. Everything is tested, and we didn’t need a repository.

Using Database First in Entity Framework

My implementation of database first is based on this article by Scott Allen.

A mockable data context (EF Database First)

When you use the database first wizard the code generated for you is not so easy to mock. So you need to wrap it in a mockable wrapper. Here is an example:

public interface IContext
{
    IObjectSet<Foo> Foos { get; }
    IObjectSet<Bar> Bars { get; }

    void SaveChanges();
}

Here is the wrapper implementation:

public class EFContext : IContext
{
    private readonly EFEntities _data;

    public EntityFrameworkUnitOfWork()
    {
        _data = new EFEntities();
    }

    public IObjectSet<Foo> Foos
    {
        get
        {
            return _data.CreateObjectSet<Foo>();
        }
    }

    public IObjectSet<Bar> Bars
    {
        get
        {
            return _data.CreateObjectSet<Bar>();
        }
    }

    public void SaveChanges()
    {
        _data.SaveChanges();
    }
}

Using you mockable context in a controller (EF Database First)

This is exactly the same as with code first, but I've included it again for completeness. As I said before it's very easy. I’d recommend using a proper dependency injection framework like AutoFac, but in this example I’m going to use to use poor mans DI to keep it simple.

Unit testing our controller (EF Database First)

For this to work we need to a fake implementation of IObjectSet. I’ve borrowed this one from Scott Allen:

public class InMemoryObjectSet<T> : IObjectSet<T> where T : class
{
    public InMemoryObjectSet()
        : this(Enumerable.Empty<T>())
    {
    }

    public InMemoryObjectSet(IEnumerable<T> entities)
    {
        _set = new HashSet<T>();
        foreach (var entity in entities)
        {
            _set.Add(entity);
        }
        _queryableSet = _set.AsQueryable();
    }

    public void AddObject(T entity)
    {
        _set.Add(entity);
    }

    public void Attach(T entity)
    {
        _set.Add(entity);
    }

    public void DeleteObject(T entity)
    {
        _set.Remove(entity);
    }

    public void Detach(T entity)
    {
        _set.Remove(entity);
    }

    public Type ElementType
    {
        get { return _queryableSet.ElementType; }
    }

    public Expression Expression
    {
        get { return _queryableSet.Expression; }
    }

    public IQueryProvider Provider
    {
        get { return _queryableSet.Provider; }
    }

    public IEnumerator<T> GetEnumerator()
    {
        return _set.GetEnumerator();
    }

    IEnumerator IEnumerable.GetEnumerator()
    {
        return GetEnumerator();
    }

    readonly HashSet<T> _set;
    readonly IQueryable<T> _queryableSet;
}

Now you’ve got a fake IObjectSet you can create a simple test for our controller. I’ve used NUnit and Moq.

[Test]
public void IndexReturnsList()
{
    // Create fake data
    var fooList = new List<Foo>
    {
        new Foo {Id = 1, Name = "One"},
        new Foo {Id = 2, Name = "Two"},
        new Foo {Id = 3, Name = "Three"},
        new Foo {Id = 4, Name = "Four"}
    };
    var inMemoryItems = new InMemoryObjectSet<Foo>(fooList);

    // Create mock unit of work
    var mockData = new Mock<IContext>();
    mockData.Setup(m => m.Foos).Returns(inMemoryItems);

    // Test
    var homeController = new HomeController(mockData.Object);

    // Invoke
    var viewResult = homeController.Index();
    var foosFromView = (IEnumerable<Foo>)viewResult.Model;

    // Assert
    Assert.NotNull(foosFromView);
    Assert.AreEqual(4, foosFromView.Count());
    Assert.AreEqual(1, foosFromView.First().Id);
}

And there you have it. Everything is tested, and we didn’t need a repository. It was a bit trickier with database first, but not much.

What about query logic?

Another reason to use a repository is to centralise your query logic that might be needed by various controllers. In my next post I will show you how to store your query logic in extension methods.

Bridge statistics, manga and SQL

Mon, 16 Jan 2012 16:32:50 GMT

I didn't enjoy stats at school very much. It seemed a very dry subject that involved a lot of tedious calculations and I didn't really see the point. Perhaps if we'd been encouraged to use computers to do the tedious stuff and been given data sets that were more interesting I'd have realised that actually stats can be a very interesting subject.

After reviewing and enjoying The Manga Guide to Relativity, I was excited to be sent a copy of The Manga Guide to Statistics to review. It inspired me to look at statistics again. Perhaps they do have a point, perhaps with some interesting data and a computer doing the tedious number crunching the numbers will come to life. As I didn't really listen at school to this subject, I had a lot of catching up to do and this book was really going to have to grab my attention to convince me that statistic could be interesting.

I enjoyed the Manga guide to Relativity so much that this book had a lot to live up to and initially I felt a bit let down. I think that has a lot to do with the subject matter. Statistics is just a subject that doesn't interest me as much as the fundamental wierdness of the universe. On my first attempt at reading The Manga Guide to Statistics, I treated it like a book. It's very heavy in numbers. I found that it was hard to follow and the facts did not stick in my head. But, it's not really a normal book. It's a text book and should be treated as such. That means you need to read a bit and then do some exercises that practice what you've learnt.

When used like this the Manga Guide to Statistics is an excellent text book for someone trying to learn about stats. The story and illustrations keep you engaged and are an excellent starting point to apply the concepts to your own data. They also do a really good job of illustrating the concepts in a way that makes sense and gives you a mental model of what is being explained.

While reading through the book I decided to apply my new stats knowledge to a data set that I've been working with a lot lately. Pianola is a web app for Bridge clubs. This means I have access to a lot of raw numbers about bridge and I decided that would be my data set. I also wanted to write a set of SQL scripts that would help me get the statistical data that I was interested in. SQL was the thing that was going to do the number crunching for me.

When I first started work on Pianola I was surprised at just how much people play bridge. The graph above is a histogram that shows how often the people using Pianola played bridge at their bridge clubs in November.

A histogram is a useful way of visualising a set of data. In this case I'm looking at how often people play bridge in a month. Rather than plot a bar for every different number of times someone has played bridge, I've grouped them up into classes that group 5 numbers together.

I could have plotted the number of people in each class. This would have been the frequency of that class. Instead I've plotted the relative frequency, which is the percentage of that frequency in relation to the total frequency of all classes. Our total frequency is the total number of Pianola members who played bridge in November. 74% of our members' played bridge 1 to 5 times in November. A far smaller number, 0.4% played bridge 31 to 35 times in November. Some people are very keen, and our histogram shows this very clearly.

Pianola keeps track of the games everyone plays, but to count the number of games everyone played and then to count the number of people who played a certain number of games took a bit of working out. [Note: All the SQL in this post was written for MS SQL Server 2008 and may need tweaking to run on a different database.]

First I stored the number of times everyone has played in a temporary table:

CREATE TABLE #PlayCounts(mId int, playCount int );
GO

// Store start and end date in variables so we can easily change date range
declare @startDate datetime, @endDate datetime
set @startDate = '2011-11-01'
set @endDate = '2011-11-30'

INSERT INTO #PlayCounts(mId, playCount)
    (SELECT MemberId mId, COUNT(MemberId) playCount
    FROM Game
    WHERE [DateTime] BETWEEN @startDate AND @endDate
    GROUP BY MemberId);
GO

Now we have the number of times everyone has played we can count the number of members who have played a certain number of times. I wasn't sure if I could easily group the counts up into classes of values, but this funky SELECT CASE statement and this Stackoverflow question on grouping by ranges in SQL came to my rescue.

DECLARE @totalFrequency int;
SET @totalFrequency = (SELECT COUNT(*) FROM #PlayCounts);

SELECT t.range as [score range], COUNT(*) as frequency, (COUNT(*) / CONVERT(FLOAT, @totalFrequency))*100 as [relative frequency]
FROM
(
    SELECT CASE
        WHEN playCount BETWEEN 1 AND 5 THEN '1-5'
        WHEN playCount BETWEEN 6 AND 10 THEN '6-10'
        WHEN playCount BETWEEN 11 AND 15 THEN '11-15'
        WHEN playCount BETWEEN 16 AND 20 THEN '16-20'
        WHEN playCount BETWEEN 21 AND 25 THEN '21-25'
        WHEN playCount BETWEEN 26 AND 30 THEN '26-30'
        WHEN playCount BETWEEN 31 AND 35 THEN '31-35'
        WHEN playCount BETWEEN 36 AND 40 THEN '36-40'
        ELSE 'other' end as range
    FROM #PlayCounts
)t
GROUP BY t.range
ORDER BY frequency DESC

DROP TABLE #PlayCounts;

In my select statement I've worked out both the frequency and the relative frequency of each class. I can easily re-run the query for different date ranges. It should also be pretty easy to take this SQL and rewrite it to look at different data sets.

Next I read about the mean and the median. The mean is the more accurate term for what we mostly call the average and can be worked out in SQL really easily. The only slight complication is that we need to convert playCount to a float so that the AVG function returns a float and doesn't round the number to an integer.

SELECT AVG(CONVERT(FLOAT, playCount)) AS Mean FROM #PlayCounts;

The median is the frequency for the person in the middle if you order everyone by how often they play. There's no built in SQL command for this, but this Stackoverflow answer for median SQL sorted me out.

SELECT
(
(SELECT MAX(playCount) FROM
(SELECT TOP 50 PERCENT playCount FROM #PlayCounts ORDER BY playCount) AS BottomHalf)
+
(SELECT MIN(playCount) FROM
(SELECT TOP 50 PERCENT playCount FROM #PlayCounts ORDER BY playCount DESC) AS TopHalf)
) / 2 AS Median;

For our bridge dataset the mean number of times someone played in a month was 4.22, and the median was 3. The median value can give you a more accurate view of the behaviour of most people. If one person played bridge 120 times a month they could skew the mean and give a false impression. In our case the two values are quite close.

This is all quite basic statistics. So basic I actually remember most of it from school, but The Manga guide provides a good reminder in the first two chapters. One last thing from those chapters is standard deviation, which is starting to get a bit more advanced. Standard deviation describes how scattered the data is. The more data varies from the mean, the higher the standard deviation.

Here is the very easy SQL to work it out:

SELECT STDEV(playCount) AS [Standard deviation] FROM #PlayCounts;

The standard deviation for our set is 3.41. I think this is quite low.

That's as far as I've got so far and I wouldn't want to spoil the whole book for you. The joy in it for me has been thinking of places in my projects I could use the statistical methods I've learnt about. The histogram alone is a really nice device that jumped out at me as something that would be useful to the projects I'm working on. So, if you think that you could do with improving your statistics then this is a great book to work through, particularly if you have a dataset that you'd like to work with and make more sense of.

However, if you really want to be inspired about how great statistics are then you really should watch the video of this presentation by Hans Rosling. I saw it at Thinking Digital in 2009 and was blown away by his enthusiasm.

The Manga Guide to Relativity

Sat, 14 Jan 2012 16:00:49 GMT

I knew I had a sort of idea what relativity was, but I also knew I didn't actually understand it. I thought it was probably one of the things that I would never get round to understanding. Then I was presented with The Manga Guide to Relativity, and I knew that if anything could explain it, then this book would be that thing.

The guide starts in manga form and tells the story of Student Body President Ruka Minagi who is challenged by Headmaster Iyagi to write a report on relativity over the summer vacation. The beautiful physics teacher Alisa Uraga steps in to teach Minagi all he needs to know to complete the report.

The scenes in the story change seamlessly and often surreally between the classroom and the setting of the examples used to explain the various facets of relativity. Alisa Uraga chooses to explain some of the complicated elements of relativity at the swimming pool while wearing a bikini and other parts while they both float in space. Other characters like Einstein and the Vice Principal who is a dog also step in at times to say hello.

Following a discussion between two characters is actually quite an effective way to learn about a complicated topic. The sections are punctuated by more traditional text book like pages that talk you through the equations and examples in more depth.

The events in the manga that carry the story forward are often bizarre and surreal, but not as surreal as the theory of relativity itself. After reading this book I still wouldn’t pretend to fully understand it, but what I do think I get completely blows my mind.

The example that really blew me away was this:

If astronauts travel to the Andromeda galaxy (approximately 2,500,000 light years away) at 99.999999999 percent of the speed of light, 11.2 years will pass for the one-way trip in the space ship, but nearly 2,500,000 years will pass on earth.

Now that is more bizarre than a school having a dog as a Vice Principal. I’m not going to try and explain it, but time is not the same for everyone. It depends on how fast you’re going and also on gravity. You don’t need to travel faster than the speed of light because as you approach the speed of light distances get shorter and your time slows down. If I understand this correctly the human race could scatter itself through the universe using close to light speed ships. The only thing is that we would also have scattered ourselves through time. You can’t travel huge distances through space without also effectively travelling a huge amount forward in time. That’s not how it worked in Star Trek.

If you want to have a go at understanding relativity then I think this book is an excellent way to do so. If you really want to understand it, you might need to read it more than once. Relativity is a strange and wonderfully weird thing.

Moving from Subversion to Mercurial and Bitbucket

Thu, 12 Jan 2012 20:50:56 GMT

I've been using Mercurial for source control on my own small projects for a while and have really liked it. I've also wanted to stop supporting my own Subversion server, but previously I've found hosted solutions too expensive. That's why I like Bitbucket's pricing structure. I have lots of projects that need source control, but I either work alone or as part of a small team. Bitbucket charges by the team size, not the number of projects (which seems like a much better way to judge the budget of a project) and it's free for teams of 5 or under.

I've wanted to move my existing subversion projects over to Bitbucket, but I thought that keeping the revision history would be too difficult. Turns out that it was really simple.

Step 1: Enable hg convert
Assuming you've already installed mercurial command line or as I prefer Tortoise HG GUI on your computer you can enable this extension by finding mercurial.ini in your user directory and adding the following lines:
[extensions]
hgext.convert =
Step 2: Create a new mercurial repository in bitbucket
Use bitbucket's web interface to create a new repository.
Step 3: Clone this locally on your machine
Use either tortoise or the command line to clone this empty repository:
hg clone https://{bitbucket-username}@bitbucket.org/{bitbucket-username}/{bitbucket-repository-name} {local-directory-name}
Step 4: Get revisions from your subversion repository
Use the command line to use the convert extension, then update your local copy:
hg convert {svn-repository} {local-directory-name}
cd {local-directory-name}
hg update
Step 5: Push all these revisions to your bitbucket repository
hg push
Step 6: Set up aliases
The usernames used by Mercurial and Bitbucket will not match those imported from Subversion. The easiest way to fix this is using aliases in bitbucket. On the commits screen any unknown user has a little question mark by it. Clicking on that lets you alias that username to a Bitbucket user.

That's it.

The hg convert command can do fancier stuff, like renaming branches and changing usernames, but I've found that I don't really need that.

Movember at Old Broadcasting House

Tue, 29 Nov 2011 23:53:17 GMT

November has been Movember for some of us at Old Broadcasting House.

Movember is all about growing a moustache to raise awareness and money for prostate and testicular cancer. There's only one day left and I will be shaving my moustache off as soon as possible. However Chris and Leo like theirs so much they're planning on keeping them for a bit longer into Mocember.

You can donate to any of us or the team at our Movember pages (in order of photo appearance):

Cactus photo by: Alan Levine

A .NET MVC Helper to create HTML wrapping elements

Tue, 29 Nov 2011 23:33:42 GMT

In HTML when you want to create a box around some content with rounded corners or some other nice feature it would be nice if you could just wrap that content in a <div> or a <section> tag and CSS would do the rest. However this rarely seems to be the case, particularly if you want the HTML to render well in older browsers. The views in my latest .NET MVC 3 project were full of repeated opening and closing sections of HTML for something that we called a chunk, which is just our word for a box with rounded corners that groups together related elements on the page. Sometimes a chunk has a title, sometimes it doesn't.

Really any repeated code like this should be in some sport of template or helper, to keep the code clean and make it easy to change in the future. But, as there was opening code and closing code there would need to be two templates and this seemed messy. Inspired by how .NET MVC writes the opening and closing tags for forms on the page I thought that using the using statement and a chunk class that implemented IDisposable might be the way to go.

The razor code

The aim was to have razor code in my view that looked like this:

@using(Html.BeginChunk("Optional chunk title"))
{
<p>Normal HTML content.</p>
}

The BeginChunk helper

The BeginChunk helper returns an IDisposable class whose Dispose method is called when the closing brace is reached. The helper code looks like this:

using System;
using System.Web.Mvc;

namespace NogginBox.MVC.Extensions.Helpers
{
    public static class ChunkHelpers
    {
        public static Chunk BeginChunk(this HtmlHelper html, String title = null)
        {
            var htmlText = (title != null)
                ? "<div class=\"chunk\"><h2>" + title + "</h2><div class=\"chunk-inner\">"
                : "<div class=\"chunk\"><div class=\"chunk-inner\">";

            html.ViewContext.Writer.Write(htmlText);

            return new Chunk(html);
        }

        public static void EndChunk(this HtmlHelper html)
        {
            html.ViewContext.Writer.Write("</div><div class=\"chunk-bottom\"></div></div>");
        }
    }
}

The Chunk class

The actual chunk class is very simple. The helper does most of the work. The chunk class looks like this:

using System;
using System.Web.Mvc;

namespace Pianola.MVC.Extensions.Helpers
{
    public class Chunk : IDisposable
    {
        private readonly HtmlHelper _html;

        public Chunk(HtmlHelper html)
        {
            _html = html;
        }

        public void Dispose()
        {
            _html.EndChunk();
        }
    }
}

And that's it. Using this helper has resulted in my views being much cleaner and far easier to modify.

Developing for the iPhone - what you need to know

Fri, 25 Nov 2011 15:20:11 GMT

They say the future is mobile. (Ed. Two years on since originally writing this post, it almost seems like the future is here. We might have all missed the App Store gold rush, but app development for mobile is still exciting and now there's Android, Windows Phone 7 and iPads to think about.)

So, I'm quite excited to learn about developing for this new platform and see what I can create. Will I be able to use my existing web development and programming skills, or will I need to learn a new set of skills. This is what I've learnt so far about what I'll need to know.

There are two options when developing for the iPhone (or iPod touch): Develop a web application or develop a native iPhone application. There are plusses and minuses for both, and both require a completely different set of skills. Until recently you could only develop web applications, but Apple has recently released a beta of the iPhone SDK building up towards the planned opening of the iPhone App Store.

Developing a web based iPhone application

If you're a web developer like me, then this is going to be the easiest and possibly best option. You can use your existing web development skills and you can host your application on your current server.

I bought myself an iPod touch using the excuse that it would help me test websites on the iPhone. They're the same except the iPod touch doesn't have all the applications the iPhone does (most notably, and understandably the phone application). However, I've discovered that you don't even need an iPod touch. The iPhone Software Development Kit (SDK) includes an iPhone simulator. You will need a Mac though to run the SDK.

If you have an existing web application, it will probably already work on the iPhone, unless it uses Flash or a few other non-supported technologies. There are several things you could do to make it work better on an iPhone, some of these things will be helpful for other mobile devices.

You can add an iPhone, or small screen specific style sheet. This will allow you to lay things out better for the available screen size. You may also wish to take advantage of some Safari and iPhone specific CSS. For example there's CSS support for simple animation and transitions.

You may wish to detect that the browser is on an iPhone and serve them a specialised version. Facebook is an excellent example of this and creates an experience that is very similar to using a native iPhone application.

You can make use of iPhone JavaScript handlers that respond to touch gestures. The touch interface is one of the things that makes the iPhone shine, so it'd be great to take advantage of this in your web apps.

There are also some custom meta tags which allow you to control the screen area and whether the user can zoom. You can also add custom links that will launch other iPhone applications. You can even store data in a client side SQLite database, which is apparently part of the HTML 5 spec.

There's a lot you can do and that just scratches the surface. Using and building upon you existing HTML, CSS and JavaScript knowledge you could make something very exciting.

Now that all sounds great, but there are limitations with an iPhone web app. Firstly it's not going to work when the user is offline, and it's going to be slow when their connection is slow. You're also not going to be able to access all of the features of the device such as its location awareness, orientation awareness or be able to access things like the address book. If you want to make use of all the power and all the features then you're going to have to make a fully native iPhone application.

Developing a native iPhone application

If you've previously developed software for Apple Macs then you're probably going to find you can quite easily turn those skills to iPhone development. If you haven't then there's a lot your going to need to learn. It's aimed at software developers, rather than web developers and the skills needed are very different.

Before you begin there are a few things you will need. You'll need a Mac, you'll need to download the iPhone Software Development Kit (SDK) and it'd help for testing if you had a iPhone or an iPod touch (this last bit isn't essential as there is a simulator).

The SDK includes all the tools you'll need to develop iPhone applications. These tools include an interface designer, a code editor, profiling tools and an iPhone simulator. They're completely free, but there is an option to join the iPhone Developer Program. This costs $99. As far as I can tell, you need to join this if you wish to share your applications with anyone. Otherwise you can only install your programs on one designated test iPhone. I've also read in forums that the Developer Program is so popular that Apple are putting everyone on a waiting list. I thought I'd wait till I created a program worth sharing before I joined the program. There's a lot to learn before I can even think about doing this.

If you've not done Mac development before, the first you'll need to learn is the programming language Objective C. Knowing PHP and JavaScript, probably isn't going to help you that much, although it'd be a start. It's most similar to C and C++, although knowing something like Java, Ruby on Rails, or ASP.NET would also be helpful. Although I've used C++ in the past and currently use ASP.NET, I've found Objective C too different to be able to pick up from code samples. I'm currently reading Apple's reference guide to it and I've been reccommended the book Programming in Objective C.

You'll also need a good understanding of object orientated programming. If you've used Ruby on Rails, you'll be pleased to know that they seem to make heavy use of the Model View Controller architecture that Rails is built on.

All the actual fun stuff seems to be contained in the various frameworks that provide the iPhone functions and features that your application can use. I've not had time to explore this fully as learning Objective C has slowed me down a bit. These frameworks seem to be the Foundation Framework, UIKit and the Cocoa Touch Framework. You'll need to understand the basics of these frameworks so you can start making use of the functions they provide.

Once you've got your head round Objective C you can start looking through all the code examples they've got. It's probably a good way to start understanding how all the framework features work.

If you want to find out more, the iPhone Dev Centre has load of videos, reference material and code samples to work through:

Pianola in Toronto

Fri, 14 Oct 2011 21:38:58 GMT

Since December last year I’ve been the lead developer in a start-up making a product called Pianola. Pianola is a web based product to help bridge clubs manage their club and to bring their members a personal way to review their results and interact with the club. This week I’m in Toronto at the North American Bridge Championships demoing Pianola to club managers and members from across the pond.

This has been my first business trip abroad and Toronto is an amazing city. The first thing I’ve learnt is that when travelling for business and when carrying a lot of extra baggage with things like exhibition stands and flyers, be prepared to be grilled intensely about what you’re doing. You should also check to see if you need any permits. Even if you don’t, you should be able to say confidently to the immigration and customs people that you researched this. You should also know exactly where you are exhibiting and have a business card or flyer for the product you’re showing. Business card stickers do not go down too well in a serious border crossing situation.

We did get through though; it just made us a little bit nervous. Also if you can avoid changing at an airport than makes you recheck in your bags like New York JFK then that will save you going through two lots of customs. Actually, if you can, avoid JFK. It’s a very scary airport.

Our first day of demos was a pretty intense day. We’d done most of our setup the day before, but got in at 9:30am to finish things before the tournament competitors arrived at 10am. Things didn’t finish till 7:30pm so it was a very long day. I took a lunch break, but James, the CEO of Pianola stayed there the whole time.

I’m not a natural sales man and I think I’ve got a lot to learn about letting people know what the benefits of Pianola are for them. However I've been getting better at it. It helps that everyone here is really friendly and people like what we’ve done. We've got a really good spot on the corner where everyone can see us. Now that we've been here for a while more and more people are coming to us rather than us having to try and get their attention.

I was also very excited to find out that Bill Gates plays bridge and sometimes comes to this championship. I've not seen him yet, but I've met someone who's played with him. Seeing him would make my trip, but failing that I'm just pleased that so many people have liked what we've done.

You can see my photos of Toronto here, and follow what Pianola is up to on the Pianola blog.

MailChimp Orchard Module and the Integration Fund

Fri, 14 Oct 2011 21:38:39 GMT

Back in November 2010 MailChimp announced their One Million Integration Fund. They were offering pots of money to people using their API to integrate with their product. It was early days for me and my new client working on Pianola, but we both loved MailChimp and thought it could be something that would help us out.

I was also working a lot with Orchard CMS and wanted to use it on this project. As part of building up interest in Pianola while it was being developed we created a sales site using Orchard and we wanted to be able to collect interested people’s email addresses so we could let them know how we were getting on.

So, it made sense to apply to the fund, cross our fingers and hope for the best. We did, and were surprised to find that we’d been successful. Unfortunately we didn’t get the whole million, but we did get enough to cover development of the module.

So I created a module for Orchard that will let your visitors subscribe to your MailChimp email list, letting you keep them up to date with all your exciting news. I actually finished the module quite a while ago, but I’ve been so busy with Pianola, that I’ve not had a chance to blog about it, or even install the module on my own blog.

So, if you would like to be kept up to date with all Noggin Box news then please do subscribe to my mailing list. You can get the MailChimp Orchard module here.

As MailChimp didn’t give us the whole million and they’ve shared it about a bit they’ve been able to encourage other integrations and you can find them in the MailChimp Integrations Directory. If you have any great ideas for using their API, I think they still have some of the million left.

Stickers are the new business cards

Sun, 12 Jun 2011 11:07:39 GMT

When I first went freelance and needed to meet people, I found that business cards were a staple of the networking world. I knew that I needed some, but as a new face on the networking scene I wanted mine to stand out. I came up with the idea of origami business cards. These have served me well over the last four years and definitely made me stand out, although they didn't always fit in people's wallets.

I fancied a change and also wanted a business card that would fit with the new design of my blog. One problem I've discovered with traditional business cards is that there's nothing obvious to do with one after you're given it. All the ones I've collected are in a drawer. If you're given a sticker, it's obvious what you should do with it. You should stick it on something (like a note book), which is what I'm hoping people will do.

Since I collected my stickers from the printers I have become a little obsessed with sticking them on everything I own. It turns out I've never really grown out of stickers. I'm hoping that the people I meet haven't either. If you'd like a sticker then come and find me or get in touch through twitter.