Anatoly Zenkov (flickr) has created a great little Java app which will record your mouse pointer movements over your screen and then save the image of all your mouse movements. You get some great screenshots (have a look at some of the comments on the flickr post).

You can download the little Java App from here PC, Mac

Here are some of my screenshots below. The best thing about this app is that it makes a great tool for UI testing. You can see where a user clicks and their mouse paths really easily!

No related posts.

I got a lot of feedback from my post last week about optimizing JavaScript, everyone seemed to love the image of the rocket I had. So I decided to give it away free, it was one of those drawings I did years ago.

You can download it now, its available in .ai, .svg and a .png file.

No related posts.

JavaScript is in the middle of a massive comeback and developers are abusing it. JavaScript addons and widgets are becoming are the norm for large sites and are so easy to install, in large numbers and quantities. For example Mashable loads nearly a mega byte in JavaScript files. In this article I will go through some tips to help you optimize your JavaScript and reduce both the load on your servers and make your pages respond faster.

Cut code

The first and biggest thing you should do in optimizing your JavaScript is to cut down on the size, cut out functions that don’t do a lot and try and reduce the size of your file. This goes along side with the question do you need a framework? Think it through, is your site big enough to warrant loading a full framework (typically in excess of 3000 lines), if you just want to do some very simple functions write them in JavaScript without a framework.

If you really need to load a framework use the ones available on the Google AJAX libraries API, most frameworks are available. These are just the frameworks hosted on Google, they work of the principle that if one website uses these files then the user will still have the files in the browser cache and won’t need load them again.

Minimize

Run your code through a JavaScript minimiser, this will shrink all the files to be really small there are a number of popular ones available (this is also applicable for CSS):

• Bundle Fu – http://code.google.com/p/bundle-fu/
• Pack:tag – http://sourceforge.net/projects/packtag/
• JSMIN – http://www.crockford.com/javascript/jsmin.html
• YUI Compressor – http://yuilibrary.com/downloads/#yuicompressor

Expires headers

Set your expires headers, this should be standard for all your static content like CSS and Images as well. A browser may need to make many requests to your server in order to get all the content, by using an expires header you make those components cacheable for a set period of time, therefore the browser will need to make less HTTP requests. For a more detailed explanation, as well other components which need improving reading the Yahoo Developer Network Guide on optimisation.

Loading Scripts Asynchronously

Browsers are only single threaded, this means that it can only really load one thing at a time. However there are ways around this, and ways you can load multiple files without locking up the browser. Give Steve Souders articles on Loading Scripts without Blocking if you are interested in implementing this. I am currently working on a prototype based class to do this which will be published on this blog in the coming months.

Defer JavaScript Loading

Steve Souders talks about deferring JavaScript loading in his series about high performance websites. It’s quite a simple idea really, don’t load up the JavaScript until you require it. Therefore if your JavaScript is not needed on page load this should be deferred to be loaded up later.

Evaluate

Make sure you evaluate your performance when trying to optimize JavaScript. I personally love the Firefox plugin FireBug, and it’s plugin YSlow. However there are lots of other methods and tools you can use to evaluate you performance, the best by far is the firebug profiler. Micheal Sync has a fantastic tutorial on the FireBug profiler which is well worth a read.

Related posts:

1. JavaScript Halloween Effects
2. Scriptaculous ScrollTo
3. JavaScript Check/Uncheck Checkboxes

Original Source: http://giancarlo.dimassa.net

There have been many examples of bouncing effects in scriptaculous but this one has to be one of the most realistic. It uses the equations developed by Robert Penner to accurately represent a bounce, and it does look cool.

What you need

As with most of my tutorials this is based on scriptaculous and prototype, but the equations could easily be porter to other animation frameworks.

The code

This is really simple, basically what we are going to be doing is to add a new transitional effect to scriptaculous. To do this we just extend the Effect class.

Add this to your own JavaScript file instead of scriptaculous, so you don’t loose it when you update.

/*Based on Easing Equations v2.0
(c) 2003 Robert Penner, all rights reserved.
This work is subject to the terms in http://www.robertpenner.com/easing_terms_of_use.html

Adapted for Scriptaculous by Ken Snyder (kendsnyder ~at~ gmail ~dot~ com) June 2006
*/

Effect.Transitions.Bounce = function (pos) {
    if (pos < 0.36363636363636365) {
        return 7.5625 * pos * pos;
    } else if (pos < 0.7272727272727273) {
        return 7.5625 * (pos -= 0.5454545454545454) * pos + 0.75;
    } else if (pos < 0.9090909090909091) {
        return 7.5625 * (pos -= 0.8181818181818182) * pos + 0.9375;
    } else {
        return 7.5625 * (pos -= 0.9545454545454546) * pos + 0.984375;
    }
}

Use it

You can use this effect as a transition type with lots of effects.

new Effect.BlindDown(div, {
    duration: 0.5,
    transition: Effect.Transitions.Bounce
});

Check out Ken Snyder’s blog for more transitional effects.

Related posts:

1. Scriptaculous ScrollTo
2. JavaScript Halloween Effects
3. JavaScript Check/Uncheck Checkboxes

I thought I’d share some of my CSS habits/top tips, some of my habits may be more controversial than others, but it’s always good to share.

Looking Pretty

Always remember to format your CSS nicely. Most CSS coders are designers, and love to make things look pretty, which also makes the CSS easier to read.

One line CSS declarations – I always put my entire declaration onto one line, it makes declarations a lot easier to find, and even better if you keep your properties in alphabetical order.

Use Shorthand – My rule is that if you are setting any more than one property use shorthand, here’s a clue to what I mean:

/* You could right */
.dummy {
   margin-top: 10px;
   margin-bottom: 10px;
}
/* but what's the point when this exists */
.dummy { margin: 10px 0px; }
/* or even */
.dummy { background: url('myimage.jpg') blue no-repeat left top; }

Shortcuts – When your CSS file becomes massive instead of splitting the file up into manageable chucks, which causes unnecessary hits on your server, just split the file with comments. If you use a wild card character like @ you can easily search for specific sections.

Make things easy

CSS is tricky, so use tools to make it easier.

Grids – While I am still debating whether grids are appropriate for smaller scale projects, if you use a wide variety of different layout, or are having trouble with the compatibility of your current layout take a look at CSS grids, there are loads available such as Blueprint and the Yahoo UI.

Check – Always validate your code, i personally run mine through Microsoft Expression Web which checks for bugs, you can also use the W3C Validation Checker.

W3C CSS Validation Checker

Avoid using too many selectors – Just specify the minimum number of selectors needed. A td always appears within a tr which always appears within a table. If you find yourself nesting your selectors like the example below, you are probably being too verbose.

table tr td {...}
/* is the same as */
td {...}

Points, they all add up

Don’t forget that all the different selectors have a different weighting (also known as specificity), and the ordering of your selectors will affect which one has president.

A selector’s specificity is calculated as follows:

• count 1 if the declaration is from is a ’style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
• count the number of ID attributes in the selector (= b)
• count the number of other attributes and pseudo-classes in the selector (= c)
• count the number of element names and pseudo-elements in the selector (= d)

The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document’s DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

- Taken from the W3C specification

Browser Support

Avoid supporting anything but the most recent browsers. I don’t know anyone who use IE5 anymore do you? Also stop uses hacks for IE6, some careful rethinking and workarounds could be explored before resulting to using hacks. With the less hacks the more you can avoid having a separate style sheet for each browser. If you look at Wikipedia in source view you will see they have a separate style sheet for IE5, IE5.5, IE6, IE7.

Set things up

Spending a couple of minutes at the start of the project setting up all your colours and classes could save you hours in the long run.

Utilities – Build a set of CSS utilities which you could use everywhere. E.g.

.left { float:left; }
.right { float: right; }
.overflow { overflow: hidden; }
.clear { clear: both; }
.pad { padding: 10px; }

Define your colours – Define your commonly used colours at the start of the stylesheet then you will always know where they are for easy reference.

Keep Things Simple

Always go back and try and make your code simpler, and remember to comment everything. This make it easier to find changes and edit them. There is no need to get any more complicated than you need to be. For some more tips check out Smashing Magazine who have a great article on CSS ideas.

More Resources

W3C Tricks & Tips

20 Useful CSS Tips for Beginners

Top CSS Tips (snooka)

Related posts:

1. CSS3 Selectors :last-child
2. Super CSS, the power of the selector
3. Tips on Christmas Wrapping

It’s coming up to Christmas again and you should be thinking about wrapping up all those presents that you have brought this year. In this handy blog post I will give you some of my tips and how to wrap the perfect present.

Choose A Colour Scheme

That’s right, why shouldn’t wrapping be like anything else you design? Wrapping should be part of the present you are giving, it would mean a lot more to someone if they know you have taken the time and care to wrap your present properly and professionally.

You ideally want a nice colour scheme of about 2 to 3 colours, try not to over do it. I find the most simple colour schemes are the best, this year I have gone for a red and white colour scheme, as shown above. I would recommend staying with traditional Christmas colours, like white, silver, gold and green. However you might want to try different colour schemes, but you would be hard pushed to get a different colour wrapping paper at this time of the year.

Paper

There are 100’s if not 1000’s of different paper designs available at this time of year, I would say that it is always best to go for a simple plain colour. It gives a much more professional look, ends up being a lot cheaper and won’t have to match the pattern on the join between the two ends.

Always try to go for a high quality paper, the basic rule is the ticker the paper. Particular types of paper like foil are a lot harder to crease, so my advice would be to try and avoid them as much as possible.

Know Your Ribbon

There are many different types of ribbon you can get, here are the 3 basic types:

1. Standard material based ribbon, like the red polka dot one above. This gives your presents a very elegant solution, however it is expensive and not very good for tieing bows.
2. Wired material based ribbon, this is like the material one, but has wires running either side meaning it will keep it’s shape when formed into bows.
3. Paper based ribbon, can be brought in cheap vast quantities. However this ribbon can be tacky if overused.

The most important thing to remember is to buy your ribbon early and buy lots of it. I brought this ribbon at the beginning of November, by the start of December it was all sold out. The especially happens for ribbon in the popular Christmas colours.

Remember after all the present giving has happened to go round and retrieve your ribbon before it goes into the bin, you never know you might reuse it next year.

Tags

Tags are quite easy to get right, especially with services like Moo which is a business card service, however they allow you to print any pattern onto the front of a card. You can get 100 for £13, that’s 13p a card, cheaper than most high streets.

If you can’t find a tag that matches you can use another method of cutting pieces of card out and sticking some of the large off cuts of wrapping on it. It’s best to use double sided sticky tape for this, glue sometimes leaks through (depending on how thick your paper is).

Learn How To Wrap

Lots of people think they know how to wrap a present but you should really learn and practice before starting on the mammoth number of presents you have to wrap. There are lots of online guides, I mostly wrap in the style laid out in the tutorial on eHow. Remember to make the wrapping easier for yourself buy putting things in boxes, it is a lot easier to wrap a box then a circle.

Share

Share your tips and tricks for wrapping in the comments below.

Wrapping Inspiration

1. Impressive Gift Package Design Inspiration For Christmas
2. Christmas Wrapping Ideas – Channel 4

Related posts:

1. Tweetmeme Revamp
2. Five Fantastic Colour Scheme Generators
3. CSS Tips

Of all the CSS3 selectors the structural pseudo-classes have to be my favourite. In particular I love :last-child selector, the :last-child CSS selector is incredibly powerful especially when positioning elements in a row, I am currently finding it incredibly useful when doing menus. Instead of providing a last class on the very last element in the row, you can now use pure CSS to achieve the same effect.

CSS 2.1

/*Each Element*
.image { margin-right: 5px; height: 20px; width: 20px; float:left; background-color: red; }
/* remove the margin on the last element so it lines up
.image.last { margin-right: 0px; }

CSS 3

/* parent of the image element */
.parent div:last-child { margin-right: 0px; }

The Downside

Unfortunately the bad aspect of this selector is that it does not fail gracefully. Meaning that a user in a none CSS3 compliant browser, (IE), it would fail horribly, this means that everything will be out of line.

Example

If you look at this in anything but a browser which supports CSS3 the last element will be on the next line.

More Resources

1. W3C Selectors Level 3
2. CSS3 Compatibility Table
3. MSDN Compatibility Table (tells you what works in IE8)
4. Take Your Design To The Next Level With CSS3

Related posts:

1. Super CSS, the power of the selector
2. Highlighting Forms
3. CSS Tips

This tutorial is a really simple one and is only a one liner in prototype (slight more in regular JavaScript). It will check all the checkboxes on a page, and a function to uncheck all checkboxes quite handy really especially if you are dealing with long lists.

Check All

$$('input[type="checkbox"]').invoke('writeAttribute', 'checked', 'checked');

What we are doing here is selecting all the inputs of type checkbox and enumerating over them writing a check attribute to each one.

Uncheck All

$$('input[type="checkbox"]').invoke('removeAttribute', 'checked');

As you can guess this just the opposite way round.

JavaScript

You can do the same basic principle without a framework:

// check all
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
	if (inputs[i].type == 'checkbox') {
		inputs[i].checked = true;
	}
}

// uncheck all
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
	if (inputs[i].type == 'checkbox') {
		inputs[i].checked = false
	}
}

That’s it there isn’t really much to it, but I thought it was worth sharing.

Related posts:

1. Highlighting Forms
2. JavaScript Halloween Effects
3. Bouncing JavaScript Tutorial

JSONP was proposed as grabbing data from external domains avoiding the cross script scripting limitations (see this Ajaxian article for more information). It requires a call to an external API where you specificy the a callback function, you do this through the use of script tag. For example:

<script type="text/javascript" src="http://yourdomain.com/api?callback=myfunction"></script>

When the script tag has been loaded your function would be called with the JSON data, like so.

myfunction(‘some JSON data’);

However you become reliant on that external service to always be available, if for any reason that service goes down you wouldn’t get any data and your page would be likely to hang.

Therefore I propose a system of JSONP stacking, quite simply you stack up your JSON requests if you don’t receive a response in a set time it will stop the request.

This can be easily achieved by having the following function:

// callback function
var _c = false;
// success flag
var _s = false;

function JSONPStacking(url, callback) {
	// create the element
	var script = document.createElement('script');
	// set the source
	script.src = url + '&callback=callback';
	// render the element
	document.appendChild(script);
	// start the counter, this one last for 5 seconds
	setTimeout(function() {
		if (!_s) {
			// remove the element
			document.body.removeChild(script);
		}
	}, 5000);
}

function callback(data) {
	// say the data has been received
	_s = true;
	// call the callback with the data
	_c(data);
}

Basically what we are doing here is to create a normal JSONP request by creating a script tag and loading it into the body. However we are overriding the standard callback function with our own one, callback. When the request succeeds this will call that function with the data and in turn we call our success function. If 5 seconds have past the timeout will trigger, see if the success flag has been set if not it will remove the element from the DOM thereby stopping the request.

That’s it, it is a really simple principle but will hopefully stop your site from hanging on long request, such as for the Twitter widget. It will also make your widgets that you build a lot more stable and won’t overload your site.

Related posts:

1. JavaScript Weather
2. JavaScript Halloween Effects
3. Scriptaculous ScrollTo

Twitter is quickly gathering pace and is fast becoming one of the most popular social networks. I have been using Twitter for nearly 2 years, mostly through their use of 3rd part applications like TweetDeck or Tweetie. I thought to myself why do I, and many other ‘power’ Twitter users not use the web interface? So here are some of my suggestions on how I would improve the Twitter UI.

Twitter home page design at the time of writing the article, including some reference points.

I will be focusing on a number of parts of the home page, the main ‘tweet box’, the implementation of the ‘lists’ area, how the data is presented and the integration with search. This is not meant as a critique of Twitter, but more as some helpful suggestions on usability.

Tweet Box

For lack of a better word, the tweebox is the textarea located at the top of the twitter homepage. I would really love to see it improved in a number of really simple ways:

• The ability to press enter to submit a tweet. Tweets aren’t multi lined and there is nothing else to do so why not make enter submit the form instead of press the button. Twitter has this problem in a number of other area’s as well, OAuth screen!
• Autocomplete the usernames in the textbox.
• Auto shortening. Twitter has already partly done this for really long links, but it would be nice if you could have the option to do it on the shorter links as well.

Page improvements

The live update of tweets, you know the little yellow box which tells you how many are waiting, is a fantastic addition. But I think they are missing the key points, why wouldn’t you show the tweet? I just find it really annoying.

The page is currently geared up to just tweeting. Users probably use the Twitter interface more to manage their tweets and accounts, maybe the front page should be geared in that direction.

Other

The lists nor retweets seem to be fully integrated into the UI they just appear to be something strapped onto the edge. It would be great if you could, for example, have tabs across your timeline which listed your most popular lists.

It would be great to hear your thoughts on how you would make twitter better, you never know maybe Twitter is reading this.

Better Twitter

Hopefully my recently released Firefox plugin Better Twitter will solve most of these issues.

Related posts:

1. Better Twitter
2. What’s wrong with Tweetdeck
3. Twitter T-shirt Version 2