2011年1月17日星期一

A share of how to learn jQuery Plugins

Recently, a lot of people are talking about developing iphone applications. Iphone is hot and it gives golden opportunities for programmers. Seeing the great wave in technology, I have started my career in writing iphone applications, too.

Unfortunately, I am new to Mac platform and I am not used to write code in Objective-C. Therefore, I have to spend a lot of time learning everything from scratch. The learning process is hard and this recall me on how I learned jQuery two years ago.

If you want to learn a new language and get used to the language, you have to study the basic concepts, analysis examples and try to write you own. It especially took you a lot of time in searching relevant examples and looking up the syntax of commands before you can complete one piece of your own code.

Two years ago, the resources available for people to learn jQuery are limited. Almost all my knowledge was come from the jQuery's website: www.jquery.com. And you can still find examples, syntax and basic concept there. The website had provided sufficient information for me at the beginning. However, as I reached certain level of understanding of jQuery, I found out that, if I want to have further understanding and improvement in effectiveness of writing jQuery code, I have to write my own jQuery plugins. So, I changed my focus to jQuery plugins and started to write jQuery plugins in a latter time.

As you visit www.jquery.com, you will find a brief introduction about how to write a jQuery plugin. However, the information provided is not sufficient for advanced learners who needed to write plugins for specific purpose. At that time, I was requested to write an online magazine using jQuery In order to apply jQuery plugins in my project, I’d spent a lot of time, searching relevant plugins from the internet and downloading them to my computer. I’d studied the code of the plugins line by line. I’d tried to use them and then rewrite them in my code before I could have a full understanding about every plugins I download. And, finally, I was able to convert my knowledge to a workable solution in my project.

If there was a book which had provided an in-depth explanation of the concepts of jQuery plugin, together with useful examples categorized by the nature of application, I could save a lot of time and I could have a shorter learning cycle in jQuery and jQuery plugins.

In the mid-December, I’ve received a book from Packt. “jQuery 1.4 Plugin Development – Build powerful, interactive plugins to implement jQuery to its best – Beginner’s Guide” which is a eBook written by Giulio Bai. I’ve started reading the eBook during my Christmas holiday. As you know, a book for concepts and examples is essential in learning jQuery, this book is what I looked for a long time.

During my holiday, in most of the time, I liked to sit in front of my computer with a cup of hot coffee. One day, I opened the eBook, I started reading from the front page, then I skipped the first Chapter, which is about the introduction on jQuery. On the other hand, as a designers of some jQuery plugins, I am quite interested how other people teaches jQuery plugin. So, I've read chapter 2 carefully. After finished reading chapter 2, I found myself quite satisfied. In this chapter, the language is plain, the steps are clear and everything is quite easy to understand. And this is the first book that introduces the concepts and differences between function plugins and method plugins.

The topics as well as the examples in books are comprehensive: Image plugins, audio plugins, video plugins, form plugins, menu plugins, navigation plugins, animation plugins, utility plugins, etc. This book save us a lot of time from collecting different type of jQuery plugins. Thus, we can focus on those plugins that we feel interested.

The most valuable materials are always in the later part of a book. So, if you turn the pages to later part, for instance, Chapter 13, you’ll find a top 10 list of jQuery Plugins recommend by the author, Guilio. In this chapter, he had shared the findings and thoughts which he had spent a lot of time and effort before in studying those top jQuery Plugins. And he will tell you what’s the secrets for top 10 jQuery plugins.

I recommend people reading this book. And I think this book is especially useful for those who have the basic knowledge of jQuery and wants to have a in-depth understanding of jQuery and jQuery plugins. If you have spare time, you can try the “pop quiz” section provided in the latter part of every chapter. And you’ll find a lot of fun in do the pop quiz, too. Here is the link and cover of the book:

jquery 1.4 plugin develop - Beginner's Guide

2010年5月11日星期二


Handling caret is an important task in providing a user friendly interface for input text interactively. We can use caret to select text inside a text area to change the default format. Programmer may want to use the caret highlight part of the content inside a text box to notify the end user for something goes wrong.

In order to design the jQuery Caret Plugin, I wrote down the following specifications:

  1. The jQuery Caret (jCaret) Plugin should be able to detect the caret position, i.e. the position of selected text in a "text input box" (input type="text") or "text area" (textarea)
  2. The jQuery Caret (jCaret) Plugin should be able to detect the content of selected text in a "text input box" (input type="text") or "text area" (textarea)
  3. The jQuery Caret (jCaret) Plugin should be able to highlight text by specifying starting position, ending position or length of selection in a "text input box" (input type="text") or "text area" (textarea)
  4. The jQuery Caret (jCaret) Plugin should be able to highlight text by a search string in a "text input box" (input type="text") or "text area" (textarea)
  5. The jQuery Caret (jCaret) Plugin should be able to highlight text by using regular expression to specify the format of the text in a "text input box" (input type="text") or "text area" (textarea)
  6. The input parameter should support Javascript Object.
  7. The output can be represent as a Javascript Object.
After spending some time, I finally completed the jQuery Caret (jCaret) Plugin.
A list of online examples can be found in jQuery Caret plugin page in http://examplet.buss.hk.

Happy Programming
Cloudgen

2010年5月9日星期日

How to write a jQuery Plugin

Everyone can design their own jQuery plugins.  Once you understand jQuery, you no longer write pure Javascript for DOM; once you know how to write jQuery plugin, you no longer write repeative jQuery code.  By using jQuery Plugin, you can focus mainly on the business logic of a webpage.  That's the reason why I keep writing a lot of jQuery plugins.  

Writing jQuery plugins is easy.  Everyone who has the basic jQuery knowledge is capable to write jQuery plugins.  It is just as simply as appending  a function to jQuery.fn object.

However, if you only have little knowledge about jQuery Plugin,  you can even try to modify the content from a jQuery Plugin Template.

By the way, paying attention to the  following designing rules should help improving the quality of a jQuery Plugin:


  1. Avoid using global variables. jQuery plugins should be worked properly in all kinds of circumstances and global variables should be avoided in order to prevent conflict of usages of variables with same name.
  2. Uses the "jQuery" variable instead of "$" to avoid conflict of libraries. There may be conflict of libraries when some libraries are using "$", too.
  3. You plugin should return the same DOM list as they are passed from jQuery selector engine if possible. To return the same DOM list can ensure the chainability in using the plugin.

Happy Programming,

Cloudgen Wong

2010年5月7日星期五

Sizzle Selector Engine is great

jQuery is far more well-known than the Sizzle Selector Engine.  I have met jQuery first before I found the existence of  Sizzle Selector Engine.  I've used jQuery in my projects for 1 and a half years. However,  in the past, I have repeatedly met name of Sizzle but I've just forgotten or ignored it. 

I regarded myself a late comer in jQuery (this baby is now 4 years old, birthday on: Jan 14, 2006).  In the past few years, I uses the prototype library and I switched to jQuery in 2009 and I started authoring jQuery plugins at May 2009.  

After that, I become interested in the engineering aspect of jQuery library.  Until then, the word "Sizzle" come to my mind again.  

The first version of Sizzle Engine was committed by John Resig on August 25, 2008.  In the jquery blog on Jan 14, 2009,  John Resig has announced the Sizzle Engine as a part in the jQuery.  Sizzle Engine was come from the old version of jQuery and now it becomes the core part in jQuery.  Sizzle is responsible for query of jQuery in the syntax of CSS3.  On the other hand, we can view jQuery as a wrapper library for Sizzle Engine since jQuery version 1.3. 

If you are learning jQuery, you'd better familiar the notation used in Sizzle Engine.  And, if you are interested in writing your owner library, the website of Sizzle engine provides a lot of information and, you may find yourself interested in writing a wrapper library for Sizzle, too. (Actually, I have an idea of a new wrapper library in my mind).

If you are studying or trying to write a jquery plugin, I recommend you to have a look at the Sizzle Engine and you'll know more about the philosophy behind jQuery.  Just put a stop here, happy programming!!!

Cloudgen Wong


Welcome

After busy in applying domain name, setting up google site, etc.  The jQuery-plugin is finally come to our world. 

I have a plan to have a single website dedicated for jQuery Plugins in December 2009. At that time, I have designed a couple of jQuery plugins and published them to http://plugins.jquery.com .

At that time, I was so happy that some people find those plugins are useful in their projects.   In old days, I were too lazy to write down detailed document for each plugin.    By the way, I've spent some time in the holidays in May 2010 (that's the labour day in Hong Kong)  for setting up this website. 

Wish you enjoy it.  Happy programming!!!


Cloudgen wong