Tag Archives: jQuery

Started tracking time spend on my pet projects

Regular readers of my blog will know that I have lot of pet projects. WordPress Plugins, Android Apps, Arduino projects, jQuery Plugins and a whole variety of other hobbies as well.

Some of them are really popular. For instance my Bulk Delete WordPress Plugin has been downloaded for nearly 100,000 times. The flip side of it is that these pet projects have some additional baggage as well. Support questions, regular updates, feature requests etc can be sometimes very time consuming.

I always wanted to know the projects, which takes up most of my free time, but didn’t had any metrics or logs. So I have started to track the amount of time I am spending on each of these projects.

The advantage of this is that, now I know which project are real time hogs and can have some metrics to decide on whether it is worth spending time on those projects or not. I am also going to add this data to the project readme files, so that people who use it might also know the amount of time and effort I have put it on those projects 🙂

I have already started this and the recent release of my Bulk Delete WordPress Plugin had this metrics. I have spent close to 11 hours for releasing the update to the Plugin.

Let’s see how this new experiment turns out to be.

BTW do you guys also track your time spent on pet projects? If yes, then share your experiences as well.

 

Posted in Random/Personal, WordPress | Tagged , , | 3 Comments

jQuery.later – a setTimeout wrapper in jQuery

Recently I have been playing around with YUI 3 and found that it had a nice wrapper for setTimeout/setInterval which nicely encapsulated it.

I thought it would be nice to have a wrapper like that for jQuery, which led to this nice little Plugin for jQuery called jQuery Later

Download

You can download it from my github page. It also includes a html page which tells you how to use it.

Syntax

jQuery later function follows the same syntax as that of YUI.

jQuery.later ( when , o , fn , data , periodic )

Executes the supplied function in the context of the supplied object ‘when’ milliseconds later. Executes the function a single time unless periodic is set to true.

Parameters:
when <int> the number of milliseconds to wait until the fn is executed.
o <object> the context object.
fn <Function|String> the function to execute or the name of the method in the ‘o’ object to execute.
data <object> [Array] data that is provided to the function. This accepts either a single item or an array. If an array is provided, the function is executed with one parameter for each array item. If you need to pass a single array parameter, it needs to be wrapped in an array [myarray].
periodic <boolean> if true, executes continuously at supplied interval until canceled.
Returns: object
a timer object. Call the cancel() method on this object to stop the timer.

License

Released under MIT License

PS: BTW this is my first jQuery Plugin. 🙂

Posted in JavaScript/jQuery | Tagged , , | 6 Comments

Find duplicates values in a set of textboxes using jQuery

Well sometime back, I faced this unique problem. It took me sometime to solve it, so I thought of documenting it as my learning so that it is useful for others and might help me one when I need to do it again.

Problem

Okay, the following is the requirement. You have a web page with a set of text boxes. The number of text-boxes might vary based on some backend logic. You need to make sure the user doesn’t enter duplicate values in these set of textboxes. He can leave them blank, but cannot enter duplicate values.

Solution

The following is my solution.

function findDuplicates() {
    var isDuplicate = false;
    jQuery("input[name^='access_keys']").each(function (i,el1) {
        var current_val = jQuery(el1).val();
        if (current_val != "") {
            jQuery("input[name^='access_keys']").each(function (i,el2) {
                if (jQuery(el2).val() == current_val && jQuery(el1).attr("name") != jQuery(el2).attr("name")) {
                    isDuplicate = true;
                    jQuery(el2).css("background-color", "yellow");
                    jQuery(el1).css("background-color", "yellow");
                    return;
                }
            });
        }
    });

    if (isDuplicate) {
        alert ("Duplicate values found.");
        return false;
    } else {
        return true;
    }
}

I basically loop through all the text boxes and compare the values with all the other textboxes, in nested loops. Basically it is like bubble sort. I know this is bad, but was not able to think of any efficient way of doing it. Do you guys can think of a better way?

Posted in JavaScript/jQuery | Tagged , , | 4 Comments

Notes for “Advanced jQuery” by John Resig

I just finished watching John Resig’s talk titled “Advanced jQuery” which he gave at Ajax Experience. Like I said before, I am posting notes which I took while watching the video, so that I can refer to them at a later point of time (It is easier to search when it is not on paper 🙂 ). Also it might help someone to get the outline of the talk before actually watching the video. The original video runs for more than an hour.

Also be warned that the following is my own interpretation of the video and I might have missed or could have interpreted some point differently. 🙂

About the speaker, John Resig

As you all know John Resig is the creator of the excellent jQuery library. He works for Mozilla corporation and you can get more information about him from his blog.

Some Advanced features of jQuery

Chaining

The most useful and the powerful feature of jQuery. (Personally this is my favorite feature in jQuery). Every function in jQuery returns the jQuery object and you can continue to call functions on that object. end() stops chaining andSelf() adds the current element into the chain.

Isolation

Once of the design goal of jQuery is that, jQuery should not affect or get affected on any HTML page, no matter what is present in the HTML page, either another library or even another version of jQuery itself. The only exception is when a new property is added to object.prototype.

Isolation in jQuery is achieved by the following

jQuery Wrapper

Everything in jQuery is wrapped. Only the $ function and the jQuery variable are exposed.

Plugin Wrapping

All Plugin code should be wrapped between

(function($) {

})(jQuery);

noConflict

Even the global jQuery variable can be unrolled by using jQuery.noConflict(true). This allows two versions of jQuery to run on a single HTML document without any conflict.

Sizzle

Sizzle is a selector engine written by John in pure JavaScript. It is around 1.5x to 4x faster and the major advantage of sizzle is that it can be integrated with other libraries, since it doesn’t have any dependency on jQuery.

Sizzle works from backwards while selecting and is therefore faster in most cases. It also caches the DOM tree and frees it by listening to the DOMAttrModified, DOMNodeInserted and DOMNodeRemoved events.

Sizzle has a separate homepage and you can get more information from it’s homepage.

DOM Manipulation

By far, most time of a script execution is spent only in DOM Manipulation.

jQuery automatically converts single tags to double tags using the following function. (I never know this before. The function seems to be very precise and well thought of)

elem = elem.replace(/(<(\w+)[^>]*?)\/>/q, function (all, front, tag) {

return tag.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i) ? all : front + "></" + tag + ">";

}

jQuery 1.3 uses document Fragment for DOM manipulation and is much faster when compared with older versions.

Events

In jQuery you can bind event to any JavaScript Object.

Namespaced Events

From jQuery 1.2, Plugins can use namespaced events. The major advantage in using name spaced events is that it is very easy to clean up later and uses less memory space.

Special Events

From jQuery 1.2.2 some special events are available for easy event handling.

Events like mouseEnter, mouseLeave and mouseWheel are not actual events but are exposed by jQuery. jQuery does the internal implementation for these events.

Video

So my dear readers what you think about my notes. Also let me know if you like notes for videos in this format. If there is a demand, then I can post some of my notes on other videos which I have already viewed.

Posted in JavaScript/jQuery | Tagged , , , , | 2 Comments

Evangelizing jQuery

Regular readers of this blog will know that I am great fan of jQuery. Recently I am thinking of evangelizing jQuery at work and convince people who take up decision to make jQuery as the default JavaScript framework to be used across the organization.

The following is the list of advantages/benefits which I have prepared so far. 

  • Light weight and has a very small footprint.
  • Browser abstraction – jQuery provides browser abstraction and is hightly optimized for each individual browser.
  • Excellent Plugin architecture – jQuery has an excellent Plugin architecture and you can find a jQuery Plugin for anything that you want to do.
  • Speed – When compared with other libraries, jQuery is much faster.
  • Less code == Less mistakes == better performance.
  • Active development community – It has a very active development community headed by John Resig
  • Backed by major organizations like Microsoft and Nokia. Microsoft had integrated it with the latest version of ASP.NET
  • Very small learning curve.
  • Chaining well suited for designers since it uses selectors based on CSS Selectors.
  • Excellent Documentation for all methods and selectors.
  • jQuery UI – Provides ready made themable GUI components.

Let me know if you could think of any addition to this list. Thanks 🙂

Posted in JavaScript/jQuery | Tagged , | 8 Comments

Notes for “DOM is a mess” by John Resig

I just finished viewing John Resig’s talk titled “DOM is a mess” at Yahoo. I took some notes while watching the video and I am posting them here, so that I can refer to them at a later point of time (It is easier to search when it is not on paper 🙂 ). Also it might help someone to get the outline of the talk before actually watching the video. The original video runs for more than an hour.

Also be warned that the following is my own interpretation of the video and I might have missed or could have interpreted some point differently. 🙂

About the speaker, John Resig

As you all know John Resig is the creator of the excellent jQuery library. He works for Mozilla corporation and you can get more information about him from his blog.

DOM is a mess

This is the first thing John Resig said about DOM methods after saying that DOM is a messy

Nearly every DOM method is broken in some way, in some browser.

The following are some of the bugs in the DOM methods

getElementByID ()

IE and Old versions of Opera return elements whose name == id

getElementByTagName ()

.length gets overwritten in IE if an element with an ID = “length” is found

getElementsByClassName ()

Opera doesn’t match a second specified class

querySelectorAll ()

Safari 3.2 can’t match uppercase characters in quirks mode.

So the moral is that almost every method in DOM is messed up.

Writing Cross-browser code

Find out the cost/benefit ratio for supporting a browser and then pick the browsers you are going to support before writing your code.

He talked about Yahoo’s graded support and jQuery browser Support.

Escaping from DOM’s mess

The following are some of the tips to escape from DOM’s mess.

  • Having a good test suite is not a facility but a requirement.
  • Don’t introduce global variables or extend native objects.
  • The order in which style sheets are included matters.
  • Don’t use browser sniffing, but use Object detection or feature simulation instead.
  • Don’t assume a browser will always have a bug. They might get fixed in a future release.
  • Gracefully degrade for old browsers
  • As your code matures, the number of assumptions should reduce.
  • While removing elements from DOM, clean it by unbinding the events

Links

So my dear readers what you think about my notes. Also let me know if you like notes for videos in this format. If there is a demand, then I can post some of my notes on other videos which I have already viewed.

Posted in JavaScript/jQuery | Tagged , , , , , | 1 Comment

Two more reasons to like jQuery

Out of the numerous JavaScript libraries which are available, jQuery is my favourite. There are couple of reasons for this and now I have two more reasons added to that list. 

First jQuery is going to be supported by Microsoft and is going to be shipped with Visual Studio, which is great news for people who are addicted to intellisense (like Yuvi 😉 ). 

Second Nokia is going to support it and jQuery will be used to develop applications on the new WebKit-based Web Run-Time which will be distributed with Nokia phones.

I think this is great news for jQuery and it is time for me to start hacking it again. 😉

Posted in JavaScript/jQuery | Tagged , , | Leave a comment

Useful jQuery links

I found a lot of useful links related to jQuery while researching for my presentation on jQuery. I thought of sharing them here so that it will be useful for others who are looking to get their feet wet with jQuery.

I am planning to constantly updated this post, so if you have any other links which might be useful do leave a comment and I will add them.

Homepage

References

Tutorial/Articles

jQuery related slides

Some useful Plugins

jQuery Related Books

Posted in JavaScript/jQuery | Tagged , , | 4 Comments

Back from WebCamp

I attended WebCamp today as planned. It was good and there were talks about web frameworks like Ruby on Rails, Groovy on Grails, Django, Flex etc. Unfortunately I was not able to give my talk about jQuery as planned due to some issues with the timings. I was pretty disappointed at first; since it took me considerable amount of time to prepare for the presentation and added to that I drove for more than two hours to attend the event. Anyway that’s life isn’t? 😉 You will never know what life has for you the next second. If everything goes as planned, then life would be as dull as a recorded circket match. It is uncertainty which gives life to life (wow! I can make a quote too 😉 ).

Anyways to be positive I learned a lot of new things about jQuery when I did my research to prepare for the presentation, even though I have been using it for the past couple of months. Hope you guys also find my slides about jQuery useful.

Continue reading »

Posted in Events/Conferences, Web Programming | Tagged , , , , | 2 Comments