Helephant.com

Geeks are great but bet on the non-techies

Helen — Mon, 22 Jun 2009 21:32:18 +0000

I was talking to a friend of mine who is boycotting Facebook. She was a little surprised that I have a Facebook profile. I told her that I have a Facebook profile because all my non-techie friends have one. It’s makes it easy to keep in touch with a heap of people that I quite like to keep in touch with. It’s a place where people actually keep their current email up to date!

It reminded me of the old instant messenger days. I started off on ICQ when the web was still young and boy did I love it. Everyone I knew from Star Wars chat was on there. I had a ICQ number that was a low seven digit number! Sometimes when I was drifting off in maths class, I’d hear the little uh-oh message notification sound in my dreams.

Then MSN messenger came on the scene. I scoffed at Microsoft’s lame attempt to muscle in on instant messaging. I kept using my ICQ client and when that became too slow and bulky to be practical I switched to Trillian.

Then my friends at school started to get the internet at home and I started to want to talk to them. None of them used ICQ. They all used MSN. So I got a MSN account to talk to them and the people who I talked to on ICQ also started to switch to MSN. One day when I formatted my computer I just didn’t bother to load ICQ back on and that was the sad end to it.

Ada Lovelace day - Molly Holzschlag, Kathy Hassinger and my mum

Helen — Tue, 24 Mar 2009 22:58:47 +0000

Today I’ve been really enjoying all the stories posted for Ada Lovelace day, a day where we’re encouraged to blog about remarkable women in IT. I thought it was a nice idea when my friend emailed me about it so I thought I’d pitch in and write about three geek women who inspire me.

Web development hero - Molly Holzschlag

I’m a web developer. It was the internet that got me interested in computers beyond being a game machine. It was web development (and Creatures) that really made me want to be a programmer. I’ve been doing this for over ten years now and one woman who’s been a real hero of mine in the web development community is Molly Holzschlag.

Molly has been part of the campaign to make the web a more open and interoperable place. She has written books, taught classes and given Bill Gates shit about the IE team going off the radar. She has helped educate developers and been part of making web developers care about web standards, something that seemed like an impossible dream back in the late nineties browser wars. Now even Microsoft brags about improvements to standards compatibility in their latest browser. Because of the work that she’s been part of, the web doesn’t belong to hyperglobal megacorp or the government (or Google - yet). It still belongs to us, anyone who hooks a box onto the network and spends some time communing with a text editor.

A personal favourite geek girl - Kathy Hassinger

Kathy’s friend of mine who is a technical writer. Until recently she was working with developers to document software for scientists. How cool is that?

I wish I could write as engagingly and as amusingly as Kathy. Go read her Ada Lovelace post. She managed to capture the essence of what’s important about the whole subject of women in IT with a story about Colonel Samantha Carter from StarGate and the one observation that she’s a powerful role model because the people on her team don’t treat her any differently because she’s a woman.

Geekdom needs people who can communicate and make people think about things as much as we need people who build things. Code isn’t enough by itself to make a product great, you also need to be able to connect with the people who use it, get them to trust you and then help them kick arse with it.

Kathy’s not just a great writer. She’s a sweet, funny and vibrant person as well. She’s passing her geek heritage on to the next generation through her neice (who she dotes on, encourages and regularly takes to the local science centre). She’s one of those people who has always got something interesting to say about any topic. She is also unashamedly and openly a geek, something that inspires me to not try to hide who I am when I meet people who might not understand.

Someone who made it possible for me - my Mum

My mum’s an English language geek rather than a computer geek but it was her influence that made it possible for me to become a programmer. In our house there was never the idea that my sister and I had to be a certain way because we were girls. We were encouraged to read and to be imaginative and to build things. We played with lego as well as dolls, climbed trees, dug holes, made cubby houses. We were wrote stories and had a big box full of stuff to make things from. We were taught to question things (which drove my parents a little mad as we got older) and to think for ourselves. I was real lucky to get geek parents. :)

My mum loves to learn things and has three masters degrees in English. I can remember being about five or six and going with her to the University of Queensland when she was dropping in an assignment. I remember seeing the beautiful lawns and the huge sandstone buildings and telling myself that I was going to go there one day. I still had that image in my head when I was slogging through year 12. The story I told myself of the place created just so people could try new ideas and learn things was what made all that hard work seem worthwhile.

The biggest thing that I got from my mum that’s helped me be a programmer is my writing. Being able to communicate clearly and effectively is such a huge advantage to getting your ideas heard. Good ideas can’t change things if you can’t share them with other people.

To(): a handy way to convert strings to other types

Helen — Mon, 23 Feb 2009 17:01:16 +0000

A webpage is just a giant string. As fancy that the server side abstractions can get (particularly in the .NET world) all we’re ultimately doing is reading the string given to us by the browser request so we can build the right new string for it to display to the user.

.NET is a strongly typed world so this involves lots of parsing values from the strings. We need to parse strongly typed values from query strings, server controls, configuration files and a hundred other places where .NET meets the outside world.

So since I use int.parse() so much in ASP.NET so I wrote a handy extension method called To (perfect naming thanks Dan) using generic return types and a little reflection that makes converting all these string values to another type incredibly simple:

public static class StringUtils
{
///
/// This method will parse a value from a string.
/// If the string is null or not the right format to parse a valid value,
/// it will return the default value provided.
///
public static T To<t>(this string value, T defaultValue)
where T: struct
{
var type = typeof(T);
if (value != null)
{
var parse = type.GetMethod("TryParse", new Type[] { typeof(string), type.MakeByRefType() });
var parameters = new object[] { value, default(T) };
if((bool)parse.Invoke(null, parameters))
return (T)parameters[1];
}
return defaultValue;
}
///
/// This method will parse a value from a string.
/// If the string is null or not the right format to parse a valid value,
/// it will return the default value for the type.
///
public static T Tot><t>(this string value)
where T : struct
{
return value.Tot><t>(default(T));
}
}
t>

Now getting an int from the query string is only 10 extra characters to type:

var value = Request.QueryString["value"].To<int>();
int>

Complete example

Improving the way ASP.NET handles 404 requests

Helen — Wed, 11 Feb 2009 13:51:43 +0000

Sometimes things go wrong, information goes out of date, pages go missing. When these things happen it’s up to the humble 404 error page to let your users and the search engines know that things have changed. ASP.NET has a built in custom error pages feature to make it easy to set up your 404 page but here are a couple of tips to make the 404 experience a little better.

Return the right status code

By default the page handling a 404 error page doesn’t return a 404 status code to the browser. It displays the error message that you provided to the user but doesn’t have any extra information to flag the page as an error page.

This is called a soft 404. Soft 404 pages aren’t as good as ones that return the 404 status code because returning the 404 status code lets anything accessing your file that the page is an error page rather than a real page of you site. This is mostly useful for search engines because then they know they should remove dead pages from their index so users won’t follow dead links into your site from results pages.

Pages that return 404 status codes are also useful for error detection because they’ll be recorded in your server logs so if you have unexpected 404 errors, they’ll be easy to find. Here’s an example of the 404 error report in Google Webmaster tools:

Here’s how it looks if we use Firebug to spy on what’s happening when we load an invalid url into an ASP.NET application. It first shows a 302 redirect as the ASP.NET custom error handling code redirects from the original page to the custom 404 error handler. Then it shows a 200 ok code because the page is just a regular page and doesn’t know it should do any different:

This is very easy to fix. You just need to explicitly set the Response.StatusCode property to 404 in the 404 error page:

protected void Page_Load(object sender, EventArgs e)
{
Response.StatusCode = 404;
}

Once this is done, we still get the 302 redirect and then the 404 error code that should be returned:

Redirecting to the error page

The ASP.NET custom error handling logic automatically redirects the user to your 404 error page. The only bad thing is they do a browser redirect rather than a server redirect so the url of the page changes for the user from the url that they typed in, to the url of your error page.

So if a user entered in a url like http://yoursite.com/fake.aspx they’d be redirected to http://yoursite.com/404.aspx?aspxerrorpath=/ErrorCodes/Fake.aspx.

It doesn’t seem very slick to me. If the user typed in the url manually they will probably get quite confused (and probably a little annoyed) when the url they typed in has suddenly changed. If they simply made a mistake they’ll need to type in the whole url again. The physical location of the error page just doesn’t seem like information that will be important to the user while the url of the page they were trying to access is.

The good news is that it’s quite easy to create a HttpHandler that can listen for 404 errors and show the error page that is set up in the web.config without changing the url.

Here’s an example of what the code would look like. Notice that if you’re using a HttpModule to handle the 404 error pages, you can set the status code to the right thing in the module and don’t need to do it in the page:

public class ErrorModule : IHttpModule
{
…
public void Init(HttpApplication context)
{
// Listen for errors
context.Error += context_Error;
}
void context_Error(object sender, EventArgs e)
{
var context = HttpContext.Current;
// This example only handle 404 errors
// You could also add some similar logic for 500 internal server
// errors (logic errors) and do some logging
var error = context.Server.GetLastError() as HttpException;
if (error.GetHttpCode() == 404)
{
// we can still use the web.config custom errors information to
// decide whether to redirect
var config =
(CustomErrorsSection)WebConfigurationManager.GetSection("system.web/customErrors");
if(config.Mode == CustomErrorsMode.On ||
(config.Mode == CustomErrorsMode.RemoteOnly && context.Request.Url.Host != "localhost"))
{
// set the response status code - if we set it here we don't need
// to also set it in the page itself
context.Response.StatusCode = 404;
// redirect to the 404 error page from the web.config
if (config.Errors["404"] != null)
HttpContext.Current.Server.Transfer(config.Errors["404"].Redirect);
else
HttpContext.Current.Server.Transfer(config.DefaultRedirect);
}
}
}
…
}

After the module is created it just needs to be registered in the httpModules section of the web.config file:

>
…
name="ErrorModule" type="ErrorModule, App_Code"/>
>

Complete example

Creating a good 404 experience

Noone likes 404 errors but they’re a part of being online. To finish up, here are some ideas about what you can do to make the 404 pages on your site as useful as possible to the people who end up seeing them:

Ideas on how to turn a 404 into a good experience from A List Apart
Google guidelines on how to make your 404 pages useful to visitors, search engines and developers
Google webmaster tools has a 404 page widget you can add to your site that suggests what the user might actually have been looking for.

Date for OpenTech 09 announced

Helen — Mon, 09 Feb 2009 20:37:15 +0000

One of my first and favourite UK conferences, OpenTech have just announced the date for 2009 is going to be July 4th.

It’s got more of a beardy, open source, linux feel to it than DDD day does but that’s one of the things I like about it. The talks are always really interesting. One year they had a guy from the internet archive talking about trying to scale up when they were trying to take a rolling snapshot of the internet. Last time I went there was a really interesting talk by a guy called Ted Nelson (who’s came up with the term hypertext) who talked about human-computer communication.

It’s always interesting and thought provoking (and only costs £5) so pencil it in to your geek diaries and head over to the notification mailing list to get an email when registration opens. :)

Svelte asp.net: avoiding

Helen — Sun, 08 Feb 2009 15:00:08 +0000

Postbacks in ASP.NET have a pretty heavy cost in terms of page size. Add a tag and now you have a big ugly viewstate tag to lug around each time you load a new page. Put in a control that triggers postback (like a linkbutton) and suddenly there’s a big chunk of script and hidden fields where your nice simple form tag used to be:

value="/wEPDwUKLTkzNjc3NzczOWRk3iDWotjQ89h26Tx79TM3SRLPJlg=" />

value="/wEWAgLAqu2HBQKfwImNC6GfmgtYoNIWKohd9XTK5tBa39eY" />

…

This is fine for a page that actually takes advantage of ASP.NET’s page lifecycle and controls, but can often be overkill for simple content driven applications that just need a little bit of server side logic. The good news is that in these cases you can have your serverside logic and eat it too just by using a simple html form tag with a regular GET request

Before - markup only a mother could love

The place I first thought of this was the search box on my old ASP.NET blog. Most of the pages on my blog were just straight content pages that didn’t need any of the postback logic. It seemed a real shame to add all this weight and complexity to the page just for a simple search form.

My search form was originally an ASP.NET form element with a button and textbox control that I could extract the search information from:

onclick="SearchButton_Click" />

The logic of redirecting to the search results page was a button click event with a Response.Redirect() call:

protected void SearchButton_Click(object sender, EventArgs e)
{
Response.Redirect("search.aspx?keyword=" +
Server.UrlEncode(KeywordsField.Text));
}

The form HTML generated by ASP.NET looked like this:

value="/wEPDwULLTE0MDM4MzYxMjNkZB1GP1nffovgibqQWwhMKnQYMzMu" />

value="/wEWAwLtu4u/AQLfh7nDDALR1viaCYZVWJZuOfJe5p1cdkVMqJHz7Q3T" />

After - no server side code needed at all

All the markup seemed like overkill to me so I switched the form with a regular HTML form element (minus the runat=”server” attribute). Then I replaced the textbox and button controls with their HTML equivalents:

Complete example

Now my search form doesn’t need code behind logic at all! The action=”search.aspx” attribute of the form tag tells the browser exactly where the information should be redirected to. The method=”get” part tells it to send it on the query string. The name of the form fields are used as the query string key. In my case the search page was expecting a query string parameter called keywords so the text field’s name also had to be set to “keywords”.

So when the search button was clicked, the browser would try to load the following url (exactly what my old redirect was loading):
http://mysite.com/search.aspx?keywords=hello+world

The html generated now is still the same svelte markup I started with:

Note: it’s important not to put a runat=”server” attribute on the form fields because ASP.NET will change the name of the fields to something that’s guaranteed to be unique on the page. This is fine when you are using the fields in a postback but may mean that the values passed to the next page won’t have the right names.

For Barry :)

Q: why not just use Microsoft’s MVC framework so you never have to use postbacks?
A: You don’t always get to choose what you’re going to develop in and there’s an awful lot of WebForms code out there already that sometimes you just have to work with. :)

Opening resx files in the xml editor

Helen — Wed, 04 Feb 2009 16:39:20 +0000

Defaults can never please everyone. There’s always someone whose workflow is a little different. That one developer who likes to use SeaMonkey to test their pages or that weirdo who prefers to edit resx files as a text file.

I am that weirdo who likes to edit resx files as text files and rather than argue with me about the merits of their GUI tool, they have given me a very nice dialog where I can choose what editor I’d like any type of Visual Studio project file to open with by default.

If you are another person who shuns the built in editor and wonders where the “switch to xml button” went in VS2008, fear not because here are instructions on how to change the very nature of VS2008 and make it do your unnatural resx text editing bidding:

Right flick on a resx file
Choose open with
Select Xml Editor

Also works on any other type of file in visual studio. It’s also very handy for opening .skin files with intellisense support. For any SeaMonkey developers, Check out right click->browse with to change what browser different file types will be browsed with.

Snowy London Underground sign

Helen — Mon, 02 Feb 2009 14:49:04 +0000

It’s a snowy day in London today. Apparently the most snow London’s seen in 20 years. It’s definitely the most snow I’ve ever seen. I was covered in snow and looking like a big white yeti by the time I got to the station this morning.

I’ve been keeping an eye on the Transport for London website all day (hoping Joe doesn’t get stuck in town) and loved the picture they had on the homepage:

Reducing viewstate on custom controls

Helen — Sun, 01 Feb 2009 11:32:13 +0000

One of the biggest waste I see in using viewstate is that it persists values that are already set in the aspx. These get set every time that the page runs and don’t need to be round tripped to the browser so that they will be persisted.

I did a little experiment a while back where I tried using custom attributes to save viewstate on controls. I found that while it was very handy being able to save properties in viewstate without having to write repetitive code, a much bigger advantage was I now had one place where I could optimize exactly what went into it.

The problem with persisting values in viewstate that are already saved in the aspx is pretty easy to solve. The code just needs to keep track of what the values of the properties were after the controls in aspx page are initialized:

protected override void OnInit(System.EventArgs e)
{
base.OnInit(e);
List<propertyinfo> viewstateProperties = GetViewStateProperties();
foreach (PropertyInfo property in viewstateProperties)
_initialValues[property.Name] = property.GetValue(this, null);
}
private Listpropertyinfo><propertyinfo> GetViewStateProperties()
{
Listpropertyinfo><propertyinfo> properties = new Listpropertyinfo><propertyinfo>();
foreach (PropertyInfo property in this.GetType().GetProperties())
{
object[] attributes = property.GetCustomAttributes(typeof(PersistToViewState), true);
if (attributes.Length > 0)
properties.Add(property);
}
return properties;
}
propertyinfo>

Then when it’s time to save the viewstate, check whether the value has actually changed:

protected override object SaveViewState()
{
// Save automatic viewstate properties
List<propertyinfo> viewstateProperties = GetViewStateProperties();
for (int x = 0; x < viewstateProperties.Count; x++)
{
PropertyInfo property = viewstateProperties[x];
object value = property.GetValue(this, new object[] { });
if (_initialValues.ContainsKey(property.Name))
{
// Only save the property to viewstate if it has changed since viewstate
// was loaded. If it hasn't been changed, we don't need to store it because
// it will be loaded from the aspx on the next page load
object initialValue = _initialValues[property.Name];
if (!object.Equals(initialValue, value))
ViewState[x.ToString()] = value;
}
else
ViewState[x.ToString()] = value;
}
return base.SaveViewState();
}

Complete example

It makes a big difference to how much viewstate is saved. Here’s the viewstate of a single example Pie control before this simple bit of optimization:

value="/wEPDwUJMzUzODE3ODMxD2QWAgIDD2QWAgIBDxYEHgEwBQlhcHBsZSBwaWUe
ATECA2Rk/V7Nc8+xuVAMsS4R9hLs1SHD4Js=" />

Here’s the viewstate after:

value="/wEPDwUJMzUzODE3ODMxZGTnlfN1SaJSDVcRTDQPIBVe1fK+Gw==" />

Everything else still works as expected. Controls created entirely in code will still work perfectly well, the only difference will be that all properties that are set will need to be persisted so you won’t see any reduction in the amount of viewstate used there. The properties set in code of controls created in the aspx will also be saved to viewstate so they will be persisted after the next postback.

Goodbye 2008. Hello 2009

Helen — Sun, 18 Jan 2009 16:48:51 +0000

Wow, it’s January 18th already. I feel like I’ve really hit the ground running. Everyone else who did their new years post did them two weeks ago but I really wanted to write down what I’d achieved in 2008 and what I wanted to achieve in 2009 to give myself something to look at in a year.

What I did in 2008

Participated in the UK ASP.NET community - I talked at Barry’s user group, VBUG and DDD7. It was exhausting but great fun. The feedback I got from DDD7 was particularly useful and I think at some point I’ll be able to get hold of a video to see how my talk actually goes from the audience’s perspective.

Learnt heaps about javascript objects - I’m embarrassed to admit that I didn’t even know what closures were at the beginning of 2008. I think learning more about javascript has made me a better programmer in general. It’s really made this C# dev very keen to have a go at a more dynamic language like ruby or python.

Move my site to wordpress - I had great fun writing my own blog script. It’s practically a web developer rite of passage. After seeing all the cool stuff other people were able to do on their blogs, Ting convinced me it was time to retire the old ASP.NET script and use my tiny bit of home dev time to work on something more important.

Started a new job - been working at my current job for almost a year now. I’m still working as an ASP.NET developer (which I pretty much love). I got lucky *again* to find a friendly place with dedicated and interesting people. Got to learn about LINQ, JQuery, some neat clientside bugs and how to fit German words into layouts.

Went to Tokyo - the land of robots, hello kitty and amazing tasting chicken. Akihabara is where good geeks go when they die.

Lost 50 pounds - I am still a little surprised I actually managed to do this. I followed weight watchers all year and found it really helpful. There were times when it was hard and I didn’t make much progress in the last three months of the year but I’m pretty proud I’ve managed to do so well. Slightly embarrassed my weight got to the point where I needed to lose 50 pounds, but pretty relieved I was able to do it.

Got engaged to Joe - can’t really take credit for that. It was his idea. :D

Goals for 2009

Seems like I always want to do way more than I have time for so I’ve decided just to pick a couple of extra-circular things to concentrate on in 2009. To be honest, I’ll be happy to complete any of these things.

Write some more interesting clientside samples - every year for the last 11 years I’ve been lucky enough to expand my clientside web development skills without really trying to. This year I want to consciously push the boundaries of the web app a little bit. I have a few things in mind. :)

Launch a new site - I’ve got a few ideas about what I’d like to do this year. I don’t want to actually announce anything yet but I started something last year that I hope will be ready for version 1.0 in a month or two.

Post at least twice a month - Attwood says pick a schedule and stick to it. I know it’s not going to always be possible but I’m going to try for twice a month. Then my plan is to use my wee bit of spare time to do something else for the rest of the month.

Organise our wedding - oh my goodness that’s turning out to be a lot of work already. I’ve spent every lunch time since I got back to work on the 5th sorting something out and I don’t seem to be able to have a conversation with my mum or his that doesn’t involve wedding favours, invitation lists or dresses. It’s really good fun though and I think we’re going to have a great day. :)

Finish the last bit of weight loss - I’m still not down to my ideal weight. My BMI is still at the top end of the healthy range. I’d like to get it to a little below the middle (really, I just want to lose the flab around my tummy). I’m not far away now. I think it should take about three months to lose the last little bit. Then I’ve just got to get used to the idea of healthy living for the rest of my life. :)

Things I’d like to do but won’t have time for

Get involved in an open source project - preferably something to do with javascript. The more web development I do the more I’m discovering how much I like front end development.

Learn hiragana - managed to learn all the characters by studying a book on the train. Would like to be able to read a little (and understand the japanese language a little) when Joe and I go on our honeymoon.

Read some more - read all of Jane Austen’s book in 2007. Read a heap of great sci-fi (and all of Harry Potter) in 2008. Hope I get some time to do some great fiction reading in 2009 as well. Commuting to work isn’t all bad. :)

World domination through army of killer robots - you lot are just lucky I’m too busy for this. :)

Get to the end of the year without being exhausted. :)

Javascript object prototype

Helen — Sun, 18 Jan 2009 16:08:11 +0000

The javascript object prototype is javascript’s way of sharing implementation across similar objects, much like the way classes are used to do this in many other languages. Although constructor functions look a lot like classes, javascript does not have a class based object system like C# or Java. Instead it has a prototype based object system.

The main difference between the two types of languages is all about objects and classes. In a class based language there is a clear distinction between the ideas of a class and an object. A class is a template for creating an object and an object is a specific instance of a class. In C# you cannot create an object without instantiating it from a class. Even the most basic object of type Object is instantiated from a class. Once the object is created you cannot make it into a different type of object by adding different properties.

In a prototype based systems there are no classes. All objects are created by adding properties and methods to an empty object or by cloning an existing one. Although a constructor function may look like a class (probably so people from more traditional class based languages would be able to use it), it’s really just a function that knows how to add the right properties and methods to create a particular type of object.

This approach is called prototype-based inheritance because an existing object is used as a template (or a prototype - a typical example) to build other objects. The existing object will be used as a starting point to build the new object but the new object does not have to be exactly the same.

How it works in javascript

Prototypes are implemented in javascript using the prototype property of constructor functions. Any property or method that’s added to the constructor’s prototype automatically becomes part of every object created by that function.

The prototype property is basically a template for the objects created by the constructor. It contains the things that should be the same among all objects created by the constructor. Individual objects can override and change the things they inherit from the constructor’s prototype but they will all start out the same.

The aim of the prototype is to share implementation between similar objects, to make things more convenient for programmers. It is not designed to be a type system. Javascript objects are dynamic so they can be changed after they are created. Knowing that an object was created by a particular constructor function does not guarantee anything about the methods or properties that an object will have.

A simple example

The easiest way to understand this is to look at an example, so let’s take a look at the Pet example again.

All the pets created by the pet constructor function have a sayHello() method. When we created our pet using the constructor function, we created a separate sayHello() function for each pet by creating the function and adding it to the new object we were creating:

function Pet(name, species, hello)
{
this.name = name;
this.species = species;
this.hello = hello;
this.sayHello = function()
{
alert(this.hello);
}
}

Wouldn’t it be better if there would be just one sayHello() function that all the pet objects will automatically share? To do this we could remove the sayHello() method from the constructor function and add it to the function’s prototype property instead:

function Pet(name, species, hello)
{
this.name = name;
this.species = species;
this.hello = hello;
}
Pet.prototype.sayHello = function()
{
alert(this.hello);
}
var rufus = new Pet("Rufus", "cat", "miaow");
rufus.sayHello();

Complete example

When we created the Pet function, its prototype property was automatically set to an empty object. Every function is set up this way when it’s created because there’s no way for javascript to know whether any particular function will be used as a constructor function or not.

We wanted all our pets to have a sayHello method, so we added a sayHello() method to the Pet’s prototype property. The prototype property contains a regular javascript object so this is just the same as assigning a new method or property to any other object. In this case we have created a new anonymous function and assigned it to a property called sayHello.

When we created the rufus object, it automatically maintained an invisible link back to the Pet function that created it. Then when we tried to access the sayHello() method, javascript first looked for a sayHello() method set directly on the rufus object. When it couldn’t find one, it then looked at the Pet constructor’s prototype, found sayHello() and called that instead.

Because the property resolution happens when the property is called, any changes made to the prototype property will be reflected in all of the objects already created by the constructor. Properties can be dynamically added or removed or the prototype could even be replaced with an entirely new object.

This all happens transparently. The code that is using the rufus object doesn’t need to care whether rufus’ sayHello() method was set directly on rufus or if it belongs to the Pet constructor.

The prototype property is just an object

The prototype property is just an object. There’s nothing particularly special or magic about it. Anything you can do to a normal object you can also do to a function’s prototype property. This includes adding and removing properties, accessing the properties through substring (Pet.prototype["property"]) or dot (Pet.prototype.property) notation and iterating through the properties using a for loop.

When a new function is created the prototype property is set to an empty object, exactly the same if we said Pet.prototype = new Object() when we created the function. Javascript does this by default whenever you create a new function to make sure that any objects created by calling the function will automatically get all of the methods and properties that are belong to every Object (like toString()).

In the previous example we just added another property to object that was automatically created. Instead we could have overriden the default empty object with a new one instead:

Pet.prototype = {
sayHello : function()
{
alert(this.hello);
}
};

You can even set the prototype to an be a new object created by another constructor. This is called prototype chaining and is the way related javascript objects can share implementation much like inheritance in a class based language:

function Cat()
{
…
}
Cat.prototype = new Pet();

Every constructor has a prototype property

Even built in constructors like String or Array. Libraries like prototype and ASP.NET ajax use this to add functions to the built in types like Array.reverse() or String.trim().

Here’s a simple example that adds a sheep function to all javascript string objects:

String.prototype.sheep = function()
{
return "baaah " + this;
}
var hello = "hello world";
alert(hello.sheep());

Complete example.

Why is this important?

The practical reason why this is important is sharing single a method between all objects uses less memory than having a separate copy for each object. This can be a big advantage when working on a complicated web application with lots of objects.

The javascript object prototype also enables you use some interesting coding patterns like inheritance and object cloning to more easily share implementation between similar objects in a similar way to how you would use classes to do this in a class based language.

Javascript null or default operator

Helen — Tue, 09 Dec 2008 20:39:51 +0000

A neat little trick I learnt from Ting is a way to check whether a value was null or undefined using the or operator (||).

It’s really simple. If valueThatMightBeEmpty has a value set, you get that value. If it is null you get the default. It’s just like the ?? operator in C#:

var value = valueThatMightBeEmpty || defaultValue;

A real example

A really handy place to do this is event handling code. It’s a classically annoying bit of web development where the event information will be stored in a global variable called event for IE and in the first parameter passed to the event handler (I usually call it e) in other browsers.

So you might write some code that looks like this to get an event object that you can use in all browsers:

if(!e)
e = event;

Instead you could just use the or operator (||) to check whether the variable was null and return a reference to the event object if it is:

e = e || event;

Complete example

Big (non-technical) Helen news

Helen — Sun, 30 Nov 2008 20:38:06 +0000

This is a tech blog but I just wanted to share a little bit of big Helen-life news with the friends of mine who read it. Joe, my boyfriend of four years, proposed to me on Friday night very romantically on the London eye and I said yes (of course!). I’ve been grinning like mad all weekend and never thought it was even possible to be so happy! :)

The funny part was after I changed my status to engaged on facebook I started seeing a whole lot of wedding relatd adverts (and diets). :)

Bleeding edge of web slides and samples

Helen — Sun, 30 Nov 2008 20:35:07 +0000

I did a presentation about the bleeding edge of web at the DDD7 uk community conference last weekend. Here’s the complete talk including slides, samples and a list of bullet points that I talked about including the urls of any website that I linked to during the talk.

Please feel free to use my talk

Do you have a local user group in your area that might be interested? I’ve licensed my presentation under creative commons so you’re welcome to take the slides and the code and to give the talk yourself. Or use it as a starting point for your own talk.

Licensed under creatives commons

Building objects with javascript by Helen Emerson is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at www.helephant.com.
Permissions beyond the scope of this license may be available at http://www.helephant.com.

Decommissioning pixel origami feed

Helen — Sun, 16 Nov 2008 20:33:21 +0000

I’m going to decommission the old pixel origami feed. Could anyone still using it please switch to http://feeds.feedburner.com/helephant instead?

I was hoping this would be seamless but I messed up switching the pixel origami feed over to the helephant feed so it’s now pointing to the real feed url instead. This should work fine (and I’m going to redirect it to the helephant feedburner feed when I hopefully switch my blog to wordpress in the near future) so don’t worry too much but if it suddenly stops working this is why.

Sorry about the hassle!

Changing firebug’s font size

Helen — Sun, 16 Nov 2008 20:31:36 +0000

One problem I’ve had a couple of times when using Firebug to show things during code demos is I haven’t been able to make the font big enough for people at the back to read it.

I found the solution at stack overflow:
1. Open firebug in new window
2. Go to the view->text size menu
3. Close the window and it should be the right size when you reopen it.

text size->increase text size”>

VBUG London javascript objects presentation

Helen — Wed, 12 Nov 2008 20:27:56 +0000

I just got back from doing a talk about javascript objects at London VBUG. Thanks to everyone who came! I really enjoyed doing the talk and all the great questions you guys asked.

Anyway I promised to put links up to all the relevant stuff from my talk. I’ve uploaded my slides and samples. I’m also writing up a set of articles about javascript objects.

Dust-me selector tool for finding unused CSS selectors

Helen — Tue, 21 Oct 2008 09:08:59 +0000

My find for today was a Firefox extension called Dust-Me Selectors from the SitePoint guys that scans a web site looking for unused selectors in the CSS.

It extracts the style references for the current page and then looks at the page to see where they are used. It can look at the current page or you can set it up to spider your entire site.

CSS3 box-sizing attribute

Helen — Mon, 20 Oct 2008 07:33:36 +0000

CSS3 is going to include a new attribute called box-sizing so we can choose whether the width set on an element will include borders and padding or whether borders and paddings will be added to the width.

The difference is basically the difference between the IE5 and W3C box models. The default will still be the W3C way we’re all used to where the padding and borders will be added to the width, it’ll just be possible to opt into the other way when it makes things easier.

How it works

Set the box-sizing style to content-box to get the traditional W3C box model. In this case the total width of the element will be the width set on the element plus the width of the borders and padding. If you had an element with a width of 30 pixels and a border of one pixel, the total width of the element would be 32 pixels:

#div1{ box-sizing: content-box;}

It can also be set to border-box to have borders and paddings included in the width. If you had an element with a width of 30 pixels and a border of one pixel the total width of the element would still be 30 pixels:

#div2{ box-sizing: border-box; }

Here’s how it would look in the browser. The top element has box-sizing set to content-box and the bottom has it set to border-box:

See code

Why’s this useful?

I’ve always found the way the browser works out dimensions (the CSS box model) by adding the borders to the width set on the box a little frustrating when working with percentage widths.

Imagine you’re creating a two column layout. The left column should be 30% and the right 70%:

.left{
float: left;
width: 30%;
background-color: pink;
border: 3px red dotted;
height: 150px;
}
.right{
float: left;
background-color: lightgreen;
width: 70%;
border: 3px green dotted;
height: 150px;
}

content-box
box-sizing

If you add a border to either box, the total with of the elements will be greater than 100% so the second box will be pushed onto the next line:

But if we switch the box-sizing mode to border-box, we can set a border and the box will still be exactly the width that we want:

When’s it coming?

When IE8 comes out this will be supported by all four of the big browsers.

Safari - supported with -webkit-box-sizing since Safari 3.

Opera - supported in the latest version of Opera (9.5)

Firefox - supported with the -moz-box-sizing since Firefox 1.1.

Internet Explorer - supported with -ms-box-sizing in the IE8 beta 1 and without the prefix in IE8 beta 2.

More information

The CSS3 box-sizing concept - an interesting write up about it from inside the W3C.
Quirks mode - nice pictures to explain the differences between the two model

Javascript closures

Helen — Fri, 17 Oct 2008 17:49:41 +0000

Javascript closures are a really powerful feature of the javascript language. Closures are created when a function that’s nested inside another function accesses a variable from its parent’s scope. This is really useful for passing state around your application when the inner function is called after the outer function has exited.

Javascript supports functions nested inside other functions

Nested functions are possible because the function operator that makes it possible to create anonymous functions anywhere that it’s possible to have any other type of statement. Even if you’ve never heard of closures before, you’ve probably done this without thinking about it too much when you set up an event handler:

function myFunction(){

var button = document.getElementById("Button1");
button.addEventListener("click", function()
{
alert("I am a function nested inside another function");
}, false);
}

Complete example

A closure is created when an inner function accesses variables from the outer function

In javascript an inner function can access variables from the outer function’s scope. When this happens a closure is created. The closure is just a link from the inner function to the outer function from the time when the outer function exited. It’s created to save the state of the variables from the outer function so they are still available when the inner function is run.

The best way to understand this is to look at an example. Take a look at this piece of code which is very similar to the last example:

function outerFunction(){
    var button = document.getElementById("Button1");
    var importantPieceOfState = "I love fish";
    // declare the inner event
    button.addEventListener("click", function()
    {
        alert(importantPieceOfState);
    }, false);
}

Complete example

When you run the button click handler code, the alert will say “I love fish” even though the importantPieceOfState variable is only declared in the outerFunction()’s scope.

Notice that importantPieceOfState isn’t declared anywhere inside the click event handler and that it isn’t a global variable. It is only declared as a local variable to the outerFunction() function. The variable is available because when we run outerFunction() the javascript engine notices that the click handler has a reference to one of the variables in outerFunction(). It creates a closure to save the current state of outerFunction() for when the click event is run. If the inner function didn’t access any of the outer function’s variables the closure would not be created.

All the variables from the outer function are available to the inner function. This includes the parameters. The only exception is any variables from the outer function that are overridden by variables from the inner function that have the same name.

A new closure is created each time the function runs

In the last example outerFunction() is only run once so only one closure is created. If we ran the outer function multiple times a new closure would be created each time.

Here’s another example where the outer function is called multiple times with different parameters:

function setClickColor(button, color){
    // declare the inner event
    button.addEventListener("click", function()
    {
        button.style.backgroundColor = color;
    }, false);
}

window.onload = function(){
    setClickColor(document.getElementById("Button1"), "red");
    setClickColor(document.getElementById("Button2"), "blue");
}

Complete example

Notice that the parameter has a different value for each inner function that is created. The color parameter is set to red for the red button click and blue for the blue button click. This happens because a new closure is created each time the function is run.

Closures are created when the outer function exits

The closure is actually created when the outer function exits, not when the inner function is created. This means the values of any variables will be saved as they are when the outer function exits.

This can be a bit confusing if you’re creating functions inside a loop. All of the functions you create will point to the same closure so the variable values will be the same for them all.

Imagine you had a list of buttons and you wanted to set up a click event for each. For some reason the order of the buttons is important so you want to access the button’s index in the array inside the loop:

window.onload = function(){
    var buttons = ["Button1", "Button2"];
    for(var x=0; x
Complete example
Looking at the code you might expect x to be zero for the first button and one for the second button but it isn’t.  It’s three for both buttons because after the second event handler has been set up, the x variable is incremented to three and the loop’s condition fails. Then the function exits and the value of three is stored in the closure that’s used by both button click events.
Closures reduce the need to pass around state
Closures reduce the need to pass state around the application. The inner function has access to the variables in the outer function so there is no need to store the information somewhere that the inner function can get it.
This is important when the inner function will be called after the outer function has exited. The most common example of this is when the inner function is being used to handle an event. In this case you get no control over the arguments that are passed to the function so using a closure to keep track of state can be very convenient.
For example imagine you’re using the setTimeout function to do a mouseover effect where the element changes color when you mouse in for a few seconds and then changes back to the original color. You need to pass the setTimeout callback function the original color of the element but the IE version of setTimeout() method doesn’t allow you to pass any parameters to the callback function.
Closures make passing information like this simple. We just need to store the original background color in a variable in the outer function and then the inner function can just use the variable to reset the background color:
var divs = document.getElementsByTagName("div");
for(var x=0; x
Complete example
Some things closures make possible
Closures can be used to achieve some pretty neat stuff in javascript. Here are a link to a few really useful javascript patterns that use closures (please leave a comment if you know another interesting one):

Module pattern - the most flexible way to do namespaces for javascript.
Private and protected members - Douglas Crockford’s private and protected members for javascript objects.
Curried javascript functions - a functional programming technique.

Potential problems
Closures are a really useful tool to have in your javascript coding arsenal but you have to know about the two potential pitfalls. The first is that it makes it easier to introduce javascript memory leaks into your code. The second is that it can use a lot of memory if the outer function is called very often or the data that is saved is very large.
Potential for memory leaks
Unfortunately some browsers (IE in particular) have problems disposing of DOM elements and javascript objects that have a circular reference between them. This can be a big problem because the affected objects will stay in memory until the browser is restarted, even if another page is loaded. This isn’t a problem for closures exclusively but closures can sometimes make the circular references hard to see.
To solve this you just need to break all the links from DOM to javascript when the page unloads and then the circular references are broken. This will mean unhooking any DOM events that have been set up during the page’s life and setting any attributes of the DOM elements that point to javascript objects to null. It’s really important to do this even if you’re not using closures because you’re really likely to run into memory leaks if you don’t.
Most javascript frameworks will automatically unhook all of the event handlers if you register the events using the framework’s methods. In the ASP.NET Ajax framework you need to make sure that you call $clearHandlers() on any html element to which you added a handler.
Javascript memory leaks are my least favourite type of webpage program to debug because it can be really hard to track down what’s leaking. However there are a few really great articles you can read to understand what happens so you can prevent your code ever leaking in the first place:

Javascript memory leaks - why memory leaks happen and how to break the circular references.
DHTML Leaks Like a Sieve - a good general explanation of the problem
QuirksBlog memory leak links - links to a heap of useful articles about memory leaks

Could potentially use a lot of memory
When a closure is created the execution context of the current function call is saved with a reference to all the variables in the function’s scope. This can use a lot of memory if a lot of frames get saved or if each execution context is very large.
Outer functions that get called a lot of time aren’t good candidates to be used for closures because each time the function is called a new closure will be saved. The inner function can be called as many times as you want. It’s only when the outer function gets called that a new closure gets created.
It could also be a problem if the amount of data inside the outer function are very large. If you had a ten thousand character string in the outer function it probably would not be a good candidate to be used for closures. Again this only affects the outer function. The inner function does not affect the amount of data to be saved.
In most cases using closures will be fine, but if you do find that your application is using more memory than you’d like closures are a possible cause of the problem.
More information
Closures are a bit of a tricky topic to get your head around if you’ve never seen them before but there are a few really great resources about them available to help.

Closures tutorial - John Resig (of JQuery fame) has written a helpful interactive tutorial for helping people understand how closures work.
Javascript closures for dummies is a fantastic reference that takes you through a heap of different code examples about closures and explains the most important concepts.
Javascript Closures is the complete reference on closures. It goes into very extensive technical detail. It’s not the easiest read but it explains a lot of useful things about how closures and javascript functions in general really work.

What’s next?
This article is part of a set of related posts about using javascript objects. This article is part of how javascript objects work.
Although constructor functions look a lot like classes, javascript does not have a class based object system like C# or Java. Instead it has a prototype based object system.