I knew that the NavigationController is reliant upon the title of each UIView, so I made sure I was setting that, but it didn’t help.

The solution was to make sure to not reinstantiate the Root element of the DialogViewController. Doing so must mess with the Title of the UIView, and even if ithe title content stays the same, it looks like it causes the NavigationController to forget what it’s called and prevent a back button from showing. Instead, instantiate the RootElement when the class is created, and add items to the that object when the data has been retreived.

Bad:

//data has been retreived, replace dialog contents
this.Root = new RootElement(myTitle)
{
new Section("Folders"){
Elements = myData.Select(obj => (Element)new StringElement(obj.Name)).ToList()
}
};

Good:

//data has been retreived, replace dialog contents
this.Root.Clear();
this.Root.Add(new Section[]
{
new Section("Folders"){
Elements = myData.Select(obj => (Element)new StringElement(obj.Name)).ToList()
}
});

Now we can send extra information to google analytics and not have it interpret that information as user interaction – and one piece of information we’ve always wanted to track in Google Analytics is viewport size. It’s great that GA already tracks screen resolution, but that doesn’t help us know what size the viewable area within the browser windows actually is, so let’s track the initial size, and then anytime the user resizes the window:

//send to GA window viewport size on inital load and when resized as non-interactive events
$(function() {

  //track viewport dimensions
  var viewportWidth=$(window).width();
  _gaq.push(['_trackEvent', 'Viewport Dimensions', 'Viewport Dimensions Initial', viewportWidth+'x'+$(window).height(), viewportWidth, true]);

 //track viewport dimensions being changed by resize (throttled)
  var gaResizeCompleteHl;
  $(window).resize(function(){
    clearTimeout(gaResizeCompleteHl);
    gaResizeCompleteHl = setTimeout(function(){
        var viewportWidth=$(window).width();
  _gaq.push(['_trackEvent', 'Viewport Dimensions', 'Viewport Dimensions Resized', viewportWidth+'x'+$(window).height(), viewportWidth, true]);
      }, 500);
    });
  });

(paste this after your google analytics code, and sorry for the laziness – my code requires jQuery) Since events allow for a numeric value to go with the action, I choose to send the width which GA can use to do powerful filtering during segmentation.

One of the biggest but most exciting challenges at the moment for web development is producing sites which respond beautifully to different screens, different methods of interaction and different amounts and types of data. In order to build those sites to the users’ needs, we need as much data as possible about how people are using our products. Using Google Analytics and the above, we can segment the existing GA data and run queries using the new viewport information to answer questions such as:

• What percentage of people run their browsers at full screen width?
• How many tablet (or phone) users are browsing in portrait versus landscape?
• When or why do people resize their browsers?

Myth #1: Facebook is implementing this functionality

Actually, Facebook have only created an API for apps and sites to post actions to your history, and have done so in a very controlled way. The actions must contain an approved verb (eg: read/listened-to/played), an approved type (article/tv show/song) and cannot be anything outside of those bounds. The new actions API contains a sufficiently descriptive permission model for users of each app in front of that. It is the apps/sites you should direct your frustration at if you don’t want them to send every interaction you do to facebook. Indeed, I think these sites should offer more control – a compromise between fully automatic sending of actions, and a button similar to the like button.

In fact, facebook could have done so much worse. Due to the success of the facebook like button, facebook could have had the ability to record literally every article you visit on every site which implements the like button (lots) without asking for any persmission at all, or changing any code on your site. They had the power to know, without permission, everywhere a logged-in facebook user visits, but they chose to make this a push mechanism for content publishers. If you don’t like the fact that once you connect with Yahoo News or Spotify, every article you read or every song you listen to will be recorded forever on your Timeline, then you have to blame Yahoo or Spotify. Genius.

Myth #2: Anything I do on the web now will be recorded on my Timeline

Again, this depends on how media publishers intend to use facebook’s new API. Sometimes it will make sense to post actions without user interaction each time (listening to a song for example), and sometimes it won’t (imdb doesn’t know if you actually watched a movie, until you press their new watch button [this doesn't exist, I made it up]), but it’s all in the control of the publisher.

This is the evolution of the like button, the old profile Apps, and the facebook beacon combined

Facebook apps – the ones which created the mess of boxes and videos on people’s profiles, which quickly got removed a year or two ago allowed more identity to creep through, but in an extremely uncontrolled manner (developers could post pretty much any html in any layout they wanted). Now, developers don’t write any html on your profile – the actions your app sends to facebook are sent as data in a very specific manner, and how that is displayed and used on people’s Timelines is presented to you as 4 facebook-controlled options.

Like Button – as I mentioned already, the like button was a precursor to all this – 1 simple button which automatically likes a Url on the web. The like button could be reimplemented within the new OpenGraph API, but likely won’t be yet because of the fact you don’t need to give a website permission to have a like button which knows about you on it.

Facebook beacon – actually, facebook have been trying to achieve what they’ve done this week  for a while, starting with facebook beacon. Through that experience, it’s obvious Facebook learnt a lot about the direction they would need to take in order to get to their destination of becoming the central point for digital identity, sharing and discovery – and that direction is one where they share the resposibility with content providers.

Like it or not, this is the direction the web is going if you want to take part in its social features and, personally, I love it.

It’s definitely going to be an interesting time as we see how different content publishers embrace the new OpenGraph features – will wordpress.com implement an integration for their x hosted blogs? What about content publishers who have tried to do similar social/content mixing before – will iTunes give up on Ping and embrace facebook, or Microsoft connect Zune to facebook (their music and movie streaming is good but their social never took off)?

If Timeline is something to embrace as a cloud storage of my life events, and it’s to be a complete picture – then I’d like to see all the above, plus some interesting ways to push content to timeline from other mediums – TV shows and cinema, sports events (RunKeeper/MapMyRun), and trips for example, but I’d also like to see great tools for me to curate that information and powerful ways for facebook to amalgamate all my data, analyse it, and show interesting angles on my Timeline.

After quickly realising then that there are many additional features which would also be useful in this area, I open sourced the project at http://cloudterminal.codeplex.com Special thanks for already contributing a beautiful logo to James Tenniswood.

To prevent over-engineering the tool and never coming up with a version I can use myself, let alone releasing, I decided to put some old skool agile methodology on the project and prioritise the features by how essential they are for each release. This roadmap is then published on CodePlex. Development of features in 0.2 is complete and a working copy can be installed via click-once.

0.1
- Retreive and display list of connections from EC2
- Connect and disconnect via RDP to any instance in list

0.2
- Show instance CPU history
- Store account keys in local configuration
- Optimise UX

0.3
- Allow multiple AWS accounts
- SSH connectivity, including private key storage
- Overlay instance details / commands on list select
- Add grid of instances, shown when no connections are active

0.4
- Allow Azure accounts with more appropriate list view of instances/services

0.5
- Test TCP connectivity before connecting. Offer option to open relevant remote cloud firewall port to client IP address.
- Allow instance / image / service specific credential saving for connections.

Any AWS EC2 instance is available to query information about itself using simple GET requests to the REST metadata service at http://169.254.169.254/

Add Instance Metadata to Environment Variables with Powershell

We can write a simple powershell script which fetches various pieces of this metadata and writes it to the Windows Environment Variables (at the machine level). We can then have Task Scheduler run this script at Machine Startup so that each new instance of our image will write its unique data.

$wc = new-object System.Net.WebClient;
$instanceIdResult = $wc.DownloadString("http://169.254.169.254/latest/meta-data/instance-id")
$instanceAZResult = $wc.DownloadString("http://169.254.169.254/latest/meta-data/placement/availability-zone")
$instanceAMIResult = $wc.DownloadString("http://169.254.169.254/latest/meta-data/ami-id")

[Environment]::SetEnvironmentVariable("EC2-InstanceId", "$instanceIdResult", "Machine")
[Environment]::SetEnvironmentVariable("EC2-InstanceAZ", "$instanceAZResult", "Machine")
[Environment]::SetEnvironmentVariable("EC2-InstanceAMI", "$instanceAMIResult", "Machine")

Now that we have our data, we can configure BgInfo to use it, adding a few custom fields.

Configuring a Machine Image to use BgInfo

In order to successfully configure BgInfo for an Amazon Windows AMI so that each RDP user receives the custom background image, I performed the following steps:

1. Save BgInfo.exe to a permanent folder accessible to all users on C
2. Run BgInfo.exe and configure data layout as desired
3. Under Bitmap > Location… select “User’s temporary files directory”
4. Apply
5. File > Save As… and save the configuration to a file in the same location as bginfo.exe (eg: bginfo.bgi)
6. Add the following Registry value:
   

   reg add HKU\.DEFAULT\Software\Sysinternals\BGInfo /v EulaAccepted /t REG_DWORD /d 1 /f

7. Create a batch file in the same location with runs bginfo.exe against the saved configuration, with no GUI:

   bginfo.exe bginfo.bgi /timer:0 /NOLICPROMPT
   

8. Create a task in Task Scheduler with the following properties:
• Run only when user is logged on
• Trigger: At log on (and repeat as desired)
• Action: Execute the batch file, starting in the relevant directory

However, a lot of page owners want to have custom tabs for the sake of custom content, not to be integrated within an app. Facebook recently announced iframe tabs for Pages and with it, the deprecation of previous alternatives such as using static FBML for custom tabs on a Page.

Using iFrames has several advantages over having to use FBML since the tab is now capable of any front-end code, like being able to include any javascript effects (eg: jquery animations), embedded content or integration with other front-end services (eg: google maps or google analytics).

However, there are some limitations at the moment that make the whole process, or the possibilities around it rather limited. The main limitation is that a tab must be added through an app, and each app can only expose one possible tab at one Url.

In other words, for each custom tab, you must create and maintain a new application. Again, I can see the logic to this when thinking in an app world, but when thinking from a content context it becomes frustrating. For example, if I want to expose a CMS with a customisable amount of templates for custom facebook tabs, the best I can hope for, if templates which detect the Facebook Page ID are built and change the content accordingly configured, is to create an App per template.

In figuring out a development and deployment process for custom tabs on Facebook Pages, I developed a tab for Glamour.com’s 10th Anniversary which displays the first issue in it’s entirety, and only for users who participate within the Glamour.com UK facebook page. The page layout was designed by James Tenniswood who also put the entire magazine together inside the magazine viewer, powered by Issuu.

Part of my role at Condé Nast Digital is to become fixated on be aware of the performance of our public-facing web sites, and be able to pre-empt or respond quickly to any traffic spikes or performance issues. To that end, I spend some time thinking of new ways to visualize and explore this data for both myself and my team.

In wishful style, I’ve open-sourced a web app containing these visualizations, in the hope that others contribute in the form of ideas or code, or at least get some use out of it so I can more easily justify the late nights.

The AWSMonitor project on CodePlex explains each visualization and offers a roadmap, a forum to discuss new visualizations, and the code to download and run. The app is written in ASP.Net MVC3 and uses Razor views. The views use the javascript Google Visualization API to render graphs and gauges (favouring svg versions).

There are two main ways I use the visualizations in this app daily:

Infoporn – office displays
In true wired.co.uk style, I love to have screens of realtime data on show so that everyone can easily see what’s going on, both in terms of editorial content, new features, traffic and server performance.

The /elb/random view really shines here as it displays a new site from our list of load-balancers on AWS after each interval.

In this visualization we can see:

• A graph comparing the traffic today (blue), yesterday (red), today -7 days (yellow) and today – 14 days (green)
• A gauge showing the average CPU utilization for each server
• A frame containing the site’s output

Problem Investigation
AWS ELB manages server health and will take servers out if the health check target responds with an error. When this happens, I like to see exactly what’s happening on each server. The /elb/{load-balancer-name}/preview shows what the site looks like for each server

This visualization also accepts a parameter that allows us to see a specific Url for each server.

View more information and download the app at CodePlex.

My team were faced with this dilemna earlier this year whilst developing the http://www.glamourmagazine.co.uk site. This is a site whose content is stored in Umbraco, so has an editorial tree of >50,000 articles, each with a differing template choice. For this site, we wrote our own data reading and rendering API on top of ASP.Net, bypassing the Umbraco API.

The difficulty with using older methods to route extensionless requests to ASP.Net (and then to custom IHttpHandlers) is that once the pipeline has handed off to an ASP.Net handler, it’s difficult to get back to another IIS handler. An example of this is requests which should result in IIS finding the default document for a directory. Once we are directing all extensionless requests to ASP.Net, if our ASP.Net handler can’t continue (because maybe an article or aspx page at the virtual path does not exist), then ASP.Net will simply throw an error and display the error page configured in the Custom Errors section in the web.config. This is why still today there are two places to configure error pages, one for the ASP.Net handler, and one for IIS.

UrlRoutingModule,Catch-All Parameters, IRouteHandler and IRouteConstraint

If we lean on ASP.Net Routing, in the same way ASP.Net MVC does for its (often extensionless) virtual controller Urls, we can get a non-invasive solution to this problem with minimal hassle.

Traditionally, under ASP.Net routing if you want to set up a route, you need to know roughly how many Url segments to expect, and what the pattern should be. The problem on a site like Glamour is that there will be a varying level of Url segments, as defined by a team of editors at runtime to match the editorial layout of the site. Furthermore, the url pattern of articles is mostly irrelevant to the code.

ASP.Net Routing comes configured when you start an MVC site in Visual Studio, but if you already have an ASP.Net site you can start using ASP.Net routing without affecting anything else by including the following module in the web.config:

<add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />

and adding the normal route registration in the global.asax (or your site’s application class):

protected override void Application_OnStart(object sender, EventArgs e)
    {
        base.Application_OnStart(sender, e);
         // Set up custom routing (e.g. MVC Controllers)
        RegisterRoutes(RouteTable.Routes);
    }
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
        routes.IgnoreRoute("{resource}.aspx/{*pathInfo}");
    }

Adding a new route, with a catch-all parameter in its Url pattern (ie: all Urls will route to the rule), in conjunction with a RouteConstraint and placing this rule after all other rules (in case we actually want to use MVC or other routes) will accomplish routing all urls to our handler for articles. This class (EditorialRouteHandler below) inherits from IRouteHandler, and should implement the GetHttpHandler which must return an IHttpHandler. In our case we are simply returning a System.Web.UI.Page, setting its master page file to be that set in the Umbraco data-store, and it’s data to be the Node retreived from the CMS:

//create a route for pages in editorial tree 
    var editorialPageRouter = new Route("{*page}", //catch-all page parameter 
				new EditorialRouteHandler() //handler                                                            ); 

    //add it to RouteCollection 
    routes.Add("EditorialPageRouter", editorialPageRouter);

//add a constraint that the page must exist in the cms, or we don't route 
    editorialPageRouter.Constraints = new RouteValueDictionary(); 
    editorialPageRouter.Constraints.Add("EditorialPageFoundConstraint", new EditorialRouteHandler());

public class EditorialRouteHandler : IRouteHandler, IRouteConstraint 
    { 

        public System.Web.IHttpHandler GetHttpHandler(RequestContext requestContext) 
        { 

            //we should not be here if we have not found a result, and set it 
            if (EditorialPageContext.Current.CurrentNode == null) 
                throw new Exception("Editorial Node Not Set. Ensure the correct EditorialRouteHandler Route Constraint has been set.");                    
            //create a new page object, and change the masterpage 
            Page pageResult = new Page 
            { 
                AppRelativeVirtualPath = "~/fake.ashx", //this must be set to something irrelevant to fix a bug in ASP.Net 
                MasterPageFile = "my-master-page.master" //set this to a value retreived from your CMS 
            };        
            //return page with new masterpage 
            return pageResult; 
        }

        protected virtual string GetTemplatePath(INode node) 
        { 
            //todo: search data-store for master page path for current data 
        }

        protected virtual string GetNodeByUrl(string virtualPath) 
        { 
            //todo: search data-store for data with given url 
        }

        public bool Match(System.Web.HttpContextBase httpContext, Route route, string parameterName, RouteValueDictionary values, RouteDirection routeDirection) 
        { 
            if (!values.ContainsKey("page")) 
                return false;

            // get virtual path (null means there was no value for page, meaning it is the domain without a path) 
            string virtualPath = (values["page"] ?? "/").ToString();

            // case insensitive 
            virtualPath = virtualPath.ToLowerInvariant();
    
            var currentNode = GetNodeByUrl(virtualPath);

            //if we get a result, build a page up and set the current node 
            if (currentNode != null) 
            { 
                //set current node on the context, could be HttpContext 
                EditorialPageContext.Current.CurrentNode = currentNode; 

                //inform routing that we have found a result 
                return true; 
            }

            //inform routing we have not found a result 
            return false; 
        }

   }

Final Tip

If you turn off RunAllManagedModulesForAllRequests in IIS’ web.config, you will make sure that the route only gets called for extensionless urls, and not Urls which should be handled by something else in IIS (even if the file does not exist). However, in most cases, you must install hotfix 980368 from Microsoft to allow handlers to be called for Urls without extensions.

It was decided that a tool would be built which offers features not implemented in the default asp.net umbraco implementation of its Media section. The idea to enhance the tool with features such as media object editing, bulk saving and uploading, and cross-platform (including mobile) support led us to choosing Silverlight as the application platform to develop with.

Collaboratively, it was an interesting exercise in the use of tools, role-assumption, personal initiative… and maybe some all-nighters.

The project ended up taking on a good project-architecture:
1. Proof of concept. This took the form of an initial Silverlight application with a tree and a list of media items. We wanted to see if what we wanted to achieve on the client-side was quick to develop using Silverlight.
2. SketchFlow. Warren Buckley rapidly prototyped the different controls that would be available in the client app, which allowed the team to discuss issues before they became a reality.
3. Main Architecture & Development.  This is the side I enjoyed the most. We can up with a client-server architecture which exposed media objects as their byte[] data through a WCF service, and an MVVM pattern for interacting with this data inside the silverlight client and binding it to a UI.
4. Advanced Functionality and Skinning. With a solid foundation we are now in a great position to extend the project in order to rapidly gain new features, to build very similar clients for different silverlight platforms (like Windows Phone), and to keep improving the user experience.

The WCF side of things are architected in a way that the client is aware of the data-contract (IUSTFMediaService), and the project contains a default implementation which looks at Umbraco’s default media objects (UmbracoDefaultImageMediaService). Therefore, more advanced Umbraco developers can freely make their own implementation of IUSTFMediaService to deal with any custom media document types or architectures without changing anything in the Silverlight application.

 The project will be available as an easy-to-install package for Umbraco, with releases and source code available at the SUMO codeplex site.

I’ve had the pleasure of working with some great people from the community since the beginning of this project including Darren Ferguson, Warren Buckley, Alex Norcliffe, Adam Shallcross and Will Coleman from Microsoft.

More to come on the user scenarios the app will enable, and some great code practices we found along the way.