Saturday, 16 July 2011

HTML5 Presentations

Google have made available a nice little template for producing a cool style of presentation in HTML5.

You can access my presentation online here:  Presentation

Here’s some screenshots from a presentation of one of my sites



Another example can be found here:

The source code for the presentation:

Wednesday, 13 July 2011

Visual Round Trip Analyzer

Microsoft’s Visual Round Trip Analyzer (VRTA) helps web developers and testers visualize the performance of a website by providing in depth statistics about it.

You can download the tool here:

Here’s my usual demo website


Here’s an example of the type of information you get back from tool (click on the image to expand):


Monday, 11 July 2011

Google PageSpeed & SpeedTracer

Page Speed

Page Speed is an open-source project started at Google to help developers optimise their web pages by applying web performance best practices and is integrated into the Developer Tools within Google Chrome.

As an example, here is one of my Azure hosted websites running SQL Azure backend viewed in Chrome with Page Speed turned on:


Speed Tracer

Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).

Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by JavaScript parsing and execution, layout, CSS style recalculation and selector matching, DOM event handling, network resource loading, timer fires, XMLHttpRequest callbacks, painting, and more.

Here’s an example of Speed Tracer:



Everyone likes quick wins, by using these tools against your business apps bottlenecks are made visible within your team.  This is a very powerful and necessary part of development, be sure to include performance tests as part of your normal development and release cycle to measure code impact over time.

Wednesday, 6 July 2011

Comparing ProtoBuf-net Serialisation

ProtoBuf-net is a C# engine for Protocol Buffers, a binary serialisation format created by Google.

The project is written and maintained by Marc Gravell who currently works for Stack Overflow. 

The source for this project can be found here:


I’ll be comparing the size of the output along with the speed for serialisation and deserialisation speed for the following methods:

  • Xml Serializer with binary formatter using the [Serializable] attribute
  • Data Contract Xml Serializer using the [DataContract] & [DataMember] attributes
  • Data Contract Json Serializer again using the [DataContract] & [DataMember]
  • ProtoBuf-net v2 BETA (but used by StackOverflow) using the reflection and [ProtoContract] & [ProtoMember] attributes
  • ProtoBuf-net v2 BETA (but used by StackOverflow) using a compiled model with no attributes on my data classes
  • ProtoSharp ALPHA (another C# Protocol Buffers serialisation engine by Torbjorn Gyllebring)

For my tests I’ll be using the following model:


Here’s the object model view when populated with data:


Simple to use

Here is an example of how to create a Protobuf-net compiled model as opposed to attributes on the class and fields:

Write and Read from Memory Stream


Shared Object References

If you have multiple pointers to the same object you can utilise the graph support added in v2.

This example was taken from a Stack Overflow question answered by Marc Gravell:


With Protobuf-net serialisation and deserialisation times are reduced so you should get a quick win out of the box.

If the largest bottleneck in your solution is the transfer speed of data between processes this engine can greatly benefit your project as the data footprint is dramatically reduced.

In order to accurately calculate if your solution would benefit from the use of ProtoBuf-net, you’ll need to set up scenarios that mimic your real world requirements as closely as possible.


You can download the source code here:

Random Test Data Generator


Lines with Shaped Endpoints

You can use standard properties on a line to transform a line into a more visually useful construct.


This line starts with a triangle and finishes with a rounded edge.

Here’s the Xaml source code used in a WPF example application:

Simple Vanishing Line

Sometimes a dividing line between sections can be useful to visually separate areas on your pages.

To soften the line simply use a linear gradient brush with two transparent ends.


Here's the Xaml I used in a WPF example application: