John Resig Talks JavaScript and jQuery

I found this video last night, featuring John Resig giving a talk at Northeastern University about JavaScript and jQuery. As the brains behind the fantastic jQuery library, this video is a great opportunity to get the lown-down and some hints and tips "straight from the horse's mouth".




Well worth watching, even if it is little "dry" for non-techies or designers.

Top 10 Firefox Extensions

I love Firefox. Open-source, standards compliant (mostly) and with the added bonus of a huge amount of extensions. So, if you've yet to be converted, download Firefox, and then give some of these extensions a try. If you go back to "the other browser" after spending some time with Firefox, I'll eat my hat..

1. Firebug - If you're a web designer or developer, Firebug is the definately the best reason to switch to Firefox. I'm not going to write a review, just try this top notch suite of development and client-side debugging tools for yourself. Their slogan is "Web Development Evolved". 'Nuf said.
2. Fireshot - Ever wanted to send your client a full page screen-shot, including everything below the fold? What about being able to easy take screen grabs and annotate them. Fireshot is all you need. A really handy little add-on.
3. Web Developer - The Web Developer extension adds various web developer tools to Firefox. It includes HTML and CSS validation tools, a ruler, enabling/disabling JavaScript and CSS and much more. A really good side-kick to Firebug.
4. FireFtp - An FTP client, right inside Firefox, very useful, with SSL/TLS/SFTP support, automatic reconnect and resume of transfers, search and filtering and more.
5. Palette Grabber - This is a useful one, if you like a colour-scheme you see on your web travels, you can grab the color palette for use in Flash, Photoshop, The Gimp and more. Mmmmm handy.... as Homer Simpson might say.
6. Execute JS - An enhance JavaScript console, allowing you to quickly test arbitrary scripts, evaluate properties of an object and more. Well worth a look if you do any JavaScripting.
7. Font Finder - This useful little add-on lets you find out the CSS properties of selected text. Simple, but very useful nevertheless.
8. ColorZilla - Another useful tool for designers, it allows colour picking, colour palette creation, zooming, DOM based colour analysis and more
   
9. YSlow - This add-on for Firefox/Firebug lets you analyse your site for performance issues and and points out problems according to Yahoo's guidelines for high-performance websites.
10. Pencil - The Pencil add-on is a simple tool for making diagrams and GUI prototyping, with built-in stencils for diagraming and prototyping, Multi-page documents and more. A really useful wireframing tool, and its free.

If you are interesting in finding more Firefox extensions and add-ons, have a look at the official Firefox add-ons site. And please, DON'T revert to the dark sIdE..

Free Browser Testing Tool for Designers

As someone who has to deal with the regular headache of developing sites that will reliably look good and perform across mulitple browsers and platforms, this web based tool really caught my eye when my colleague Justin sent me a link to this site.

Some of you may have seen the service offered by Litmus, allowing you to test your sites against a multitude of browser scenarios, and some of you may have even paid to use it, but BrowserShots.org offers a very similar service for free. Result!

You can test to see how your site looks with a massive number of combinations, including with or without JavaScript enabled, different browser versions on different platforms (MAC, MS Windows, Linux and more) different Flash versions and much more. It's well worth checking out, even if you are just curious to see how your site looks!

Bio-Bak: Flash Mentalist Alert!

LOL. What can I say, I have just found probably the maddest web site I have ever seen. I'm not even sure where to start when i comes to describing this site to be honest. Big bright bold colors, crazy characters and sound effects, immersive/infuriating navigation, and some bonkers sound effects(if you think you can hear your hard drive making wierd noises, don't worry, its this site - it took me a while to realise!) .

I love this one so much I'm blogging about it, as well as featuring it on the UKDD showcase.

A definate Site of the Moment! Check it out!

More than one way to skin a cat, continued...

Part 3 Using jQuery.AJAX() to load data and catch loading errors

Well, after a bit of a delay, here's the third part of my tutorial (part 1, part 2) demonstrating different ways of achieving the same result. In this part, I am going to use some more jQuery and CSS to build on what we coded in the last installment, and we are going to use the jQuery.ajax() function to add a bit more sophistication to our word generator.

Step 1 Create your HTML document.

First, we need an HTML document to contain and update our externally loaded content. Our page will contain a display area for the loaded text, and a button which will update the page on demand. It should look something like this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Random words</title>

</head>

<body>

<div id="displayRandomWords"></div>

<div id="displayUpdateButton"></div>

</body>

</html>

Step 2. Add the jQuery library to your page.

As we will be calling upon the magic of jQuery again, we need to include the library in the head of our HTML so, add the following to the head of your page...

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

Step 3 Write the code to do the clever stuff...

Now for the interesting bit. We need to create a function to call the random_words.asp, and if it loads successfully, display the output. We also need a nice preloading graphic to let users know that something is happening, and finally a link to reload new random words, so in your favourite editor, create a .js file as follows, and save it as jq_name_gen_part2.js

// Once the browser is loaded and ready to go...
$(document).ready(function(){

//define the getData function, to handle the data process....
function getData(){
// show the preload graphic....
$('#displayRandomWords').html('<img src="ajax-loader.gif" />');
// get rid of content from link button - It's not needed while data is loading...
$('#displayUpdateButton').empty;
// now setup the jQuery.AJAX function
$.ajax({
  // type can be GET or POST....
    type: "GET",
    // file name of data to be loaded...
    url: "random_words.asp",
    // dataType - Use this to prevent unexpected results with loaded data
    dataType: "HTML",
    // Define function that fires when data is successfully loaded...
    success: function(data){
      // Build the Reload link...
    $('#displayUpdateButton').html('<a href="#" id="aReloadData">Reload...</a>');
    // Display the output from our server-side script...
    $('#displayRandomWords').html('<strong>'+ data +'</strong>');
    // setup the click event handler for the reload button...
    $('#aReloadData').click(function(event){
     // fire the getData function on click to reload new words...
     getData();
    })
  },
  // a simple bit of error trapping. If there is problem loading the data, show an error message...
  error: function(){
    $('#displayRandomWords').html('Oops, we seem to have hit an error!');
  }
 });
};
//Fire the getData function first time out to populate the elements onLoad....
getData();
});

Step 4: Make sure your .js file is included in the head of your HTML document, below your call for jQuery itself.Your HTML should now look like the following piece of code. Notice I have also included a CSS file to make it look a bit nicer too. You can download all the source code for this part of the tutorial from here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="name_generator_demo.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

<script src="jq_name_gen_part2.js" type="text/javascript"></script>

<title>Random words</title>

</head>

<body>

<div id="displayRandomWords"></div>

<div id="displayUpdateButton"></div>

</body>

</html>

If you want to see it all running in your browser, click here...

In the next part, I will show how to use Flash and Actionscript 2 to load and display external data, so check back soon.