This is just a starting point, hopefully I’ll keep updating it as I actually try out the videos and find more places to get good content.

Programming

Clean coders has videos about writing maintainable code that are all less than an hour, fast moving, well edited and full of funny. You do have to pay for the videos, but they’re pretty cheap and have clear information about showing them to groups (around $1US/person). I find it impossible not to like Uncle Bob. It’s like being taught how to code well by your slightly embarrassing dad.

infoq has presentations about pretty much everything going on in mainstream development.

.NET

Tekpub have videos about a heap of different technologies, including quite a good selection on .NET. The videos tend to be under an hour and they get some pretty impressive experts (like Jon Skeet) to help present them. They’re kind of pricey ($18-$25) because you have to buy the videos as a series and they don’t have cheaper streaming prices for large groups, though they were willing to give us quite a generous discount.

I am a huge fan of the .NET rocks podcast but had never tried out their DNR TV videos. They have videos on just about everything, though they tend to be an introduction rather than going into a lot of depth like the tekpub ones do. They’re free (hurrah!).

There’s a series of nhibernate videos called summer of nhibernate. They’re free but over an hour each. I’ve watched the first one and it’s a pretty good introduction to nhibernate.

Dimecasts has 10 minute videos about almost anything you can think about in .NET. It seems like a nice way to start a discussion about something.

Channel 9 on the MSDN have a vast library of videos which are mostly about Microsoft technology. There are hundreds of videos about .NET.

Skills Matter is a London based company that runs a lot of interesting sessions about all sorts of different technologies (including lots of open source stuff). They have recorded quite a lot of them and put them on their site to watch for free.

Web dev

YUI theatre has lots of videos about using YUI and some generally interesting web development ones as well.

Nicole Sullivan has some recordings of her conference talks. She talks about how to write maintainable CSS and we have found that using her ideas have made our CSS way better.

Videos from the MIX conference on some pretty neat new web technology. The 2011 lot have a lot of stuff about HTML5. They tend to be pretty good quality presentations since they’re for a conference.

Technology and inspiration

I like the TED videos as an excuse to dream. ASP.NET developers probably don’t need to know about bio-fuels, but it’s nice to feel inspired. :)

Browser support for the tag itself is pretty decent, but you’ll need to create a mp3 and ogg version of your audio if you want it to play in all browsers. You can also provide a fallback for older browsers.

The built-in browser UI is pretty consistent and looks decent enough, but if you need something special it’s very easy to use javascript to control the <audio> element.

The audio tag

A simple <audio> tag (that doesn’t worry about cross browser compatibility) looks like this:

src – the url of the audio to play. In reality, if you want your audio to work in as many browsers as possible, you will need to set the media files in the <source> tags to provide both .mpg and .ogg versions of the content.

controls – if this attribute is present (even if it is set to false), the browser will render an element to control your audio. If you set this to false, no element will be rendered and you will need to use javascript to control your video.

Here are the default controls in Chrome:

preload (none, metadata, auto) – whether the browser should start downloading the audio as soon as the page loads. If the audio is the whole point of the page it’s on, it might make sense to do it. If not, you can tell the browser to save the bandwidth. Of course having preload turned on will affect your bandwidth costs as much as it will affect your users.

Setting preload to none tells the browser not to preload at all. Metadata suggest that the browser just download enough of the file to find out things like dimensions, running length and size. Auto lets the browser know that it can do whatever it thinks will be best for the user, which might include preloading the whole file.

Sadly if you use this right now, setting preload=”none” causes issues in IE9. It will add the audio element to the page, but won’t display any controls for it.

For more information checked out the Mozilla or MSDN references. There are a heap of extra properties that are useful for interacting with audio element through javascript.

Different browsers need different formats

While support for the tag itself is pretty solid across browsers, there (predictably) isn’t one audio format that all browsers support:

So to make an <audio> element that will work in all browsers, you’ll need to provide your file in at least two formats. I’ve found .ogg and .mp3 work pretty well. You can use the <sources> tag to provide a link to the audio file in both formats. The browsers will just look through all the sources provided and choose the one it thinks is best:

This might be a good reason to keep using flash for developers who are less concerned about supporting open standards and don’t need to support mobile browsers. Encoding the audio in two formats definitely adds a little overhead to my podcast workflow.

Providing a fall back for older browsers

Older browsers don’t understand the <audio> tag so you can provide a fallback just by adding extra HTML inside the <audio> tag. Browsers that support <audio> will just ignore the fallback content, while browsers that don’t support <audio> will ignore the audio tag.

One option is to use a Flash player as a fallback. Since Flash will play on pretty much any browsers except the iPhone, the only advantage of using the <audio> tag as with a Flash player fallback (apart from the warm glow of supporting open standards) is your audio will also play in iPhone Safari.

Audio controls in the different browsers

If you decide to use the built in browser controls, the UI between browsers is pretty similar and fine for just including a simple audio file in your site.

Firefox:

Chrome:

Safari:

Internet explorer:

iPhone Safari:

To use the built in browser controls, just add the controls attribute to the <audio> tag:

Building custom controls using javascript

If you don’t fancy the built in browser controls, it’s easy enough to control the audio tag using javascript:

Complete example

For more advanced audio manipulation, check out the experimental Audio data API.

Browser support

Once you get the audio formats right, desktop browsers have pretty good support for the audio tag. Even IE 9+ supports it!

Mobile browser have pretty good support too:

It’s the same sort of setup as desert island discs: I find someone interesting to interview and they tell me about three books that have influenced them as a developer.

I’ve just posted my first podcast where I interview a very nice developer called Dan Wagner-Hall who agreed to be my first victim.

(book picture taken by Ananta Bhadra Lamichhane)

TJG runs seven job boards. Total Jobs is the most popular one and the other five are all industry boards like CW Jobs for IT. Pretty much all development is for either the websites or the web based tools that support them.

For more detailed information about the job and the exact skills we’re after, check out the job spec.

Why would you want to work with us?

Our department is serious about continuous improvement so we’re constantly looking for new ways to do development better. In the past six months the development team have been going on TDD training and teams are starting to do it as part of their every day work. Some of the teams have been trying MVP patterns on areas of the code that already use web forms. New areas of the code have been using the MVC framework. We keep improving the way we use clientside technologies, particularly CSS and javascript. Lots of teams choose to pair program. Last year there was a big project to automate more of our release process.

Each team gets flexibility to try new things. Our team has tried experimenting with different sprint lengths, kanban style work in progress limits, tracking stories through TFS, lego people on our scrum board and tracking technical debt on the ceiling. Other teams are automating their acceptance testing with Selenium and trying TDD. Each team is encouraged to figure out what works for them.

We’re encouraged to share ideas around the department. We have our own internal user group where a couple of times a month someone talks about something they’re passionate about. Today’s session was about how one guy hooked up RFID readers to the scrum board to track story status and to automatically kick off builds. The really cool thing is the department supports it by giving us a lunch budget. We also do community of practice sessions where we all bring some code and talk about something neat we’ve been doing. Some of the groups have been reading books like Working Effectively with Legacy Code and Clean Code.

The office has a really nice atmosphere. The people are friendly. We have a casual dress code. People put effort into making work a fun place to be. Last week we had a build it in a day Friday where the whole team (not just developers) had a day to work on anything company related that interested them. We have team outings a couple of times a year. The development team are going bowling on Friday. People go out for team lunches and Friday drinks. People bring cakes and donuts in to celebrate things a couple of times a week. Our scrum master is a great cook and brought in homemade lemon drizzle cake today.

People notice when you do a good job and its recognised. Every other week there’s a presentation where the management tell everyone about something great that someone has done. Last year there were toys and lego for teams that did something special. You can see Star Wars lego all over the office now. Before that we competed for a silver cup full of sweets. They also awarded a scrum team of the year award where one of the teams got a prize to spend on a meal out together.

TotalJobs is part of a bigger company called Reed Elsevier so the benefits are pretty good. My absolute favourite is that we get 29 days holiday a year with the option to buy or sell three during the year. We also get two charity days. Last year our team spent the day doing gardening for some lovely elderly people in Sutton. The year before we did gardening and painting for a kids playground.

Joel test

Do you use source control? – TFS
Can you make a build in one step? – Yes
Do you make daily builds? – Yes, we build when we check in. Working towards continuous integration.
Do you have a bug database? – Our scrum team track bugs on the board on red cards.
Do you fix bugs before writing new code? – yes
Do you have an up-to-date schedule? – yes
Do you have a spec? – We write user stories with acceptance criteria.
Do programmers have quiet working conditions? – No we work open plan and everyone sits with the people they’re working on
Do you use the best tools money can buy? – We use VS2010 (mostly), Resharper, nUnit, computers with dual monitors, MSDN licenses
Do you have testers? – yup. Vinny is a bug finding machine.
Do new candidates write code during their interview? – depends who interviews you
Do you do hallway usability testing? – we do weekly demos to get feedback from the people we build the software for. We have designers and usability people who come up with the best way to implement user interfaces.

Your job isn’t as great as this?

Interested? Then email me your CV and I’ll pass it on or apply through the website.

Feel free to use these slides if you’d like to give a similar presentation. Feel free to give it as is, as a starting point or ideas for your own presentation. I’d love it if you could link back to me, but this is all about getting people talking about writing maintainable CSS rather than anything else.

Am planning to write up most the stuff I thought about for the presentation, so hopefully more will come soon. :)

(Cement lion from Flickr creative commons)

Once we’d come up with the idea, I had to do it. So I shopped around on the internet for all the bits I needed, came into work with a creepy bag of Lego heads and we swapped our Simpsons avatars with new ones made out of lego.

Here are the avatars we came up with:

What you need to make your own scrum board Lego peeps

• You can get a big bag of Lego magnets from Amazon.com or Amazon.co.uk for a couple of pounds.
• You can buy lego heads, bodies, hair and accessories on bricklink. You don’t have to buy whole people, you can just buy the bits that you think your team might like. I got enough for my team for about £30. You can find female lego people if you hunt around.
• A team of developers who aren’t too grown up to play Lego.

If you’re familiar with languages like C# or Java, chances are you’ve never really thought too much about this because its value always references the object that the method belongs to (the rufus object in the previous example). This is usually the case in javascript too but there are some situations where it won’t refer back to the object that you’re expecting.

Functions are first class objects

The difference between way the this operator works in C# and javascript is a side effect of functions being first class objects in javascript. Functions are just another type of variable that can be passed around the application.

The methods in a javascript object are only methods because you chose to store a function inside one of the object’s properties. There is nothing in the language that always binds the method to the object. If you wanted to, you could use the same function in a number of different objects:

Complete example

Notice that the context of the sayHello() function (the thing that this references) is different depending on which object invoked it. In this example the two different objects were pretty much the same but the sayHello() function could be used by completely different objects as long as they provide the right information.

This design decouples the function from the context that uses it. You can plug any context into the function and it will still work. This is one of the reasons that having functions as first class objects is such a powerful feature.

Default context

Every time you call a function it has a context even if it is not explicitly provided. If no context is explicitly provided when the function is called, the default context will be used instead. In the browser the default context is the window object. This means that if you call a function without invoking it through an object, this will be set to the window.

To see this in action lets try calling sayHello() without invoking it from an object:

Complete example

Javascript is happy to run the function without calling it through an object. It just sets the context to the default context, the window object. The window object doesn’t have a name property so instead of alerting “someone says hello”, instead it alerts the error message about the object not having a name property.

The way I imagine it is calling sayHello() is really calling window.sayHello(). You just don’t need to explicitly use the window object to invoke it because the window object is the default context. The same thing happens if you set a variable without declaring it first using the var statement. Instead of creating a new variable that’s only available in the current scope, it actually creates a new property on the window object:

Complete example

Check out this article if you want to find out more about what happens when a Javascript function is called. It’s a really interesting write up that goes into lots of detail.

Objects, context and event handlers

In the previous examples, we have explicitly called the sayHello() method ourselves. This doesn’t happen for functions that are used for event handlers. We wire them up and then they are invoked automatically when the event occurs.

This can be a problem for functions that actually are methods of objects. The logic that invokes the event handler doesn’t know anything about the object the method belongs to so it can’t be invoked in the right context.

Instead the context of the method is set to the element that caused the event. If it was a button click event, it will be set to the HTML button element that was clicked. It it is an onload event, it will be set to the element that was loaded. The exception to this rule is IE where the context will always be set to the default window context.

Here’s an example where the hello function of a rufus object is used for the onclick event of our button:

Complete example

If you’d never tried this before, you’d probably expect the this operator to still be set to the rufus object when the button is clicked so the output would be “Rufus says miaow”. Instead the this operator is set to the button that triggered the event. The button’s name property is set to “button” so the output is “button says miaow” (which is just silly, buttons don’t miaow).

Changing the context using Function.apply() and Function.call()

In cases like the event handler problem, you might want to invoke a method in an explicit context. Javascript functions support two methods that you can use to do this called Function.apply and Function.call.

Both methods are pretty much the same. You can use them both to invoke a method, supply the context and a list of parameters. The only difference between the two are the way the parameters are passed in. Function.apply() accepts the parameters for the function as an array while Function.call() accepts them as individual parameters:

Complete example

Using Function.call() to solve the event handler problem

Remember the problem with using a method from an object as an event handler? When the event is fired, the context of the event handler is set to the HTML element that triggered the event. Then when you access the this operator you get a reference to the HTML element rather than the object that you might have expected.

It’s possible to use Function.call() (or Function.apply() if you want) to invoke the event handler in the right context. The plan: create a custom function that wires up the event handler and knows what the context of the function should be when the event is run:

Complete example

This works because javascript has a feature called anonymous functions that you can use to create a new function at runtime. The addEvent function uses this to create a new wrapper function that calls the event handler using Function.call(). The wrapper function is passed to addEventListener() instead of the event handler that was passed in as a parameter.

The wrapper function can access the context object when the event fires because of another javascript language feature called closures. When you create a function inside another function, closures mean that the inner function automatically has access to the local variables of the outer function (addEvent) when the inner function (wrapper) is called. This works even if the inner function is called after the outer function has finished running.

This is how the wrapper function can get hold of addEvent’s context and handler parameters when the anonymous function is run.

Mostly if you’re using a javascript framework, you don’t need to worry too much about this. The framework will look after it for you, usually in a way similar to this. For example, if you’re an ASP.NET ajax programmer, this is exactly what happens when you use Function.createDelegate() to register an event handler inside an component.

What’s next?

Sometimes you need to find out things about an object’s capabilities. The next article talks about finding out what type of object you have and what it can do.

This article is part of a set of related posts about How javascript objects work.

One of the (many) points of controversy in our team when we last updated the HTML standards doc was the best way to provide enough html structure in our document to accommodate what our designers create. We want small, slick and semantic markup but have to add extra structural divs so we have enough places to stick the background images we use to decorate the boxes.

Firefox 3.6 gives me a little hope, even if it is distant hope, that one day the extra divs will no longer be needed!

How multiple background images are declared

Just put a list of background declarations instead of a single one when you use the background property:

Complete example

You don’t have to use the background property. You can also list out each of the background attributes separately:

The browser applies the images top to bottom, so the first one you declare will overlap any of the others. It supports all the background attributes you can usually use.

Here’s how the example looks in Firefox 3.6 (sorry for my lack of graphic design skills!):

Backwards compatibility

Multiple background images degrade quite nicely in older browsers. You can supply a single background image before you declare the multiple background images and the browsers with support will show the multiple background images while the other browsers will just show the single one:

Here’s how my example looks in Firefox 3.5:

I tested the same example in IE8 and Opera 10.10 and it looked the same as in Firefox.

Why is this so great?

The biggest reason is it goes further in separate presentation from markup. We’re a little closer to being able to mark up a document according to it’s meaning rather than how we want to present it. That’s a really good things because it means we can change the presentation without having to change the document.

I am of the opinion that fewer tags in a HTML document is a good thing. It’s fewer tags to read and understand when you have to change the document. It’s fewer tags to debug when something goes wrong with the page. It is also fewer tags to send down to the client on each request.

I think it’s going to empower designers to be a bit more daring with their designs. They won’t have to worry about dirty looks from whoever does the HTML markup (or a sigh from themselves) when they design something with rounded corners and drop shadows. I look at designers like that when I see a mockup with rounded corners! They shouldn’t have to feel bad about it! Making great looking designs is just their job.

It’ll also make it much easier to make design elements that are stretchy. You can change the dimensions of stretchy elements easily just by changing the width and height properties. You can reuse the same styles in different containers without having to have a whole different set of styles and images (or a heap of structural divs).

Who supports it?

But Helen it’s going to be years before we can use this stuff!

It’s true we don’t know how long it will take for the old versions of IE to fade into market share obscurity. It might be three or four more years until this has enough browser support to be used widely across the web.

That’s ok, it’s how the web works. Way back in 2000 it seemed impossible that there could be a document object model that worked across all the browsers but sooner or later the stars all aligned to unleash the ajax revolution. I am excited because it’s a step in the right direction for a better web for web developers. I am happy with that for now.

In IE6

In IE7

Simple test case

Here’s a simple example of the HTML:

Here’s a simple example of the CSS:

Complete example

Workaround

If you can’t use an even number of pixels for the width of the parent box, just to use the underscore IE6 hack to provide an adjusted right value just for IE6 that all the other browsers will ignore:

Which algorithm to use?

The minification tool supports JSMin and Packer.

JSMin just strips out the parts of the file that the browser won’t need like extra whitespace and comments. You can run JSMin over CSS and javascript.

Packer does the same sort of minification as JSMin but also has options to reduce variable names to single characters and to base-62 encode everything. Packer tends to give very small file sizes when you use the base-62 option but there’s a performance hit in the browser when it gets unpacked. Packer will only run on javascript.

One thing is keep in mind is whether or not you’re using gzip compression. JSMin with gzip compression tends to give files that are almost the same as Packer but without the clientside performance hit of unpacking them. Gzip tends not to make as much of a difference to files minified with the base-62 encoding option.

A good way to find out which will be best is to run your particular script through the compressor comparison tool.

Using the tool

Packer.NET comes as a single dll so you don’t need to install any command line programs to use it. I put the assembly into source control on our system so anyone who wanted to run the build script wouldn’t need to install it manually.

Here’s an example target that uses JSMin to minify all CSS files and all javascript files (except library files that are already minified). This example simply replaces the existing files:

There’s documentation with more examples and details on the different options that the task supports.

What about YUI compressor?

YUI compressor is another good option for minifying javascript and CSS. There’s also an example MSBuild task for that.

The idea of a reset stylesheet is to strip the default style out of a webpage before you start to apply your design. This gives a predictable base for you to start with and removes browser inconsistencies with the default styles. There are a number of different reset stylesheet options. The most popular ones are from Eric Myer and YUI.

Sounds like a great idea in theory. Slight browser inconsistencies (particularly with margins and padding) are a pain to remember and can really mess up a design if you don’t test in multiple browsers.

Why set the styles and then set them again?

The big problem I have with it is how redundant it can be. The way I’ve seen reset stylesheets implemented is you include a reset stylesheet to reset everything to empty (including things like removing bold text from the <strong> tag) and then you create another stylesheet where you set all the styles that you want in the page.

It feels pretty redundant to have to set styles like bold text on the <strong> tag or numbered bullets on the ordered list. Most of the defaults make a lot of sense and most of them are pretty consistent between browsers.

It also feels kind of redundant to have the browser have to download and apply the reset styles and then download and apply the real styles. I haven’t actually ever seen a reset hurt the rendering time of a webpage but I have worked on a few sites where the number of requests that the browser was making became a problem and having the reset stylesheet as a separate request didn’t help.

Why make me learn what the base styles are again?

The other thing I don’t like about it is that the browser no longer acts the way I’d expect. I’ve got years of experience with how browsers render things and usually can picture in my head what a style should do to a page. Adding a reset stylesheet means that it’s not as intuitive any more.

A better solution?

I think a better solution would be using a stylesheet like YUI base that makes browser defaults the same across different browsers as a starting point for your own stylesheet and then adding your own styles for the particular site. I don’t think I’d even bother setting a default style and then overriding, I think I’d prefer to just set the style once.

I think using something like the YUI base as a starting point is a great idea, but I think if I was going down this path I’d want to customize it as a I worked to make my own version to use on other sites.

A tool I don’t like, but something worth thinking about

Eric Myer’s response to people questioning whether reset stylesheets were a good idea or not was pretty much, use them if you find them useful and or don’t otherwise. I just wanted to put my hand up as not personally liking them (since they seem to be every at the moment) in the hope of making other people question them too.

Constructor functions have a property called prototype. Adding properties and methods to the prototype property will automatically add the method or property to all objects created by the constructor function.

Prototype chaining is an extension of this idea. The prototype property is just a regular javascript object so it’s possible to create a function’s prototype using another constructor function. When you do this, all of the properties and methods from the constructor function’s prototype are automatically added to new the prototype object. This makes it easy to create a constructor function that builds objects that are an extended version of an existing one.

For a simple example, imagine that you have a Pet constructor to make pet objects. Now you want to make Cat that is pretty much like a Pet but has a few differences.

Here’s the Pet constructor function from the prototype example:

We can give the cat all the properties of the Pet by setting it’s prototype to be a new pet object:

This is not really any different to creating the prototype using object literal syntax. The only big difference is that instead of manually adding the methods to the object literal, the Pet’s prototype does most that work for us.

We can still extend the Cat objects by adding extra methods to the prototype. Any methods added to the cat prototype will only be available to objects created by the Cat constructor. Objects created by the Pet constructor will still only have the methods added directly to Pet:

We can override any methods that came from the Pet constructor just by creating a new version of the function and assigning it to the Cat prototype. This will give cats different behaviour to the other pets:

Complete example

Function resolution

The most important thing to understand when using prototype chaining is how the method resolution works. Method resolution is what happens when you call a method or property on an object. It’s how javascript figures out what method or property should really be called.

First javascript checks the object itself for the method. This is important because it means you can override any method from the prototype on any object. If we call rufus.avoidPhoto() in the following example, javascript will call the avoidPhoto() function that has been assigned directly to rufus:

If the object doesn’t have the method set directly on it, javascript then looks for a Constructor function that created the object. Javascript checks the constructor’s prototype property for the method. If we call rufus.catNap(), javascript will find the method on Cat.prototype and use it:

If the constructor function’s prototype doesn’t have the method defined, javascript looks at what constructor function was used to create the prototype property and does the same thing again. It will keep walking the prototype chain until it finds a function that matches. If rufus.eat() is called in the following example, javascript will walk up the prototype chain until it gets to the Pet constructor’s prototype object and then use Pet’s eat() method:

All objects ultimately have the Object constructor at the end of their prototype chain. This means any methods or properties added to the Object property are automatically available to all objects. Javascript libraries often use this to extend the javascript API.

In the previous example, if we called rufus.toString(), javascript would check the rufus object, then the Cat object, then the Pet object. The Pet object’s prototype was created with the Object constructor (using the object literal shortcut) so javascript would then find the toString() method on the Object’s prototype.

Walking the prototype chain

In theory it’s possible to walk the prototype chain using an object’s constructor property. Each object has a property called constructor that holds a reference to the constructor method that created it. The constructor’s prototype property is just a regular object, so it also has a constructor property that points to the next constructor function in the chain:

Complete example

In theory the first alert statement will show the Cat constructor and the second will show the Pet constructor. In practise they both show the Pet constructor. This makes sense when you think about the prototype chaining behaviour. When you create the Cat’s prototype object, it’s constructor property will get set to Pet because it was created by the Pet constructor. When you look at the constructor property of the rufus object, rufus doesn’t have a value set explicitly on it so it looks for it on the Cat’s prototype object where it is set to Pet.

To fix the problem, you just need to set the constructor property explicitly on the object itself when you create it:

Complete example

In mozilla based browsers each object exposes another property called __proto__ that gives you access to the way that the browser tracks the prototype chaining. The __proto__ property is a reference to the prototype property of an object’s constructor from the object itself:

Complete example

This property is not supported across all browsers, so it’s not very useful when writing code but it can be very useful when debugging because it lets you take a peak at what the browser is actually doing.

If you come from a class based language you might be tempted to use the prototype chain to figure out what type an object is. The properties and methods of a javascript object can be modified after the object is created, so knowing about the constructor is no guarantee that the object will conform to a particular interface. You may choose to make your code work this way by convention but it’s important to remember that it is not enforced by the language itself.

I think it’s also worth considering that this is not really the javascript way of doing things. In javascript you don’t get static types, instead you use duck typing to ask an object what it can do. It’s important to use javascript’s strengths as a dynamic language with features like first class functions, closures and anonymous functions to write concise and modular code rather than trying to make it act like a different type of language.

What’s next?

In languages like C# and Java you never really need to give a thought to the this operator. In javascript things are a little more complicated due to functions being first class objects. The next article talks about javascript method context.

This article is part of a set of related posts about How javascript objects work.

Creating the SVG background

To try it out I decided to make me some tabs with rounded corners because they’re always a pain to do without creating heaps of extra markup and they never seem to go out of fashion.

SVG images are just text so you can create them in any text editor. There are also heaps of tools to that create SVG images. I thought Inkscape looked interesting.

My image is very simple, just two rectangles. One rectangle with rounded corners to make the top of the tab and one without to make the bottom:

I gave it a glassy looking gradient (colors of which I pinched from the buttons in Opera):

Complete example

Using it as a CSS background

Using an SVG image as a CSS background isn’t any different to using a png or jpg. The only difference is you might want to use the new CSS3 background-sizing css property to make it scale across the whole element:

Complete example

Here’s how it looks in Safari and Opera:

What’s neat about using SVG

It’s really neat being able to use a vector image in a webpage. It’s easy to make an image that looks great when you zoom in and can expand into a container of any width or height.

It’s easy to change the styling of the images because it’s all done through CSS. The SVG styling can live in the same CSS file as the rest of your webpage’s style. Different SVG images can share the same CSS file.

The SVG files are just text so you can generate them dynamically with a server side language.

It also means that the file tends to be pretty small. A bitmap image gets larger as the image gets bigger. A vector image like SVG only gets larger as it gets more complicated. You don’t get a lot of pixels for 200kb but you get a lot of SVG instructions. The file that I created was around 2kb.

It’s can be a nice solution for rounded corners and gradients (for things that are a bit too complicated for the CSS3 border-radius property). It doesn’t require multiple images, so you don’t need to worry about cutting the images up or the browser having to make a heap of requests.

Limitations

I was kind of hoping that I’d be able to put script in my SVG file so I could have some logic run when the image loaded. This works for SVG images included using the object tag but not for ones that are used as background images.

Browser support

In mid-2009 this technology is still pretty experimental.

IE – no SVG support without using a plugin.

Firefox – supports SVG images in the object tag, it doesn’t support using it in CSS yet.

Safari/Chrome – Safari 4.02 and Chrome 2.0 both support using SVG as CSS background images but I found the support a bit flaky. For example I had trouble when my SVG images had an external stylesheet or had the width and height of the SVG image set in percentages rather than absolute pixels. In both these cases the image just didn’t render as a background image but worked fine when included in the page through an object tag.

Opera – has supported SVG as CSS background images since 2007 and the version I have installed (9.63) didn’t have any problems with my simple example.

Inline-block is a halfway point between setting an element’s display to inline or to block. It keeps the element in the inline flow of the document like display:inline does, but you can manipulate the element’s box attributes (width, height and vertical margins) like you can with display:block.

Here’s a simple example that shows the difference between an element with it’s display set to inline and one set to inline-block:

The green inline span ignores the height and vertical margins set on it. The yellow inline-block span obeys them which affects the size of the box and the line height but doesn’t stop the span being in the inline flow of the document:

So why is this a big deal?

The biggest reason this is exciting is it means you can now do some simple page layout without needing to use floats or absolute positioning.

Use inline-block to line things up without using floats

Using inline-block we can line items up next to each other without using floats. My favourite example of this is the astoundingly frustrating task of creating a tabular form. Imagine you have a stupidly simple form where you have one label next to one input item (here’s another approach for more realistic forms):

To make the form elements line up you just need to set a width on the label. No floats are needed so you don’t need to worry about clearing or overflow:auto or any of the issues that make floats a bit of a pain to use:

Complete example

Align elements using text-align and vertical-align

Elements using inline-block can be horizontally and vertically aligned using the text-align and vertical-align attributes.

This is a big advantage of using inline-block instead of floats. With floats you can only really vertically align a box to the top of the other boxes it is next to. With inline-block, you can use any of the vertical align attributes:

Complete example

There’s a really nice example of using this to create a grid of images.

A small gotcha – spaces between the elements

If you’re used to the way block elements line up next to each other, there’s one thing about inline-block elements that might surprise you. Inline-block elements are still part of the inline flow of the document so if there is a space between the items, there will be a space between the boxes.

So markup like this:

Would produce elements that look like this:

There’s a kind of nasty hack to get around this. You can set the parent container’s font-size to 0 and then reset it to whatever you need for the child elements. I think if you need to do that, you should probably just use block elements and floats.

Who supports it

Now that Firefox 3 supports inline-block, it has pretty good browser support.

IE – it’s supported completely in IE8. IE7 only support inline-block on elements that are usually inline (like spans and anchor tags). IE6′s implementation is pretty flaky.

Firefox – it’s supported in Firefox 3 and above.

Webkit – it’s supported in Safari 3 and above. It’s supported in all versions of Chrome.

Opera – it’s supported in Opera9 and above (I’m not sure about earlier versions).

Check out the quirks mode compatibility charts for more information. There’s also a great article about gotchas getting it working across browsers.

Workarounds for IE6 and IE7

In IE6 and IE7 you can only apply inline-block to inline elements. You can’t apply it to block elements.

Fortunately this is pretty easy to work around because in IE6 and IE7 the display:inline actually acts like inline-block. It supports applying attributes like width and height on both inline and block elements, not just block elements like in other browsers.

I wouldn’t really recommend using inline-block at all in IE6 because it seems generally flaky. The inline-block elements don’t seem to sit in the right place in the line. Here’s how my earlier example looks in IE6:

Workarounds for Firefox 2

There are a few similar display values that might be useful if you need to support earlier versions of Firefox, but none of them do exactly what inline-block does.

• -moz-inline-block – this seems to be an experiemental version of inline-block. It’s now obsolete. I always found it to be buggy.
• -moz-inline-box – doesn’t wrap to a second line.
• -moz-inline-stack – this is supposed to be used for XUL rather than pages. It doesn’t have the wrapping problem that -moz-inline-box has but has other issues of its own.

Here’s a little code sample for the WMI way:

Here’s a code sample for the DirectoryEntry way:

There are some more great examples of how to do these types of things on stack overflow.

But web developers in love are still web developers. In between trying on wedding clothes and freaking out about becoming grown ups, the funny thing we noticed was we started applying some of the tools that we found useful in our work to the logistics of planning our wedding. This is the story of how Basecamp, Google docs, Google local search, delicious, Flickr and Facebook and twitter helped us organise everything, share the experience with the people who couldn’t be there and keep us sane.

Basecamp to project manage the wedding

After spending the last six months thinking of almost nothing else, I think a wedding is some sort of a relationship test before you commit to each other for eternity. It’s stressful! Everyone has a different idea of how the wedding should be, there’s a heap of things to do by a certain date and things rarely go as planned. It’s spookily like a software project.

When we started talking about what we needed to organise, I’d rattle off a big list of things, and Joe would start to look freaked out. Then he (being a software developer, too) got the brilliant idea of using Basecamp as a project management tool to keep track of everything that we needed to do! Suddenly everything we needed to do was in one place and we didn’t need to freak out about forgetting things. We could see what was done and what we had to do.

It also gave us a sense of progress as we worked through the list. Being the big nerd that I am, I got a real sense of accomplishment every time I could log on to Basecamp and tick another item off the list (much like moving an item on the board in scrum). After a while it did start to feel like I was having a wedding to tick things off the list rather than the other way around.

We also originally gave our parents accounts so they could feel part of the planning process. The great thing is it gave them a place to throw around ideas, which were recorded against the relevant To Do items. The problem was that getting more people involved made it harder to keep things as simple as we wanted them. In practise, we found they only logged in for the first month or two and then forgot about it. :)

Google docs to keep track of people, presents and budgets

We used Google docs to create some shared spreadsheets to keep track of who was coming, who we needed to send thank you letters to and how much we had spent.

The budget spreadsheet was particularly good at reminding us how much of our housing deposit we had spent. We used colour coding to keep track of who we’d paid and who we hadn’t and always had a good idea of what bills were coming up. The fact the spreadsheets were online and shared made it really easy to keep them up to date. The support for simple formulas made it easy to keep running totals of guests and expenses.

We also learnt a lesson from the engagement party about thankyou cards. On the way home the presents and cards got all mixed up so we ended up sending a thankyou note to someone for a clock they’d never heard of (oops!). So after our wedding while we were waiting for the taxi to come take us to the airport, we just fired up Google docs and started going through our presents logging what everyone gave us so this time we can give everyone thankyou notes for things they actually gave us.

Google local search to find hairdressers, florists and makeup artists

I’ve only lived in London for five years and don’t really know anyone else in the area who has gotten married so I found Google’s local search a real help for finding local suppliers. The best thing about it is definitely the map feature, which let me browse for people who were close to where we live or easy to get to by car, without having to confine the search to a really specific area.

Between Google local search and yell.com I was able to get a really good idea of what my options were and find a photographer, a makeup artist, a florist and every bridal shop in a 10 mile radius. The people we found were amazingly good too! Their websites helped us narrow which ones had nice looking work and which ones were in our price range. We then met up with the ones we liked and booked them up for the day.

Delicious to remember my research

Once I’d gone to the trouble of tracking down every florist in North London, delicious gave me a good place to catalogue them so I wouldn’t need to do it again later.

The tagging is a great feature because it made it easy to separate wedding from webdev (important for both work and home life). I also liked the privacy feature so I could save a list of wedding dresses without my technical friends knowing that I had gone wedding mad. :)

Facebook and Flickr to share the special moments

The hardest thing about an international wedding is the people who couldn’t be there. I used my iPhone and Flickr to document every step so even if my Mum couldn’t be there when I was looking for the dress, I could still get her (and my virtual bridemaids’) feedback before making the important decisions.

The privacy option and guest pass were fantastic because I could create a set that even people who didn’t have a flickr account could see while making sure Joe was the only person who I had contact with who hadn’t seen my dress.

After the wedding we put the best of the photos up on both Flickr and Facebook. Again we used the Flickr guest pass to share the day with people who were not social-networked and Facebook to share with those who were. Having tools to share our wedding with friends and family in Australia and America was truly magic. It didn’t change the fact that I missed them on the day but it made it bearable that they weren’t and meant they could still be a little part of it even halfway across the world.

Wedding tweets – to be web 2.0 trendy

Just kidding! :D (Nowhere to put a phone in the dress anyway) ;)

The wedding

We got married! We had a really great day. It went amazingly smoothly, but I think that was as much luck as planning. We didn’t end up insane or up to our ears in debt. Wedding success!

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.

.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:

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

Complete example

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:

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:

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

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.

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:

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

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

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:

<form action="Search.aspx" method="get">
    <input name="keywords" type="text" />
    <input type="submit" value="Search" />
</form>

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. :)

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:

1. Right flick on a resx file
2. Choose open with
3. 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.

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:

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:

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

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:

Here’s the viewstate after:

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. ]]> http://helephant.com/2009/02/01/reducing-viewstate-on-custom-controls/feed/ 0 http://helephant.com/2009/02/01/reducing-viewstate-on-custom-controls/ http://feedproxy.google.com/~r/helephant/~3/4EJw-_bRJSA/ http://helephant.com/2009/01/18/goodbye-2008-and-hello-2009/#comments Sun, 18 Jan 2009 16:48:51 +0000 Helen Emerson http://helephant.net/?p=1017 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. :)

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:

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:

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:

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:

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:

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.

What’s next?

Prototype chaining is used to build new types of objects based on existing ones. It has a very similar job to inheritance in a class based language.

This article is part of a set of related posts about How javascript objects work.