Asynchronous File Upload - YUI’s Approach
YUI is a truly amazing framework for those who are writing Ajax applications. Its JavaScript widgets allow programmer to create richly interactive UI components with ease. However, these UI widgets are not very useful unless the end result of the interaction can be saved to the server side. Hence YUI has added Ajax support to most of its widgets. While many people are familiar with YUI Connection Manager's Ajax capability, only a few know that Connection Manager can be used to simulate Ajax-like file upload.
The theory that makes asynchronous file upload work is not complicate, but the code for it to work can be a little bit lengthy if it was developed from the scratch. Since there no reason to reinvent the wheel and YUI's Connection Manager can take care of most of the dirty jobs for us, in this article, I'll show you how to use it to do a simple asynchronous file upload. Because XMLHttpRequest object does not support file upload, the Connection Manager uses inline frame approach. Basically what the Connection Manager does is it creates an invisible IFRAME for file upload and parses the server response once the upload is completed. In the end, what you get is an illusion of Ajax-like file upload interaction. However, since this is an IFRAME, some Ajax events such as success or failure are not available in IFRAME method as they are available in regular Ajax request in YUI.
Protecting Your Site From Spam Bot with CAPTCHA
CAPTCHA provides a simple yet effective way to tell humans and computers apart. The need of CAPTCAH arises because web pages which accept user input such as posting comment are vulnerable to automated spam. It is not a difficult task to write a script that could generate large amount of repetitive information and post them to a targeted page in short period of time. Unless the page is protected, it will soon polluted by those spam.
For instance, the site you are visiting, Code Central, receives over 10 junk comments everyday. Fortunately, WordPress uses an algorithm that can filter out most of these junk comments and flags them for review. The unfortunate part is that administrating them is laborious and frustrating - I don't want to delete them in a batch because I don't want to accidentally delete a comment that is submitted by a real user. So I decided to install a CAPTCHA to see if that is going to help.
YUI Based Lightbox - Revisited
Note: This script has been updaed
In the previous article of YUI based lightbox, I've shown you how easily one can create a lightbox using YUI's Dialog class. Although the lightbox we created in the previous article has the basic skeleton of a lightbox, it still lacks some crucial features and it looks quite ugly. Luckily YAHOO released YUI 2.3.0 not long ago, which included an eye candy skin (sam) that is more attractive than one bundled by default. We will use the new skin for the revised lightbox. Since we don't need all the features provided by the Dialog class (e.g., submitting data), I replaced the Dialog class with Panel for the container class of the new lightbox.
A picture is worth a thousand words, so here is a screen shot of our new lightbox:
I might have mentioned this before, but I couldn't address enough the helpfulness of a JavaScript framework in dealing with cross-browser compatibility issues. By using a framework, the new lightbox is compatible with majority A-Graded browsers and it was created with minimal effort. Once again, it has been tested in the following browsers: Firefox 2.0.0.6, Netscape 8.1, IE 6, IE 7, Mozilla 1.7.13, Opera 9.21.
Debug JavaScript with Firebug
Writing JavaScript is easy, but debugging is not due to the very limited debugging functionalities provided by the JavaScript language itself. One of such limitations is that there's no effective way to display debugging message other than embedding a bunch alert boxes or a million lines of document.write in the JavaScript code. Fortunately, external debuggers can more or less help developers to overcome these limitations and make debugging more pleasant.
Creating Lightbox with Yahoo! User Interface Library
Demo Updated (8/29/2007): In addition to the image lightbox demos, I added four more types: text content, web page, web page with video, and embedded video. Check it out.
Yahoo! User Interface Library (YUI) provides a very handy class for creating modal dialog box with background masking, which can be used to create lightbox. If you have no idea what a lightbox is, you can run this online demo to get a taste of what it looks like.
There are several advantages to use YUI to create lightbox. The most important one is you get cross-browser compatibility support out-of-box. The above demo has been tested in IE 6, Firefox 2.0.0.4, Netscape 8.1, Mazilla 1.7 and Opera 9.21, which was created without any hacking. Another hot feature is that one can easily create a drag & drop lightbox without any extra effort.
Read more »
Loading ...