Simian Design

Dan Wellman has written an excellent article, The Definitive Guide to Creating a Practical jQuery Plugin. He takes you step-by-step through the entire process.

In this article we’re going to be building our very own jQuery plugin step-by-step from scratch; jQuery makes this task exceptionally easy for us, giving us a simple method of packaging up our scripts and exposing their functionality, and encouraging the use of scalable and reusable object-oriented techniques.

Writing a jQuery plugin makes sense if you have code you reuse a great deal. You can drop code into your site and have it work right away with little or no tweaking of the code.

He takes you through the Adding Configurable Properties, building Constructor Methods, and adding to the plugin’s API.

It’s a very well written tutorial, easy to follow, easy to help you along.

Jon Hobbs-Smith has written an excellent article on 25 ways to improve your jQuery.  It’s a quite well-written list of tips and tricks.  

It’s not written for super-advanced users, nor beginners, rather intermediate users. So you won’t find entry-level tips here, nor will you find advanced explanations on why you should enclose items, or the fastest way to render something to the DOM.  It’s a series of real-life, useful, in-the-trenches-kind of tips.

My favorite tip so far is tip #23: Add a JS class to your HTML attribute.  By adding a class to your HTML attribute on the javascript load, you get a CSS declarator that is valid only if JS is turned on, which allows you a very easy way to hide things if JS is turned off.

Very slick.

The entire article is worth reading, and worth bookmarking.  Nicely done.

d’bug has a nice writeup on recreating the search field using CSS.

Normally I wouldn’t be a giant fan of changing the default input/form fields in a browser.  I think having those standards that everyone recognizes and know how to use is a powerful tool. Deviating too much from them is a risky proposition at times.   At least in my opinion it is.
But that being said, his end result is nice.  It seems to work.  And as a concept piece it’s cool. Go check it out.

Ok, two quick links today of useful pages that I ran across.

One is a LONG list of links that deal with building better forms. Web form basics, usability, accessibility, form design, form processing, validation, and generators are all covered.

The other is a useful page on 5 JavaScript Tricks Made Easy with jQuery. Swapping form fields, character countdowns in textareas, centering a div popup, collapsing table columns, and reading RSS are the tricks.

Making Keyboard Shortcuts in JavaScript is brilliant.  It’s a simple function that allows you to extend keyboard shortcuts easily.  And by easy, I mean easy.

shortcut(“Ctrl+Shift+X”,function() {
alert(“Hi there!”);
});
That’s an example.  And I like it.  Now to see this easily made into a jQuery plugin….

Peter writes about the still present window.onload problem. It’s a most excellent article, and you should go read it.

The base problem is that if you truly do seperate presentation, structure and interaction (HTML, CSS or Javascript), then you can be presented with a situation where a large image is trying to load, preventing from the

from firing, which is preventing the Javascript from attaching the functions needed. If that Javascript doesn’t fire, the user can then easily break the page.

Luckily Peter outlines several solutions, all very easily explained.

JSLog is a JavaScript logger. It looks a little different than the Yahoo! Logger, but covers much of the same type of functionality.
I’m still playing with both of these tools, but they look nice.

Get Google Ajax Search. A nice and easy post, well written with code examples that will give you a nice google search of your site in a fancy Ajax box.

I haven’t implemented this yet, so I can’t comment as to how easy it is, or how well it works.  But it looks nice, the implementation on his site is nice, and looks well worth checking out.

Tabs within textareas. The real secret is

which checks for the tab within the textarea.

The script is even extra smart and checks for backspaces, deletes, cursort movement, etc.  It’s really quite smart.   Go check it out.

Firebug is a Firefox extension that lets you explore the far corners of the DOM by keyboard or mouse. All of the tools you need to poke, prod, and monitor your JavaScript, CSS, HTML and Ajax are brought together into one seamless experience, including an error console, command line, and a variety of fun inspectors.