Category Archives: JavaScript/jQuery

I am JavaScript fanboy

Introduction to Node.js at Yahoo Girl Geek Dinner

Last Thursday, I conducted a workshop about web development and node.js in Girl Geek Dinner event sponsored by Yahoo in Bangalore.

Girl Geek Dinner

Girl Geek Dinner was organized by Yahoo!’s Women in Tech (WIT) group, a grassroots volunteer-led employee organization at Yahoo!. The event is conducted to inspire and support the next generation of technical women.

Continue reading »

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

Dart Hackthon

If you have noticed, the last couple of my posts are around Dart, the new programming language which allows you to create web applications. It is because, last weekend, the Bangalore GTUG group organized a one day hackthon on Dart and I was part of the judging panel for the event 🙂

I started playing around with Dart for a couple of weeks now and so far, I kind of like the language, even though there are couple of bugs and some major features missing. That’s understandable since the language is still a technical preview.

Continue reading »

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

Using YQL in Dart

I was exploring Dart, and wanted to create a small project using it to compare it with JavaScript. I was searching for ideas and then I thought of using YQL in Dart, to see how easy or difficult it is.

After poking around a bit, I found that Dart supports making Rest calls using XMLHttpRequest object, similar to JavaScript. I quickly tried to make a YQL call using that object.

The following is the bulk of the code. It is exactly how you do it in plain JavaScript.

URLEncoding

The only place I found a problem, was that Dart doesn’t have a URLEncoder yet. You have to emulate the URLEncoding done in JavaScript. I hope Dart gets its own URLEncoder soon.

Full source code

I have uploaded the full source code to github and added a couple of other examples as well. Check it out.

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

URLEncoding in Dart

I was trying to use YQL from Dart and found that there is no way you can do URLEncoding using Dart.

I searched the dart:html, dart:uri and dart:io packages and found that none of them have the method to do URLEncoding.

I then posted about it in stackoverflow and then later found that, right now the only way to do URLEncoding is to emulate the encodeURL() function of JavaScript. Someone from Google has already done it. I just copied the file and placed inside my Dart project and then used the following line in my dart file.

#import("EncodeDecode.dart");

Although it works right now, I would really like to see this as part of the dart:uri package. Let’s see if someone from the Dart team is listening to this.

 

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

Introduction to Node.js at jsFoo

I gave a talk about Node.JS at jsFoo, the JavaScript conference today. I thought of sharing the slides and the source code of my demos so that it would be useful for others.

You can find the slide that I used for the talk from my slideshare account. I have also embedded it below for quick browsing.

Continue reading »

Posted in Events/Conferences, JavaScript/jQuery | Tagged , , | 5 Comments

Excellent videos to get you started with CouchDB

Okay, I got to admit. My latest crush is CouchDB. 🙂

I found lot of people referring to CouchDB when they were talking about node.js which made to find out more about CouchDB. I read a couple of articles and then came to know that O’Reilly was having a webcast (in fact two), in which Chris Anderson, one of the core committers of CouchDB explains about it. I thought of posting the videos here, so that even you could get hooked up to CouchDB 😉

Introduction to Apache CouchDB

This is part one of the webcast. In this webcast, Chris gives a technical overview. He also describes some of CouchDB’s existing users. This webcast also had a question and answer session where Chris answered user’s questions.

You can either view them as an Adobe Connect Pro archived recording or in youtube. I have embedded the youtube video below for quick viewing

Writing jQuery CouchApps

This is part two of the webcast. In this webcast, Chris shows how to hack JQuery CouchApps, which is a p2p web applications that can be deployed anywhere there’s a couch DB.

You can either view them as an Adobe Connect Pro archived recording or in youtube. I have embedded the youtube video below for quick viewing.

CouchDB to the edge (JSConf)

This is a talk which Chris Anderson and Jan Lehnardt gave in JSConf 2009 titled “CouchDB to the edge”. They give a nice introduction to CouchDB and also explain about how to write offline web apps that can synchronize the data once they are online.

You can view the video in blip.tv. I have embedded it below for easy viewing.

What’s new in CouchDB 0.11 and 1.0

This is an upcoming webcast (again by O’Reilly) which will happen on June 22, 2010.

In this webcast, Jan Lehnardt will be talking about the new features that will be coming up in the latest version of CouchDB like Views, Replication, Authentication, Virtual Hosts and the Rewriter etc.

You can register for the webcast at the webcast’s homepage.

I will also try to embed the video of this webcast once it is published till then happy couching 😉

Update

Videos from the latest O’Reilly are up now.

You can either view them as an Adobe Connect Pro archived recording or in youtube. I have embedded the youtube video below for quick viewing.

Posted in Database Programming, JavaScript/jQuery | 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

Associating urls created with bit.ly API to your account

Recently while working on adding the feature to enter your own bit.ly API key to my Easy Retweet WordPress Plugin, I found out that by default all short urls created using bit.ly API (both REST and JavaScript API’s) are not associated with your account.

Upon further researching I found that there is an undocumented way of associating the urls created with your account. The undocumented way is to add an additional parameter called history with value 1 to the API URL.

Using the history parameter in bit.ly’s REST API

So for REST API, you have to use the following url.

http://api.bit.ly/shorten?version=2.0.1&longUrl=http://sudarmuthu.com&login=bitlyapidemo&apiKey=R_0da49e0a9118ff35f52f629d2d71bf07&format=json&history=1

If you are using PHP, then code would be

function get_bitly_shorturl($longurl) {
	$url = "http://api.bit.ly/shorten?version=2.0.1&login=bitlyapidemo&apiKey=R_0da49e0a9118ff35f52f629d2d71bf07&format=json&history=1" . "&longurl=$longurl";

	//using curl
	$curlObject = curl_init();
	curl_setopt($curlObject,CURLOPT_URL,$url);
	curl_setopt($curlObject,CURLOPT_RETURNTRANSFER,true);
	curl_setopt($curlObject,CURLOPT_HEADER,false);

	$result_json = curl_exec($curlObject);
	curl_close($curlObject);

	//decode JSON. Assumes that it is PHP5
	$result = json_decode($result_json);

	return $result['results'][shortUrl];
}

If you are going to use it in WordPress, then you can use the inbuilt WP_Http class instead of curl as suggested by Ozh. The following code shows you how it can be done in WordPress

function get_bitly_shorturl($longurl) {
	$url = "http://api.bit.ly/shorten?version=2.0.1&login=bitlyapidemo&apiKey=R_0da49e0a9118ff35f52f629d2d71bf07&format=json&history=1" . "&longurl=$longurl";

	//using WP_Http present in WordPress
	$request = new WP_Http;
	$result_json = $request->request($url);

	$result = json_decode($result_json);

	return $result['results'][shortUrl];
}

Using the history parameter in bit.ly’s JavaScript API

If you are using bit.ly’s JavaScript API, then it is not as straight forward as the REST API. Instead of using the provided shorten method, you have to use the low level call method.

The following code shows you how you can do it in JavaScript API.

BitlyClient.call('shorten', {'longUrl':'http://sudarmuthu.com', 'history':'1'}, 'BitlyCB.shortenResponse');

I am not sure why bit.ly is not associating the created shorturls automatically with your account, when you provide the API Key, it is the expected default behavior. Or at least they could have documented about this history variable in their API. I guess only someone from bit.ly can answer this. 🙂

Posted in API's/Mashup, JavaScript/jQuery, WordPress | 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