This is the follow-up to my post entitled 10 Tips for Budding Web Programmers and Designers.

As a developer, you must consider yourself a man/woman of his/her trade. The best blacksmith, tailor, hairdresser, woodworker, they all prize the tools of their trade. In your trade, you will become very fond of your tools and take great care of them. The beauty of this industry is that many of the tools are free and open source. I don’t need to give up my tool for you to be able to benefit from it — all I need to do is share it with you.

What is Web 2.0?

A very overused and misconstrued phrase. In this article, I use the phrase in the sense that you probably understood it as: a website with good looks and slick interface.

The real definition is “…a perceived second generation of web-based communities and hosted services — such as social-networking sites, wikis and folksonomies — which aim to facilitate collaboration and sharing between users.”

While this definition remains true, shiny logos, AJAX, and animations are still given the Web 2.0 stigma.

1. jQuery - Change the way you write Javascript

If you want a fancy interface, this is the tool for you. jQuery is releasing something called jQuery UI on Sunday, September 16th. It will consist of lots of prebuilt animations and functions, similar to Scriptaculous (which you should never use on a real production site).

Not only does jQuery make Javascript fun to write, it makes Javascript easy. What used to be tedious, is now one line of code. I personally have created effects that normally would take me 10-20 lines of code in one line.

With jQuery, you can have minimal Javascript experience and still handle the DOM like a pro. I use jQuery for everything now, and rarely to I find the need to use raw javascript.

Example:
Click here if you want to see something cool

I’m glad that you clicked.

Code:
$(’#jq_example’).fadeIn({complete:function() { $(this).animate({left:100})}});

The code basically says: Fade in the element with id jq_example, then when that is complete, move it left 100 pixels.

Yes, it’s that easy. Yes, other things are just as easy.

Useful jQuery Resources

• Visual jQuery - A good way to quickly look up a function and it’s syntax. Though it’s starting to get seriously out of date and I hope they update soon.
• jQuery API Browser - More detailed look at the jQuery API’s functions. Also becoming outdated.
• jQuery.com Documentation - More up to date, made by the developers.

Go to jQuery’s Homepage »

2. Dean Edward’s Packer - Compress your Javascript

Another must have in terms of Javascript. With Dean Edward’s Packer, you can compress your Javascript and reduce the size of your file by up to 70%. Add some server-side gzipping and your files will be tiny. The advantage that this brings you is a faster loading site. Even though most of your visitors will be on high speed connections, saving kilobytes here and there makes a difference.

All you need to do is copy and paste your Javascript code, click “Pack”, and copy the ‘packed’ code back into your file. It would be wise to keep your uncompressed code in a seperate file, use that to develop, then use the compressed version for live use.

For example, I keep two files:

somefile_uc.js (uncompressed)
somefile.js (compressed)

Go to Dean Edward’s Packer »

3. sIFR Text - Dynamic headers using any font you want

One of the major things holes in web design today is the lack of font types. You are limited to a handful of fonts, yet if you want to show someone your vision, you have to load your site with graphics, which can lead to increased bandwidth usage. You also spend more time in photoshop than you do actually producing content.

The solution: sIFR Text

All that is involved is one small flash file per font, a little Javascript, and a little CSS. The result, text that is still picked up by search engines, but looks how you want it to look. It also allows a user to copy and paste the text to and from their clipboard. It’s just as dynamic as regular text minus the restriction of type face.

Go to sIFR Text’s Website »

4. Wellstyled.com’s Color Scheme Generator

With this tool you can pick a base color and find the contrast, complement, triad, tetrad, and analogic colors of it. You can then cycle through different variations: Pastel, Dark Pastel, Light Pastel, Contrast, or Pale. You can also share schemes with your friends or colleagues via a URL. This tool clearly shows us and reminds us that the spectrum of color is mathematical. A great tool for people who are just starting to get an eye for color.

See your color scheme as those with vision disorders do

You can see how each color scheme will appear to people with different vision disorders:

Go to Wellstyled.com’s Color Scheme Generator »

5. Lightbox - Next generation unobtrusive pop-ups

To see it in action, visit their homepage.

Setting it up is as simple as this:

1. Include lightbox.js in your header.
   

   <script type=”text/javascript” src=”lightbox.js”></script>

2. Add rel="lightbox" attribute to any link tag to activate the lightbox. For example:
   

   <a href=”images/image-1.jpg” rel=”lightbox” title=”my caption”>image #1</a>

   Optional: Use the title attribute if you want to show a caption.

6. Firefox Extensions - Change the way you tweak and debug

This will be redundant for those who read my previous article, but these are in fact very important tools, so I will reiterate.

Web Developer Extension by Chris Pederick

This extension has many useful tools, though most of them have been trumped by FireBug (which I will talk about next), some are still useful. Features include:

• Resize the browser window
  Quickly and easily resize the browser to 800×600, 1024×768, or any other size you want. This tool helps you see how your site looks from your visitors’ point of view. Check Google Analytics and see which resolution is the most popular. Design for that one. Firebug does not have this tool.
• Edit CSS/HTML without refreshing
  This tool is useful for writing free-form CSS without having to refresh the page, something that is not as easy in Firebug. As you edit your CSS and HTML you will see the changes instantly. This is a major time saver.
• View all Javascript loaded on the page
  For those of you that have Javascript code or are trying to see someone else’s Javascript, you can view all the JS code that your browser has loaded on a single page. (Firebug shows you all the JS files, but you can’t search through all of them at once like in this extension)
• View generated source
  This is an excellent trool if you have portions of your pages loaded by AJAX or via Javascript. Regular view source won’t show you the HTML that is dynamically generated. (Firebug will also show you dynamically generated code. You can actually see it on the fly.)

Firebug Extension by Joe Hewitt

Often at the office we ask the question, “Remember life before Firebug?”. This extension has changed my life. Here are some of the major pros of this extension:

• Inspect the DOM (Document Object Model)
  Click ‘Inspect’ and hover over elements of the DOM to see where that element is in the HTML code and what CSS styles it has.
• Live CSS editing showing style inheritence
  This is money. This will save you literally hours in layout design. For example, you can select a DIV and then tweak it’s margin by selecting the margin property in Firebug and pressing up and down to tweak it pixel by pixel. Page up and down to change by 10 pixels. You can also add new properties to current styles. Once you have made your changes, highlight the CSS and copy and paste it back into your actual file.
• Detailed Javascript debugging
  The Javascript console is slightly better here than in plain Firefox. It gives you more details and is a fine replacement for the default console.
• See all files being loaded and total size of your webpage
  This is so key for optimizing your website’s load time. You can see how long each individual file associated to your webpage took to load. Images, Javascript files, AJAX calls. At the bottom of the “Net” section of Firebug, you will see the total size of the page you just loaded.

7. Sajax - So simple, there’s no excuse not to use it

Sajax is a tool to make programming websites using the Ajax framework — also known as XMLHTTPRequest or remote scripting — as easy as possible. Sajax makes it easy to call ASP, Cold Fusion, Io, Lua, Perl, PHP, Python or Ruby functions from your webpages via JavaScript without performing a browser refresh. The toolkit does 99% of the work for you so you have no excuse to not use it.

The reason that I like Sajax the most out of all of the options is that once it’s plugged in, there is no maintenance or tedious coding to do. It’s all very transparent.

Here is an example in PHP:

<?php
function addFriend($id)
{
     if (friendAdd($id) == true)
     {
          return 1;
     }
     else
     {
          return 0;
     }
}

sajax_export('addFriend');

?>

Now, your Javascript:

function addFriend(id)
{
     x_addFriend(id, addFriend_cb);
}

function addFriend_cb(result)
{
    if( result == 1)
    {
       alert('Friend added successfully.');
    }
    else
    {
       alert('There was an error adding your friend.');
    }
}

Then, in your HTML, it’s as easy as calling the function:

<a href="javascript:;" onclick="addFriend(100);">Add to Friends</a>

Go to Sajax’s Homepage »

Other Web 2.0 Resources

• The Logos of Web 2.0
• Go2Web20, Web2.0 Site Directory

Buy me a beer if you liked this post or found it helpful