Link Code Insert inserts the HTML code for creating a link at the active element location when the user presses Ctrl+Alt+A. I use it a lot when I am writing a comment and want to add a link. Just select the text you want to link and the userscript will add the HTML code ‘<a href="">‘ before the selected text and a ‘</a>‘ after it.

Technically, this is a UserScript – and not a plugin. But I prefer to think of a userscript as a plugin of a plugin. So I guess it can be included in the Plugin Week.

Note: You must be using Firefox and must have installed GreaseMonkey for this script to work.

Download/Install the UserScript

Plugin Week 2

This plugin is part of the Plugin Week 2 series. Plugin Week is a week when I publish a new plugin each day for an entire week. I have already one this one time – so this is Plugin Week 2. The plugins released so far…

• Weather Man
• MiniCart WordPress Plugin
• Gallifrey WordPress Plugin
• GIMP Plugin – Web 2.0 Shadows
• Drupal Plugin: Page Ad
• Export To WordPress: Joomla Plugin

If you want to get news about the upcoming plugin releases(remember, 1 per day), please subscribe to this site.

Gallifrey is an image gallery WordPress plugin based on the Galleriffic jQuery plugin. It will replace the standard wordpress gallery when you activate it. You don’t have to change the code of all the earlier galleries.

Download Gallifrey Image Gallery WordPress Plugin

Gallifrey Demo

Features

• Smart image preloading after the page is loaded
• Thumbnail navigation
• Support for bookmark-friendly URLs per-image
• Slideshow (with optional auto-updating url bookmarks)
• Events that allow for adding your own custom transition effects
• Graceful degradation when javascript is not available
• Same shortcode as WordPress Gallery – so previous galleries will be updated as well

Installation

• Download the zipped file.
• Extract and upload the contents of the folder to /wp-contents/plugins/ folder
• Enable the plugin from WordPress admin area
• Add galleries into your post using the normal method

If you have any issues with the plugin, post a thread at the Gallifrey Plugin Forum.

Plugin Week

This plugin is part of the Plugin Week 2 series. Plugin Week is a week when I publish a new plugin each day for an entire week. I have already one this one time – so this is Plugin Week 2. This is the second plugin released this week. The first is Weather Man and the second one is MiniCart WordPress Plugin

If you want to get news about the upcoming plugin releases(remember, 1 per day), please subscribe to this site.

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.

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.

Despite the many JavaScript libraries that are available today, I cannot find one that makes it easy to add keyboard shortcuts(or accelerators) to your javascript app. This is because keyboard shortcuts where only used in JavaScript games – no serious web application used keyboard shortcuts to navigate around its interface. But Google apps like Google Reader and Gmail changed that. So, I have created a function to make adding shortcuts to your application much easier.

Changelog

• The single function method was abandoned for an object with two functions
• Shortcut Remove function added
• New option to disable shortcuts in textarea, input fields.

If you are using this script in any of your projects, please switch to the latest version.

Previous Version Documentation

{
"success":"Task done successfully",
"error":false
}

OR

{
"success":false,
"error":"Database Connection Error!"
}

This method is used extensivly in Nexty. Almost all Ajax response in Nexty ares in this format.

Since this is in the JavaScript domain, I thougt it might be better to pubish the details in my OpenJS site. Read more about Success/Error Design Pattern For Ajax.

There has been many ideas about a offline storage mechanism for web applications. Dojo implemented this in its Library. Firefox 3 promises this. Now we have a new arrival in this area – Google Gears. Unlike Dojo’s implementation, Gears require an extension for it to work.

Google Gears is an open source browser extension that lets developers create web applications that can run offline.

See Gears In Action

To see Gears in action, first install the extension…

Google Gears

Then go to Google Reader – you will see a ‘Offline’ mode button in the top right corner. If you click on that the script will download 2000 entries into your local database(SQLite).

To see this database, open up the Firefox Profile folder and enter the ‘Google Gears for Firefox’ folder. You will find many Database files there. Just open any of these in a SQLite V3 supporting viewer.

After the download is complete, you can use the Reader without a net connection.

When you get the connection back, just click on the same button – all the changes will be send to the online server.

Advantages of the Google Gears

• Once the extension is installed, the script will work across all the supported browser. No JavaScript hacks required.
• Full featured Database support – this makes it much easier to work with.
• Supported by Google
• Open Source

Disadvantages of Google Gears

• The user must install an extension for this to work.
• Requires user action before going offline. If your connection breaks suddenly(as it often happens here in India), you are left with nothing.
• All browsers are not supported(yet)
• Beta software – some bugs are to be expected. But, this will be solved in time.

I am still exploring the code – expect a new post with working javascript examples soon.

Google Gear Links

• Google Gears
• Getting Started
• Tutorial
• Developer site
• Frequently asked questions
• Developer Forum
• Gears API Blog
• erik’s weblog
• Gears for Offline