Wednesday, December 31, 2008

Sexy Combo in the Web

http://www.mte90.net/index.php?lng=en&mod=articoli&pg=pagina&c=6&articolo=1230669356 - great article about SexyCombo

Sunday, December 28, 2008

Learning form jQuery: how to write good software

1. Provide simple interfaces.

Your users should learn how to use your application as quick as possible. jQuery provides the simplest interface for accessing DOM elements. Everything you should know for it is the $() factory function and CSS selectors. Both designers and programmers are familiar with CSS, so you need minimum time to start using the library. Method names are mnemonic, so you can understand their functionality without looking at the documentation.

Providing documentation is a very good approach, but if your users use it very frequently, it is a signal that you should probably redesign your application. Think about what do your users already know about the problem you solve. Try to make your application to be understood intuitively.

Simple interfaces are good not only for end users, but also for developers. If you have simple and elegant interface, you start to write simple and elegant code almost automatically, and this allows you to solve the problem more quickly and efficiently.

2. Solve real problems.

Don't try to invent problems. There is plenty of them around us, and we should concentrate on reducing them, not producing new ones. Working with DOM was a headache of JavaScript programmers for many years, and jQuery provided the best solution for it. There are lots of such problems in each field, and those developers who solve the complicated ones will get the best reward.

3. Provide only those features that are necessary for solving the problem.

Your application shouldn't be giant. Giant applications cost more, have lots of bugs, and it's difficult for users to learn them. And there is the only way to reduce the size of the application - providing less features. Try to improve existing ones instead. Always ask yourself: if the feature I am going to add to my application is necessary for my users, is it going to make their life better? And if the answer is no, stop even thinking about it. You should think about problem you solve, not about features. This is the way you can create cheap, lightweight, and easy to learn applications.

4. Let third-party developers extend your application.

Yes, you should implement only necessary features. But remember that there are lots of users with specific needs and demands. You can not satisfy all of them, but you can create mechanism that will allow third-party developers to do it for you. Export your data through RSS feeds, provide rich API for developers, and you will get more users.

jQuery has a perfect plugin system that allows developers to create new methods and even selectors. As a result, there are hundreds (or maybe thousands) jQuery plugins that do lots of tasks that jQuery is not able to do natively. The library remains lightweight, but users with very specific needs are able to get ready solutions, without need to code it themselves.

5. Be beautiful.

Your application should be charming. When I work with jQuery, I feel its beauty, but I can not explain it. To reach this, you should write your application with passion, you should really love your job. If you do it just for money, the users will notice it. You can create something perfect (or close to it) if only you invest your emotions, the part of your soul to your job.

Saturday, December 27, 2008

What's new with Sexy Combo

From this version you can make use of triggerSelected config option. If it is set to true, the option which has selected attribute will be the initial value of the combo. You are also able to set combo's name by using name config option.

Wednesday, December 24, 2008

What I have done

I have made some changes in my Sexy Combo jQuery plugin. I have added three new configuration options that allow you to set combo's width, empty text and perform autofilling. The first option is obvious. The second option lets you use combobox without using labels (empty text appear when the text input has no focus and the user did not input something to it), and I think it may be good for some layouts. Autofilling option allows you to configure the plugin so that the first item of the dropdown list will become the value of the text input when the dropdown list is shown. However, the text that was added to the input would be selected, so the end user will be able to easily remove it.

I have also fixed 2 issues. The first was visible when you had combobox at the bottom of the page, so dropdown list caused the window to scroll. The second was that Sexy Combo did not allow to "jump" to another form elements using TAB key.

P.S. Thanks to Nikita Melnichenko who told me about TAB key issue and the author of 37 Phenomenal jQuery Plugins and Demos for Developers who mentioned Sexy Combo in his great article.

Saturday, December 20, 2008

Sexy Combo 1.0.1 updates

I have just released Sexy Combo 1.0.1. In the new version you will be able to customize combobox's width. I have also fixed some Opera bugs.

I will continue to work on plugin customization and fixing browser-specific bugs.

Friday, December 19, 2008

Sexy Combo 1.0.0 released!

I have just released Sexy Combo 1.0.0. It have become cross-browser, so I can claim that it is production-ready! Currently it supports all browsers that jQuery does. I have also removed some configuration options related to the widget presentation, because you can change it editing plugin's stylesheet. Use and enjoy it!!!

Resources

Wednesday, December 10, 2008

Timed Event jQuery plugin documentation

In the previous post I wrote about Timed Event jQuery plugin. Here is documentation for it.

Usage

In order to use Timed Event, you must follow these steps:

  1. Download plugin arhcive and unpack it.
  2. Include jQuery and plugin file (jquery.timed-event.js or jquery.timed-event-min.js) to your web page.
  3. Now you can use Timed Event in your code. Use it in this way:
    $("selector").timedBind("event-type", {delay: [time of delay in milliseconds], buffer: [time of buffer in milliseconds]}, function() {
        //event handler function
    });
    
    As you can see, timedBind accepts the same parameters as jQuery native bind function. But you should take into account that the data parameter in bind function is optional, but is required in timedBind function (in other words, all three parameters of timedBind are required). You can pass an empty object as data parameter, but in this case the behaviour of the timedBind will not differ from bind method. Both properties of data object(delay and buffer) are optional, you can pass any combination of them.

Contribution

If you have some suggestions on improvement the plugin, feel free to email me at Kadalashvili at Vladimir at gmail dot com.

Resources

Timed Event jQuery plugin

JavaScript programming is strongly connected with the events. I can not remember any case when I used JavaScript without using events. At the same time, it is one of the most challenging parts of work of JavaScript programmer, because different browsers "understand" events in different ways. Fortunately, now we have good JavaScript libraries such as jQuery, which makes development of cross-browser JavaScript applications a trivial task. In particular, jQuery simplified working with events strongly.

But programmers always want more. We always want to write better software, have better programming languages and frameworks. This pushes the industry forward, despite the efforts of some stupid bosses.

When working with events I have often faced tasks when I needed to delay handling of the event event for a certain time (event delaying) or (less frequently) to allow event handling only once for a period of time (event buffering). jQuery does not provide any tools to achieve this (and this is the right solution of developers). As for me, in the process of working on various projects, I tried several solutions for this problem, trying to find the most elegant and universal. Now you can evaluate the result of my work in this area - jQuery plugin called Timed Event.

The plugin enables us to solve two tasks that I mentioned - event delaying and event buffering. To achieve this, you will not have to change the code of event handler. You write handler as you would have written it if you didin't need to implement event delaying or buffering. The rest will be done by Timed Event.

Resources

SexyCombo updates

I have just made some changes to the SexyCombo jQuery plugin. First, I replaced $ function inside plugin to jQuery function. This mistake could lead to the conflicts with Portotype and the other JavaScript libraries. Don't get me wrong, I know the convention about using jQuery function inside the plugin, but I missed it in ONE line of code. Second, I have made some changes in plugin CSS file. The problem I solved occured when you placed one combobox under another. Then the dropdown list of the top combo became partly invisible. The problem was solved by adding one line of code to the stylesheet. Thanks to Birukov Sergey who told me about these two issues.

Resources

Submit Killer jQuery plugin

Perhaps, web forms data processing is one of the most frequent problems that JavaScript programmers have to solve. Thesse are form validation, AJAX-submitting and a lot of another stuff. Almost always we have to prevent normal form submitting. The simplest solution for this problem which comes to mind first is using <input type="button" /> instead of <input type="submit" />. But this decision is far from perfectness. First, the form is broken when the user have JavaScript disabled. Second, we still give the possibility of submitting by pressing the Enter key on the textbox. So this decision is unreliable and badly-designed, because it doesn't get the possibility to normally submit the form for users that have JavaScript disabled. A more correct approach is to allow the user with JavaScript turned off to perform default submitting , but if JavaScript is enabled, prevent default submitting and process form data somehow using client-side scripting. This principle is called progressive enhancement.

Thus, in order to prevent normal submitting of a web form, you need to prevent default browser behaviour for clicking on submit and image buttons and pressing the Enter key on the textbox. Too much for such a small task. In order to simplify this task upo to one line of JavaScript code, I wrote jQuery plugin called Submit Killer, the only purpose of which is preventing default submitting of web-forms.

Using Submit Killer is very simple. All you have to do is to call the killSubmit method, while jQuery object must contain elements of forms for which you want to prevent default submitting. The simplest case would look like this:


$("form").killSubmit();

This code snippet will prevent default submitting of all web forms on the web page. I'll be glad if Submit Killer helps developers to solve their problems. Leave comments here if you have some suggestions on improving or bug reports.

Good luck!

Resources

Tuesday, December 9, 2008

Sexy Vote jQuery plugin documentation

Sexy Vote is a jQuery plugin that allows you to embed easily the voting system on your web site. It is very easy to use (as jQuery itself), but you certainly need to have some knowledge about how to configure it (at least how to write callback function that process voting), and of course some basic skills of JavaScript programming.

Usage

To use Sexy Vote, you must follow these steps:

  1. Download the package and unpack it.
  2. Include jQuery to your web page (e.g <script type="text/javascript" src="jquery.js"></script>).
  3. Include plugin file (jquery.sexy-vote-min.js) to your web page (e.g <script type="text/javascript" src="jquery.sexy-vote-min.js"></script>).
  4. Now sexyVote became a native method of jQuery object, and so you can use it as the other jQuery methods. The elements jQuery object contains will be containers for the voting widget. For example, if you write $("#vote").sexyVote(), the voting widget will be rendered inside the element with an ID "vote". You can similarly write $(".vote").sexyVote(), or something else that fit your needs. Sexy Vote also support chaining (as native jQuery methods do), so you can write, for example $("#vote").sexyVote().parent().show() or anything else you need.
  5. You can configure Sexy Vote if you would like to change its appearance or behaviour. To reach this, sexyVote method accepts single parameter in the form of JavaScript object literal. For example, if you write $("#vote").sexyVote({maxScore: 3}), the maximum score user can give will be 3 (so only three stars will be displayed). The full list of configuration options is located in the next section.

Configuring the plugin

Sexy Vote has a number of configuration options that are passed to the sexyVote method in the form of JavaScript object. Here is the complete list of these options.

  • activeImageSrc, passiveImageSrc - the URLs of the images that are displayed in the widget. You will probably need to change the default values of these options. Defaults are "active_star.gif" and "passive_star.gif".
  • maxScore - the maximum score user can give. For example, if you write $("#vote").sexyVote({maxScore: 3}), 3 images (stars) will be displayed and so the user will be able to vote for 3 scores maximum. You will probably not have to change this. Default is 5.
  • fn - the callback function that is called after user have voted (clicked on the image). The function is called in the scope of event target (in this case, the image that was clicked), and two arguments are passed to the function: the event object and score that the user gave. The main purpose of this function is to give to developers the possibility to send the result of the vote to the server, but, of course, you can do anything in this function. Example:
    
    $("#vote").sexyVote({fn: function(e, score) {
        var $this = $(this);
        //now $this is jQuery object that contains the image that was clicked.
        //It is similar to $(e.target)
        alert("You have put " + score + " score. Thank you for voting!");
    }});
    
    
    Default is empty function.
  • messages - this property is an array of strings that are messages displayed in response to user's action right to the images. The message in the zero index is diplsayed when the user have voted (i.e. clicked on the image). The rest of them are displayed when the user hovers on the appropriate image. For example, the message in the first index is displayed when the user places mouse pointer over the first image. Default is ["Your vote have been saved.", "Very bad", "Bad", "Good, but could be better", "Good enough", "Very good" ].

Customizing CSS

Sexy Vote generates the following markup:

<img src="active_star.gif" /><img src="passive_star.gif" />...<span>Messages are displayed here</span>
So if you have placed the widget inside the paragraph with the ID "vote", the markup will look like this:
<p>
<img src="active_star.gif" /><img src="passive_star.gif" />...<span>Messages are displayed here</span>
</p>
According to this, you can customize the appearance of the widget. For example, I included the following stylesheet to the demo page:
#vote span {
    margin-left: 3px;
    font-size: 0.8em;
}

Resources

Why commenting is not enough

Each of us knows you need to listen to the users' feedback in order to succeed. We can never predict the future. The wisest thing we can do is to try to create a good thing, and then monitor the reaction of people and change the product in the appropriate direction. Good clothing manufacturers, such as Zara, do so. Good authors, such as Paul Graham, value the opinion of their readers most of all. One of the main advantages of Web applications compared to the desktop is that developers can constantly improve them, basing on users' feedback, and users see the changes instantly.

Commenting is the most common way of getting feedback on the web. All blog engines have implemented this feature. People comment on the video on YouTube and photos on Flickr, as well as news on Reddit and Digg. But is this the easiest way for users? I think no. Imagine a situation that one of your readers is very busy and has been able to devote only a few minutes to read the post in your blog. Will he leave a comment? Most likely, no.

Consider another situation: you didn't want to write, but you have forced yourself to do so for any reason. The result was the post that was less quality than usually. You have published it, and forgot about it. Will your readers tell about this in the comments? I think not. I do not take trolls into account - they will be happy to express their "opinion". With regard to good readers, they are likely to prefer "not to notice" your mistake. Perhaps some of them simply stop visiting your site. The most loyal readers will remain. But the worst is that this post will make a bad impression about your site for visitors coming for the first time. And all this because of the fact that you didn't get a signal at the right time.

You will not probably deny that the part of the visitors of your site are introverts. They also have their own opinion, but it is difficult for them to express it, so they rarely leave comments. And if this is the only way of feedback on your site, you are missing a part of your audience.

Another situation. You have written documentation for a program that you've created. The only thing you want to know is whether the information is useful and clearly presented. Is the comment the appropriate way of feedback in this case? Probably not.

In general, commenting is not a tool of evaluating the quality of the post. "Great article" and "You suck" are similarly bad. Commenting, in my opinion, is a tool of expression of users' opinion on the topic. At least, good comments.

Understand me correctly - I am not an enemy of commenting. All posts in my blog are opened for commenting, and I delete only trolls' comments and spam. If the reader expresses his opinion (no matter in my favor or not), the comment is always published. I just want to say that commenting is not the only and enough way of getting feedback, it is not suitable for all cases and is not an objective tool for evaluating the quality of the post.

What do I propose? In my opinion, in many cases it would be wise to use a system of voting along with commenting. You want to know whether your readers liked the article? Just ask them about it, and they will answer you. I propose the arrangement: if the user wants to express his opinion about quality of the article, he uses a system of voting. If he wants to express his opinion on the topic of the article, then let him leave a comment.

I didn't invent this. Reddit, Hacker's News and Digg successfully use this system. They combine the systems of voting and commenting, and use the number of votes as an assessment of the quality of the post. And this, in my opinion, is the best approach. Even the busiest reader will find time to vote - that would require less than a minute. If the article would be very bad, readers simply give the lowest rating. For introverts it will not be difficult to evaluate the article. As a result, you will have a more complete picture of what people think of your article and of its topic.

In my spare time, I wrote jQuery plugin called Sexy Vote, which is a widget for voting on the site. It is very simple to use, but offers several possibilities for the configuration, so you can easily customize it to fit your own needs. I will be very happy if it becomes useful for some developers.

Resources

Saturday, December 6, 2008

Rich Array jQuery plugin

Programmers often deal with arrays. This data type is present in almost all programming languages. In this case the difference between languages is in the set of functions of standard library for working with arrays. JavaScript is not an exception, there is a built-in object called Array in this language, with methods for array slicing, getting the index of the element with a specified value etc. In most cases this set of methods is enough (it is excess after all), but sometimes we have a desire to have more rich set of functions, because we have to perform the same operations on arrays several times in our application, and these operations aren't present in the standard library. As a result, you have to write boring, trivial functions, consisting of the only for loop.

Programmers shouldn't do this. Instead of this, they should create a good software that people will want to use, that will help people to solve their problems. Trivial problems kill time and creative energy of the developer, that's why we should try to automate as much of them as possible. As a result we will have more cheap and quality software, and both users and developers will be happy.

jQuery helped us to forget about lots of routine problems that were a part of the life of JavaScript-programmer in the past. Now you aren't forced to set an ID of each element you want to access - this can be done simplier and nicier now. You don't need to worry about browser bugs - the developers of the library deal with them. You should only solve your problem, not being distracted by noise.

The Prototype library extends a standard set of methods of Array object, giving a freedom from solving trivial problems to the developer. jQuery doesn't do it, and it doesn't need to. If the developers tried to make jQuery "for everything", it would lose its main advantage - simplicity. Instead of this, the developers of jQuery have made it pluggable, and it let us to extend the functionality of the library. And I wrote Rich Array - jQuery plugin for working with arrays.

I tried to do all my best to simplify developer's life in this sphere. I included functions for solving the most widespread problems related to arrays to the plugin. Have you ever had to remove null values from the array? To find the intersection of two arrays or difference between them? Filter the array according to some criteria? Sum the values of the array? If yes, than I advice you to use the plugin. It's extrmely lightweight, and your users won't suffer because of long time of page loading. But Rich Array will probably save you some time and energy that you spend as you want - spend more time with your family, have a rest or concentrate on more interesting and important parts of work.

I won't put the documentation for plugin here - the source code is understandable and well-commented. If somebody will want to write the documentation, I will be glad. You may leave here all suggestions on improving or bugs reporting or write me at Kadalashvili dot Vladimir dot gmail dot com.

Good luck!

Resouces: