the real geek test

June 17th, 2009

I’m sorry, I’m sorry, but I object to the use of the word geek. I’d always imagined that a geek was someone who was obsessive about computer programming. Lately though I’ve seen people use it in a way that is beginning to annoying me – it’s used to describe someone who simply uses the latest and greatest software or gadgets. This was brought to a head when I clicked a link in a tweet (thanks Colin!) which sent me to an article called “Top 10 Ways to Provoke a Geek Argument“.

I mean, I like to think I’m a geek, sad, but true. However, if the things mentioned in that article are likely to incite an argument in a geek, then I ain’t a geek. True geeks laughs in the face of such insults. So bearing all this in mind I say a real geek is someone who takes offense when:

  1. someone states that programming is just a day job;
  2. someone tells you they work in IT/computing and they can’t program – this often comes in the form of a third-person telling you their friend works in IT just like you!
  3. someone tells you that the technology used doesn’t matter;
  4. someone’s role call of programming languages does not extend to at least 4 and they don’t know at least one dynamic language – real brownie points go to those who know a functional language;
  5. someone shifts a conversation about programming to something else – oh yes, including girls, well maybe not!
  6. a developer tells you they don’t have broadband at home;
  7. someone states that Agile development is essentially the same as the Waterfall model;
  8. someone becomes a “developer” during a one year Masters conversion course – in particular sociology and arts students;
  9. a “developer” tells you they want to be a manager;
  10. people don’t think they’re a geek.
  11. There you go, if you don’t agree with these then you ain’t a geek! However, you are at least one tenth of one! :D

    Observations, programming

JavaScript media player

May 28th, 2009

Download JavaScript Media PlayerA while back I was impressed to see the Yahoo media player. It appeared on the face of it to be a JavaScript only media player which seemed not only impressive but impossible. As it turned out the media player actually used flash underneath the hood by making a series of API calls without the need for the typical flash UI.

Being suitably impressed I decided to write my own – I wanted several distinct features like a playlist and a custom look. I then found an astonishing good JavaScript API that interfaced to the audio features in Flash. This library was called SoundManager2, check it out, it’s great. SoundManager does provide some neat demo applications, but nothing that matched my needs – incidentally the demos may be far better now as I wrote this code almost a year ago.

So what was I looking to achieve with this:

  1. I wanted to queue tracks in a playlist;
  2. The order of the playlist must be dynamic, i.e. you can drag and drop the tracks to change their order;
  3. Adding the media player to a website is as easy as adding a div with a specific id attribute;
  4. Adding items to a playlist must be as simple as including an anchor tag with a specific CSS class;
  5. The colours, dimensions, and images should be easily overridable but also have sensible defaults;
  6. The path to the library should be configurable in some manner.

So what did this turn out like? Well you can see it in action on www.feellikefalling.com. I encourage you to check it out to see things like the play list drag and drop etc in action. Update: I have embedded the player here so that you don’t need to navigate away if you don’t want to.

So if you want to include this on your new site how to you do it? It’s pretty easy – you don’t need to be a web developer! First you need to download all the required files by clicking the big button above or here, extract the files, and then upload the these files to your web server. The HTML required to embed the player is minimal and is show below:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="myplayer"> 
  <a class="myplayer_mp3" href="song1.mp3" 
     title = "Feel Like Falling - Can't Rock With The Kids">
      <span class="myplayer_artist">Feel Like Falling</span> - 
      <span class="myplayer_song">Can't Rock With The Kids</span>
  </a>
  <a class="myplayer_mp3" href="song2.mp3"
     title = "Feel Like Falling - Purple T">
      <span class="myplayer_artist">Feel Like Falling</span> -
      <span class="myplayer_song">Purple T</span>
  </a>
</div>

To include the player in the page you simply add a div element with id myplayer. Then to add an mp3 to the playlist you create an anchor (a) tag with class myplayer_mp3. To include a tooltip for the song you simply add a title attribute to the a element.

In order to get all this to work you need to include the following in your document header:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<link rel="stylesheet" type="text/css" href="js/myplayer/player.css">
 
<!--You must specify the location, relative to this file, where
    the myplayer source can be found. This allows it to set up
    some things automatically for you -->
<script type="text/javascript" charset="utf-8">
  var _MyPlayerLocation_ = "js/myplayer";
 </script>
 
<!-- It uses jQuery so load the main jQuery library however 
     you wish in this case I'm using Google to host it -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1.3.2");
 </script>
 
<!--The rest are JavaScript file that are required by the media
    player and should be included in the order specified - they 
    are all contained in the downloadable zip file. All you have 
    to do is make sure you have specified the correct path
    relative to this file -->
 <script type="text/javascript"
          src="js/myplayer/jquery/jquery-ui-custom.min.js"></script>
 <script type="text/javascript"
          src="js/myplayer/jquery/jquery.tooltip.js"></script>        
 <script type="text/javascript"
          src="js/myplayer/soundmanager/soundmanager2-min.js"></script>
 <script type="text/javascript"
          src="js/myplayer/utils.js"></script>
 <script type="text/javascript"
          src="js/myplayer/myplayer.min.js"></script>

Instead of explaining all of the above I suggest you just take a look at the inline comments. There is also a sample HTML file in the downloadable zip containing full working example – apart from the actual mp3 sound files.

You can also customise the player visually with relative ease. The colour scheme can be changed by simply overriding the default CSS styles for the player. For example, consider the following screenshot:

Customised Media Player

Here the volume bars, the play timer, the currently playing song background, and main background colour have all been changed. The code below shows the CSS elements that had to be changed/created to achieve this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div#myplayer { background-color: #696969; height: 25em; }
 
#myplayer_playlist_container { height: 20em; }
 
div#myplayer_playing_timer { background-color: #6D0D33; }
 
div.myplayer_strip_skin_on { background-color: #6D0D33; }
 
#myplayer_playlist li { background-color: #929292; color: #FFFFFF; }
 
a.myplayer_mp3 { color: #000000;	}
 
#myplayer_playlist li.ui-selected { background-color: #6D0D33; }
 
#myplayer_playlist li.ui-selected a { color: #FFFFFF; }

Hopefully the method of customising the player, as shown above, is straightforward to understand, it’s just basic CSS. Obviously just about anything can be customised through the use of CSS, and I suggest taking a look at the generated HTML to identify the appropriate ids and classes – you can use firebug HTML explorer with Firefox (or the equivalent in IE, Chrome, Safari, etc). In fact, the HTML generated can also be modified easily – take a look at the myplayer_snippets.js to do this. Be aware though that some of the elements generated are essential to the working of the application though.

For those more artistically inclined than me feel free to give it a sweeping new look – in the colours of the site I linked to so that I can get the benefits ;-)

It goes without saying there will be bugs! If you find any, either leave a comment or better still email me – my address can be found in the about section of this site.

So feel free to add the media player to your site! Enjoy.Download JavaScript Media Player

JavaScript, Media Player , , , ,

the curious case of the graphical interface

May 19th, 2009

Until recently I had a rather nescient attitude to the needs of users who have barely seen a computer never mind used one. It’s easy for developers to forget about these people. However they exist, and with the rise of the internet as the dominant carrier of information, I would presume that now more than ever the new computer user is finding their way online.

Most developers have had the “keep it simple” mantra for UI development drilled into them over the years, both in an academic and commercial setting. However, having spent some time educating a few older family members (who fall into the computer newbie category described above) on the ways of the internet, I’m of the impression that it’s not just simplicity that is required but moreover consistency.

For example. A simple hyperlink like this one which seems innocuous to the average user, can cause trouble. Why? Well, when “teaching” people to use the internet it’s helpful if you can define some simple rules. One of these rules might be “Things you can click on will be underlined”. Rules like this give a surprising amount of comfort to an inexperienced computer user. However, until actually watching a family member struggle when links are not underlined I would not have known/believed the problem existed. To them the link above just looks like a piece of coloured text, which they don’t associate with the simple rule. A similar situation occurs when links are in the form of an image, where unless it looks like a button then they are unlikely to click it.

However, many sites don’t underline hyperlinks, so an alternative rule may be “When you move your mouse over a piece of text and it turns into a little hand, then you can click it”. That is as long as someone has not change the default cursor – thank you for this feature Internet Explorer! This rule is not ideal though as means you have to trawl the entire page to find links.

If you plan to really confuse a new user then you can always do the following: fail to underline the text, have it the same colour as the rest of the text, and instead of using an anchor tag, use any tag you like and just assign an onclick handler to the element in javascript. That way you get no cursor that changes to the familar hand as well. Awesome.

The above problem really does exist and I have seen it on many websites even those undertaken by well known web agencies.

This is not the only area of inconsistency, there are many others. In fact, another problem that seemed to cause increased stress levels is time/date input – for example a flight search engine. Most sites that require this functionality tend to provide some sort of calendar widget. Therefore, you can show someone how to input a date by asking them to first click on the calendar image, now click the appropriate button to navigate to the required month, then click on the required day to select. However, every calendar widget is slightly different which is just the start of the confusion. The real problem is reserved for those sites that do not have a calendar widget to select the date. The user then looks everywhere trying to find this calendar button to click, and finally is left pondering the date format to enter manually – if they even get this far. Surely it must be to the benefit of everyone if we agree on a standard calendar widget that can be skinned in some way? Just a thought.

I’m sure there are many other areas where this sort of confusion can occur – I can only begin to imagine the problems with Flash sites! Hence the next time you are designing a webpage that is intended for public consumption it’s probably worth bearing this in mind.

web design , , , ,

the problem with frameworks

May 15th, 2009

I love frameworks. You love frameworks. We ALL love frameworks. As web developers we just can’t get enough of these things. They’re everywhere: from Rails, to MS MVC, to CakePHP, to Django, and so on. I’m so obssessed with frameworks that I spend more time thinking about what one to use than actually using it. But this is not the only problem, as after choosing one, your problems can really start.

On a project that I have been intermitently working on for a little while now I chose to use CakePHP. The reason for this choice? Well first, I had a pretty good knowledge of PHP as I wrote my own little PHP framework when web frameworks were a mere twingle in their daddies eyes. Second, PHP is widely supported on shared hosting – though Ruby is catching up (that said, I’ve experienced some horrors with Ruby hosting). The widespread availability of PHP also means that PHP hosting tends to be cheaper.

Anyway, this is all beside the point. My real issue is with the size and complexity of these frameworks. Just the other day I was looking to do something as simple as validate an input that was supplied as an HTML POST parameter. Pretty simple right? Well it ended up taking me a disproportionate amount of time to do this task.

The first port of call was to find out if the framework itself supported this, which to my delight CakePHP (1.2) delivered on. Now it was down to the trawl/skim through the documentation trying to figure out how to actually do it. I found what I presumed done the task – basically I was required to add the appropriate validation rules to my model. Thus I added the following:

1
2
3
4
5
6
7
8
9
<?php
class Section extends AppModel {
    var $name = 'Section';
    var $actsAs = array('Tree');
    var $validate = array( 'name' => array('rule' => alphaNumeric,
                                           'required' => false,
                                           'message' => 'Alpha numerics only'));
}
?>

Then in my controller I simply called the validate method:

1
2
3
4
if(!$this->Section->validates()) {
    parent::handleAJAXError($this->Section->validationErrors);
    return;
}

What happened? NOTHING! I passed data that should have failed and it passed. SHIT! I then decided to check to see that the rules were getting parsed so changed the required key in the rules to true, and passed nothing in. Now it worked – it asked me to specify the parameter. My logic was therefore it can see the data and the rules are getting parsed so what the hell is happening!

By this point I had spent quite some time trying to figure this all out. To be honest, I could have written the validation code quicker. So that’s what I decided to do. Yes I reinvented the wheel, it took me around 5 mins, dwarfing the hours I had spent trying to get the stupid library validation code to work. Not only that, much of the supposed benefits offered by using the built in validation code was of no use to me – it wasn’t built around AJAX requests. So what is the moral of this story?

Well it’s read the documentation better, don’t run the most stupid tests, and don’t charge-in thinking you know how everything works! WHAT I hear you say?!

If only I had taken more care when reading, eh the first paragraph, in the documentation I would have observed this:

First, set the data to the model:

$this->ModelName->set( $this->data );

Whoops I never done this. Basically I wasn’t EVER passing in any data to validate, which makes my shocking test of changing the required to true to convince myself the rules and data were being parsed an absolute joke. Rushing in to write my hand crafted code is as bad as the other old chestnut of complaining “there is a bug in the compiler” – c’mon we have all said it ;-) The only thing I can credit myself with here is that after a recent 4 week holiday I was stubborn enough to not give up and go back an look at it. Therefore, if there is anything to learn from this experience it’s that before starting something make sure you have taken the time to either read the documentation or listen to those trying to guide you. Oh and have a certain amount of stubbornness about you – not too much though.

php, programming , , ,

is open-source software worth it

April 7th, 2009

I’ve been having some real problems with FireBug recently – essentially it has made itself utterly useless. Why? Well when I set a breakpoint within FireBug and that breakpoint is reached, the code window does not scroll to the breakpoint. I then have to drag the scroll bar down to the breakpoint, then when I press F10 to perform a step over, the code window resets itself to the top. As you can imagine this get rather annoying after a while, especially with large JavaScript files.

As a result of these misgivings I have found myself using the IE8 developer tools – which are actually quite good, though FireBug, when working, is better.

Luckily the project that I’m working on is not exactly critical, though the quicker I get finished it the better. However, if I was working on something that was going to generate me $$$$$$, I’d hope to god that I wouldn’t have to waste so much time with the debugger. With this in mind, and with the mindset of “You are a dumb ass if you fail to utilise open-source software” prevalent in our industry, it raises the question as to the limits of open-source software.

If the software that you are developing is largely based on open-source/free software, and this software sells for hundreds of thousands do you really want to be using libraries that have no real service-level agreement? For example, let’s assume that your software sells for $200,000. Then it’s safe to say that your customers will be expecting some pretty good service for that kind of money. Suppose a bug is found in some third-party open-source library that is used in your product. So you have two options: 1) you ask the community to fix the bug or 2) you fix the bug yourself. Are any of these really a satisfactory solution? I don’t think so.

Consider option 1. Suppose that the project stagnates or your bug is just not an issue for the community, then it may take some time to get this bug fixed (or they may not fix it at all). But you need this bug fixed yesterday! People tell you “Oh there is always someone in the community willing to help”. Nonsense. There are no guarantees and this is exactly what a professional organisation needs. A bank, telecom company, utilities company and so on are not going to give a shit that you can’t get it fixed soon, they will just move their business elsewhere. This is the reality of the situation, and if you are moving a core part of your business out to open-source software and charging a small fortune for your software, I’m pretty sure this is going to come back and bite you. Open-source software proponents can scream until they are blue in the face that this will not happen, but it might, and that’s all that matters.

So if option 1 cannot save you then your left with option 2. Well first, it’s easy to say that you just get the source and edit it yourself, but the fact of the matter is that it takes quite some time to be comfortable with a large code base. In particular, to be comfortable with the fact that making changes in one place doesn’t cause problems elsewhere. OK, unit tests help, but there are no guarantees. Maybe you could be involved in the maintanence of the open-source software on a regular basis to ensure that your team has built up a familiarity with the code. Maybe even developing new features etc. That sounds like a great idea. Until your competitor comes along and uses all these lovely features that you have so kindly developed for them! Then how much of a fool do you look.

The fact of the matter is that if you write the code, then you have more control over it, and this eliminates any dependencies you may have on outside parties. The more you charge for your software, the tighter your service level agreements are, and the more third-party libraries define the uniqueness of your product, the more important this becomes.

This is not to say that we should all go out and write our own compilers, IDEs, and various other things. It’s just a matter about being sensible about what you use.

JavaScript, open source , , ,

javascript done right

March 26th, 2009

Well its been a while since I last used JavaScript, but I’m back at it with a bang. However, it would appear that people are still writing JavaScript as awful as ever. I’m not claiming to be a JavaScript expert but I see people do things in JavaScript that they wouldn’t even consider doing in languages like C++, C#, Java, and so on. Why is this the case? I can only presume that they don’t know any better. With this in mind, let’s take look a few not so nice bits of JavaScript namely global variables and scope, and see how we can make this situation better.

With C (and C++) we have global variables, that is, a variable which is available at each and every scope of your program. Why is this bad? Well due to the fact that this variable does not have any sense of locality, it can be changed anywhere in your code. Thus, there can be a large number of dependencies on such a variable – something which all good developers know is bad. This can also lead to name clashes resulting in unpredictable behaviour. So why is JavaScript so bad? Well it bases its programming model on global variables. Damn.

So what are the problems with scope in JavaScript? Well JavaScript does not have block scope – this may appear odd to those used to C-style syntax. What does this actually mean and what’s the problem with this? Well I’ll steal an example from the book Javascript – The Good Bits by Douglas Crockford where you can see how confusing this can be:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var foo = function () {
    var a = 3, b = 5;
 
    var bar = function () {
        var b = 7, c = 11;
 
        // At this point, a is 3, b is 7, and c is 11
        a += b + c;
 
        // At this point, a is 21, b is 7, and c is 11
    };
 
    // At this point, a is 3, b is 5, and c is not defined
    bar();
 
    // At this point, a is 21, b is 5
};

However, despite these nuances in the JavaScript language, with a little thought and engineering we can get round this.

First, let me say that JavaScript really is a great language, don’t underestimate it. Many languages have bad features, it does not mean that you have to use them.

Now getting round the global variable problem is pretty simple, we create a global object and place all our JavaScript code within this object. The code below shows an example of how to do this.

1
2
3
4
5
6
var APPLICATION_NAMESPACE = {};
 
APPLICATION_NAMESPACE.my_object = {
     my_name : "Name",
     my_function : function () { alert("ALERT"); } 
}

This style of coding in JavaScript should be familiar to users of jQuery – instead of APPLICATION_NAMESPACE you use $ or jQuery. There we have it, this gives us a nice way to get round those pesky global variables.

Now, if like me, you are used to a more object-oriented (OO) style of software development then JavaScript can appear a little awkward at first. With no classes and traditional inheritance the typical OO developer is left wondering what to do. This need not be the case.

One development pattern that comes to the rescue for OO developers has been proposed, once again, by Douglas Crockford and is known as the module pattern. So how can we use it? Well say we want to create a “class” Person that has a “public” method fullname which uses a “private” method concat, this is represented using the module pattern as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Person () {
    function concat() {
        return firstname + surname;
    }
 
    return {
        fullname: function(firstname, surname) {
            return concat(firstname, surname);
        }
   }
}
 
// To use Person we do the following
var person = new Person();
var name = person.fullname("Davie", "Jones");

As you can see this allows for sensible scoping of variables and functions, and at the same time makes a JavaScript objects look like classes. Also, this method of developing objects in JavaScript just about eliminates the need for global objects.

I’m a little hesitant to use JavaScript as a fully blown OO language – as this is not how it was intended. Instead we should embrace the alternative style of programming that JavaScript gives us. After all, if you were using a functional language like Haskell, F#, Scala and so on, you wouldn’t expect to write code as you would in a language that supports the typical OO constructs.

The fact is that JavaScript is here to stay for a long long time, so you may as well learn to love it :-D .

JavaScript , , ,

charting success

March 23rd, 2009

In my continued exploration of C# I recently had the opportunity to investigate the Google Chart API using Google Chart Sharp. Both the C# API and Google Chart itself are great. For those unfamiliar with Google Chart here is a quick summary.

Google Chart allows you to dynamically generate many of the popular types of chart – currently the API includes support for Line Charts, Bar Charts, Pie Charts, Venn Diagrams, plus many more. Check out the full list of chart types here.

Charts are generated via a GET request using a simple URL, where various GET parameters can be supplied to customize the chart. For example, to construct a pie chart that describes web browser usage for a particular page in which FireFox has 60%, and IE 40% of the total views, we use the following URL:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=FireFox|IE

Typing this URL into your browser will show the chart below:

Pie Chart with two data points

Pie Chart with two data points

I’m sure many of you will recognise the chart design from Google Analytics.

Not only is the Chart API free to use (but not to abuse!), it also generates pretty nifty looking charts.

The charts can also be customised in many different ways including size, colour, axis, etc. Check out the documentation for this on the Google Chart API page linked to above. To show how simple it is to change the colours, take a look at the chart below:

Pie Chart with custom colours

Pie Chart with custom colours

Here the only change required to add custom colours is an additional HTML GET parameter – I simply added chco=9913CE,D3A4E5 to the end of the URL given above.

Now on to the C# side of things.

As you can probably guess, the C# wrapper for Google Chart simply generates a URL. For example, to create the chart above using our new colour scheme we do the following:

1
2
3
4
5
PieChart chart = new PieChart(250, 100, PieChartType.ThreeD);
chart.SetData(new int [] { 60, 40 });
chart.SetPieChartLabels(new string [] { "FireFox", "IE" });
chart.SetDatasetColors(new string [] { "9913CE", "D3A4E5" });
string url= chart.GetUrl();

You can then use the URL directly in an HTML document or download the image locally using the following code:

1
2
3
4
WebRequest request = WebRequest.Create(url);
WebResponse response = request.GetResponse();
Image image = Image.FromStream(response.GetResponseStream());
image.Save("mychart.png");

Yep it’s that easy. The other charts can be created just as quickly in both the Google Chart API and also with the C# wrapper. So if you are looking to create good looking charts and don’t want to pay much (any) money I suggest that you check this out.

C# , , ,

how not to develop websites

March 19th, 2009

It amazes me time and time again how certain websites are designed/administered. In particular, government websites. Let it be known my rant starts here.

Laughing in the face of the credit crunch I recently booked a trip to Australia. As it turned out, it was almost as cheap to go via the US with a stopover in San Francisco, which I duly accepted. However, as I was now staying in the US for a day or two, I had to apply for a ESTA – this has to been done at least 72 hours before travel. Fair enough.

So off I trotted to Google and searched for “ESTA”. The searched showed that the most likely place to complete my ESTA was at the link https://esta.cbp.dhs.gov/esta. However, clicking on the link returned the page shown in the screenshot below. Hence, I thought the site must be down, and that I’d come back later. I then tried later that day and it still wasn’t working so I ended up leaving it for a while (by a while I mean a month or so).

ESTA website error screenshot

ESTA website error screenshot

Then last night I thought I’d better try again, but nothing, the same page. It was late, so I thought I would leave it again until the morning. However, the morning greeted me with the same error page once again. With my suspicions now raised and due to the departure date looming over me, I searched on Google to see if anyone else was getting this problem. Nothing, no mention of anything. Strange.

It then dawned on me that it might be the browser. So I loaded up the page in IE7 and bang it worked. I mean how shite is that? They should have at least have given a warning that my browser (Chrome) wasn’t supported. Instead I have wasted time trying to figure out what the hell was wrong.

Maybe I should have tried an alternative browser sooner but I was given no indication that this might be the problem. In my eyes this is a colossal FAIL. In fact, the only reason I decided to check in another browser was that the UK Government was considering a similar stance with browsers it did not believe it should support. The following excerpt is taking from the Boagworld podcast #135:

Apparently, the UK government believes we should test on the basis of popularity. In a draft document advising public sector websites, it suggests that if a browser appears in visitor logs as being below an arbitrary percentage of total “unique visitors”, then it should not be listed as being “fully supported”.

As the guys over at Boagworld stated, this may seem like a sensible move, but in fact it’s not, and I refer you to the comment quoted by Jon Hicks.

It isn’t clear how the supported browser list would be enforced, but I’m concerned that this approach will encourage browser sniffing, a move that will exclude browsers like Omniweb,Shiira and iCab, simply because their name isn’t ‘Safari’. They share the exact same rendering engine, and therefore require no further testing. You can be more inclusive without spending any extra resources.

So this brings us round to the issue of graceful degradation and progressive enhancement ([1][2]), as championed by Yahoo.  For those who don’t fancy following the links here are the definitions of each concept:
 

Graceful degradation: Providing an alternative version of your functionality or making the user aware of shortcomings of a product as a safety measure to ensure that the product is usable.

Progressive enhancement: Starting with a baseline of usable functionality, then increasing the richness of the user experience step by step by testing for support for enhancements before applying them.

Surely following either one of these approaches is the way forward?  Developing a website in this way will also improve the site in term of accessibility - the sooner someone gets prosecuted here under the disability discrimination act for this stuff the better. However, this methodology seems totally lost to the US government (and the UK government for that matter). Instead others will wonder why the hell they can’t get on the site from their “obscure” browsers. Hopefully this post may help them. Or maybe the US government will do the sensible thing and tell us why we can’t view the page, I won’t hold my breath though.

[1] http://dev.opera.com/articles/view/graceful-degradation-progressive-enhancement/

[2] http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/

Design , , ,

dynamic queries with LINQ

March 10th, 2009

So, I’m a master C# programmer having been using it for a grand total of 4 weeks! My learning process began by ignoring the provincial and proverbial “Hello World” program, and instead I decided to learn the language features that are particular to C#.

As it happens, C# has quite a few modern language features that Java is sadly lacking (I won’t go into this here, but a comparison between the two is something I plan to blog about in the future). Along with many other new features, C# 3.0 gave us LINQ, which will be the topic of this post.

LINQ, I think, is reasonably straightforward to both understand and comprehend. Basic queries are extremely simple to create, and LINQ almost gives C# a functional programming feel. An example LINQ query is shown below:

from s in students where s.classyear == "2008" && s.courseyear == "2" select s;

That said, not everything is plain sailing with LINQ. The application I was writing required the where condition in my LINQ statement be dynamic. That is, a column specified in the where condition is only known at runtime. Achieving this functionality using the syntax shown above is not possible (which if you try it out I’m sure it will be clear why). To achieve this functionality the learning curve soon ramped up.

If you have searched on Google for dynamic queries in LINQ, you probably found these two articles, ScottGu’s Dynamic Linq and tomasp.net’s Building LINQ Queries at Runtime in C# - there were others, but few proved to be much help. ScottGu’s article was very good, and in essence solved my problem, but didn’t really help me understand the problem. The second article just went way over my head. Why? Well it came down to another new feature of C# that I didn’t know about, which was Expressions and Expression Trees, which, as it turns out, proved to be the key to solving this problem.

In addition to using the query syntax with LINQ (as shown above), you can also use query expressions. Query expressions are simply static methods that allow you to express a LINQ query. The example given above can be rewritten as follows using a query expression:

student.Where(s => s.courseyear == "2008" && s.classyear == "2");

On first looking at this example, it is still not obvious how runtime queries can be generated using query expressions. However, by taking a look at the type of the argument passed to Where helps us out:

Expression<Func<TSource, bool>> predicate

After some thought, this begins to make sense. The Where method takes a lambda expression whose parameter is of type TSource and returns a boolean. Therefore, surely we can create a lambda expression dynamically by building an expression tree for it? And yes, this is exactly what you are supposed to do.

C# experts are probably howling at me now and can’t understand why it took me so long to get there. However, this article is not aimed at you; it’s aimed at a newbie like me, and is simply trying to detail my thought process.

So now it was time to learn about Expression Trees.

Although I understood the concept of Expression Trees, they took a bit of getting used to – just don’t give up if you are struggling with it. In order to show how we can use Expression Trees to create dynamic queries, I will jump straight in with the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
public Expression<Func<student, bool>> GetWhereLambda(string courseyear,
                                                      string classyear,
                                                      string myDynaColumn)
{
    ParameterExpression param = Expression.Parameter(typeof(student), "s");
 
    Expression courseExpr = GetEqualsExpr(param, "courseyear", courseyear);
    Expression classExpr = GetEqualsExpr(param, "classyear", classyear);
    Expression cond = Expression.And(courseExpr, classExpr);
 
    // This is where we create the expression for the dynamic column.
    // Obviously the value could have been dynamic as well but it 
    // saves a little visual complexity this way.
    cond = Expression.And(cond, GetEqualsExpr(param, myDynaColumn, "YES"));
 
    return Expression.Lambda<Func<student, bool>>(cond, param);
}
 
private Expression GetEqualsExpr(ParameterExpression param,
                                 string property,
                                 string value)
{
     Expression prop = Expression.Property(param, property);
     Expression val = Expression.Constant(value);
     return Expression.Equal(prop, val);
}

Seeing the code makes this look pretty simple, but there are quite a few concepts that a programmer new to C# has to get the hang of. However, let’s just step through the code – well one clause anyway, the rest follows from that.

Let’s look at how the clause (s.courseyear == "2008"), from out original where condition, converts to an Expression. We first create a parameter expression (Line 5), that is, the argument (parameter) supplied to the lambda expression (this parameter must be used for all sub-expressions that make up the lambda expression). Next, we need to create an expression to represent the right hand-side (s.courseyear) and left hand-side ("2008") of our clause. Since courseyear is a property of student (property as in C# property – think neat getters and setters) we create a property expression, i.e. prop = Expression.Property(param, "courseyear"), and as "2008" is really a constant, we create constant expression using value = Expression.Constant("2008"). Finally, we want to express the fact that the property should be equal to the constant in our query, we use the Expression.Equal(prop,value). That’s it. Essentially what expressions do is model our code as data.

Now it becomes obvious how we can represent a column in the where clause that is supplied at runtime – we simply create a property expression, as shown at Line 20, where property is the dynamic column name specified at runtime.

To combine the clauses in the where condition we simply use Expression.And, as shown in Lines 9 and 11. The resulting expression and the parameter is then used to create a lambda expression, which is in turn passed as an argument to Where, e.g.

Expression<Func<student, bool>> myLambda = GetWhereLambda("2008", "2", "active");
IEnumerable<student> filtered = students.Where(myLambda);

There you have it. It’s not that straightforward for those new to C# like me, but hopefully this article at least gives some code that can easily be used by people in the same position as I was.

C#, LINQ , , , , ,

The S in SOLID

March 4th, 2009

Right, I’m back onto the SOLID principles again, I apologise to those who are bored of this.

So the other day I was listening to the most recent Scott Hansleman podcast with Uncle Bob Martin where the conversation was about the recent handbag fight between Bob Martin and Joel Spolsky – as I discussed in a previous blog post. In this podcast Bob Martin talks about an issue Joel Spolsky raised with him on the StackOverflow podcast #41.  An extract from the discussion from the StackOverflow (SO) podcast #41 is given below:

Spolsky: Bob, can you explain again the Single Responsibility principle? Because I don’t think I understand it right.

Martin: The Single Responsibility principle is actually a very old principle, I think it was coined by Bertrand Meyer a long time ago. The basic idea is simple, if you have a module or a function or anything it should have one reason to change. And by that I mean that if there is some other source of change… if there are sources of change out there one source of change should impact it. So a simple example, we have an employee, this is the one I use all the time…

Spolsky: Wait, wait, hold on, let me stop you for a second. Change, you mean like at run-time?

Martin: No. At development time.

Spolsky: You mean changes of code. There should be one source of entropy in the world which causes you to have to change the source code for that thing.

Martin: Yeah. That’s the idea. Do you ever achieve that? No. 

Martin: You try to get your modules so that if a feature changes a module might change but no other feature change will affect that module. You try and get your modules so partitioned that when a change occurs in the requirements the minimum possible number of modules are affected. So the example I always use is the employee class. Should an employee know how to write itself to the database, how to calculate it’s pay and how to write an employee report. And, if you had all of that functionality inside an employee class then when the accountants change the business rules for calculating pay you’d have to change the employee, you’d have to modify the code in the employee. If the bean counters change the format of the report you’d have to go in and change this class, or if the DBAs changed the schema you’d have to go in and change this class. I call classes like this dependency magnets, they change for too many reasons.

Spolsky: Is that… how is that bad?

I kind of feel the same as Joel with this one and I’m afraid that Bob is not really convincing me here. Why? Let’s pursue an example for a second.

Suppose that I’m creating a class that outputs a file. In this class I extract data from a database, convert various bits of the data, then output this data to a file. So how many reasons has my class got to change? Well it looks like 3: the database can change, how I convert the data can change, and how the file is output can change. Hence according to the S in SOLID, each of these operations should be contained in a separate class. Let’s just remind ourselves what the S in SOLID stands for:

A class should have one, and only one, reason to change. [1]

Now if I am forced into making changes to either the database, data conversion, and file format, I make the changes to my class. What is wrong with that? I just compile the project again and distribute the binary. Simple. I can’t see any benefit in breaking this class up into 4 separate classes, there just seems no point, but according to the SOLID principles there is. Arguments from Bob like “Yeah. That’s the idea. Do you ever achieve that? No” are nonsense. It clearly undermines the need for such rules in the first place. There is no point having rules if you are not going to stick to them. Fudging a rule every time it doesn’t fit your argument implies that the rule doesn’t make sense in general.

The discussion in SO #41 then moves on to the Wordpress plugin system where Bob comments on how having independent plugins are a great example of the single point of responsibility (I must stress it was not Bob’s example, he just went with it). Eh NO. I think that it sometimes becomes easy to forget what the S means. Let me just state it again: A CLASS should have one, and only one, reason to change. The plugin itself, which is represented by a class, may have lots of reasons to change. Again in the subsequent Hansel Minutes podcast Bob uses the term module, in the sense of say a jar file in Java or a dll in .NET, to describe building a set of components that adhere to the S in the SOLID principles. This is once again deviating away from the actual meaning of S.

OK, am I being pedantic about the definition? I don’t think so. If it doesn’t mean what it says, then change it; there are people out there that will follow these rules blindly, and having such a specific definition only encourages this.

I think a far better rule would state that a class should only be responsible for a single task, in my example that task is creating the file. This is completely different from a class that has only one reason to change. OK, it’s a lot less specific, and maybe harder to judge, but any decent programmer will have a feel for what a task is. Not only does this seem like a more sensible option, it’s what the plugin and the module argument ostensibly encourage. It seems to me this is the only true generalisation you can extract from Bob’s arguments and I think it would be much better if this is what the rule suggested.

Don’t get me wrong, there are times when you want a class to only have one reason to change, this is especially true when you are developing a framework where the source code is essentially immutable to the outside world, in this case class design becomes far far more important. However the SOLID principles are intended as a set of rules for every programmer to use, and as it stands, I’m sure that the S is causing more confusion, code bloat, and misguidance than it is providing benefit to those adhering to these rules.

Having rules is a great idea, but they also encourage people to follow them word-for-word. It’s easy to say they should not be followed religiously, but I’m sure that is what is expected. This coupled with the developer with poor judgement, little experience and lots of blind faith, can leave us all wondering why we are even entertaining all this.

References

[1] http://butunclebob.com/ArticleS.UncleBob.PrinciplesOfOod

Design, architecture , , ,