Tag Archives: John Resig

Adding retweet buttons for WordPress posts

One of the recent trends in the blogsphere is to display the retweet or “tweet this” button on your pages together with the number of times they were retweeted. There are lots of ways and services to do it and each of them have their own pros and cons.

Recently John Resig released a pure JavaScript solution for adding retweet buttons to your pages. It uses Bit.ly JavaScript API, has no dependencies and is totally unobtrusive.

Like my previous Geo Mark WordPress Plugin, I converted his excellent JavaScript solution into a WordPress Plugin called Easy Retweet, so that it can be used in WordPress without making many changes to the theme.

Plugin Usage

You can download the Plugin from the Plugin’s home page. There are two ways you can add the retweet button, the automatic way and the manual way.

Automatic way

Install the Plugin and choose the type and position of the button from the Plugin’s settings page.

Easy Retweet WordPress Plugni settings

Manual way

If you want more control over the way the button should be positioned, then you can manually call the button using the following code.

if (function_exists('easy_retweet_button')) {
	echo easy_retweet_button();
}

Feedback

Try out the Plugin and let me know your thoughts. The Plugin is still in the early stages of development and I will add more features based on the feedback.

Posted in Plugin Releases | Tagged , , , , | 8 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

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