I’ve started playing with the JavaScript SVG library RaphaelJS. It looks a really nice library but the very first hurdle I came across was how to set the background colour of the paper. There didn’t seem to be any help in the documentation and trying ‘paper.attr(“fill”, “#f00”);’ resulted in the error Uncaught TypeError: Object #<a> has no method ‘attr’. A less than optimal solution might be to create a rectangle on the paper that is the same size as the paper and fill that with the desired colour. But then all objects would need to sit on top of that element and it just feels messy.
Looking for a different approach I fired up developer tools in the browser and inspected the HTML, it was at this point I realised the solution was probably pretty simple. Using a style sheet and setting a CSS background colour for the <SVG> tag did exactly what I wanted; it sets the background colour nicely and doesn’t need any additional elements.
Just a note about TypeScript Playground, an online REPL for TypeScript. Been around a while, but really useful for trying out a quick bit of TypeScript.
Following on from my original post of learning how to put JavaScript together it’s been a really productive week. Have I managed to write JavaScript that’s easy to test? No, but I’ve wrapped up some reasonably complex logic into a component that can have some of its functionality tested! At the moment I’ve settled on QUnit as my JS unit testing framework and have a couple of tests verifying the default values of exposed properties . . .