Javascript Tools and Tricks - ISInc

How many times have you banged your head against the keyboard trying to get a Javascript function to work, only to find out the problem was with your browser? There are a number of tools out there that will make your life easier. This is a list that has helped not only my hairline, but my sanity too!

Tools

These tools are my essential day to day applications for JavaScript development.

1. Firefox – Yes, that browser. IE is good, but the extensions available on Firefox are fantastic! I typically do my debugging in Firefox, but I use a number of plug-ins to make life easier.
   • Web Developer Toolbar – this gives you a number of debugging tools, and you can turn on/off JavaScript to verify your application still works. Remember, not everyone visiting your site has your best interest in mind, so code appropriately!
   • Firebug – Need to step through your JavaScript and find out what the error is? This tool gives you the ability to navigate your DOM and debug your JavaScript. A must have!
   • IETab – Do you use Firefox, but also need to test in IE? Do some of your pages only work in IE? This allows you to create a tab that uses IE’s rendering engine in Firefox.
2. Notepad++ – This is Notepad on steroids. It has syntax highlighting for HTML and Javascript

AJAX Frameworks

When people talk about Javascript these days, most likely they are referring to AJAX. AJAX isn’t a language, but an implementation of Javascript to communicate with your web server without refreshing the page. These libraries make implementing the whiz-bang functionality in AJAX easier across multiple browsers without the massive headache.

1. Prototype – This is not the method, but the framework. Probably one of the most used Javascript abstraction libraries out there. This is used in Ruby on Rails for a number of AJAX functions. What I like about it is how easy it is to get objects from the DOM by their ID or name. Not the smallest, but it has a great developer community.
2. JQuery – This is a library I have been keeping my eye on and I really like where it has evolved. This is much smaller that Prototype, and it has a plug-in framework for different effects. I am probably going to give this on a shot in my next project.
3. dojo – I have a number of friends that swear by this library. Not one I have used too much, but the community is also very active and there are a lot of examples.
4. Yahoo User Interface Library – Yahoo has bundled some great tools, and this one is yet another abstraction library.
5. MooTools – MooTools is a lightweight JavaScript framework
6. JavascriptMVC – Just found out about this one.  If you work with it, let me know how it goes!

Interesting Websites/Reference

I have come across some interesting websites on my internet travels. Here’s a sample:

1. W3 Schools HTML DOM – I know, the IDE you use has intelli-sense and you don’t need to remember the DOM, but there are times that good old Notepad is the only tool you have. This website has all of the HTML DOM components with examples.
2. MSDN JScript Reference – MSDN is a wealth of information. Over the years the content has become even better and I still find myself coming back to this page to look up functions.
3. Prototype object example – This method is VERY useful, and every so often I need to create a new function for validation. Problem is remembering how to do it… This is a pretty good tutorial on the method and how to extend it.
4. Open JavaScript Guide – Everything you would ever want to know about JavaScript
5. Hot Scripts – Someone probably already solved your problem here… Why re-invent the wheel?
6. Mozilla Developer Guide – JavaScript reference from Mozilla
7. AJAX Patterns – Some useful patterns for AJAX development
8. Dynamic Drive – DHTML scripts
9. Smashing Magazine – Blog with some good examples of JavaScript/CSS
10. JavaScript Kit – Some additional example scripts
11. ajaxian – Ajax blog

Do you have some interesting example websites? Share them in the comments.

Want to take a class? ISInc also has Javascript training!

Comments

1. Justin Meyer Says:
   February 24th, 2008 at 11:55 am

   You might want to add Ajaxian.

   Also, you might want to take a look at JavaScriptMVC.com. I’m clearly partial, but we are taking a different angle on JS development.