Html Contracts – How semantic html can help your cross functional team

One of the pain points we see on web projects is the divide between client side and back end development. This pain might show itself in a number of ways:

  • Small changes in the HTML cause lots of tests to fail
  • Small changes to visual layout require large changes to the HTML which then causes the above
  • Developers say the work is done but it can’t be signed off as it looks terrible or doesn’t work in certain browsers
  • CSS or QAs want developer to add ID attributes to lots of elements so they can target them more easily

Now ideally all your developers should be poly skilled and understand javascript / CSS / HTML just as well as they understand java / C# / ruby but often the reality is not quite so rosy.
So if we are working in a world where we don’t have the ideal but still need to get the job done what can we do to reduce the pain?

Well the technique I have used on a number of teams is to come up with a “HTML contract”. An example might be as follows:

  • Everyone must make the HTML as semantic as possible
  • IDs are deprecated in favor of class attributes. Just use more specific CSS selectors to target elements
  • Developers will liberally add class attributes with semantic names even if they don’t need them immediately (QAs and CSS will use them even if you don’t)
  • CSS / Designers can add class attributes if needed but can not remove class attributes without pairing with a dev/QA.
  • Changing the HTML to support visual display (I’m talking about document order, float and clear) is severely frowned upon. If you have to do it consider doing it with javascript instead.
  • QAs are to use hand written XPath expressions in tests that match the domain and make extensive use of contains(@class, ‘someClassName’) and descendant:: rather than IDs or specifying HTML tags

Some more general tips that I find help:

  • Converting tables to divs is really no better apart from download size. Use divs to group things or as the root element for a control, use lists for lists of things, tables for tabular data etc.
  • Hacking HTML, CSS, Javascript just because you are fed up with IE6 is not acceptable
  • No Cut and Pasting from the web. Or mass import of Javascript / CSS fixes. Don’t put it in if you don’t understand what it does.
  • When you have a CSS issue keep deleting rules until you work out which rule is causing the problem then rebuild the rules up.

I post some examples in my next post

So how about truly private fields in C#?

UPDATE: Jim pointed out that you can access the field via reflecting over the delegate.  (See comment) Damn this is a bit like how java does anonymous access to private fields of the parent class. I wonder if you could use this for some nasty security violations as people tend to think local variables are safe from reflection.

After the crazy !@$%  with JavaScript yesterday I said to Christian, I bet we can do this with C# lambda. So the challenge was set….

class Purse
    public Func<int> get;
    public Action<int> set;

    public Purse(int money)
        get = () => { return money; };
        set = (newMoney) => { money = newMoney ; };

And here is the test …

var p = new Purse(2);
p.set(p.get() + 1);
Assert.AreEqual(3, p.get());

If you tried to use reflection, as expected there is no field to inspect.

Truly private fields in JavaScript

So I was chatting with Christian Blunden about JavaScript, and he asked if it was possible to have private fields in JavaScript.

Now the language doesn’t have a key word but I knew that you could use function scoping to achieve the same affect as I had seen the same thing done using the E programming language.

So after 5 minutes here is what we came up with:

function Purse(money) {
	this.getMoney = function() {
		return money;
	this.setMoney = function(newMoney) {
		money = newMoney;

This will create a truely private field that can only be accessed via the methods.

You can still mix your private getters and setters with prototype methods. eg:

Purse.prototype = {
	add : function( money ) {
		this.setMoney(this.getMoney() + money);

var p = new Purse(2);
p.add( 1 );
p.getMoney(); returns 3

If you tried to access the money field directly it would be undefined.

Pairing with Resharper (Switching Keyboard Layouts in Visual Studio)

So at my current client we have a bunch of Devs that are fairly recent converts to Resharper and a bunch of old hats who know IntelliJ or have used Resharper since Version 1. We are pairing but we know different keyboard layouts and don’t want to decrease productivity by making one lot relearn the other layout. So with some searching around I found out how to create new layouts and using a simple macro switch between them. 

Please see attached zip


An Example Visual Studio Keyboard settings file

Programatically changing the keyboard thread

MSDN Reference for binding keys in Visual Studio


What does it do?

Allow you to switch between “Resharper + Visual Studio” and IntelliJ shortcuts


Why would you do that?

You are pairing with someone who knows the other set of shortcuts


How to install?

  • Close Visual Studio
  • Run install.cmd from a drive (mapped if a network share) to copy the files to the default locations
  • Open Visual Studio
  • Tools – Macros – Load Macros Project… Select the ThoughtWorks folder Select the ThoughtWorks Project
  • Tools –  Options – Environment – Keyboard: Select the Resharper or IntelliJ


How to switch?

  • To switch to IntelliJ Layout press Ctrl-Shift-Alt-I
  • To switch to Resharper 4 Layout press Ctrl-Shift-Alt-R

It still does not work…

  • Tools – Options – Environment – Keyboard: Select the IntelliJ
  • Tools – Import and Export Settings… – Import selected environment settings – No, just import new settings – Browse – Select Switch.Shortcuts
  • Tools – Options – Environment – Keyboard: Select the Resharper
  • Tools – Import and Export Settings… – Import selected environment settings – No, just import new settings – Browse – Select Switch.Shortcuts


Can’t you create a decent installer?

I plan to but it looks like I might need to get my code signed by MS!

Lean and the fishing industry

This could be just verbal diarrhea, but I was watching Autum Watch last night and it struck me that the issues with over fishing and the fishing industry as a whole have a lot to do with all the waste inherent with manufacturing processes that use economies of scale to maximise profits. There is waste all over the industry:

  • The wrong fish get caught and killed then thrown overboard
  • Same again for fish the wrong size
  • Then fish go off or get damaged as they try and increase efficiency by doing bigger catches
  • Then fish don’t get sold because of changes / floods in the market (another trawler comes in at the same time)

I’m sure there are a lot more and I’d love to know the ratio of fish that make it to one’s plate with number caught.  Anyway people tend to think that the only alternative is some tree hugging world where you actually catch the fish yourself.  Toyota have shown that there are alternatives that are highly profitable, consumer driven and extremely effective. So the question is could Lean be applied to the fishing industry?  Could we have a pull system? And what size buffers or queues would we need for it to work?

The implicit back link

A little while back I was chatting to someone about SEO and the power of outgoing links. In the bad old days your client would ask you to build a web site that had no links leaving the site or put some horrible confirmation page asking you that you are leaving!

Whats interesting here is that by not having any external links you are reducing your interconnections with other sites, and so reducing your ranking in search engines. Not only do most search engines allow you to search for linked pages but each additional connection in either direction will increase the weighting that matching symbols (words) in those documents have the same implied semantics. This is just like a neural network where each additional connection re-enforces the bond further increasing the chance of a pattern match.

Add to the fact that incoming links, trackbacks and pingbacks are very common on blogs and other modern publishing tools and those implicit back links become explicit.

So if you want people to link to you, you should link to them.

Plaxo revisited

So I got some helpful feedback on my last post from John McCrea who is VP of Marketing for Plaxo. So I logged back into Plaxo and had a little hunt around and after about 5-10 minutes found my addresses.

My initial reaction was Doh! what an idiot I was, but then after a few minutes reflection I started to think about user interface design and intuitive learning. When I showcase new functionality to my users, they will often give feedback about how easy a feature is to use or find. Often as developers or familiar users of a system we don’t see that something might not be named or located in the most natural place.

So I though I might also give some feedback to Plaxo that might help improve the user interface.

This is where the confusion started for me:

Plaxo options

Option 1 leads you to the old Plaxo address book system

Option 2 leads you to an import wizard to get your address book from Outlook, GMail etc

Option 3 doesn’t contain any of your old address book “connections”

So these are my thoughts:

  • Links with nearly the same names but going to total different actions is confusing
  • Option 3: The domain language seems confused, surely the people I have already shared my address book with are already “connected” in someway. Maybe that connection only allows address book features and not all the new features.
  • Option 2 doesn’t seem to support importing from option 1 (You wouldn’t need this option if they were already connected)
  • Option 1 feels like a skinned version of old app and not really integrated into the whole experience

Early morning rant…

I’ve been an occasional user of Plaxo (just the address book) for the last 3 years, using it to keep a few important addresses up to date. Anyway today was the first time I had used it since they launched Pulse, and guess what all my contacts have gone!

Now that’s not very clever for a social networking site and reminds me what Duncan Cragg would say about Web 2.0 and making sure all you data is public, readable in some open format and ideally distributed over the interweb. If fact this really goes back to why “data bases” were created in the first place: data lives longer than applications: well not in Plaxo’s case.

More Ubuntu 7.10 notes for Dell D630

So the wifi seemed to work pretty well out of the box but I noticed after prolonged use it would just suddenly freeze and the only way to make it come back was to reboot. (You couldn’t even reload the module or restart networking stack).

You can tell if this will be a problem for you by running iwconfig: if you have lots of Invalid misc errors and the signal and noise levels are fixed at -60dBm then you will want to switch from the ipw3945 module to the iwl3945.

To try it out:

sudo modprobe -r ipw3945
sudo modprobe -r ieee80211
sudo modprobe -r ieee80211_crypt
sudo modprobe -r mac80211
sudo modprobe iwlwifi_mac80211
sudo modprobe iwl3945

Now if you run iwconfig you should see wlan0 (plus wmaster0 which we’ll just ignore). If it’s called wlan0_rename then you run

sudo nano /etc/udev/rules.d/70-persistent-net.rules

Comment out the line reserving eth1 for ipw3945 module.

To make this all permanent you need to add the iwl3945 and iwlwifi_mac80211 modules to /etc/modules

sudo echo iwlwifi_mac80211 >> /etc/modules
sudo echo iwl3945 >> /etc/modules

And now stop the ipw3945 and dependencies from loading by blacklisting them

sudo echo blacklist ipw3945 >> /etc/modprobe.d/blacklist
sudo echo blacklist ieee80211 >> /etc/modprobe.d/blacklist
sudo echo blacklist ieee80211_crypt >> /etc/modprobe.d/blacklist
sudo echo blacklist mac80211 >> /etc/modprobe.d/blacklist

Dan's technical ramblings