21 Links to useful Javascript doodads, tutorials, and libraries

Hi, my name is David and I am an internet junkie.

Whew…it always feels better to get it all out in the open.

I have been an internet junkie for years and started collecting a list of whoozits and whatzits going all the way back from 2006 (I use blogmarks.net to collect things in case you were wondering).

I have literally hundreds of links on dozens of completely random topics. However, there are a few topics that I thought would be helpful for all of the designers and developers out there. Today I will focus on Javascript links…21 of them in fact.

Now if you are an internet junkie as well you have probably run into most of these at one time or another, but if you take a look, you may find one or two that you missed the first time around.

Doodads
Sometimes you don’t want to do things the easy way. That is where a nice widget, doodad, or tool comes it. Let someone else do all the hard stuff for once!

Amberjack - Next we have Amberjack. This is a cool domaflitchy that allows you to make a site tour quickly and easily.

LivePipe’s Control.Modal - Need a modal dialog? LivePipe has a nice extension of Prototype that can be used as a dialog, a tooltip…whatever. If you go digging around LivePipe’s site you can find a few other useful tools too.

WebApper’s Progress Bar - Getting a progress bar to work on the web can be tricky. WebAppers have done the heavy lifting for you. Nice.

LiveValidation - Form validation is a necessary evil. If you want to go from standard to sexy with your validation, this tool will allow you to check the validity of the input as they are typing.

Prototip - I loves me some Prototip. If you are a user of Scriptaculous and you need a tooltip, look no further.

NicEdit - I have yet to use this, but NicEdit (I think it is pronounced Nice Edit) looks like a nice alternative to TinyMCE as a purely javascript based Rich Text Editor.

TinyMCE - Speaking of TinyMCE…this is the granddaddy of JS text editors. I have used this more times than I can remember. Flexible, functional, and pretty easy to getup and running.

Shadowbox - Everyone has seen lightbox at one point or another (their site is down at the moment), but Shadowbox takes it up a notch by being clean and standards focused. Worth a look if you are building a gallery.

ImageFlow - Essentially, ImageFlow is a web based knockoff of Apple’s CoverFlow that is so darn slick on the iPhone. Admittedly this is a bit of a one trick pony, but its still a neat effect.

Image Menu - Not the catchiest name, but the effect is neat. Basically this allows you to create a nice menu that works kind of like a collage.

Instant.js - I have to admit, I love the Polaroid look. It says to me, casual, yet sophisticated. Maybe I am over analyzing that, but Instant.js is a doohicky that will put the effect around just about any image.

Flexigrid - Grids are simply the most efficient way to display lots of data. The problem is most of them are ugly. Flexigrid takes care of that problem and also has a lot of great features like column resizing and pagination.

Glassbox - Another page effect. This one makes it look like your page is encased in a sheet of glass. Me likey.

Tutorials
Sometimes the right screwdriver isn’t in the toolbox. What is a developer to do? Build your own! These tutorials should help guide you a bit.

JS Table of Contents - To start things off I have a link to a nice list of tutorials and helpers for those of you just getting your feet wet with Javascript. If you dig deeper into this “table of contents” you will find this is quite the treasure trove.

Harry Maugans has a nice tutorial on creating animated, sliding, collapsible divs. You may have seen this one on Digg as it has over 1875 votes…still a worthwhile read.

Devthought’s Fancy Menu - Another Digg fav…when I first saw this thing I coulda sworn it was flash. This is basically a tutorial on creating a really cool menu on top of mootools.

Autosaving - One of the things I had to learn how to do when creating novella was figuring out how to autosave my content. This tutorial helped guide me in the right direction.

Libraries
No list would be complete without a short list of some the great libraries that are out there. Most of the tools and tutorials here use one of these in some form or another. If you aren’t married to one yet, I suggest giving them all a test drive.

Prototype - This is the foundation for a lot of the tools that you see here.

Scriptaculous - Prototype is a bit tough for a lot of devs to wrap their head’s around so Scriptaculous was created to make it a bit more user friendly. I use this little guy all. the. time.

Dojo - This is another heavy lifter. I have not had a chance to get my hands dirty with this guy, but it is known to be very powerful.

Mootools - This library is one of the more popular ones out there. It is a bit hard to use compared to some but its flexibility is unmatched.

YUI - The Yahoo User Interface is another great collection. It is powerful, but, again, is a bit of a mouthful. However, this library has, hands down, the best documentation out there.

I hope you found at least a couple here that will help you with whatever project you have going. If you know of a great JS tutorial, library, or whatchamacallit that I don’t have up here, let me know with a comment.

6 Comments so far »

  1. Bjorn van der Neut said,

    Wrote on March 26, 2008 @ 3:26 am

    Great! There where indeed a couple of tools I will use for my new website!
    Thanks.

  2. Flavio Medeiros said,

    Wrote on April 24, 2008 @ 10:05 pm

    You missed ExtJS, a great UI framework.
    See: http://www.extjs.com

  3. David Baxter said,

    Wrote on April 24, 2008 @ 10:47 pm

    Thanks Flavio, I will check that out.

    David

  4. Shahriar Hyder said,

    Wrote on May 15, 2008 @ 5:44 am

    IMHO, jQuery should be somewhere in the top two for Libraries.

  5. Shobhit said,

    Wrote on August 4, 2008 @ 6:33 am

    Nice Stuff Dude..

  6. A_Flama said,

    Wrote on May 5, 2009 @ 2:06 pm

    Hummmm… interesting :D

Comment RSS · TrackBack URI

Leave a Comment

Name: (Required)

E-mail: (Required)

Website:

Comment: