I drive a mk II Renault Megane, which is a great car and I really enjoy driving it. It’s not fast, but those 80 frugal diesel slurping horses get me around just fine. Renault in their infinite wisdom; no doubt as part of the drive to make cars a “black box” that only the magicians at the garage can understand, decided that changing a headlight bulb should not be a simple task. There should be no opening of the bonnet and simply replacing the bulb. There should instead be a test of willpower and perseverance.

This is roughly what I had to do:

• Turn the front wheels full lock so I could access the underside of the wheel arch
• Remove a dirty, hard to remove plastic panel that felt like it might snap
• Reach my arm from the elbow upwards through the resulting small hole with sharpish edges to feel the for the bulb, though from this position I couldn’t look through the light cover at the front of the car (to position my hand) and reach at the same time.
• Except it’s not there – it is hidden behind a plastic cap (that I can’t see). Unscrew the cap (trying not to drop the cap inside the car)
• A-ha – the bulb, I think. It has a plug attached to it (that I can’t see), and is held in place by a spring/clip (that I can’t see).
• Go looking for a torch, that might help. Found Lauren’s wind-up penguin torch.
• No that doesn’t really help much, though I can now kind of see some wires attached to a plug behind which is the bulb.
• Catch 22 – the arm hole is big enough to either shine the torch through or put my arm in. Went for my arm as light on it’s own is unlikely to finish the job. Perhaps if it was a tractor beam torch…
• Remove the plug (should I pull it by the wires or the plasticy bit – went for the plasticy bit)
• Unclip the spring/clip (harder than it sounds, turns out it is only clipped at the top)
• Remove the bulb (that I can’t see). Try not to drop the bulb
• Oops – before doing that I should have tried to remember which side of the bulb mount the notch was facing (that I can’t see) as that helps in positioning the new bulb.

Putting the new bulb in place is then a matter of doing this in reverse, which is trickier than it sounds as the bulb is small and you need to locate the correct rotation for the notch, attach the spring/clip, attach the plug, and screw the cap on, all without being able to see what you are doing.

It turns out I was doing things the hard way. There is a great guide on the Megane Owners Club website that explains that jacking the car up and taking the wheel off first (I kid you not) is the best way to do this. I’ll try that next time.

Now this works fine, but being a developer I can’t help thinking there must be a way to programmatically generate these based on some parameters. Sure enough, solutions already exist, but this is a puzzle I’d like to solve on my own.

Over the next few posts I’m going to record my progress and my various attempts at creating a solution.

This post aims to give a hopefully simple example of how to achieve this using the following basic ingredients:

How it works

The webform will display the first ten blog posts. When the user scrolls to the bottom of the page some JavaScript will call a method to return the next ten items. These are then appended to the bottom of the page. When the user scrolls to the bottom of that the process repeats until there are no blog posts left.

This is simplified for us by the use of a ScriptMethod, which is like a WebMethod in a web service, except you place it in a normal ASPX page as a static method decorated with the ScriptMethod attribute (code example below). ASP.net then kindly provides a nice JavaScript proxy for us to call this with one line of code. I’m then using jQuery to simplify the process of adding the resulting array of BlogPost items to the page.

Blog Post Repository

First things first, we need some data to display and so I have created a static class BlogPostRepository which provides access to a list of made up BlogPost items:

public class BlogPost
{
	public string Title { get; set; }
	public string Summary { get; set; }

	public BlogPost(string title, string summary)
	{
		Title = title;
		Summary = summary;
	}
}

public static class BlogPostRepository
{
	static List<BlogPost> posts;

	static BlogPostRepository()
	{
		posts = new List<BlogPost>();

		for (int i = 1; i <= 200; i++)
		{
			posts.Add(new BlogPost(string.Format("Post number {0}", i),
				string.Format("Discover my thoughts on the number {0}.", i)));
		}
	}

	public static List<BlogPost> GetPosts(int startAt, int howMany)
	{
		return (from p in posts
			select p).Skip(startAt).Take(howMany).ToList();
	}
}

The code behind page

The code behind for the web page is straightforward – bind the first ten posts to a ListView control during Page_Load, and the ScriptMethod GetPosts will return additional blog posts to the page on request:

protected void Page_Load(object sender, EventArgs e)
{
	if (!IsPostBack)
	{
		lvItems.DataSource = BlogPostRepository.GetPosts(0, 10);
		lvItems.DataBind();
	}
}

[System.Web.Services.WebMethod()]
[System.Web.Script.Services.ScriptMethod()]
public static List<BlogPost> GetPosts(int startAt, int howMany)
{
	return BlogPostRepository.GetPosts(startAt, howMany);
}

Note that GetPosts is decorated as a WebMethod and also a ScriptMethod. It also needs to be static.

The mark up

The key to making Script Methods work is the <asp:ScriptManager> which needs to have EnablePageMethods set to “true”:

<asp:ScriptManager runat="server" ID="ScriptManager1" EnablePageMethods="true">
</asp:ScriptManager>

This ensures that the necessary JavaScript helper methods are available.

Next up is a ListView control which I really like because of the control it offers over the output in your page. This takes care of the initial output of blog posts:

<asp:ListView runat="server" ID="lvItems">
	<LayoutTemplate>
		<div id="container">
			<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
		</div>
	</LayoutTemplate>
	<ItemTemplate>
		<div class="post">
			<h2>
				<%# Eval("Title") %></h2>
			<p>
				<%# Eval("Summary") %></p>
		</div>
	</ItemTemplate>
	<AlternatingItemTemplate>
		<div class="post shade">
			<h2>
				<h2>
					<%# Eval("Title") %></h2>
				<p>
					<%# Eval("Summary") %></p>
		</div>
	</AlternatingItemTemplate>
</asp:ListView>

You will notice that each blog post has a container DIV with a class of “post”, and that they are all held within a container DIV with an ID of “container”. Alternate posts have a shaded background thanks to some CSS and the additional “shade” class. The next thing is to add the JavaScript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            GetPosts();
        }
    });
});

function GetPosts() {
    var howMany = 10;
    var startAt = $(".post").size();
    PageMethods.GetPosts(startAt, howMany, OnGetPostsComplete);
}

function OnGetPostsComplete(posts) {
    for (var i = 0; i < posts.length; i++) {
        var shade = (i % 2) != 0 ? " shade" : "";
        $("#container").last().append("<div class=\"post" + shade + "\"><h2>" +
                            posts[i].Title + "</h2><p>" +
                            posts[i].Summary + "</p></div>");
    }
}
</script>

Lets look at the script above. First I use jQuery to attach a function to the scroll event of the window. This will fire whenever the user scrolls to the bottom of the page, and simply calls the GetPosts method.

GetPosts uses jQuery to get a count of items in the page with the class “post”. This will equal the number of blog posts output so far. I can then call a JavaScript method provided for us by ASP.net because the GetPosts method in our code behind is decorated as a ScriptMethod. So PageMethods.GetPosts takes the same parameters as the C# code, plus in addition the name of the method to call when the asynchronous web call has completed – i.e. when we have the results of the call, in this case OnGetPostsComplete

OnGetPostsComplete takes the array of BlogPost items returned by the ScriptMethod and appends them to the end of the items already in the container DIV which holds all of the blog post DIVs. For effect I’m adding the “shade” class to alternate post items which I have defined in CSS to give them a different background colour.

What next

I haven’t tried this with a database as a data source so speeds will vary. When using the in-memory repository there was hardly a noticable delay at all in the new items being displayed. You might want to add an AJAX style “spinner” graphic to show when loading is occurring. This can easily be achieved using a hidden DIV and the jQuery toggle() method, e.g. $("#loading").toggle();. Toggle it on in GetPosts, and off again in OnGetPostsComplete.

That doesn’t sound good… I then remembered that we have restrictions enabled on this iPod as my daughter is only 6 so no internet, app store, etc. I disabled restrictions and tried again and it has worked fine this time. The only other thing I did was close any open apps. I don’t know, perhaps turning the iPod off and on again would have had the same result, but this worked ok here.

A little while back a friend of mine Anthony Casey decided to make an iOS friendly HTML5/CSS3 based clock similar to the Flash based The Colour Clock. This is a digital clock where the background colour changes with every second of the day. You can view the completed HexaClock here, though you will need a HTML5 browser (no Internet Explorer 8 or below I’m afraid).

Anthony is a whizz with all things HTML/CSS, and asked me if I could help out by coming up with some JavaScript to make the clock change colour and tell the time.

Figuring out which colour to show

First things first, how do I make every second of the day a different colour? As we know the current time of day is made up of three parts, hours (0-23), minutes (0-59) and seconds (0-59). Luckily for us colours on the web are also made up of three parts, combinations of red, green and blue (known as RGB). The amount of each colour to use is a value between 0 and 255, e.g. 255 red is solid red, 0 red is no red at all, and 128 red is a dark maroon type colour. Using this knowledge we can create colours and shades, for example:

Red – R:255 G:0 B:0
White – R:255 G:255 B:255
Black – R:0 G:0 B:0
Yellow – R:255 G:255 B:0
Purple – R:195 G:48 B:255

It’s kind of like the opposite of mixing paint – here mix lots of each colour and you end up with white instead of a mucky browny black colour. There are plenty of sites out there that explain RGB colours in more detail.

How much of each colour to use

The amount of red to use maps to the hour of the day, green to the minute in the hour, and blue to the second in the minute. Using the actual value of hour, minute and second would result in lots of dark colours as we would never get a number higher than 59, so instead we will figure it out as a proportion of 255:

Red = (hour / 24) * 255
Green = (minute / 60) * 255
Blue = (second / 60) * 255

Making it tick

With the colour problem sorted the next step is to make the clock update every second. I created a “tick” function to show the current time and the appropriate background colour. To make it update once a second the JavaScript setTimeout function was used to call “tick” again after 1000 milliseconds.

Web browsers prefer their colour values represented in hexadecimal so the numbers need converting first. After first looking at writing a small decimal to hex conversion function I realised there was no need as I could use a nice feature of JavaScript to specify which number base to use when converting a number to a string, e.g. 15.toString(16) = “f”. This should actually be “0f” so the fix2 function tidies up any one digit hex values.

Here is the full code:

function hexClock(bodyId, clockId) {
	this.body = document.getElementById(bodyId);
	this.clock = document.getElementById(clockId);
	this.running = false;
	this.fix2 = function (n) {
		return (n < 10) ? "0" + n : "" + n;
	}
	this.tick = function () {
		if (!this.running) return;
		var now = new Date();
		var h = now.getHours();
		var m = now.getMinutes();
		var s = now.getSeconds();
		var hexH = Math.round((h/24) * 255).toString(16);
		var hexM = Math.round((m/60) * 255).toString(16);
		var hexS = Math.round((s/60) * 255).toString(16);
		this.body.style.backgroundColor = "#" + this.fix2(hexH) + this.fix2(hexM) + this.fix2(hexS);
		this.clock.innerHTML = this.fix2(h) + ":" + this.fix2(m) + ":" + this.fix2(s);
		setTimeout(function(me) { me.tick(); }, 1000, this);
	}
	this.start = function () {
		this.running = true;
		this.tick();
	}
	this.stop = function () {
		this.running = false;
	}
}

// this bit runs when the page loads
function init() {
	var clock = new hexClock("body", "clock");
	clock.start();
}

Probably not the best bit of JavaScript that you will ever see but it does the job. At some point I might rewrite it using the Prototype approach.

Fast forward to 2010, Ubuntu 10.04 LTS gets a great write up on The Register, so I’ve decided to have another look. I’m not quite brave enough to go for a true dual boot, but using WUBI to achieve kinda the same thing.

First impressions are great, the installation runs without a hitch and all the hardware on my laptop is detected and works. It’s much faster too than Windows, helped no doubt by not having to run anti-virus and all those task tray programs.

Software wise Firefox is up to date and it was simple to get Flash working. Being a Chrome fan I installed Chromium but it seems to render a lot of text too bold for my liking so I’ll stick with Firefox which seems to run faster than I remember, but that could be down to not having any add-ons installed. Gwibber and Empathy take care of the social networking side of things and I like the built in broadcast feature (now that I realise what it actually does).

The compatibility issues between OpenOffice and the corresponding MS Office apps have been well documented elsewhere, but it seems perfectly fine for my needs.

I admit have an ulterior motive for looking at Ubuntu; as a C# web application developer by day I want to mix things up for my hobby programming, so I’ve decided to learn how to make Ruby on Rails apps. I get the impression that it is easier to get things set up on Linux.

Having said that I’ve been so impressed with Ubuntu and how fast and stable it is that I’ve been using it daily as my main OS for the last couple of weeks. I’ve also replaced the XP install on my wife’s incredibly slow netbook and it now runs like lightening so double win.

I still dip back into Windows to sync my iPod with iTunes and when I need Visual Studio, and I’ll keep it for Picasa (for now, there is a Linux version) . I’m converted though, even if I won’t be saying goodbye to Windows just yet.