Ten Tonne Baby!

Where's Mama?

Archive for the Development category

• Nibbling on HTML5

  After reading the smallest technical book I’ve come across, I’ve switched to the HTML5 Doctype on my first site today. It looks like pretty much everything is backwards compatible and will degrade nicely, so we’re going to be reworking our markup to make use of a bunch of the additional semantic elements.

  The most useful thing so far is having a valid way of stashing information in the DOM so it is available to client-side script via the data- attributes. An example would be storing an attribute like data-zoomimageurl=”http://blah” for use by an image zoom plugin.

  Anyway, I’m off to shoot my friends now.

  Posted:

  July 7, 2010 @ 20:58

  Categories:

  Development

  Tags:

  dom, html5, xbox

  Comments:

  No comments so far

• Automating acceptance tests with BDD

  I think we’re now running a pretty well-structured agile process, but one area that I’m interested in tightening up is how to express acceptance tests for user stories, and ideally how to automate the tests. A lot of the agile reading material talks in passing about acceptance tests without any real definition of the vocabulary or approach to use in expressing, organising and executing tests.

  This fits in very nicely with some of the ideas in Behaviour Driven Design, which is like the next iteration of thinking around TDD. The idea is to express acceptance tests using a simple DSL vocabulary working in plain English, then hook up each acceptance test scenario to some automated tests which prove the scenario works as expected.

  A simple example would be…

  +Title: Customer withdraws cash+
  As a customer,
  I want to withdraw cash from an ATM,
  so that I don’t have to wait in line at the bank.

  In BDD, an acceptance test would be along the lines of…

  +Scenario 1: Account is in credit+
  Given the account is in credit
  And the card is valid
  And the dispenser contains cash
  When the customer requests cash
  Then ensure the account is debited
  And ensure cash is dispensed
  And ensure the card is returned

  I’ve lifted the example here from the key article published on BDD from Dan North – if you’re interested so far then you should stop reading now and go and check out the article.

  BDD frameworks will then map each step expressed in the text above through to a method in a test class, so you have a great balance between expressing the acceptance tests in simple language, but having the ability to execute the tests.

  I found the best way to learn about this so far was a TekPub video – you’ll need a subscription, but the video is under the ‘Concepts’ section > Concepts:5 Behaviour-driven Design with Specflow.

  Overall it seems like a more natural way to approach proving the application behaviour, and makes it much easier for testers and analysts to work alongside you in defining acceptance tests. I’m quite keen to roll this into our day-to-day process.

  Posted:

  June 19, 2010 @ 11:22

  Categories:

  .NET, Process

  Tags:

  agile, bdd, specflow, tekpub

  Comments:

  No comments so far

• Session cookies not expiring when Firefox closes

  I’ve just been looking into a slightly strange issue where closing Firefox and opening again didn’t clear out session cookies. It looks like in the latest version of Firefox this behaviour is by design if you have certain preferences set.

  They have introduced a feature where closing the browser can remember the tabs you had open, and rehydrates these again when you start Firefox. This feature is controlled in the Settings > General > Startup section. If you have this set to Show my windows and tabs from last time, Firefox will no longer expire session cookies when the browser is closed.

  This seems to be a pretty big security concern, as you are prompted to switch this setting on the first time you try to close the browser, so the majority of users would have this set-up. I’m not entirely sure how it decides when a session cookie should expire under these conditions, any ideas?

  Posted:

  May 21, 2010 @ 13:52

  Categories:

  Development

  Tags:

  browser, cookies, firefox

  Comments:

  No comments so far

• Dynamic image endpoints – think about conditional GETs

  I’ve been looking at an issue recently on a site where there is a dynamic endpoint that serves up an image that is stored in a SQL database. The endpoint added the Cache-control: public header, so on the face of it looked like it had added client-side caching support.

  By default if you don’t send either Cache-Control: max-age, or Expires headers then the user agent has been told that the resource can be cached, but has no way to know whether it has changed on the server. Based on this the user agent will send a conditional GET request to the server to find out if the resource has changed, or if it can be served directly from the local cache (this would look like a 304 response).

  A conditional GET will compare versions of a resource based on either the Last-Modified header, or the ETag header. Generally these would have been sent in the original response for a resource. The client will then send either the If-None-Match, or If-Modified-Since headers in the GET request to indicate the resource should ONLY be sent by the server if it has changed.

  In this case the dynamic endpoint had not been coded to support conditional GETs, so the images were getting fully downloaded on each request as a 200 response.

  The simplest solution is to send Cache-control: max-age in order to allow the user agent to serve the resource directly from the cache without bothering with a conditional GET. Alternatively the endpoint has to check for conditional GET requests and change it’s behaviour to support sending a 304 response if the image hasn’t changed.

  The best diagnostic tool to see what is going on is the Net tab in Firebug. This will allow you to check the request and response headers, the response codes, and user agent caching behaviour.

  Posted:

  February 26, 2010 @ 10:35

  Categories:

  Development

  Tags:

  asp.net, caching, firebug, images

  Comments:

  No comments so far

• Not sure I like CSS3 transitions

  One of the modules put forward in the proposed CSS3 specification is the transitions module. This adds a bunch of new CSS attributes which control the animation of property values over time, including everything you would expect (such as easing functions, speed, delays, repetition etc).

  I know there are many grey areas where it’s hard to decide if something is really behavioural (so should be covered via javascript) or presentational (in CSS). I can’t help feeling that this is taking CSS too far into trying to accommodate behaviour. After all, mostly what we do with javascript is about changing the state of the DOM, which causes the browser to re-render with the change applied.

  There are many problems that would need to be solved well in order for this to be viable, which are currently very simple to achieve in javascript using a decent library. These include…

  • Managing multiple independent animations on an element
  • Animating multiple elements simultaneously
  • Cancelling all active animations on an element
  • Transitioning either from the current value of a property, or from an absolute value
  • Chaining animations (so when animation X finishes, trigger animation Y)

  I think my other objection is simply that all of this is currently achievable in quite a simple way using existing web standards, and libraries built on top of those standards. I think deciding how to change a property over time is behavioural, not presentational and should stay in the realms of javascript. Given this, the only thing to consider is whether to extend the core DOM specification to standardise some of the behaviour that is currently provided by javascript libraries.

  Personally I don’t quite see how this progresses anything – it will just add another way to achieve something we can do already and add inconsistency and confusion around how to approach animation.

  Posted:

  February 12, 2010 @ 11:27

  Categories:

  Development

  Tags:

  animation, css, css3, web standards

  Comments:

  No comments so far

• HTML 5 data- attributes

  One welcome addition to the proposed HTML5 specification is to allow any attribute prefixed with data- to be treated as a storage area for private data. This makes it possible to associate private data with different DOM elements when a page is generated and sent from the server while still validating against an HTML validator.

  Previously it has been possible to temporarily store state information in custom properties against an element via javascript, however embedding state information in a page when generated server-side (and getting a page to validate) always required workarounds. I’ve often resorted to using hidden input elements to expose state information to client-side script, but this should not (and won’t any longer) be necessary.

  Posted:

  February 2, 2010 @ 10:28

  Categories:

  Development

  Tags:

  ajax, html5, javascript

  Comments:

  No comments so far

• Aftermath of DDD8

  I went along to DDD8 at the weekend, a free community event hosted at Microsoft in Reading. It was the first time I’d attended the event, and would really recommend it (if you manage to sign up in the first 12 minutes after registration opens). I think the highlights for me were Hello Document Databases by Neil Robbins, and C#4 by Jon Skeet.

  I had heard a little about document databases being an alternative to relational databases (a slightly alien idea) but hadn’t got around to much research. In particular the session was looking at how to use CouchDB. The design goals are more based around assuming that individual nodes will fail, and having a lightweight, multiple-master setup with changes replicating across nodes.

  From the introduction (which I recommend you read)… A CouchDB document is an object that consists of named fields. Field values may be strings, numbers, dates, or even ordered lists and associative maps. A CouchDB database is a flat collection of these documents. Each document is identified by a unique ID.

  Unfortunately the session didn’t really cover how to apply this concept to a real-world scenario and how to perform useful queries against the data. However it was definately enough to encourage some reading around the subject – I think it’s important to understand the kind of problems where this could be a viable and better solution.

  Posted:

  February 1, 2010 @ 9:47

  Categories:

  Development

  Tags:

  DDD, Development, events, microsoft

  Comments:

  1 comment so far

• DDD8

  I’ll be going along to the DDD event at TVP tomorrow for the first time, quite interested to see what it’s like. Thinking about going to the following sessions…

  • Mixing functional and object oriented approaches to programming in C#
  • Hello Document Databases
  • C# 4
  • Microsoft Surface
  • A developer’s guide to encryption

  Posted:

  January 29, 2010 @ 13:30

  Categories:

  Development

  Tags:

  events, microsoft, tvp

  Comments:

  No comments so far

• Previews of implemented CSS3 functionality

  Although still a work in progress, I hadn’t realised how many of the proposed CSS3 features actually already have some kind of basic implementation in the latest set of browsers. Check out this page which provides live demonstrations of some of the more exciting proposals.

  I think the major things I’m looking forward to are…

  • Ability to specify multiple background images on the same element – so no need to add superfluous elements as styling hooks
  • Multi-column layout – allowing text from a single element to visually flow into multiple columns, much like a newspaper layout
  • Decent support for RGBA – so being able to specify the alpha channel when setting a background colour. This avoids having to cut PNG images in order to achieve a semi-transparent background.
  • Support for specifying colours in terms of Hue, Saturation and Lightness. Although I’m not quite sure how I’ll use this yet, I can imagine this would make animation of colours more intuitive – for example, using javascript to animate the amount of light applied to an element.

  The live examples are really worth looking at, and give a much better feel for what is coming up compared with reading a specification.

  Posted:

  December 17, 2009 @ 14:21

  Categories:

  Design, Development

  Tags:

  css

  Comments:

  1 comment so far

• Problems having a simple, self-contained script with dependencies

  A while back I was working on a javascript based video solution, and I wanted to make it as simple as possible to include a video widget into a page. This would be roughly along the lines of…

     1: <script type="text/javascript" src="blah.js"></script>    

     2:  

     3: <script type="text/javascript">

     4:     

     5:     mycompany.video.addVideoWidget({

     6:         siteId: "Heat",

     7:         keywords: "Britney Spears",

     8:         parent: "Id of the container"

     9:     });

    10:     

    11: </script>

  When authoring a script like this, it needs to be entirely self-contained as you have no knowledge of what other scripts have been included on the host page, or what versions etc.

  The issue is how to offer this script when you have a dependency. In this case I wanted to use swfoject as a reliable way to add a flash movie to a page. Another common scenario would be writing script on top of jquery. An example is Typekit who end up packaging up and distributing jquery as part of the code they require you to download – discussed here.

  Given that you have no working knowledge of the host page, the only possible option is to package up the dependency, avoid naming conflicts, and include it with your script logic. However this seems quite wasteful given that the host page may also include the same library.

  We are so used to using libraries now to make javascript a pleasurable activity, the idea of writing raw script, while possible, is really not an enjoyable prospect.

  I don’t have a good answer to the problem – I ended up going down the same route that Typekit have gone. The only other option is to provide a flavour which requires the host page to implement the dependency, but then you lose the simplicity and are open to tricky issues around versioning.

  Still, I guess life is short and bandwidth is cheap.

  Posted:

  December 16, 2009 @ 16:37

  Categories:

  Development

  Tags:

  javascript, typekit

  Comments:

  No comments so far