Yesterday, I published a new JavaScript Library – JSL. It borrows many ideas from the famous jQuery library.

Download

• Packed Version – 13 KB
• Source – 38 KB

Features

The Standard Stuff…

• CSS DOM Selectors
• Ajax Functions
• Event Handling is abstracted
• Ability to change style of an element.
• Extendable by Plugins
• Supports all Modern Browsers
• And more…

And then some…

• Function Chainability
• Entire Library is 13 KB(un-gzipped)
• Special handlers for Arrays, Numbers
• Extra Plugins for Unit Testing and Debugging
• Functional Programming Encouraged (map, reduce, filter, etc functions in JSL.array)

Missing Features

XPath Selectors

Does anyone use XPath to select elements in JavaScript? I use CSS selectors for this all the time.

innerHTML Alternatives

I like innerHTML – so I did not include the functions to create DOM elements.

Animations/UI Elements

You will not see any animation functions in this library. Also, no Drag and Drop, sliders, JS dialog boxes and the like. Of course, I may write a plugin for these elements – but right now, they are not supported.

JavaScript Monkey-patching

I don’t do any Prototype style addition to JavaScript standard objects. I hate that – and so should you.

Functions in the global namespace

Everything that I do is under the JSL namespace – except for two shortcut functions – jslib() and $(). So my library adds only three global variables to the namespace – JSL, jslib, and $.

The Kitchen Sink

JSL is a small library – if you want a library with everything, opt for Dojo or YUI.

Some Sample Code

Using Event Handler…

JSL.dom("a").click(function(e) { // Adds a click event handler to all links
	alert(this.href); //Shows the link URL
	JSL.event(e).stop(); //And stops the event from propagating any further
});

The $() Function…

$("div.content p.intro a").setStyle({
	"text-decoration":"underline",
	"color":"red"
});

And everything you expect to work with document.getElementById() works with $() as well…

$("element-id").innerHTML = "Hello World";
$("element-id").getElementsByTagName("a"); // Returns all the anchors under that element.

See More Sample Code

JSL Links

• Documentation
• Demos of JSL in Action
• Support Forum
• Code Repository

License

BSD, as always.

Following the release of Firefox 3, I have updated my URL Lister firefox Add-on. Now it works in Firefox 3 – and I have added a new feature.

For those unfamiliar with URL Lister, its a firefox add-on that shows the URLs of all the open tabs in a textarea so that it can be copied easily. It is my first firefox add-on.

Unfortunately, there is a problem with the mozilla add-ons listing page – I cannot install the extensions using that page. I am getting this error…

Firefox could not install the file at 

https://addons.mozilla.org/en-US/firefox/downloads/file/32487/url_lister-1.1-fx.xpi

because: Invalid file hash (possible download corruption)
-261

However, you can right click the ‘Add to Firefox’ button and choose ‘Save Target As’ and download the file without any issues. Then you can install the extension by dragging the downloaded file into a firefox window. That works perfectly – but not the direct install method.

As a linux user, I have come to expect the fact that servers will collapse when a new version of a distro is released. But those are big files that are transferred(the linux images will be anywhere between 600 MB to 4 GB). But in case of firefox, a 8 MB file managed to bring top servers to their knees. A testament to the popularity of firefox – although I wish mozilla had more mirrors.

If you cannot wait to get the latest version, get it from their FTP servers – they are functioning normally. But, those downloads will NOT BE COUNTED in the final tally for the world record.

Related Links

• Field Guide to Firefox 3
• Firefox 3 Available for Download on Mozilla FTP and Web Servers
• Coming Tuesday, June 17th: Firefox 3

The next language to get the Hello Script treatment is JavaScript – my favorite language. Before we go any further, here is the definitions for Hello Script and JavaScript – just to make sure that we are on the same page…

Hello Script

‘Hello Script’ is a file that contains the most commonly used elements of a programming language so that it can be used as a cheat sheet when working with that language.

JavaScript

JavaScript is a client side scripting language that is used in browsers.

Code

Warning: Do not run this code – you will get a lot of alerts. If you have firebug extension, uncomment the first line – then you can run the code.

<html>
<head>
<title>Hello Script for JS</title>
<script type="text/javascript">
//alert=console.log;
alert("Hello World");

// Variables, concatination
var name = 'Binny';
var year = 2008;
alert("Hello, " + name + " - welcome to " + year );

//If,else conditions
if (year > 2008) {
	alert("Welcome to the future - yes, we have flying cars!");
}
else if(year < 2008) {
	alert("The past - please don't change anything. Don't step on any butterflies. And for the sake of all thats good and holy, stay away from your parents!");
}
else {
	alert("Anything wrong with your time machine? You have not gone anywhere, kiddo.");
}

// For loop
for(var i=0; i<3; i++) {
	alert(i + ") Hi there!");
}

//Numerical Array, While
var rules = [
	'Do no harm',
	'Obey',
	'Continue Living'
];
var i = 0;
while(i<rules.length) {
	alert("Rule " + (i+1) + " : " + rules[i]);
	i++;
}

// Associated array, foreach
var associated = {
	'hello'	:	'world',
	'foo'	:	'bar',
	'lorem'	:	'ipsum'
}
for(key in associated) {
	alert(key + " : " + associated[key]);
}

// Using Join and Split
csv_values = "hello,world,how,are,you".split(",");
alert(csv_values.join(":"));

// Function, argument, return, call
function hello(name) {
	return "Hello " + name;
}
hello_string = hello("Binny");
alert(hello_string);

// One for the OOP fanboys - Class, members, object and stuff.
function Movie(name) { //Constuctor
	this.name = name;
}
Movie.prototype.rateMovie = function() {
	this.rating = (this.name.length % 10) + 1; //IMDBs rating algorithm. True story!
}

Movie.prototype.printMovieDetails = function() {
	alert("Movie : " + this.name + "\nRating : " + this.rating);
}

//Create the object
ncfom = new Movie("New Country for Old Men"); //It's a sequel!
ncfom.printMovieDetails();

// Regular Expressions
string = "Hello World";
if(string.match(/^Hell/)) alert("Yup - its evil\n");
alert(string.replace(/l([^l])/g, "$1")); //Remove an 'l' from both words. Should alert('Helo Word'

/**
 * Specialized code
 */
window.onload = function() {
	var ele = document.getElementById("div-element");
	alert(ele);
	ele.innerHTML = "Hello World";
	ele.onclick = function() {
		alert("You Clicked?");
	}

	document.getElementById("text").value = "Goodbye World";
}
</script>
</head>
<body>

<div id="div-element"></div>

<input type="text" value="3" id="text" />

</body>
</html>

I just released my first firefox plugin – URL Lister. It shows the URLs of all the open tabs in a textarea so that they can be copied easily.

Download/Install

Install URL Lister

If you have installed it, consider rating it or reviewing it at Firefox plugins sandbox. Go to the public page for URL Lister and write a review for the application. I need reviews to promote it to the main extensions page – sandbox plugins are for registered users only.

Usage

Lets say you have these four tabs open…

• OpenJS – JavaScript, Opened.
• Bin-Co
• LinDesk
• BinnyVA

Right click any tab and click on the ‘URL Lister…’ to open up the main dialog. You can also use ‘Tools > URL Lister’. You will find the URLs of all the open tabs there.

There is a drop down menu at the bottom – it has these three options…

• Plain Text
• HTML Anchors
• Linked List

Open URLs

If you have a list of URLs and want to open them all, all you have to do is copy those URLs into this dialog and press OK – this will open up all the given URLs.

And my thanks goes to…

URL Lister is sort of a response to this post by Matt Cutts. I want to thank him for the idea.

There is another plugin with a similar function – Tab URL Copier. I lifted some code from that plugin when creating URL Lister. Thanks.

I have a web server(Apache), and a database server(MySQL) running at all times on my local system. Since LAMP is my preferred platform of development, if I need a new software, I will create it on LAMP. A good example of this is Nexty. Over time, I have discovered that web application can be used as desktop applications. All you need is a web server, a database server and a browser.

There must be some changes to the current model to make this system work. These are a few I could think of…

• Web Server must run as the current user. That way, you can read/write to any file using PHP(or equivalent).
• The application must not be available over the network. Or, the web server must only accept connections from 127.0.0.1
• An installer for these kind of applications must be made.

Advantages

• Familiarity: People are already used to web applications – so it will be easy to switch.
• User Customizable: Users can change the appearance of the application(user stylesheets), and to a limited extent, the functionality(GreaseMonkey).
• Open Source: If the code is in PHP or Ruby on Rails, or anything similar, the code will be available for study or even modification.
• Cross Platform: The same program can be installed in Windows or Linux or whatever – as long as it has a Web server.

Disadvantages

• Imaginary: As of yet no such system exists.
• High Level: The system will not be able to do low level system operations.
• Limited: There will be some very serious limitation to the application unless the current systems are modified. For example, the browser cannot read or write to the filesystem.

I have been using some web applications as desktop applications for a while now – these include WordPress(for keeping notes), activeCollab(project management), Nexty(to do list), and Tiker(time tracker).