The Complete Guide for the jQuery Developer

Always on the lookout for useful stuff to share, I found The Complete Guide for the jQuery Developer today. Chirag Chamoli at WhiteBoard has compiled a really good list of useful jQuery resources, including blogs, tutorials, plugins, and more.

If you are interested in learning jQuery, or polishing up your skills, it's a great place too start. It's also worth checking out if you are looking for a specific plugin.

Note: Ignore the top list of links, they are all dead.

Cheers Chirag, top post!

Essential jQuery Controls

I've been doing an awful lot of jQuery coding of late, and at last, jQuery has been elected weapon of choice by other developers on the team too. As a result, it's been interesting seeing what some of the other guys are playing with.

JP sent me these links today. If you need some good jQuery interface controls, start below...

30 Essential Controls : Theresa Neil gives a good breakdown on 30 essential interface controls including AutoSuggest, Charts & Graphs, Dialogs, Comboxes etc, and which JavaScript libraries support them. Handy.

Essential Controls List : If, like me, you work almost exclusively with jQuery, this page lists the Essential Controls for jQuery, and where you can find them. REALLY handy!

Noooo, an Aptana weakness!

Well, I hate to say it, but I think I have found a bit of an issue with the otherwise amazing Aptana.

I have recently been working on a quite complicated JavaScript/jQuery project, and trying to keep myself organised, I have tried to make use of Aptana's Bookmarks and Tasks functionality. The problem is, that you spend time bookmarking functions etc, and meticulously adding tasks as they arise, hoping to keep everything under control and within easy reach, then, if you use CTRL+SHIFT+F keyboard shortcut to format your code, it leaves your Tasks and Bookmarks in disarray if you're lucky, and if you are unlucky, they just disappear. You also lose your Tasks and Bookmarks if you edit the .js file with any other editor. Not good.

In my opinion, this is a fairly major issue. What's the point of taking the time to add bookmarks and tasks if they're not persistent? It's got to the point now where I've gone back to using Outlook for handling my task list. Arrgh!

If anyone else has seen this and found a fix, please let me know.

Back in the Day...

Musings about the bad old days of web design/development

Apologies in advance, for my lack of posts for the past couple of months. Inexcusable I know, but unavoidable. Life and work take precedence I'm afraid.

Grovelling aside, I thought I'd share my thoughts regarding where web designers/developers stand today, regarding the use of JavaScript, compared to "back in the day". I built my first site back in the early/mid nineties, and since then moved away from HTML/CSS/JavaScript towards Flash based solutions, and then over the past couple of years found myself ignoring Flash almost completely, unless the project requires video.

Why the change? Simple. JavaScript has grown up, CSS is more widely supported and HTML doesn't need any plug-ins. I used to be a bit of a Flash evangelist, and used it at every possible opportunity. I loved it's ability to do things that plain HTML just couldn't do reliably across browsers. Both in terms of layout, and functionality. I also found ActionScript 1 and 2 to be easy and accessible, which as a designer rather than hard-core developer was important. I genuinely believed that the Flash platform was going to completely change the Internet. Man, was I wrong! (alright, alright, Flash has changed the landscape, but not for the initial reasons I thought it would).

Today, that's all changed. The emergence of robust JavaScript libraries such as MooTools, ProtoType ,( and it's sidekick Scriptaculous), ExtJS, or my personal favourite jQuery, has had a noticable impact on web design and development.

I am currently working on an in-house tool that will eable users to manage and troubleshoot stored database queries and parameters. the current version is hideous (admittedly it is pretty old and was built by programmers rather than designers), and uses old-school JavaScript, HTML tables based layout, and requires visiting several pages to edit/view different elements of the data. The current results pages returns, on average a 900kb web page and is slooooooooow to say the least.

The new version is a different animal entirely. Using jQuery, I have been able to enhance it's functionality beyond all recognition. Users can now view/edit/delete master/child data sets within the same page, with data only being loaded when required, and only sections of the page changing rather than complete reloads. Using the amazing jQuery library, I have been able to reduce the HTML weight to less than 200kb (a roughly 75% saving on filesize), and at the same time produce a tool that performs faster, is easier to use, and allows users to get better results. In less than 6 weeks. Impressive stuff. I'm not bragging, saying "I AM A JAVASCRIPT GOD". What I am saying is...

How did we do it back in the day? jQuery has saved my life.

Why are you still here? You should be giving unobtrusive, library-based development a shot....

A quick apology...

I've not posted for a few days, due to pressures in my workload. So, apologies to those of you, (if any) who are waiting for an update.

Things are a little busy at work, and as a result, I've not had time to post. I have, however, had chance to use Adobe's new CS 4 Production Premium edition, and, I'm afraid to say, so far, it's a bit of a mixed bag, most notably...

Flash cs4 Bone and IK - Good idea, but on first impressions, a bit flaky in practice...
Photoshop cs4 Extended Edition Open GL 3d support - Another really good idea, works brilliantly on my workstation at the office, but I have to disable it on my laptop, which ISN'T old by anyones standards, and has a dedicated 512mb video card.

More thoughts about CS4 as I get the chance to give it a hammering...

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.