picture courtesy of bripblap.com

So I have a confession to make, I love delicious, but I’m lousy at tagging bookmarks. I have a horrible memory so in my travels (and I delicious links a lot) I find myself wanting to tag a bookmark with as many keywords as possible on some off chance I don’t know what to search on to dig up the particular bookmark I’m trying to retrieve. I end up manually toggling every popular tag that is shown on a given post. It’s too time consuming for me.

I’ve been working with jQuery and bookmarklets a lot lately so I had the idea of leveraging the two to create my own LazyTagger bookmarklet for Del.icio.us.

The LazyTagger process is simple

1. You must have the Del.icio.us ‘post’ bookmarklet installed. Try my customized version (does away w/ the popup window which I find annoying) post to delicious « drag this to your toolbar
2. Drag the LazyTagger bookmarklet to your browser bookmarks toolbar
   
3. Copy and paste this code into the ‘location’ of your newly created bookmark – you’re going to have to go and edit the bookmark manually from the browser. This has to be done to the avoid character limit on drag-and-drop bookmarklets.
   

   javascript:var%20s=document.createElement('script');s.setAttribute('src','http://code.jquery.com/jquery-latest.min.js');document.body.appendChild(s);s.onload=function(){var%20tags=[];$('#save-reco-tags%20ul.tag-list%20li,#save-pop-tags%20ul.tag-list%20li').addClass("on").each(function(){tags.push($(this).text().match(/\D*/g)[0]);});tagit=tags.join('%20');$('input#tags').val('').val(tagit+'%20').focus();};void(s);

4. ‘post to delicious’ just like you normally would
5. When you’re at delicious, click the LazyTagger bookmarklet
6. All of the popular and recommended tags will be selected automatically. Laziness rocks.
7. After all of the tags are toggled the focus will be placed on the tags input so you can begin typing any other tags you deem necessary.

That’s LazyTagger. I’ve been using it for a long time and I can honestly say I don’t think I could go back. Feedback appreciated.

Check out the Upcoming Event. Sign up sooner than later, as of this writing there were only about 20 slots left!

I’ll be talking about how I’ve used jQuery in some of my development projects and some tricks and best practices I’ve picked up along the way. I’ll also be talking about degradation, progressive enhancement and (time permitting) discuss how jQuery’s Plugin architecture lets small teams do a lot with little.

Update

The talk was a great success and I had a great time. I’ve posted my slides: jQuery Best Practices. Much thanks goes to the Betahouse for hosting the Refresh Boston event.

As well as the accompanying demos on Progressive Enhancement:

• jQuery Rating
• Toggle-able Forms

When I work with large sites with many jQuery rules that have to be applied, sometimes this can cause sluggishness – especially if you’re using jQuery for progressive enhancement.

I was recently hit with a performance snag with jQuery – I just had too much going on in my jrules.js file – this is what I use to apply all of my DOM methods with jQuery. jQuery performance is great – and with the packed version it’s footprint is miniscule but when you parse a massive DOM and apply a ton of rules sluggishness ensues especially when using progressive enhancement to hide/show multiple objects.

Right now I have a jrules.js file that is big, mean and has over 200+ lines of jQuery goodness to apply every time a page loads.

I hit performance issues when I have pages with hundreds of tags in the markup and a ton of content – you can see where I’m going with this.

What I came up with and use for most of my recent projects is a way to pass over those jQuery rules that don’t need to be applied or even looked at on certain pages. This is how I go about it:

First I break up my rules according to what page they’re on.

document.ready(function() {

// GLOBAL

// HOME

// LOGIN

});

If you can segregate rules and only apply them when they’re needed you’ll significantly improve the speed with which jQuery can handle it all, especially when you’re dealing with massive DOM trees.

I leverage top level CSS inheritance to bring it together. On my pages assign an ID to the body tag from which all my jQuery rules will be executed upon.

<body id="home">

You can use .length or .size() – they’re synonymous to test if the jQuery object is avaiable in the DOM, if it doesn’t exist jQuery doesn’t have to bother with it.

Rules only used on certain pages can now be filtered and jQuery can pass over huge blocks of declarations of whom we know don’t exist in the current DOM anyhow.

document.ready(function() {

// GLOBAL
// DOM elements that exist on every page

$("input[@type=password], input[@type=text]").addClass("text");

$("input[@type=password], input[@type=text], textarea").focus(function() {
    $(this).addClass("focus");
});

// HOME body#home

if ($("body#home").size()) {
    // only applies rules on the homepage
    $("p").hover(function() {
        $(this).addClass("change")
    }, function() {
        $(this).removeClass("change")
    );
}

// LOGIN

if ($("body#login").size()) {
    // only applies rules on the login page
}

});

For simple pages with a few rules and a small DOM this is definitely overkill, but if you’ve noticed even a nano second of lag when jQuery applies your rules and see the DOM rearrange itself at page load try this out and let me know how it worked for you.

Last night when I attended a meeting of The Markup & Style Society at the Filament Group office. I got a chance to speak with Mr. jQuery himself – John Resig about my performance issue and I shared my solution to the problem. I was unsure I approached it the best way and there wasn’t a better solution available out there, but he assured me the way I was going about it was sound so consider this method Resig Approved™.

UPDATE

John alerted me to this: Seems that jQuery is now more popular than Prototype – far as search queries go at least. Congrats John & the jQuery team!

<input type="text"/>
<input type="submit" value="submit"/>

This leads to a term Jeffery Zeldman coined as “classititisâ€? – the extraneous use of class assignments in markup. To deal with IE6 I previously would create markup such as this:

<input class="text" type="text" />
<input class="submit"  type="submit" value="submit" />

to give myself the proper style hooks required to differentiate the elements.

With browsers that support CSS2 – Firefox, IE7, Safari, etc (basically every one nowadays except IE6) it is easy to use proper CSS2 selectors

input[type=text] { /* styles /}
input[type=submit] { / styles */}

However, leveraging jQuery and some simple rules can cleanup our markup and avoid classititis. We can even add in sharp focus/blur based styling behaviors for an enhanced prettification of otherwise boring form elements.

Enter jQuery

I am a huge fan of jQuery. I’ve used quite a javascript frameworks but none of them stuck more than jQuery. Between the thriving community, excellent documentation, and plethora of plugins – you can’t go wrong.

I frequently reuse code snippets of useful functions and css rules that I’ve accrued over time (more on my CSS toolkit another time). Here is code that allows me to avoid the trap of classititis due to lack of CSS2 support in IE6:

$(document).ready(function() { 
        $("input[@type=password], input[@type=text]").addClass("text");

    $("input[@type=password], input[@type=text], textarea").focus(function() {
        $(this).addClass("focus"); 
                //focus class provides a hook to alert the user 
    });
    
    $("input[@type=password], input[@type=text], textarea").blur(function(){
        if ($(this).find(".focus")) {
            $(this).removeClass("focus");
        }
    });
});

input type=”text” try typing in some text and taking focus off the input box

textarea This is a textarea element with some content

CSS that will pull it all together

input.text, textarea, select {
  color: #777;
  padding: 2px 5px;
  font-size: 110%;
  border: 1px solid #333;
  background: #fafafa;
}
.focus {
  background: #fff !important;
  color: #000 !important;
}

Be sure to check out 456bereastreet for an excellent article on CSS 2.1 selectors.