If you’ve visited my blog before, you may be wondering why it lacks posts related to web development given that it’s my career. Well, I don’t really have an explanation other than to say I write “when the spirit moves me” and lately other things have been moving me to my keyboard.

Never fear! I have been using Evernote to collect post ideas and there are definitely web ones in the future. In fact, there is one in the very near future, like, say, in the next sentence or so.

I love jQuery!

Ok, not quite what you were expecting, right? Allow me to explain why…

1. Its license means it’s pretty much free to use for any type of project
2. jQuery has introduced me to JavaScript and helped me begin learning it. I’m not an expert by any means, but learning jQuery has helped me learn the vocabulary I need to effectively solve my JavaScript problems
3. The jQuery community is thriving and, well, awesome
4. There’s a plugin for just about everything you can think of
5. The syntax makes sense for people experienced in CSS

So onto the heart of this post, jQuery resources I couldn’t live without.

Tips, tutorials, and support

1. jQuery forum: Formerly hosted on Google Groups, the jQuery forum has a wealth of information and lots of really helpful people. Keep in mind and be appreciative that they’re helping because they want to, not because they are being paid to
2. the API: The new API (for version 1.4 and above has been completely rewritten to make it more easy to understand and better organized. If you need to use an older version of jQuery and aren’t sure what features are specific to version 1.4, the old documentation is still available too
3. jQuery for Designers: provides tips and tutorials for people who may not have very much programming experience at all, and the content can be filtered by your experience level
4. Learning jQuery: Not only was the site created by a fellow Michigander, but it also provides some seriously thorough information and time-saving tips, such as 1 Way to Avoid the Flash of Unstyled Content.
5. The Filament Group Blog: Though not devoted exclusively to jQuery, I have found a number of good jQuery examples, especially ones focusing on Accessibility of jQuery UI elements

Popular and useful plugins

jQuery Cycle Plugin

If you’re ever in need of an image rotator, Cycle is the plugin for you. It has a lot of options and you can pretty much customize it to meet any need.

As far as implementation goes, it couldn’t get much easier. All you have to do is:

$(function(){
//where div id slideshow-container contains 2 or more <img> tags
$('#slideshow-container').cycle();
});

and you have yourself a slideshow. I use the plugin for my photos page, where it is set up to load slides with AJAX after the initial page load. Cycle is by far the jQuery plugin I use most. On top of all the other great things about the plugin, the creator Mike Alsup is pretty accessible and willing to help.

jCarousel

Though I haven’t used it very much, the jCarousel plugin is very popular for creating a slideshow of multiple items at once, similar to the related products area you see on an Amazon.com product listing. It comes with a few different skin options, or you can style it on your own with CSS and custom images. This plugin, like many others, takes existing semantic markup and transforms it with JavaScript.

jQuery UI Tabs

A great way to organize a lot of content in a small amount of space is to put it into tabs. What makes the jQuery UI Tabs widget great is that it’s fast to implement and has some pre-made CSS themes you can use if you’re in a hurry. Another bonus is that unlike some other tabs implementations, the jQuery widget utilizes best practices by avoiding misuse of the rel attribute. It also degrades gracefully if JavaScript is turned off.

Tabs is just one of the awesome plugins from jQuery UI, so be sure to check them all out!

jquery.pngfix

I don’t make it a point to spend a lot of time fixing issues in Internet Explorer 6 unless a client specifically requests it. I do, however think the bare minimum of IE6 support should be to fix broken .png images. With the jquery.pngfix.js plugin, I can quickly fix png images for IE6. To avoid forcing “modern” browsers to process unnecessary JavaScript, I call this plugin inside of a conditional comment.

<!--[if IE 6]>
<script type="text/javascript" src="js/jquery.pngfix.js"></script>
<script type="text/javascript">
//assuming jQuery library is called in head of document
$(function(){
$(document).pngFix();
});
</script>
<![endif]-->

So that’s my two cents about jQuery. Not exactly an unbiased opinion, but hey, I never promised it would be.