I’ve been using Wingwares python IDE for Django development for almost 2 years. The Wingware IDE has been very good but I have had a few superficial annoyances with it so decided to look around and see what other IDE’s I could use. This led me to Eclipse. The first time I had a look around for Django IDE’s I remember looking at Eclipse but I think I recall difficulties when trying to run Django projects. Eclipse doesn’t natively support Django, you have to install Pydev to get that. After revisiting Eclipse and Pydev I can safely say I’ve switched from Wingware to Eclipse for Django development. The Eclipse IDE in itself is very good and full of useful development features. The Pydev plugin for it which allows python and Django development is also fantastic as it has a GUI for creating and managing Django specific python projects. Another great feature of Eclipse is it’s free price tag where as a single developer license for Wingware is $179 (roughly £115).

To get my Eclipse set up for Django I installed the following:

Then I read through and followed a few guides to understand Pydev and Django support:

In less than an hour I was up and running and fully understood how to start and develop Django projects in Eclipse. I’d even moved 3 existing Django projects into Eclipse in that time.

Sorry Wingware, you’ve been good to me but I’m trying Eclipse for a while and I don’t think I’m coming back.

Since I posted last about the SVG Sketch page I have added some new features to it. I added the ability to post your sketch and then view it along with other peoples sketches in the gallery. I just thought it would be fun to be able to see sketches that others have drawn. So far it’s just been a few of us at work posting sketches when we’re procrastinating!

Take a look: svgsketch.tomcoote.co.uk

We have been playing (eh hem… working) with SVG in the office just recently for a client. I can’t really talk about the client work we are doing apart from saying it’s pretty damn cool. Besides that, we have been dreaming up some other playful idea’s using SVG and I’m going to show one of them here. Steve initially came up with this idea along with the phrase “get it done” followed by “is it done yet?” a few seconds later.

It’s an SVG sketch game. I built it using the wonderful Raphael JavaScript library which enables you to dynamically build SVG elements in a document using JavaScript.

It has some really cool touches like having to shake it to clean away your current drawing. You can use your keyboard arrow keys or click the buttons with your mouse to work it. There isn’t really much more to say other than to go and have a look at it. Check out the JavaScript if you’re interested in knowing how it’s working.

Recently Steve came up with an idea for cool delete confirmation messages. So it started off with him saying “wouldn’t it be cool if when you deleted something one of those old batman comic actions displayed on the screen!” in his excited idea voice and his Scottish accent (a strange mixture I know).

So Steve went a away and did some CSS3 magic to get a really nice animation working that showed these messages in the web browser just like they used to on the old batman tv shows. Whilst this was looking good the problem he found was that really the animation needed a few stages  - set the starting position, animate out then animate back in. After each stage of animation the next had to start and it needed to be seamless. Using CSS3 Steve was able to create each animation but to get them to work he needed to hook them up to actions that relied on the user to initiate.

So Steve handed his work over to me and asked me to see what JavaScript I could use to get his animations all working seamlessly. I added in some JavaScript which waited for each animation stage to finish before starting the next animation.

It turns out that by using CSS3 we could achieve these animations in a few lines that would normally take a huge amount of code if written entirely in JavaScript. Then by using JavaScript as the controller we could manipulate the CSS3 to work when we wanted it to.

So to view this happy combination of CSS3 and JavaScript have a go with our demo – batman style delete confirmations. Be warned that because of it’s reliance on CSS3 transforms you will need to view this demo in Chrome, Safari or Opera. At the time of writing this blog, only Firefox’s current Beta release supports the CSS3 transforms and IE is….. well, IE.

There is so much talk right now about getting the web sites we build to work at speed. They must load quickly and react to user interaction quickly because running at lightning speed is the goal. Well I’m going to say that it’s not that black and white and that speed is often the wrong approach when it comes to a good user experience.

Think about if you were on an express train, one of those trains that runs straight through many of the stations without stopping. Imagine that as it ran through a station you caught a look at someone standing on the platform that looked like someone you knew. The problem is that the train was going so fast that you couldn’t get enough of a look at the person to tell if it was who you thought it was. You’re now left wondering, wanting to go back to have another look and all together frustrated.

Obviously the speed and responsiveness of a web site is important, but not always. A good example would be an input box that allows the user to input their name which has a save button next to it. The save button uses AJAX to post the users name back to the server behind the scenes. When the user presses the save button a little moving icon shows to inform the user that the save is taking place. Once the save is finished, a message appears to state it’s success. Often, the save works so quickly that the little moving icon that was meant to inform the user of the save shows and hides at the blink of an eye. The problem here is that the user is confused with something that flashed onto the page, what was it? Was it a message? So did my name save or was the thing that flashed up something important?

So all I’m saying here is that if you’re going to give feedback to your users allow them time to receive and understand that feedback before you take it away. It only takes half a second of delayed time, that can easily be done in JavaScript, to allow your users the benefit of that feedback that you took the time to put in place anyway.

A few weeks back now I got the chance to go to the future of web design conference which I am thankfull to my employer for. The speakers at this conference where fantastic and the topics were extremely interesting.

Whilst there I listened to a talk by Aral Balkan which was nothing short of amazing. Aral talked about the art of emotional web design. His presentation was so interesting and refreshing, it inspired me.

I class myself as a developer but a developer who is an avid fan of design. Something that I liked a lot in Aral’s talk was his complaints about loading bars on the web. The message was that these loading bars only offer the user the correct feedback if the actual loading happens on time with out any problems. If something takes a bit longer or something breaks entirely then the user is left with incorrect feedback resulting in frustration which effects their user experience…. and their day!

The solution to the dreaded loading bar or icon, as Aral went on to present, is to offer the user feedback that shows emotion and sympathy. Instead of an infinitely long animated loading bar the idea is to talk to the user about what is happening whilst they wait. When things are taking too long, let them know that something has probably gone wrong.

So to get to the point of this post, I had done a little thinking and realised that it’s things like this that often but wrongly get discarded from projects for what ever reason/excuse. In my opinion it’s these touches that turn a decent product into a great product. That said, I set about creating a nice and easy JavaScript function which I will start using for my client work and personal projects immediately.

function loadingFeedback(data) {
var timeouts = [];

for (var i = 0; i < data.length; i++) {
timeouts = window.setTimeout(function(details) {
return function() {
document.getElementById(details.elementID).innerHTML = details.msg;
};
}(data.seconds * 1000);
}

return timeouts;
}

So the idea is that some ace designer has given us developers a load of different loading messages to show to the user whilst something on a web site is loading. Usually we'd complain and moan that we now had to get these messages to show and it would be really hard... blah blah blah. However with this bit of code it becomes extremely easy. You just call it when something needs to start loading and pass to it an array of messages to show. The following is an example of calling this function.

function loadStuff() {
var loadData = [
{
elementID: 'loading',
msg: 'Loading...',
seconds: 0
},
{
elementID: 'loading',
msg: 'Still loading, won\'t be long now.',
seconds: 3
},
{
elementID: 'loading',
msg: 'Arrrghhhh! This is taking ages',
seconds: 7
},
{
elementID: 'loading',
msg: 'This isn\'t good ',
seconds: 12
},
{
elementID: 'loading',
msg: 'Sorry, something must have broken. I understand your frustration tell us about it.’,
seconds: 18
}
];

loadingFeedback(loadData);
}

I think it’s pretty self explanatory, it places the message into the element on the page with elementID when the seconds for that message have passed. The messages I’ve put in that example are not brilliant but they could also contain HTML instead of words which would probably be more likely. The loadingFeedback function also returns an array of timeout objects so that if you need to cancel the loading messages you can simply loop through them and call window.cancelTimeout on each.

So I hope this has made things a little easier for some others. I’d really love to see the dreaded loading bar become a rarity instead of a common sight on the web and in other apps.

I have been using a tool called Sphinx to help write some documentation recently. Writing documentation is boring, time consuming and rubbish. Sphinx doesn’t magically make all those problems go away but it is a great tool none the less.

• It has a nice fluid syntax which is near to how I’d normally jot down notes in notepad.
• It’s layered so that it separates the actual documentation files from the presentation of those files.
• Presentation can be in the form of a complete HTML web site or PDF (amongst others) and this is all done automatically for you.
• It allows for theming of the HTML output so you can integrate you’re documentation directly into your web site.
• Creation of contents tables, index pages and search area is all done, no effort required.

I’ve tried writing documentation both in a word document and as a HTML web page. Both methods are a nightmare to manage with infinite page long word documents and the constant need to write all the HTML tags/links for the web page method. I just want to write the words that make my documentation and that’s what Sphinx lets me do.

Now where can I get a GUI for it?

The busy world of web development is fast paced and always changing, so because of this I love to read other web developers blogs to gain experience from them. In fact it’s a great way of learning as it’s free and you’re gaining the kind of knowledge that you’d be lucky to stumble upon in your everyday life or knowledge that would other wise cost you for the privilege. However, I’ve recently realised that I’ve been doing web development now for a long time and maybe I have things to say about it. So this blog will be about sharing my experiences with who ever happens to be reading. I’ll be blogging about things like productivity tips, project development, new technologies/ideas and various business experiences.

I’m not one for adding content for the sake of it and guess what… I’m a busy web developer. That said, I’ll be blogging when I’m inspired to do so.

So happy reading.