Keeyai.com

Lately I’ve run into a couple really great tools while creating the various websites I work on. Here is a very brief run down of some of the more recent ones I’ve used and been terribly impressed with. This is by no means a comprehensive or perfectly ordered list; I simply felt like talking about some of the things that have made my life easier over the past few weeks/months.

Mootools:
First and foremost, mootools is an amazing javascript library that I use for everything. It has good docs, a great community (well, it did anyway…), and a robust code base. I won’t touch ajax or effects like color changing, timers, or dragging without mootools there to get my back. Because I use mootools so much myself, I always look for mootools based libs when I need certain functionality, so you’ll see a lot of that here.

Mocha UI:
Next comes a mootools based javascript UI lib, Mocha UI. I found this when the author first started and it was pretty neat — you can see it running the upload and picture verification windows in my wii bowling site — but I just revisited the project site and it has grown 100 fold since then. While I haven’t used the new code extensively yet (expect to see it when I release my todo list app), it appears extremely stable and versatile. You can literally make an entire web-desktop with it or just use it for really good looking cross-browser popups/windows/dialogs, and it comes with examples detailing both. I’m so excited about how this lib has grown that I’m throwing out all my aesthetic code in my major work project (the one that pays the bills) and replacing it with this stuff. Check it out; you won’t be disappointed.

AmCharts:
AmCharts is a flash lib that enables you to quickly and easily create gorgeous interactive graphs in a wide variety of styles. They make their money by selling the product, but they also have a free version you can use that sticks a small link back to their site at the top. I’m using a simple (but elegant) pie chart on my seti@home stats page here and a sleek line chart to graph rising and falling market prices for 20 crops in Ithilis, my as-yet-unreleased web game. You really need to have a look at their site to get a feel for what the lib can do, and definitely try the free version out next time you need a chart of something.

SmoothGallery:
Another mootools based javascript lib, this one puts together a very slick looking slideshow with a nice variety of options while still being extremely easy to use. I’m using it on the project pages on pyedpypers.org when there are at least 2 screenshots and I couldn’t be happier with how it looks. It is a wonderful alternative to the ever-present (but still useful, see the next item) Lightbox and/or its many clones. This is another one where you need to visit the site and see for yourself what it can do.

MediaBox Advanced:
Mootools again — this is like lightbox’s big brother: MBA can display images, SWFs (flash), audio streams, video from the hoard of streaming sites (youtube, myspace, vimeo, metacafe, etc), and even other web pages. A versatile tool for any page and a must have in the web developers toolbox.

Javascript Toolbox:
Most notably, the table class. This is an extremely powerful piece of javascript that quickly makes a sortable, filterable, paged table with your data. It is easy to use, robust, and most importantly, the fastest table script I’ve found so far. If you are dumping a lot of information to users via tables, get this and make them love you.

Tiny MCE:
This is a beautiful library that adds a very versatile WYSIWYG editor to web pages. It has a ton of files, but it makes up for it with the wide range of options available and how absolutely easy it is to add to a page. Switching from an extremely simple editor to an advanced one requires a single parameter change. It has editor options for just about everything and provides a plugin system to cover anything else that got left behind. I literally inserted this into pyedpypers.org in about 5 minutes and now have a password protected CMS running what used to be the static pages.

ReCAPTCHA:
I really love this one. Everyone has used the little images with scrambled up numbers you have to input to prove you aren’t a machine, and everyone has run into at least one that is so damn hard you leave the site instead of trying for the 10th time. Writing CAPTCHA image generators can be fun, but it can be difficult to make it hard enough that a bot can’t read it but still be easy for real live users. I wrote one myself once, but now whenever I need a CAPTCHA I simply get a ReCAPTCHA code for the site and wash my hands of it. ReCAPTCHA is a very functional CAPTCHA (I’m so tired of typing that!) that hits that sweet spot of user accessibility without letting spam bots in to molest your soul. Moreover, using ReCAPTCHA comes with an added bonus for humanity: ReCAPTCHA generates its images in an extremely clever way: it gives you two words to type, one of which it is sure about and the other is a word that was electronically indecipherable when a book was scanned to be preserved digitally. You already know the second word can’t (probably) be read by a machine so you get your security and when you solve the CAPTCHA, it uses your response (compared with many others) to determine what the word was. In this way, every time you solve a ReCAPTCHA, you are literally moving us one word closer to digitizing all the books out there and moving us truly into the digital age. Deep, eh?

Fancy Upload:
Everybody doing web design needs to code an upload section eventually. I’ve done several myself and foolishly, most of them were by hand. Fancy Upload is the solution to all your upload problems — it provides a very elegant upload interface for users including queues, confirmations, and animated progress bars. It is modular enough to stuff into other frameworks (I have it in a photo gallery wordpress plugin I wrote) so seriously consider it before you do any upload code yourself. As with the rest of these, check out the site yourself to see it in its full glory.

Firebug:
Just to be clear, Firebug is a firefox plugin, NOT a library or toolkit like the rest of the things mentioned here. However, it has saved me so much time and anguish (that’s right, ANGUISH) debugging html, javascript, cookies, and ajax that I had to mention it. I know, everyone in their right mind has firebug, but if just one web developer reads this and hasn’t seen it before, I’ll have changed a life for the better. I cannot put this any more simply: If you do any sort of web design, you absolutely must have firebug.

There are, of course, many other great tools and libraries out there. I have definitely not seen them all and am by no means an expert on what is available, so take this post as a starting point, not the end-all-be-all. If you have another must-have tool you use, post it up in the comments and maybe you’ll save someone a few hours of frustration.