Thursday, 24 December 2009
Development Environments
Monday, 2 November 2009
JavaScript Libraries
Here are my thoughts on YUI and JQuery after some research.
I started off looking at YUI (http://developer.yahoo.com/yui/). Straight away I found YUI ( I was using the latest version 3 ) to be quite confusing, the download unpacks on to your machine 2000 files, including the core libraries and many additional extensions.
YUI appeared to be very good, the supporting website has a lot of information and the examples show off some very neat functionality. However I once again struggled to get to grips with YUI as the examples are very specific and never really show why or how YUI should be used, which makes solving generic problems rather difficult.
I spent the evening playing with YUI, but struggled to make much headway and couldn't see easily how I could achieve what I wanted with this.
I next had a look at JQuery (http://jquery.com/) and instantly the whole experience was different. The website offers two downloads, either a single development JS file or a minified production version. The examples on the website appear to be written by developers and in that respect provide introductions to JQuery as a general solution, with specific coded examples.
In contrast to YUI, I found JQuery to be far easier to understand and instantly felt at home. I worked through an example or two and then felt happy enough to go it alone with just the API reference. What a difference!
In summary, if I had to recommend a javascript library to use, I would suggest JQuery. I found it lightweight and powerful, while YUI was confusing and hard to understand.
If you are interested in JQuery there is some great examples online, but here is my demo code which maybe helpful. I have included all of the code in a single file and put all of the methods inline, for clarity really.
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title></title>
<style>
.canvasElementOffline
{
border: 1px solid red;
}
.canvasElementOnline
{
border: 1px solid green;
}
</style>
<script type="text/javascript" src="../scripts/jquery.js"></script>
<script language="javascript">
$(document).ready(initialise);
var mouseDown = false;
function initialise()
{
// Add Page Handlers
$().mousemove(pageMouseMove);
// Initialise Canvas
initCanvasElement();
}
function initCanvasElement()
{
// Configure the UI
$("#canvasElement").removeClass("canvasElementOffline");
$("#canvasElement").addClass("canvasElementOnline");
// Add Canvas Handlers
$("#canvasElement").mouseup(canvasMouseUp);
$("#canvasElement").mousedown(canvasMouseDown);
}
function canvasMouseDown(eventObject) {
mouseDown = true;
}
function canvasMouseUp(eventObject) {
mouseDown = false;
}
function pageMouseMove(eventObject) {
$("#inputMouseX").val( eventObject.pageX );
$("#inputMouseY").val(eventObject.pageY);
$("#inputMouseState").val( mouseDown );
}
</script>
</head>
<body>
<canvas id="canvasElement" height="300" width="300"></canvas>
<input type="text" id="inputMouseX" />
<input type="text" id="inputMouseY" />
<input type="text" id="inputMouseState" />
</body>
</html>
Friday, 23 October 2009
Windows 7
Wednesday, 10 June 2009
Taking a bite out of Apple
Monday, 8 June 2009
Top Search
Incidentally I was suprised to find the Bing would be better for me than Google.