MyCodeFixes

Free Windows Partition and Backup Tools

noreply@blogger.com (Anonymous) — Sun, 06 Apr 2014 00:58:00 +0000

It’s been eons since I posted on this blog. Grad school kept me pretty busy. In the meanwhile I also created another blog that mainly deals with my thoughts on user experience and HCI. Anyways, with my graduation date almost around the corner, its time to resume writing at this blog as well.

Since this is almost as good as a fresh start, I just going to keep it short and write about 2 pretty useful tools that as a windows user you probably want to keep in your arsenal.

The first is EaseUS partition master.

If you ever need to create partitions on your windows hard drive, because the C drive is just lame if everything is just in that one single drive, this is the tool to use. Best of all, it is free for personal use. So, just do yourself a favor and grab this one.

Then next one is SyncBackFree

As the name suggests, it lets you sync data across drives. If you are used to using WinSCP when designing websites to keep the files on your local and remote server in sync, you will find this tool extremely pleasant. This is what I use to keep a mirror image of my windows drives on my portable drive.

Signing Off
Ryan

Backup and Restore using MySQL Workbench

noreply@blogger.com (Anonymous) — Sun, 30 Dec 2012 01:03:00 +0000

Not so recently, I installed MySQL Workbench on my local system for a personal project. I had installed it a long time ago and it seems that after Oracle's acquisition of MySQL, they have made quite a few changes to the setup. Especially the bundle that you can install now contains examples and MySQL server and the MySQL workbench.

One nice feature about this new bundle is that you don't need to install additional software if you already have MySQL workbench installed. Earlier, you had to install MySQL admin to do a backup and restore of your system. Now its a bit more simplified since everything is accessible from within MySQL workbench itself.

In this post, I am just going to show the steps involved in using the new MySQL workbench (the one that I have is MySQL Workbench 4.2.44 CE) to take a backup of your database in a simple text file and then later use the same text file to restore your database to a prior state.

My MySQL database is on my local system, uses the standard port 3306 and is at its default install state at the moment. The screenshot of the homepage looks like this.

In order to take a backup of your database, you need to focus on the Server Administration section of Workbench and select your MySQL server from the list of servers displayed.

Once you do that, you are taken to a page where it shows you details about the health of the server and the different operations that you can perform on the this instance of your MySQL server.

Since you want to take a backup, you need to select the option that is circled in red that lets you import and export data.

Lets first export our data. Its pretty easy, select the database and then the tables from that database of which you want to take a backup.

For small projects, its convenient to take a backup in a single file. This file will contain all the sql statements that can be used to backup all the data and structure of you schema. Most of the times, you might want to take a backup of only the data, but not the schema. If you are taking a backup of the schema, it just means that when you use the file to restore, it will try to recreate the tables if the they don't already exist. However, if you don't want this extra detail to be present in your backup file, and only want backup of the data, an option in the advanced tab lets you do that.

Once you are done mixing and matching all the options, click on the Export progress tab and then click on Start Export.

That's as easy as it gets to take a backup of your MySQL database.

Restoration is an equally easy process. Just select the file that you want to use as the restoration file and click on start import. And you are good to go.

Pretty neat, although I do believe a few more changes to the interface could make some things more obvious.

Hope this helps!

Happy Programming :)

Signing Off

Ryan

Git : Editing A Previous Commit

noreply@blogger.com (Anonymous) — Wed, 19 Dec 2012 21:43:00 +0000

When you work with Git, making branches is a very common task and when you are flooded with ideas, you may be in a hurry and sometimes make mistakes. The most common example of making mistakes when committing in git is - the commit message. Sometimes, just after committing, you would realize that you forgot to mention something crucial.

Sometimes, it may also happen that when you create your commit, you might accidentally forget to add a particular file to the commit. Even this is a likely scenario since git does not automatically add new directories under version control when you add them through your local file system. So if you did a git add . during your first commit and then created lots of subdirectories and files, they will not be added automatically just because you had done an initial "git add .".

Well, there is one small source of relief - and that is - you can easily amend the last commit in git and fix these tiny issues. For example, let us say that you just committed with a very nonsensical and convoluted message. like this

git commit -m "I was so drunk when I wrote this shit".

And then, the next morning when you wake up, you do a git log and you see this message pop up on your screen and jump out of your seat. Well, if you have not pushed your changes upstream, i.e. the commit still resides only on your local repository, it would really serve a noble purpose if you actually make the message more sensible. Here's how you can do that.

git commit --amend -m "This commit has all the equations that prove the String Theory"

The above command will simply edit the commit message of the latest commit.

However, if you have done something more grave, like missed out on files that were supposed to be added in the previous commit, then you can simply add them using the git add . command then use the git commit with the --amend option in the same way as shown above. Basically what you did was that you rebuilt the tree that represents the files of this commit, discarded the previous commit and created a new one in its place. You can say so because when you amend a commit, it results in a new commit checksum.

Hope this helps!

Signing Off
Ryan

Timer Chaining in JavaScript

noreply@blogger.com (Anonymous) — Wed, 19 Dec 2012 16:09:00 +0000

Only recently, I was working on a project where I had to implement a feature that is usually implemented using gif. What I had to do was to cause 4 images - lets say 1, A, B, C overlayed on each other to display sequentially. And then, after the first set of 4 images have been displayed, have a similar sequence repeat, but with only the first image changed, i.e. 2, A, B, C. And then the third set - 3, A, B, C.

Now, since the sample that I had to replicate was made in gif, I presume that creating such an image using an image editing software is pretty easy. My task was to replicate this effect using pure javascript. Moreover, since it was only in the development phase, I had to design for flexibility, since requirements can change at any moment of time. Thankfully, for me, designing for flexibility is a huge turn on. Albeit inititally difficulty, the immense amout of satisfaction that you gain out of it when you see the requirements change and be able to tell your clients that you can implement the changes in like 10 seconds is totally worth the time and energy that you put in during the initial development phases.

For my experiment, the flexibility that I had to incorporate was to be able to change the duration for which each of the 4 images can be displayed if the requirements changed. Had it been a gif file, it wold have been an easy task, just change the time in the application and then it would be ready. Show the client, and if its not what he/she wants, then redo the same.

I wanted to achieve something similar in JavasScript. However instead of a tool I wanted to create a system wherein you can programmatically configure the time duration for each image and then automatically have the effect ripple throughout all the sequences of images.

Also, instead of restricting the system to that of 4 images, I wanted it to be extensible such that it would be able to incorporate any number of images that could be overlaid on top of each other. Also, I wanted the system to behave in a way that incorporates a slightly different functionality - not be restricted to images being overlaid.

So, ultimately, after thinking about all the flexibility that I wanted to incorporate into the system, it turned out that what I wanted to create was a system of timers such that each timer could be chained to each other yet they would be oblivious to characteristics of the next timer. Also, these timers would have a feature that would let them bind the timer ending function for the next timer without knowing what the function does. And the beauty would be that each of these functions can be chained to an infinite level.

So, how did i proceed to make such a system.

First things first.

I designed the system as a phase based system. Since I had 4 images in my sequence, I created a object that saved the properties of 4 phases and references to the functions that would be invoked on the terimination of each function. I called this object a phasedTimeout object, which is essentially nothing but a nested object.

The first thing that I did was - created an object that contains all the values for which i want each of the phases to execute.

var settings = {
  duration1:2000, //Millisecond duration for the first timer
  duration2:300, //Millisecond duration for the second timer.
  duration3:300, //Millisecond duration for the third timer.
  duration4:300, //Millisecond duration for the fourth timer.
 };

In the next part, I define the different phases, and the functions that can be executed at the end of each phase.

var phaseTimeouts =  {
  'phase1':
   {
    duration:settings.duration1,
    end : function(currentPhaseId){
     console.log('Ending phase : '+ currentPhaseId);
    }
   }
  ,
  'phase2':
   {
    duration:settings.duration2,
    end : function(currentPhaseId){
     console.log('Ending phase : '+ currentPhaseId);
    }
   }
  ,
  'phase3':
   {
    duration:settings.duration3,
    end : function(currentPhaseId){
     console.log('Ending phase : '+ currentPhaseId);
    }
   }
  ,
  'phase4':
   {
    duration:settings.duration4,
    end : function(currentPhaseId){
     console.log('Ending phase : '+ currentPhaseId);
    }
   }
 }

And then, finally on window loading, ( because it was part of my requirement to do all of this only after the images on the page have loaded), i created a function that chains together the different phases.

var timeOutSetter = function(){
  
   //Call the terminating function of the previous phase
   phaseTimeouts['phase'+currentPhaseId].end(currentPhaseId);
   
   //If there is anything left in phaseTimeouts array
   //create a new timer and update the new timerId
   var nextPhaseKey = 'phase'+(currentPhaseId+1);
   if(phaseTimeouts[nextPhaseKey]){
    currentPhaseId++;
    console.log('Entering Next Phase : ' + nextPhaseKey);
    currentTimerId = setTimeout(timeOutSetter,phaseTimeouts[nextPhaseKey].duration);
   }
  };

The above function does nothing but chains the different timers together by using the settings from the phaseTimeouts object. The variable phaseTimeouts is a misnomer since it captures more than just the timeout, and can perhaps be used to bind extra functionality.

For my experiment, I toggled the visibility of different images inside the 'end' function of each of the phases. But the fact that you can have any number of phases and that each phase has a different function that handles the phase end that is independent of each other makes it all the more useful.

Below is the piece of code in its entirety

$(function(){

 var settings = {
  duration1:2000, //Millisecond duration for the first timer
  duration2:300, //Millisecond duration for the second timer.
  duration3:300, //Millisecond duration for the third timer.
  duration4:300, //Millisecond duration for the fourth timer.
 };
 
 var phaseTimeouts =  {
  'phase1':
   {
    duration:settings.duration1,
    end : function(currentPhaseId){
     console.log('Ending phase : '+ currentPhaseId);
    }
   }
  ,
  'phase2':
   {
    duration:settings.duration2,
    end : function(currentPhaseId){
     console.log('Ending phase : '+ currentPhaseId);
    }
   }
  ,
  'phase3':
   {
    duration:settings.duration3,
    end : function(currentPhaseId){
     console.log('Ending phase : '+ currentPhaseId);
    }
   }
  ,
  'phase4':
   {
    duration:settings.duration4,
    end : function(currentPhaseId){
     console.log('Ending phase : '+ currentPhaseId);
    }
   }
 }
 
 //Once all the contents of the window finishes loading, start the slideshow
 $(window).load(function(){
  
  var currentPhaseId = 1;
  var currentTimerId = 0;
  
  var timeOutSetter = function(){
  
   //Call the terminating function of the previous phase
   phaseTimeouts['phase'+currentPhaseId].end(currentPhaseId);
   
   //If there is anything left in phaseTimeouts array
   //create a new timer and update the new timerId
   var nextPhaseKey = 'phase'+(currentPhaseId+1);
   if(phaseTimeouts[nextPhaseKey]){
    currentPhaseId++;
    console.log('Entering Next Phase : ' + nextPhaseKey);
    currentTimerId = setTimeout(timeOutSetter,phaseTimeouts[nextPhaseKey].duration);
   }
  };
  
  var currentTimerId = setTimeout(timeOutSetter,phaseTimeouts['phase1'].duration);
  
 });
 
});

Decoupled designs can be so addictive, is'int it?

Signing Off

Ryan

Git : Status Of Working And Staged Files

noreply@blogger.com (Anonymous) — Wed, 12 Dec 2012 19:43:00 +0000

I just came to know about this very neat feature of the git status command.

Basically, the status command gives you the the names of the files which you are tracking but have certain changes in them relative to your last commit.

Now, Git has 3 places in which it keeps the code - the commit area, the stage area/index and the working directory.

Lets take a few scenarios to explain the usefulness of this command

Scenario 1

Lets say that you have a file called Sample_File.txt in the working directory to which you made a few changes. But you have not staged it yet. So, the state of the file in the three repositories can be described as (latest commit == staged) != (working).

To know which files have been modified in the working directory, in a very shorthand form, use git status with the -s option. Here's what I got when I ran it on my system.

Notice that the M is in Red, and there is a little bit space to its left, which means, that the file is modified in your working directory. (The extra space is explained in scenario 2)

The status code M stands for 'Modified'. There are many other one letter status codes that you can take a peek at over here.

Scenario 2

Lets say that you have a file in your working directory, that has some changes but you staged it after making these changes.

In this case the state of the file in the three repositories can be described as (latest commit)! = (staged == working )

Now if you run git status -s, this is what you get

Notice that the M is in Green, but this time there no space to its left, which means, that the file is in a modified state in your staged directory. You can however notice that there is some extra space between the M and the file name this time. (Will be clarified in Scenario 3)

Scenario 3

Lets say that your made changes to your file, staged it and then edited it again.

In this case the state of the file in the three repositories can be described as (latest commit ! = staged != working )

Now you can see clearly that you have 2 M's. One in red indicating the state of your file in the staged area and one in green indicating the state of your file in the working directory.

Its quite common that throughout your workflow, you would find yourself moving between the above scenarios sequentially. (Scenario 1 -> Scenario 2 -> Scenario 3) . The above set of commands should be able to help you keep track of what files were changed where.

References
The git manual reference

Signing Off
Ryan

Using Google Drive As A Web Host

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 19:31:00 +0000

Okey, another one of my experiments. I came to know a few days ago that Google officially announced how you can now use your Google Drive account as a web host.

So, I decided to make use of this awesome new feature and tried to create and host my profile on Google Drive itself. In this post, I am simply going to tell you what you need to do to get up and running with Google Drive as your web host in its simplest form.

Things that you need to do to setup Google Drive as your web host

Go to Google Drive

Of course, you gotta have a Google account to begin in the first place and then just type in drive.google.com
Create a public folder

This is important. If you want to use Google Drive as a web host, you need to keep your files in a public directory. Create a new folder and then simply choose the 'share' button and give it public access. Lets assume my folder is called 'ryan'
Dumping your static files

Lets say that your site has a lot of html pages, css stylesheets, jQuery, javascript, images - the usual stuff. Just add all your files in the same directory structure in which they are present in your local system to the public folder that you just created. So, all my files are dumped into the public folder called 'ryan' in my google drive.
Naming convention

Ensure that at least one file in the public folder is named as index.html. This will act as the landing page for your site.
What to publish

Now comes an important step. In order to share your site, you need to share a link to the public folder. Initially I thought that you would need to share the link to the index.html but that did not work as expected.

So what you need to do is, note the google drive file-id of your public folder. To do that, just open your public folder in google drive. By default it lists all the files in that folder. In the url at the top, you will see that it contains a long string of garbled aphanumeric characters after the last slash. That is your folder id. Copy it.
Creating a url to publish

Now all you need is a url that points to your folder. To create your url, simply append the file id to the following string - http://googledrive.com/host/

For eg. The raw link to my profile on google drive is http://googledrive.com/host/0B87xZT3F0rDcZlVONVRVY3QtZFE

And that pretty much does it. Clicking on the above URL serves the index.html page of your public folder.

Other Tips

If you want to use a neat little name instead of the long string of garbled alphanumeric characters that appear at the end of the url, go to Gdriv.es and convert your folder id custom name. That's what I did for my profile, and now it looks like this - http://gdriv.es/ryansukale. Much more neat i'd say.
Sometimes its just easier to download Google Drive for the desktop, edit your files right in your local machine and then watch them automatically get uploaded.
When multiple pages are interlinked, I have observed that the url in the address bar remains the same. So, I guess bookmarking will be an issue in this case.

Signing Off

Ryan

Handling Page Unload Using JavaScript

noreply@blogger.com (Anonymous) — Mon, 10 Dec 2012 16:02:00 +0000

Recently for one of my projects, I was working on trying to implement some functionality wherein if the user tried to leave web page by any other means other than submitting a form, (s)he would be prompted for confirmation. It was part of one of the research experiment surveys that I was designing. So, if the user left the page, we would simply discard the user's responses as invalid because partial responses are of no use to do any meaningful analysis.

Apparently, there are plenty of ways in which a user can close a webpage - the back button, the close button, or maybe some other gestures that I might be unaware of that are present in some of the newer web-browsing applications/devices.

What I found interesting was that there is a very simple and convenient way to check when a page is being 'unloaded' from a browser window. Javascript lets you bind a neat little handler to the 'window.onbeforeunload' property which tells the runtime that a web page is going to be unloaded.

Being a jQuery fanatic, I usually tend to use jQuery for all such stuff, since it makes maintenance a far easier task than writing pure JavaScript. So, my jQuery instincts told me to use the new on method to bind an event handler to the event. And it did work pretty good. All I did was this -

window.onbeforeunload = function(){ return "Are you sure 
you want to leave the page?"; };

Oh, I am sure that message looks familiar on many marketing sites. You can be assured that I am not creating one more such website. In fact, even the message that I displayed was something completely different. This is just meant to be a sample.

Easy peasy, and that works. Now, the issue comes when the user actually submits the form. The issue is that this function fires if the user leaves the page in any way, which does make a lot of sense, because after all, the user is leaving the page.

However, what I did not want was for the function to fire when the user submitted the form. So, what did I do? I just created a submit handler for my form and then tried to unbind the event handler using the off function of jQuery.

Neat as it may sound, that did not work. I am still not sure why. However after going through a couple of posts wondering what I had done wrong, it dawned on me that a better way to handle this feature was to both bind and unbind an event handler for this function directly using pure JavaScript.

So, this is what i eventually ended up doing

 //For binding
 window.onbeforeunload = confirmExit;
 function confirmExit()
 {
  return "Are you sure you want to leave this page?";
 }
 
 //For unbinding
 $('#myForm').submit(function(event){
  window.onbeforeunload = null;
 });

And that's pretty much all it took to create a page that warns the user before (s)he accidentally (or intentionally) attempts to leave a web page.

Also, after completing my piece of code, i stumbled across this jQuery unload function, that I beieve pretty much does the same thing.

Signing Off
Ryan

Change Image Resolution in Powerpoint

noreply@blogger.com (Anonymous) — Mon, 10 Dec 2012 15:24:00 +0000

Recently for one of my projects a teammate had created a simple Powerpoint presentation , the slides of which we later decided to use as a mockup for a website.

We wanted to make a video using these slides emulating the user interaction with the pages. I believe that the video authoring tool that was being used required images in order to create a video. Now, I haven't worked on any video authoring tool before, but then, of course I am supposed to be knowing a lot more about tech than I actually do now.

So, I said that I would try to export the slides as images and that they could be used by my teammate who was making the video.

I was making use of Microsoft Powerpoint 2010, which is a very good piece of software. Hopefully many of you would agree if you are using it. Well, if you don't agree, I am never in a mood to argue about Microsoft software.

One neat feature that Powerpoint has is that it lets you save your slides in the form of jpeg images. Just go to File->Save as->, and select the file type to be jpeg images.

The interesting thing is that the images exported are not of such a high quality. So, when my teammate added them into the video, most of the text got blurred.

Well, there is a crazy way to increase the resolution of the images when you are saving a Powerpoint presentation as a set of images. I could not find any options from the UI, but it can be done by adding a registry entry.

Simply type in regedit in the command prompt or in the run manager or in your start menu.
Expand the registry to HKEY_CURRENT_USER\Software\Microsoft\Office\14.0\PowerPoint\Options
Add a new registry key from Edit->New DWORD Value
Name the new key ExportBitmapResolution and set its (Decimal) value to anything among these - 50, 96, 100, 150, 200, 250, 300. Maybe you can try other values and see if tha works out well for you.
Open Powerpoint again, and then try to save your file as a set of jpeg images. This time your pictures will be of a different resolution depending upon what decimal value you provided for the new registry key.

I am not registry expert but if you have some other version of Microsoft Windows or having some other issues, check out the official documentation at their site here and figure them out.

Signing Off

Ryan

Github : File Changes and Commit History

noreply@blogger.com (Anonymous) — Thu, 29 Nov 2012 21:12:00 +0000

Most of the times, when working with Github, you will want to see the differences between the current local copy of a file and the previous commits. One of the easiest ways to see it visually would be to make use of the gitk command and give the file name as the argument. e.g.

gitk filename

Thats all. This command would open up a neat little window and show you all the changes that were made to this file across different commit and lets you compare it with the version in your current working directory. Oh, and do remember to include the relative path before the filename. Standard convention.

Signing Off

Ryan

Keyboard Shortcuts For Gmail

noreply@blogger.com (Unknown) — Tue, 23 Oct 2012 19:35:00 +0000

The more you work, the less you want to move your hands away from the keyboard. And most of us spend shitload of time browsing through emails. The last thing that you want to do is have to use your mouse when you want to do bulk actions using email such as deleting, archiving or moving emails to specific labels.

If by any chance you are gmail user, you have a lot of options to improve your productivity - at least during email time.

So, lets cut the crap and get to the point.

Things to get you started with using keyboard shortcuts in gmail

Setup your gmail to make use of keyboard shortcuts.
Know where to look for help when you start learning or when you forget a shortcut.
Memorize the common shortcuts that are relevant to YOU.

1) Setup your gmail to make use of keyboard shortcuts

Go to the cog icon in the new gmail interface (new as of this writing in Oct 2012)
Go to 'Settings'
Look for the keyboard shortcuts option and enable it.

2) Know where to look for help when you start learning or when you forget a shortcut.
There are 2 ways you can do this

Instant help : Press ? anywhere in your gmail (while you not typing, of course). You get a list of available shorcuts.
Official google documentation - List of all the shortcuts with their explanation

3) Frequenty Used ones you might LOVE to have at your finger tips

Select conversation - x (One of the most basic ones, You definitely would want to learn this one to combine it with others)
Next conversation - j
Prev conversation - k
Delete conversation - # (This is just so important!)
Move to label - First select using x , and then press v (Definitely learn this one)
Go to inbox - g then i
Compose - c
Search - /
Reply - r
Reply All - Shift + a
Mark as read - Shift + i
Mark as unread - Shift + u
Move to chat search - q

Happy Programming :)
Signing Off

Ryan

Useful Google Chrome Extensions

noreply@blogger.com (Unknown) — Wed, 04 Jul 2012 16:48:00 +0000

Over a period of time, I came across a couple of good Google chrome extensions that have helped me quite a bit in getting things done.

This post is nothing but just a short list of some really useful google chrome extensions that you might find useful if you are a developer or if you spend most of your time online working on Google Chrome and like to organize your stuff right from your browser window.

As a good practice, I mostly keep the extensions disabled and only enable the ones I need when i need them such as Awesome Screenshot or the Alarm clock. If you keep too many of these active, Chrome takes extra time to startup, which is something that none of us want.

Sometimes its just better to use different extensions in different chrome profiles and you can use each profile for a different purpose.

Here's the stuff that I use. Click on the titles to go to the extension in the chrome extension gallery. If you are aware of better alternatives to some of these, I would love to try them out, so don't hesitate to share the goodies!

Springpad Extension

Springpad is a free application that makes it quick and easy to take notes and save anything you want to remember - from tasks and lists to products, places, movies, recipes and more. Everything you save is automatically organized and enhanced with useful information for instant access on the web and on your phone

Chrome YouTube Downloader

Download youtube videos in different formats. Such extensions keep on failing whenever there is a new update to youtube, so I am not sure if this one is still working at the time that you are reading this post. Remember to check the user comments before installing this extension.

Awesome Screenshot: Capture & Annotate

Capture the whole page or any portion, annotate it with rectangles, circles, arrows, lines and text, blur sensitive info, one-click…

Instapaper

Add the current page to your Instapaper List

Similar to pocket. A single click on the icon will save the current page to your Instapaper unread list. A double click will take you to the Instapaper unread list.

Todo.ly

Todo.ly is an intuitive and easy to use online Todo list, and Task Manager. It helps you to get organized, and to get things done.

Easy Clock

Easy to use world clock. Find time for global meetings easily. Do time zone conversions among cities intuitively.

Facebook Lite for Chrome

Receive notifications and quickly access everything you love about Facebook with Facebook Lite for Chrome.

Google +1 Button

+1 and share a web page, anywhere you go on the web.

Google Calendar

Easily check Google Calendar and add new events from websites you visit.

Google Dictionary (by Google)

View definitions easily as you browse the web.

With this extension, you can:

Double-click any word to view its definition in a small pop-up bubble.
View the complete definition of any word or phrase using the toolbar dictionary.

OmniMail for GMail

Quickly send email from the address bar using GMail™!

OmniMail helps you send emails faster! Easily start new emails from the address bar/omnibox.

Pocket (formerly Read It Later)

Pocket Extension for Google Chrome – The best way to save articles, videos and more

When you find something on the web that you want to view later, put it in Pocket. It automatically syncs to your phone, tablet or computer so you can view it at any time, even without an internet connection.

Send to Google Docs

Allows you to upload a pdf version of the current page to your Google Docs using the pdfcrowd service.

This extension's purpose is to make it easy to save a web page to your Google Docs.

Talking Alarm Clock

A clock with two configurable alarms that will play a sound and speak a phrase of your choice.

This extension gives you a handy and fun alarm clock that's at your fingertips whenever you're running Chrome!

Two separate alarms, with handy controls to adjust by 5-minute intervals - or type any exact time with 1-minute precision.

Windows Live Messenger Extension

Runs Windows Live Messenger in Google Chrome.Connect with friends and family with Windows Live Messenger (MSN Messenger). Sign in with Windows Live ID and chat with your friends. This one has a good sound alert

Yet Another Extension for Google Bookmarks

YAGBE - Displays Google Bookmarks in a tree. Supports nested labels, searching, sorting, creating, and managing Google Bookmarks.

Sticky Notes

Quick and easy notes for Chrome : Sticky Notes is a Chrome app that locally stores all your notes in a single tab. It auto saves on every letter, so you don't have to worry about losing something because your computer crashed and you didn't click Save - it's already done for you!

Checker Plus for Gmail
Displays new emails and the sender's contact photo, get desktop notifications or even listen, read or delete them without opening a tab.

Happy Programming :)
Signing Off

Ryan

jQuery makeArray And Array Lengths

noreply@blogger.com (Unknown) — Mon, 25 Jun 2012 10:54:00 +0000

Today I just came to know about a pretty cool thing when i was going through the documentation of the jQuery.map function. Now, the jQuery makeArray function is pretty useful because it can convert objects into arrays. But there is one restriction, your objects need to be array like objects. And what are array like objects? Array like objects are objects that have a length property. And I think that it would be safe to presume that he most common array like object known to mankind is the arguments object that is available in javascript functions.

Well, arrays in JavaScript are pretty cool because you can just remove elements from the end of an array by doing a very simple thing. Modifying the length property of the array. For example, lets say that you have an array

var myArray = [1,2,3,4,0,0,0];

Now you want to keep only the first four elements. What do you do? You simply change the lenght of the array to 4. And voila you're done. While that's cool, I was hoping that if you want to delete elements from the beginning of the array, you could set the length to a negative value. But sadly, that does not work :(. Well, you could always resolve to the good ol technique of using the shift() function. Or you could choose to reverse() and then pop(). Depends on your requirement.

But the interesting thing was that when using the makeArray function, if the length property is not set to a proper value, you will end up with an incorrect array. Taking this example right from the jQuery documentation page for the map function

// The following object masquerades as an array.
var fakeArray = {"length": 1, 0: "Addy", 1: "Subtracty"};

// Therefore, convert it to a real array
var realArray = $.makeArray( fakeArray )

// Now it can be used reliably with $.map()
$.map( realArray, function(val, i) {
  // do something 
});

As you see the fakeArray has a lenght property set to 1. When you invoke makeArray, you get an array containing only 1 element - [Addy]. What just happened to the second element??? It seems that the makeAray function converts the object into an array only for 'length' number of elements. Hence, when using this function, just beware of this behaviour and make sure that the lenght property is equal to the number of properties in your object (not counting the lenght property itself), or you might just be in for a little surprise!

Signing Off
Ryan Sukale

Naked Javascript - Prototypes and Inheritance

noreply@blogger.com (Unknown) — Thu, 07 Jun 2012 07:55:00 +0000

In part 9 of this series Naked Javascript, I am going to talk discuss inheritance in Javascript. In order to understand the concept of inheritance, it definitely hepls to understand the concept behind functions and closures in Javascript. You can check out the previous article on closures and this article on functions to brush up on the basics of these concepts.

Inheritance in Javascript is a bit different from inheritance in other programming languages like Java. The difference lies not only in terms of the syntax but even the implementation is so staggeringly different that it may sometimes not be an easy task to grasp without knowing a few other concepts in javascript.

Lets start from the root of the problem.

Functions

As I have mentioned multiple times throughout the series, functions are first class objects in Javascript. The underlying reason is simple. In Javascript, everything is an instance of the class Object. This is somethign that is taken from Java. The Object class provides a default implementation of several commonly used functions, for example the 'toString' function. Now, to think about it, since all javascript objects need this functionality, they must somehow inherit this function from the object class.

There are 2 important things that you need to remember when dealing with inheritance in JavaScript.

1) Since JavaScript does not have classes, inheritance in JavaScript is achieved by The

2) The mechanism by which two objects are connected in an inheritance hierarch is via the 'prototype' property of objects.

Lets talk about 'prototype'.

When you create any Function in javascript, javascript implicitly defines a new property on that object called 'prototype'. The prototype property is no ordinary property.

Lets see it with a simple example

//Here I have defined a simple constructor function
function Employee(name){
 this.name=name;
}

//Set the default age
Employee.prototype.age = 16;

var emp1 = new Employee('xyz');
console.log(emp1.age);

This is the simplest example that demonstrates the use of the prototype property.

In the first few lines, I defined an ordiary function constructor that would let me create Employee objects. We know that functions are objects. And as I stated earlier, every object gets its own prototype property. Therefore we were able to define a variable called 'age' on the prototype property of the employee class and set its value to 16.

In the last few lines, notice that although we did not declare any property called 'age' on the Employee instance inside the Employee constructor function, we did not get an 'undefined' when we printed the value of the 'age' property on the console. The reason this happened is because we defined a property called 'age' on the prototype property of the Employee function.

What happend here is that when an attempt was made to access a property that is not present on the 'empl' object, the prototype of the constructor function was searched for the property of the same name. So in this case, when we accessed emp1.age, since the JavaScript engine was unable to find the property on the object itself, it tried to lookup a property called 'age' on the Employee.prototype object. This leads us to the conclusion that prototypes are a good place to declare defaults.

Now lets see what happens when we attempt to modify a property on an object that was defined only on the prototype.

function Employee(name){
 this.name=name;
}

//Set the default age
Employee.prototype.age = 16;

var emp1 = new Employee('xyz');
var emp2 = new Employee('abc');
console.log(emp1.age);
emp1.age++;
console.log(emp2.age);
console.log(emp1.age);

When you check the console, you will notice that once you modify the property on the object, that was initially defined only on the prototype, the object will then begin to own a local copy of the property. In our case, when we wrote emp1.age++, this is what we would normally expect the program to do : -

emp1.age = emp1.age + 1;

But, this is what the js engine executed

emp1.age = Employee.prototype.age + 1;

Thats because, before adding doing the addition, emp1.age does not exist. And thats the reason why, on the RHS of the equals operator, emp1.age becomes Employee.prototype.age

The direct implication of this feature is that the prototype property of Functions becomes the most suitable candidate for declaring constants and other properties that will not be modified by instances created by that funcion but which are required for every instace of the class.

function Employee(name){
 this.name=name;
}

Employee.prototype.getName=function(){
 return this.name;
}

This solved the problem of creating a single place to define functions that can be reused by all instances.

However, what if you want a function or a property to be available for all functions?

The answer is pretty simple. Define the property/function on the Function.prototype. For example.

Function.prototype.PI=3.14;

var dummyFunction = function (){};

console.log(dummyFunction.PI);

Note the syntax that we used to access the property PI. We directly made use of the function name. Reiterating myself, this is possible because every function is an object in itself whose constructor is the Function method.

Inheritance

Inheritance is a little bit twisted in Javascript as compared to Java and other similar languages. Thats because in Javascript, objects inherit from objects. The prototype property plays a key role in implementing inheritance. However, it can also be a bit misleading at times. Consider the following example.

In this example, we want to create a Class whose objects inherit certain protperties from another Object. The simplest example to represent this form of inheritance would be

//The doom object is the parent object
//You want to inherit its functions and properties in all
//instances of the MyClass class
var doom = {name:'doom',
   baseMethod:function(){
    console.log('defined on doom');}
   };

//Your class whose instances you want to create
function MyClass(){
 //Some properties
}

//Set the prototype property to the 'doom' object
MyClass.prototype=doom;

//The following invocation wont work because the function is defined on
//the prototype of MyClass. Therefore, MyClass itself
//cannot access the variables of doom directly without
//the prototype property
//MyClass.baseMethod();

//This works because instances of the class
//can access the variables defined in the
//prototype directly.
var mc = new MyClass();
mc.baseMethod();

The secret to the functionality of the prototype is intuitivley simple. Every object in javascript has a hidden property called __proto__. Observe the 2 underscores before and after the word proto. When you create an object in javascript, even if it is an empty object, the value of the '__proto__' property is set to a default object - the Object object, that contains a number of useful methods like toString. Type the following lines in your browser console to verify this

var obj = {};
console.dir(obj.__proto__);

You find that the __proto__ references a default object with a set of functions.

Following our previous example, type the following in your browser console

console.dir(mc.__proto__);

You will find that it points to the doom object. The underlying principle is very simple. When you created an object of type MyClass, something similar to this would have executed under the hood.

mc.__proto__=Myclass.prototype;

And since you have already set MyClass.prototype to reference the doom object, you are all set to inherit the properties of the doom object.

So, whenever you create an object, imagine an invisible link from the '__proto__' of the object to the 'prototype' property of its constructor. For ordinary objects the constructor is the Object class and for your own custom classes, the constructor is the constructor function of your classes. You might want to take a look at this article to learn more about using functions as constructors.

Another implication of this feature is that, if at any point of time, you want that all objects of your class should inherit a different set of properties, you can simply change the 'prototype' variable in the function name to a different object. That would be equivalent to dynamically swapping the a parent class at runtime, thereby enriching all the existing objects with a new set of functions, which is something is something absolutely cool because thats not something that you can do in languages like Java. What's more is that if you want to change the parent class of only one single object, you can change the '__proto__' property of that object to refer to a different object. Simple, sweet and sexy.

Thats probably all that I had to say in this post. I hope that you folks loved it.

Signing Off!
Ryan

Naked JavaScript - Defining Classes and Function Instances

noreply@blogger.com (Unknown) — Tue, 29 May 2012 18:08:00 +0000

In part 8 of the series Naked Javascript, we are going to explore the mystical land of classes in Javascript. Now, coming from a backround with extensive programming in OOPS using Java, the absence of straightforward classes was quite a shocker to me at the start. The syntax, representation and implementation was a complete deviation from conventional methods.

As we learnt in the previous articles, functions are the building blocks of numerous things in javascript. Classes are one of them. In fact, when you define a constructor function, what you are actually doing is creating a function that can be used to construct objects. Lets check out what I mean by looking at an example.

function Employee(name, age){
 console.log('');
 this.name = name;
 this.age=age;
}

var ancientNewJoinee = new Employee('xyz',99);

If you take a look at this function, there are a number of things that you will note about it.

We make use of the constructor naming convention.
We make use of the 'this' keyword when assigning property values. The 'this' keyword in javascript is one of those features that may sometimes lead you to lose all your hair if you dont know what you are dealing with(Personal advice : 'this' is highly recommended for hairy women!). I tried to talk about it in intricate details in a previous article. (Make note, hairy women!)
We passed in two arguments and assigned them as properties on the 'this' object.

Now, this might sound simple at first. Isi'nt it what we always do in other languages like Java?? This is 'suppposed' to be simple right??

Hell no, its not.

Or maybe it is. Lets see what happens.

Case 1 : Doing it the wrong way

You invoke the Employee function as if its just another function, instead of a constructor function. There is nobody who is ever going to stop you from doing such a hideous thing, right? So, lets do it and observe what happens.

function Employee(name, age){
 console.log('');
 this.name = name;
 this.age=age;
}

Employee('blah',90);

So what does this do? It works. It executes normally. Really cool, awesome. But what happend to the name and age property that I had passed as arguments? Whos kid did i rename?

Turns out, that you did something totally horrible. What you did was, you created two new properties on the window object.

Now, you should recollect from the previous articles that when you dont specify the context during a function invocation, the function is invoked using the context of the window object which takes the form is nothing but the 'this' keyword inside the function. So, when you invoke the function by directly using the above syntax, you end up creating unnecessary properties on the window object. But thats not something that we want.

Case 2 : Doing it the right way

You invoke the employee function by using the new operator.

function Employee(name, age){
 console.log('');
 this.name = name;
 this.age=age;
}

var ancientEmp = new Employee('xyz',99);

When you create an object in this way, you are actually creating a new function object, whose constructor is of type 'Employee', and it is this newly created function object that is then used as the context inside the constructor. So, when you are creating properties on the 'this' variable, you are creating properties on your newly created function object. Since you have not explicitly specified any return value, the Employee constructor function returns the value of 'this' variable from the function, which is nothing but the newly created function instance.

Now that solves the mystery of creating classes. But there is much more to this scheme than meets the eye. How do you protect members. Like other programming languages, is there not a way to create private members that cannot be accessed from the outer world? There is a way, but it is not as obvious as it seems.

In the example that we saw, we created two properties on the Employee instance. Both of these properties have public access. i.e. you can directly modify the values of these properties using the object access notation.

function Employee(name, age){
 console.log('');
 this.name = name;
 this.age=age;
}

var ancientEmp = new Employee('xyz',99);

ancientEmp.age=5;

Oh no, now our ancient emp is younger than the kid next door. And child labor is a crime. We dont wana get into a mess with the authorities, do we? Well, at least not me. So, what do I do that enables me to access the properties on the object but still restrict me from modifying them to incorrect values.

The solution is simple. If you remember, in the previous article, we spoke about closures and scoping in JavaScript. Scoping is a very powerful concept and this is one of the places where scoping is used to mimic the behaviour of private variables in classes.

The JavaBean standard is quite common in the Java world. We can apply the same principle to solve the problem of private variables using getters and setters for our variables and instead of accessing the properties directly.

function Employee(name, age){
 console.log('');
 this.getName = function (){
  return name;
 };
 this.getAge=function(){
  return age;
 };
 this.setName = function (newName){
  name=(newName==true)?newName:name;
 };
 this.setAge=function(newAge){
  age=newAge>14?newAge:age;
 };
}

var ancientEmp = new Employee('xyz',99);

ancientEmp.setName('');
ancientEmp.setAge(5);

console.log(ancientEmp.getName());
console.log(ancientEmp.getAge());

The variables that are declared as function parameters are nothing but local variables in the function and behave like instance variables within the function scope. Due to javascript's scoping rules, they remain available to the function instance as long as the instance exists or are explicitly deleted from the object via some method. Creating getters and setters like this improves decoupling between the various code components.

Now there is a minor issue with creating classes in this way. What happens is that whenever you create a function on an object you are creating a function ONLY for that object. Okey, lets think about it once more. In the first article of the series, I mentioned that when we create properties on objects, the properties are specific only to that object. Now look at our constructor function. What exactly is happening when we are trying to assign getters and setters on the 'this' object? The getters and setters are created exclusively for the current function instance, i.e. the 'this'. This implies that if you are creating a large number of objects, you will end up with each object having its own independent copy of each method and property.

Although, it is highly desirable for each object of a class to be able to save the state of its properties independently, you really don't want to create multiple copies of the same function for each object because that will set your browser on fire and send your users screaming out of their houses. What you want to do is to define a function only once and let all the object point to that function. There are a couple of ways in which you can do that.

1) Use an external function

function calculateSalary(){
 //Sorry for being so random!
 return Math.random();
}

function Employee(name, age){
 //Your stuff
 //
 //End of your stuff
 
 this.calculateSalary=calculateSalary();
}

This is a convenient and perhaps the simplest way that you can enable the reuse of the function. In this way, the calculateSalary property of all the function instances will refer to the same externally defined calculateSalary function. Its simple, its nice. However, there lies scope of improvement. This brings to the point where we have to talk about perhaps the best and the coolest concept in javascript - prototypes (But that's just my opinion. So no bashing please!). I will be discussing javascript prototypes in the next article in absolute details. But until then, we need to learn just a bit to get this example working.

2) Using prototypes

What is a prototype?

A prototype is nothing but a property on an object that is visible to all instances of the object.

Lets demonstrate it in our class example. But before that, I want to reiterate a few points.

Functions are objects themselves.
Functions can be instantiated to create special objects called function instances, by invoking them using the 'new' keyword.
Function objects are also objects, but they have a special property called 'constructor' that identifies the function that was resposible to instantiate this object.
Objects can have properties.
All objects have a property called 'prototype'.

The prototype property is pretty awesome. When you declare a property on the prototype property, it automatically becomes available to all the instances of that object/function/classs. This means that the prototype is the optimal place to declare a function that needs to be reused by all the objects of a class.

function Employee(name, age){

 this.name=name;
 //Other variables
}

Employee.prototype.getName=function(){
 return this.name;
}

Employee.prototype.setName=function(newName){
 name=(newName==true)?newName:name;
}
Employee.prototype.calculateSalary=function(){
 //Whoops!
 return Math.random();
}

var emp1 = new Employee('xyz');

console.log(emp1.getName());

I simplified the class just for the sake of the example. But if you have noticed, although we eliminated the issue of all the objects having a local vaiable pointing to the getter or setter, we are back to the problem where the property is defined on 'this' itself. So, although this technique is useful for defining the calculateSalary function which does not make use of any properties, it somehow manages to breaks the principle of encapsulation because once again, all the properties will have to be publilcly visible for them to be accessible via the prototype method.

That covers the basics of classes in Javascript. In the upcoming article, I plan to talk the most amazing prototype property and perhaps talk a bit about implementing inheritance in JavaScript. So, until then, stay tuned!

Signing Off!
Ryan Sukale

Naked JavaScript - Function Scopes, Hoisting And Other Quirks

noreply@blogger.com (Unknown) — Sat, 19 May 2012 12:56:00 +0000

In this part 7 of the series Naked Javascript, I am going to cover a few interesting quirks about functions and scoping in JavaScript and also talk about a strange feature called hoisting.

The first thing that one needs to know is that in JavaScript, we dont have block level scopes. Instead, in JavaScript, functions are responsible for creating new blocks of scope. Let me elaborate. In other programming languages like java, if you write a block of code like this

public void someMethod(){
for(int i=i;i<10,i++){
 //Some usage of variable i
}
//Compiler error
System.out.println(i);
}

When you attempt to complie this program in Java, you are presented with an error at the line where you attempt to print the value of the variable 'i'. Thats because, once you are outside the for loop, you cannot access the variable 'i'. The scope of the variable 'i' lies only within the code block in which it was declared in Java. Cominng to JavaScript, you need to understand that although javascript makes use of code blocks in the same way that Java does, the scope of a variable lies throughout the function in which it was declared. This means that the following code will successfully print 10 when executed in JavaScript.

public void someMethod(){
for(int i=i;i<10,i++){
 //Some usage of variable i
}
//Prints 10
console.log(i);
}

In the above code, although we printed the value of the variable after it was declared and initialized ,but outside the curly braces, it worked perfectly fine. Now lets take another example.

var n = 1;

function someRandomFunction() {
    console.log(n); // This prints 1.
}

In this function, we declared a variable outside the function. And were were easily able to print its value inside the function, due to closures. Now consider the following piece of code.

var n = 1;

function someRandomFunction() {
    console.log(n); // This prints undefined.
    var n = 100;
    console.log(n); // This prints 100
}

Strange as it may seem, the first console ouput prints undefined. But why? Why is it not able to see the declaration of the variable 'n' that was part of the closure like the earlier example? The reason behind this odd behavior is a feature called 'hoisting'. Hoisting can be explained in a very simple way. For any variable declared within a scope, JavaScript separates the variable declaration and the variable initialization and hoists the declaration to the first line of the scope and initializes the variables at the appropriate lines at which they were initialized by the programmer.

Based upon the above explanation, this is what JavaScript saw when it ran our program.

var n = 1;

function someRandomFunction() {
 var n; //The variable declaration hides under harry potter's cloak. So you cant see it.
    console.log(n); // Now you know why its undefined here
    n = 100; //Now the variable gets initialized.
    console.log(n); // And prints out 100 here.
}

As you see in the code above, the variable was undefined because it was shadowed by the local declaration of the variable in the function. (At least they got that part right!). But then, enter functions! And you have some more nasty code to deal with.

Check out the following piece of code wherein we declare a variable, a function using the conventional function declaration and a second function using the variable style declaration.

function hoistingContainer(){
 console.log(n);
 
 innerOne();
 innerTwo(); //Throws an exception
 
 var n = 100;
 
 function innerOne(){
  console.log('innerOne');
 }
 
 var innerTwo = function innerTwo(){
  console.log('innerTwo');
 }
 
 //This will execute but the code never
 //reaches here because of the previous exception
 innerTwo();
    
}

In the above example, make a note of the different ways in which we declared the two functions. If you run the above code, you would find that the first invocation of the function innnerTwo() leads to an exception whereas the invocation for the function innerOne executes normally. The only difference between these two functions was the way in which they were initialized. Perhaps it can be concluded that when functions are explicitly declared using a variable instead of the conventional notation, the initialization is not hoisted. However, using the conventional function declaration notation, even the function body gets hoisted along with the function declaration.

This implies that if you define functions using the standard notation instead of the variable notation, you can create functions anywhere within a scope and use them at any point within the same scope irrespective of their point of declaration.

The next interesting thing that I want to discuss about is what could happen if you accidentally forget to use the 'var' keyword when declaring a variable inside a scope. Usually, when you declare local variables inside a function, you would use the var keyword. Only the variables that are declared using the var keyword become function local. However, if you accidentally forget the var keyword, javascript will not complain, instead it simply creates a property of the same name in the global scope i.e. on the 'window' object. And as we are already aware, this can have disasterous consequences.

Take a look at the follwing code.

window.constant = 10;

//prints 10, the constant from the global
//window object, 
console.log(constant);

function outerFunction(){

 var name = 'xyz';
 
 //Missing var keyword
 constant = 20;
}

//Invoke the function
outerFunction();

//Prints undefined since name was 
//locally scoped in the function
console.log(name);

//Prints 20, because its value was
//reassigned inside the function
console.log(constant);

Moral of the story, dont forget to use the 'var' keyword when declaring local variables inside a scope.

Scopes and closures.

Closures take extensive advantage of the scoping feature of JavaScript. When a function is declared within the scope of another function, the inner function maintains 'hidden references' to the varibles in the scope in which it was declared. You may also think of it as if functions have their own scope memory. Functions are behaviour. But Javascript functions can not only contain behaviour but also act as a data store. You may like to read another article of mine in which I have elaborated on closures with a couple of examples.

Semicolon insertion.

This is a really strange feature in javascript. The JavaScript processing engine tries to act smart and detect if a semicolon is missing where it should have been put. If it is found to be missing, it simply inserts the missing semicolon and executes the code without any warning. The simplest example, as demonstrated by many other is the problem of semicolon insertion with the return statement. The follwing code returns undefined.

function badStyle(){
 return
 {
  name:'value'
 };
}


function goodStyle(){
 return {
  name:'value'
 };
}

//Runs as expected
console.log(goodStyle());

//Prints undefined
console.log(badStyle());

The second line prints undefined because, since javascript expected that return statement be terminated by a semicolon, it inserted one when it did not see any in the badStyle function. In the goodStyle function, it did not insert one because before the line termination, it encountered a symbol for object literal declaration.

Most of the problems that arise due to the above discussed quirks of the language can be avoided by writing simple yet decently formatted code. Variable declarations at the top, function declarations before using them, and proper opening and closing of curly braces and always adding a semi colon when you are terminating your statements wont only avoid these issues but also make your code readable and understandable. Who knows, just spendinng just a couple of minutes restructuring your code may later save you hours of debugging.

Stay tuned. There's more to come!

Signing Off!
Ryan

Naked JavaScript - Closure Dynamics

noreply@blogger.com (Unknown) — Sun, 13 May 2012 12:18:00 +0000

In part 6 of the series Naked JavaScript, I am going to discuss about the concept of closures in JavaScript. In the previous article, I only briefly mentioned the topic of closures in JavaScript. In this article, we will drill down on the absolute details of this interesting topic. Closures in JavaScropt is a very important concept, and it comes in extremely handy when you are trying to innvoke functions or write classes. Not only is it one of the most important concepts in JavaScript, but it is also mesmerizingly interesting and contributes significantly to the expressive power of this wonderful programming language.

We all know that every programming language has scoping rules for its variables. Javascript takes scoping to a whole new level in the form of closures. The beauty of this concept is most easily understood only by means of examples.

Consider a block of code that is written directly inside the script tag, i.e. in global scope.

Since this block of code was written directly inside the script tag, the varible bingo becomes a global variable. Global variables are variables that are declared on the window object. In this case, since you have not specifed a parent object for bingo, the parent is assumed to be 'window'.

This defaulting logic can cause a huge mess, as we learnt in the previous article, because the size of a program graudally grows with time. And with new features coming in every now and then, you are very likely gonna want to name your variables based upon the real world concepts that they represent. However, declaring variables in the global scope can lead to serious problems because one function may end up reading values set by another function just because they use the same variable name. This is where scoping comes into the picture. However, scoping in JavaScript is a completely different beast. Unlike other programming languages like Java, JavaScript does not support block level scope.

One solution to this problem would be to specify a different parent object for each variable having the same name. For example

//Defined on the global 'window' object
var bingo={name:'xyz'};

//Defined in a nested object
var myObj = {};
myObj.bingo={name:'xyz'};
console.log(bingo.name);
console.log(myObj.bingo.name);

As you see, since we specified the name of the object inside another object, we were able to reuse a variable name without any conflicts. The varables bingo and myObj are global properties. i.e. they have global scope. What this implies is that for your own programs, you can create one single global object and define all your functions as properties of this object. In that way, you can ensure that you clutter the global scope with only a single object. So far so good.

Now lets talk about functions.

When you create a function, you frequently declare new variables inside a function to implement your logic. When these variables are declared, they are declared with a scope that spans the braces that enclose the function. Lets see an example.

function popeye(){
 var msg = 'I love olive';
 console.log(msg);
};

function bluto(){
 var msg = 'I love olive too!';
 console.log(msg);
};

As you see, in our function we were able to reuse the variable 'msg' just because they existed in different scopes. Even this is pretty simple, and of course, works as expected. But wait, there's more.

Enter nested functons.

Unlike Java, javascript lets you create nested functions. The syntax of declaring a nested functions is the same as declaring a normal function. Lets see an example.

function popeye(){
 var msg = 'I love olive';
 
 function printMe(){
  console.log(msg);
 }
 
 printMe();
};

Even this was easy. We just created a new function inside the popeye function and invoked it. But note that you were able to access the value of the variable 'msg' even thought you did not declare it inside the printMe function. So this tells you that nested functions have access to the variables declared in the scope of the outer function. And this nesting can continue further down.

function slimShady(){
 var msg = 'I am slim shady';
 
 function iAmSlimShady(){
  
  function theRealSlimShady(){
   console.log(msg);
  };
  theRealSlimShady();
  
 };
 
 iAmSlimShady();
};
slimShady();

Ok, even this is pretty easy to understand. We create a function slim shady, which declares and invokes an inner function iAmSlimShady which again declares and creates an inner function theRealSlimShady. But the story does not end here. Irrespective of the depth of nesting, an inner function is able to access the variable declared in the outer function. This is what a closure is all about. The ability of an inner function, to dynamically access the values of variables declared in the enclosing function even after the enclosing function has completed its execution is called a closure. The concept of closures actually becomes blatantly obvious when inner function references are accessed from outside the context of the method in which they were declared. Consider this example.

function printer(msg){
 
 function printMe(){
   console.log(msg);
 };
 
 return printMe;
};
var p = printer('Popeye says - Olive is mine');
var b = printer('Bluto says - Your Olive is mine');

p();
b();

What do you see in your console?? What were you expecting? If you have read the other parts of the series, then you will know that I had mentioed earlier that functions are nothing but objects. So, we can simply return a reference of an inner functon from the outer function and thats exactly what we have done. We returned the printMe function from the printer function. Thereby, in our case, both the functions p() and b() refer to the same function i.e. the inner function printMe.

In the first invocation of the function function printer i.e. p, we passed in different string for popeye. In the second invocation, we passed in a string for bluto. And since both p and b refer to the same function - printMe, it may feel that both p() and b() should print the latest value of 'msg' that was passed to the outer function.

Sadly.. Or maybe gladly, thats not what happens. As it turns out, variables declared in an outer function can be accessed by the innner function even outside of the lifetime of the outer function. So even though, upon invocation of the printer function with the argument for popeye's claim, and code execution is completed for the outer function, the inner function will retain a hidden reference to the state of the variable in the outer function. In our case, the variable in the outer function was nothing but the 'msg' argument, which is nothing but a local variable in the printer function.

This implies that if you can preserve the reference to the inner function, you can artificially increase the life of a local variable that was declared in the outer function.

The game of closures gets a bit trickier when used in conjunction with the 'this' keyword. Lets see how that happens using an example similar to the one that we saw above.

function outer(name){
 
 this.name = name;
 console.log('Outer name : ' + this.name);
 
 function inner(){
   console.log("Inner Name : " + this.name);
 };
 
 inner();
};
outer('Popeye');
outer('Bluto');

Observe closely. When I invoked the outer function without specifyng a context, the 'this' keyword in the outer function references the window object and assigns a value of 'Popeye' to the name property of the window object. Even when the inner function is invoked, no context is specified at invocation time, the value of 'this' is also set to the global window object and we can simply print the name.

Now, lets twist this example a bit.

var holder = {};
holder.outer =function (name){
 
 this.name = name;
 console.log('Outer name : ' + this.name);
 
 function inner(){
   console.log("Inner Name : " + this.name);
 };
 
 inner();
};
holder.outer('Popeye');
holder.outer('Bluto');

The only difference in this case was that instead of defining the outer function as a global function, we declared it as a function on the 'holder' object. This sublte change brought about a drastic change in the output. The inner function does not print anything this time. This is what happens instead.

When you are in the outer function, the 'this' refers to the holder object. And you set a name property on it. Simple. But when you invoke the inner function, since you haven't specified any context, the this inside the inner function refers to the window object. And since you have not set any value for a property called name in the window object, all you get is an undefined value.

Lets see another variation of the above example.

var holder = {};
holder.outer =function (name){
 
 console.log('Outer name : ' + name);
 
 function inner(){
   console.log("Inner Name : " + name);
 };
 
 inner();
};
holder.outer('Popeye');
holder.outer('Bluto');

In this case we have removed this 'this' keyword. So both the functions are directly referencing the value of the 'name' argument in the outer function. The inner function is able to access the 'name' variable because of the closure. This can still be made more fun by harnessing the real power of closures.

var holder = {};
holder.outer =function (name){
 
 console.log('Outer name : ' + name);
 
 function inner(){
   console.log("Inner Name : " + name);
 };
 
 return inner;
};
var p = holder.outer('Popeye');
var b = holder.outer('Bluto');
console.log('Invoking Inner functions');
p();
b();

Take a look at the changes made. First of all, the function returns a function reference of the inner function. So now, both the objects p, and b refer to the same inner function. When you create p using the parameter 'Popeye' the local variable 'name' is set to 'Popeye'. And thats the value that is accessible from the inner function. But observe that when you invoke the function with the parameter 'Bluto' the value of the local variable has CHANGED. This is an important point to note.

Later when you invoke the function p(), you are still able to access the value that was passed when the value of 'name' was 'Popeye'. This is what closures do. When you are in a closure, the inner function is able to 'remember' the old value of the outer function that was in its scope. And whenever the inner function is invoked, it works on the reference to the same outer value. So, if you have multiple references to the same inner function that acccesses the same outer value, you can effectively write code as if the values accesed in the inner function are different for different invocations of the same function, as if they are in completely different scopes.

The only variable for which closures is not effective is the 'this' keyword. Thats because each functions has a different value of the 'this' keyword that solely depends upon the way in which the function was invoked. But what if you want to make use of the 'this' reference of your outer functon inside your inner function? Pretty simple. You wrap it in a closure variable. See example below.

var holder = {};
holder.outer =function (name){

 this.name=name;
 var that = this;
 console.log('Outer name : ' + name);
 
 function inner(){
   console.log("Inner Name : " + that.name);
 };
 
 return inner;
};

var p = holder.outer('Popeye');
p();

That was pretty easy. We just created a local variable 'that' and assigned the value of 'this' to that. And thats how the cookie crumbles!

In this article we saw the several different examples of closures. Closures are widely used in almost any piece of code that you read about these days so its important to have a thorough understanding of this concept.

Thats all that I have for this article. I hope you found it useful. There are still a couple of interesting things I intend to cover in the upcoming articles of this series. If you feel lost somewhere, go and check out the previous parts of this series. If not, stay tuned for more!

Signing off
Ryan

Naked JavaScript - Demystifying The this Keyword and Function Contexts

noreply@blogger.com (Unknown) — Wed, 09 May 2012 19:21:00 +0000

In part 5 of the series Naked JavaScript, I am going to focus on the the usage of the 'this' keyword in JavaScript. It is extremely important to correctly understand the 'this' keyword it is one of those features of JavaScript where even a small and innocent looking mistake can literally make you pull out your hair if you don't know what you are dealing with.

JavaScript, unlike the name, is not a script like version of Java. In fact, its a completely different beast. And even if it contains keywords and features that 'look' like Java, it does not follow the programming conventions of the the same. I believe that the this keyword is one of those perfect examples of JavaScript where almost everyone new to the language is likely to get confused if they have prior experience of working with other languages, and therefore make silly mistakes. Some of which can be completely devastating and lead to complicated bugs and sleepless nights.

Lets begin with a simple example example we create an object as follows

var myHappyObject = {
 name : 'MrHappy',
 echo : function (){
  console.log(this.name);
 }
};

Now this seems like a perfectly nice object with a happy little fuction that echoes the value of the 'name' property. But hey! dont forget that 'echo' is nothing but an object that holds a reference to a function. And being a reference, it can be passed to a completely different object. For example, you could do something like this.

var duplicateReference = myHappyObject.echo;

Note that I did not invoke the echo function. I only used a reference to the echo function and assigned it to the variable 'duplicateReference'. After this line, the echo object and the duplicateReference object, both point to the same function that prints the value of the 'this.name' inside the function. But there is a small (or should I say, HUGE) difference! Take a look at the following code.

myHappyObject.echo();
duplicateReference();

Note the output on your console. While the first invocation correctly printed the value 'xyz', the second invocation simply crash landed and printed undefined. At first glance, you might wonder why this is so? Do they not point to the same function? Of course they do. Then why the difference?

In order to understand how the above code works, you need to understand the underlying mechanics of the 'this' keyword and play around with the concept of function contexts.

By default, whenever you invoke a function, a function is invoked in the context of the window object.

function outerFunc(){

 console.log('outer ' + this);

 function innerFunc(){
  console.log('inner ' + this);
 }
 
 innerFunc();
}

outerFunc();

When you invoke the outer function, the first line of console.log prints the value of the window object. That happens because, by default, if you don't specify an object during invocation time, the function call is assumed to be something like window.(). Hence when you are inside the outerFunc, the context is set to the window object, i.e. the value of the 'this' variable is set to the window object. And thats how you get the value of the window in the first line of console.log.

Similarly, in the second console.log, inside the innerFunc, the value of 'this' is printed as the window object.

Lets take another example.

var bingo = {};

bingo.outerFunc=function(){

 console.log('outer ' + this);

 function innerFunc(){
  console.log('inner ' + this);
 }
 
 innerFunc();
}

bingo.outerFunc();

This time we defined the outerFunc as a function on the bingo object. The direct implication of this is that you cannot invoke the function directly. i.e. you cannot directly say outerFunc(). Why? That's because if you do so, the javascript engine will search the window object for the outerFunc() function and since you have defined the function on the bingo object, the search will fail and you get a big slap in the face. However, if you have an itch (in all the wrong places) and still feel like messing with things, you can always invoke it by writing the following code

window.bingo.outerFunc();

The above example also proves that all objects that seem to be orphaned are not actually orphaned. And that the window object has a strong inclination to play god to all of them.

But if you notice the console messages, you will also note that even though the outerFunc prints the bingo object as the value of 'this', the innerFunc still prints the window object as the value of 'this'. This implies that context is not inherited. i.e. when functions that are defined inside of a function and invoked inside the function itself, they are oblivious of the value of the 'this' keyword in the outer function. Instead, they get their own copy of the 'this' keyword which depends solely on the way in which the inner function was invoked.

This odd behavior can have serious implications if not understood properly.

Lets take a look at our previous example of myHappyObject. Lets redefine the object so that it looks something like this.

var myHappyObject = {
 name : 'MrHappy',
 rename : function (name){
  this.name = name;
  console.log(this.name);
 }
};

Lets try to do the same things that we did earlier and create another reference to the rename function.

var duplicateReference = myHappyObject.rename;

So far so good. But there is something very nasty in the piece of code that follows as a consequence of the above assignment. Lets try to invoke both the function references and see what happens.

myHappyObject.rename('abc');
duplicateReference('garbage');

The code executes smoothly without any errors or warning. It even renames the 'name' property of the myHappyObject to 'abc'. Thats what the first line of code does. But then, what does our second invocation of the duplicateReference do? This function also sets the 'name' property of an object to 'garbage'. But for which object does it set the name property?? I hope that you might have guessed the answer by now. Its our very own window object. What happened over here is something very evil. I say evil because it might not have been your intention to add garbage to the window object but because of the way in which the code was invoked, you accidentally created a property called 'name' on the window object and assigned to it the value 'garbage'.

What if there was already an existing property called 'name' on the window object and it was being used elsewhere. Our little piece of code would probably lead to a bug that would have been extremely difficult to trace. So remember that whenever you make use of the 'this' keywords, pay careful attention to the manner in which the functions are being invoked.

Another point to be noted is that although we created a duplicateReference to the rename function, you cannot invoke it using myHappyObject.duplicateReference('abc'). The reason is simple. The myHappyObject does not have any property called duplicateReference. Hence the invocation is invalid. However you can always do something like the following code

duplicateReference.apply(myHappyObject,['yay'])

//The above code is equivalent to
//myHappyObject.rename('yay');

The code in this case becomes equivalent because when you make use of the apply function, the first parameter behaves as the context of the function and hence is the value of the 'this' keyword inside the function.

Also there was a case where we talked about the inability of an inner function to access the value of the 'this' keyword present in the outer function. That statement, however, is not entirely true. JavaScript has a extremely beautiful feature called closures that makes so many things possible that it makes you go both wild with madness as well as excitement at the same time. And that's what I am going to talk about in the next part of this series.

So stay tuned, and stay awake.

For, the fun....

Has only just begun. ;)

Signing Off

Ryan

Naked JavaScript - Constructor Functions

noreply@blogger.com (Unknown) — Wed, 02 May 2012 16:50:00 +0000

In the part 4 of the series - Naked Javascript, we are going to take a deeper look at Functions in Javscript and explore its twisted syntax and various implications. In the previous article, we learnt about the different ways in which you can invoke functions. In this part, we examine the stuff that is responsible for creating functions in JavaScript.

Functions in JavaScript are fantastic. Not only are they used to execute functionality, but they are also used to create other objects and functions(Yes, you read that right). Functions are means by which you implement a very significant feature of the language - inheritance. We will be talking about the details of inheritance later. For now, lets continue exploring functions.

Like all amazing and awesome things in the world, when you talk about functions in Javascript, there is more to it than meets the eye. The real way to figure out what more is out there is by firing up your browser console and dissecting it bit by bit.

Lets first try to answer a very basic quesion. What exactly is a function? Well, a function is nothing but a Javascript object. Yes I know that I have said that numerous times in the previous parts of the series, but believe me when I say that it is impossible to stress this point any less.

However, functions are objects with a few special features that makes them stand out from ordinary objects. In order to understand what functions are you first need to know who creates functions.

In javascript, in order to create objects, all you need to do, is define a constructor. Unlike other programming languages(e.g. Java), you dont need any special wrapper around a function, i.e. your constructor does not have to defined inside of a class. A constructor is just an ordinary function. For example

function Employee(){
 //blah blah
 console.log('Employee function');
};

This is a simple constructor function. There is nothing special about this function. The only thing that is different here is the fact that we followed a different naming convention by capitalizing the first alphabet of the function name. This convention is recommended and important when you are declaring constructor functions because it lets others differentiate between ordinary functions and functions that are designed with the intention of be used as a constructor function.

Now this function does not seem to be doing anything special. But in Javascript, you can do something totally strange. You can create instances of functions. For example, once you have declared a employee constructor function like the one above, you can do somethig like this.

function Employee(){
 console.log('Employee function');
};

var emp1 = new Employee();

The syntax is both befuddling and amusing. Lets try to understand the what exactly is happening under the hood here when we invoke a function along with a new operator.

This syntax of invoking functions that are meant to be constructor functions was designed to appeal to Java programmers. When you invoke a function using the 'new' keyword, the runtime creates an empty object and passes that object to the function. That object then becomes the value of the 'this' keyword inside the function. I will be covering the 'this' keyword in JavaScript in details in a later part of this series. But for now, assume that when invoked using the 'new' keyword, the 'this' inside the function behaves similar to the 'this' keyword used in Java. Once the function finishes its execution, the function automatically returns a reference to the 'this' even though you did you explicitly write a return statement at the end of the function. Note that had you invoked the Employee() function without the 'new' keyword, no new object would have been created, and our Employee function would have returned nothing without an explicit return statement.

After the function execution, the variable emp1 now points to the newly created object. You can think of this object to be an instance of the function. I say so because if you try to execute 'emp1 instanceof Employee', it returns true. The 'instanceof' keyword is an easy way to determine the name of the function responsible for constructing an object.

Not only that, every object has access to a property called 'constructor' that tells you about the constructor of that object. For example, you could do something like this.

function Employee(){
 console.log('Executing Employee function');
};

var emp1 = new Employee();
var dummy = {};

console.log(dummy.constructor);
console.log(emp1.constructor);

When you run it on chrome, you would be able to see the following lines on the console.

Executing Employee function

function Object() { [native code] }

function Employee(){
 console.log('Executing Employee function');
}

The first line is the normal console.log that was executed when you created a new function object. Thats not much of a mystery anyways. But then, you see another line that says "function Object() { [native code] }". This comes from the log of dummy.constructor. And then in the next line, you see all the dirty little details of our own 'Employee' function. (This point should give you ideas!).

Ok, now that we understand how to create a custom constructor function and create instances using the constructor function, lets have some more fun with functions.

Remember when I said that, that functions are objects too?. And this directly implies that there has to be some constructor function that constructs functions(Tongue twister alert!). Dare to explore? Yes sir!

function Employee(){
 console.log('Executing Employee function');
};

console.log(Employee.constructor);

Turns out that there is a function called "Function" that does the magic of constructing functions for us(This should be your Eureka moment, ryt!! Or, maybe its just me).

So we have a function that creates other functions and it is aptly a function called - "Function". Also note that the naming convention for a constructor function is being followed here. Hey, guess what? Even anonymous functions have the same constructor. Of course they do, since they are functions too(Love that rhyme, dont you?).

console.log((function noname(){}).constructor);

Well, am gonna let curiosity kill the cat and find out who makes the Function function too, because hey, even thats an object, ryt?

console.log(Function.constructor);

It seems that the Function function creates itself. (Ok, now the cat's dead ).

Now that you know that a function creates a function, this gives you the ability to formulate a new syntax to create functions.

var dynamicFunction = new Function();

However, the function that we just created is not of much use in this way, because we don't have a function body. But hey ho!, you can create your function with full fledged parameters and the function body as shown in the example below.

var nowThisIsWeirdButCool = new Function('p1','p2','console.log("Stripping "+p2+" "+p1)');
nowThisIsWeirdButCool('Naked','Javascript');

As you can see, this is a pretty convoluted way of defining functions, but still, it certainly is one of the ways in which you can choose to create functions in JavaScript. Amazing right? But, note that is a really BAD BAD BAD way to create functions because functions created using this technique make use of the sacred JavaScript function 'eval' in order to evaluate the definition of the function body provided as a string parameter at runtime. The use of the eval() function is considered to be evil. ( Need I say that the two words even rhyme to a certain extent. See my point?).

To conclude, this post uncovered a few more aspects of functions in JavaScript. As I said before, functions are the building blocks of so many things in JavaScript, that is is quite impossible to talk about anything in JavaScript without talking about functions and their various idiosyncracies.

However, this is all that I have for this part of the series. There's more coming. Stay tuned for the next!

Happy Programming :)
Signing Off

Ryan

Naked JavaScript - Function Access And Invocation

noreply@blogger.com (Unknown) — Wed, 25 Apr 2012 17:29:00 +0000

In part 3 of the series Naked Javascript , we are going to talk a little more about functions in Javascript. In the previous article, we just got a basic introduction to JavaScript functions. In this part and the parts that follow, we are going to rip them apart.

Ok, the first thing that you need to know is that - Functions are Awesome. And thats with a capital A(and a capital F!).

In Javascript, functions are first class objects. A function is an object with a special ability - the ablility to be invoked. There are basically 4 ways in which you can invoke a function.

1) The usual way

function boring(msg){
 console.log('oh, this is so so conventional '+ msg);
};

boring('You are killing me!');

2) The unusual way - anonymously

(function cool(msg){
 cool('Do you think that I am cool? ' + );
})('Totally!');

3) Using the Call method

function callMe(msg){
 console.log('Thanks for calling us ' + msg);
}

callMe.call(this, 'Yea, right..');

The syntax for the call is pretty straightforward. The first argument is the context in which the function is to be invoked. The remanining arguments, that you provide as comma separated values is are sent as arguments to the function.

4) Using the Apply method

function applyMe(msg){
 console.log('Do you want me to apply something? ' + msg);
}

applyMe.apply(this,['yes']);

This syntax is similar to the call syntax. The only difference being the fact that you need to pass an array as the parameter to the function instead of a comma separated list as you did in the syntax for call.

We saw the first two techniques in the previous post. But what makes the last 2 techniques so awesome? The answer lies in understanding the concept of a function context and a better understanding of the syntax of accessing properties in Javascript.

Lets talk about the object syntax first. As we saw earlier, functions can be declared on objects as if they are normal properties. In fact, they are normal properties(albeit on steroids, but thats a secret...). Now, the world and its mother knows that one can access properties of objects using the dot operator. But thats convetional and not to mention, dead booring(because we do it all the time). Javascript to the rescue! Javascripts makes things a bit more interesting for us by allowing you to access objects using a different syntax, like a map. For example, check out the code below

var bingo = {name:'xyx', desc:'I am Mr Bingo'};

//The uncool way of accessing a property of an object
console.log(bingo.name);
//The cool way of accessing a property of an object
console.log(bingo['desc']);

Note the special syntax that we used to access the desc property. We simply used the property name as a string in inside the brackets and were able to access the value of the property. This means that objects can be accessed as if they are key-value maps. This is a really cool feature when it comes to functions because functions are objects too. And that means that even they can be accessed via the same technique. This makes it possible to write something like this

var bingo={};
bingo.sayHello=function(){
 console.log('hello');
};

bingo.shout=function(){
 console.log('Scream at the top of my lungs');
};

function doAsISay(funcName){
 bingo[funcName]();
}

doAsISay('sayHello');
doAsISay('shout');

Did you see that!! You can dyanmically pass the function name as a parameter. So you can invoke a function at runtime and not even need to know its name. The doAsISay function acts as a function invoker and invokes any function that is available on the bingo object.

An advantage of using the map syntax for accesing object properties is that it lets you use reserved keywords as keys without the runtime complaining about it. Althouth, I dont think it makes good sense to use keywords as object properties since no matter what programming background you come from, watching a keyword being used anywhere always tends to trigger a train of thought that may not be on the same track of the program that you are working on. However, in a few corner cases, if you do find the need to use reserved keywords as object keys, you are more than free to do so.

We are still not done with functions. Functions are the heart of Javascript, and like all matters of the heart, this one will take its time too. In the next article, I am going to contine with functions and give them another shot to exhibit their awesomeness.

Happy Fungramming!
Ryan

Naked JavaScript - Function Basics

noreply@blogger.com (Unknown) — Wed, 18 Apr 2012 06:44:00 +0000

After talking about the basics of objects in the previous article, in part 2 of this series - Naked Javascript, we will discuss a little more about objects, their properties and take a sneak peak at functions in javascript.

As we learnt in the previous post, in Javascript you can create objects of the same class but each object can have a different set or properties. Properties can be defined on javascript objects even after they have been declared and used any number of times. For example, you can do this in javascript.

var bingo = {name:'xyz'};
bingo.says = 'hello';
bingo.volume = 5;

As you see, you can add properties to a javascript object even after the object has been declared and initialzied. This is something that cannot be done in Java because each object in Java MUST confirm to the structure of the class of which it is an instance. This feature of being able to dynamically create new properties for existing objects in javascript is called expandos.

If javascript allows you to create expando properties, it also lets you delete them dynamically. Here's how you would delete a property from a javascript object.

delete bingo.volume;

The above statement will delete the volume property on the bingo object thereby clearing the memory occpied by the object's value.

Not only can you declare properties on javascript objects, but you can also declare functions. It would'nt be too far fetched to say that functions are the actual building blocks of javascript.

Functions can be defined in Javascript in a couple of ways.

1) The not so cool way

function doSomethingCool(){
 console.log('I do something mindblowingly cool');
}

2) The cool way - Anonymous functions

function (){
 console.log('My parents forgot to name me!');
};

As you see, an anonymous function has no name(and hence the name 'anonymous' functions! Now that kinda reminds me of the saying - those that have nobody have god). There are many ways in which you can use anonymous functions. But before you start using functions - anonymous or non anonymous, you need to make a clear mental note of one point - Like everything else in javascript, functions are objects too! which means that you can assign it to a variable(huh?).

Lets try to build upon the above 2 examples annd try to assign these functions to variables.

function doSomethingCool(){
 console.log('I do something cool');
}

var makeSomeNoise = doSomethingCool;

Oh! Scary! Well, if you've ever worked with Java, then it might be. However there are some similarities between the two languages. When you assign the function doSomethingCool to the variable makeSomeNoise, you are simply creating another reference to the function. Now both the objects - makeSomeNoise and doSomethingCool refer to the same function. That is why, if we wished to, we could rewrite the first Method of function declaration using the second syntax! See the code below

var doSomethingCool = function(){
 console.log('I do something cool');
}

This way of declaring the function doSomethingCool is exactly equal to the Method 1, the only difference being the syntax. The point to be noted here is that a function name is actually nothing but a variable declared in the local scope.

Although the 'not so cool way' of defining functions is extremely convenient to use, the above syntax in which you assign a variable to an anonymous function makes it extremely easy to always remember that a method name is nothig but a javascript object, albeit not an ordinary one. I will elaborate more about that in the upcoming articles.

Now that you know that function names are actually objects, you can do some weird stuff with it. Something that you could have never do using Java. For example, take a look at the code below

//Define the function
function doSomethingCool(){
 console.log('I do something cool');
}

//Invoke the function
doSomethigCool();

//Assign the function name to point to a different function
doSomethingCool = function(){
 console.log('I do something hot');
}

//Invoke the function again
//This time the function will print a different message
doSomethingCool();

Check your browser's console to verify the output. (Just in case you dont know, if you are using Google Chrome you can press F12 or Ctrl+Shift+I to open the chrome developer tools and click on the "console" tab. If you are using Firefox, you need to install the Firebug extension and then you can press F12 to get the firebug console and then select the "console" tab to view the console messages)

Another cool thing that you might want to know about functions is the way in which it is invoked. In the above examples, we created a few functions and assigned names to them. After that we were able to invoke them using the ordinary function invocation syntax. But what do we do if we want to invoke an anonymous function? The solution is simple(and interesting!)

(function(){
 console.log('I am anonymous');
}) ();

Notice the braces that enclose the anonymous function definition and the bracecs that follow the function name. Using the above syntax, you can invoke not only an anonymous function, but any function. lets see an example.

var usefulStuff = (function makeUsefulStuff(){
 var bingo={desc:'My name is Bingo'};
 return bingo;
})();

Observe the syntax closely. I have simply created a function and invoked it. Inside the function, I created a local variable in the function called 'bingo' and that's what I returned from the function. The immediate function invocation causes the return statement to execute. So, now, the variable usefulStuff and the variable bingo point to the same object. Note that in this case, just because we invoked the function immediately, usefulStuff does not reference a function, instead it references an ordinary object that was returned by the function. Its is quite possible that when reading someone else's code you might forget to read the braces. After all, they are so tiny and close together. But, just in case you find yourself expecting one object and actually getting another, remember to look for a sneaky pair of braces somwhere after the function defintion and you might just save yourself a buttload of hair.

Coming back to the topic of declaring functions as object properties, the sytnax is pretty simple. Check out the sample code below

//Create an object;
var coolObject ={};

//Declare a function on the object
coolObject.doSomethingCool=function(){
 console.log('Do something cool');
};

Although we say that we are declaring a function on an object, we are actually doing nothing but creating a new property on the object that refers to a function definition. Which means that you can even do the following.

var coolObject ={};

//Declare a function on the object
coolObject.doSomethingCool=function(){
 console.log('Do something cool');
};

coolObject.doSomethingCool();

//What!! You can even make it a string now! No way!
//But apparently you can!
coolObject.doSomethingCool = 'I am a string';

console.log(coolObject.doSomethingCool);

This seems to work because the property 'doSomethingCool' was nothing but a reference to a function. We can reassign it to anything that we wish to at any point of time.

Well, that covers a few nuances of functions. But there is a lot more cool stuff that we will uncover in the upcoming articles! Stay tuned!

Happy Fungramming!
Ryan

Naked JavaScript - Object Basics

noreply@blogger.com (Unknown) — Tue, 10 Apr 2012 19:44:00 +0000

In this series- Naked JavaScript, we are going to delve into the gory details of javascript and extensively elaborate on its features like objects, functions, classes, inheritance, prototypes and closures.

In part 1 of this series, I am going to talk about objects in javascript. And since almost everything in javascript is an object, maybe I can say that I am practically talking about the basic fundamentals of the language. In one way, this part is just a foundation for all the rest of the articles that follow in this series.

Javascript deals heavily with objects. It deals with them at so many levels that sometimes its unfathomable if you are used to writing code in 'conventional' languages like Java or C or C#. Everything from functions to inheritance to arrays take on a completely different perspective in Javascript and this makes the language unpredictable for a to programmers from a different programming background.

Before we begin, there is one important statement that I want to start with. And that is 'Almost everything in javascript is an object.'

That said, lets see how we can create objects.

There are mainly 2 ways in which you can create objects

Using the new keyword.
Literal declaration.

Using The New Keyword

This is something that programmers from conventional languages are quite used to. The syntax is simple and elegant. You just create a new object and assign it to a variable.

var bingo = new Object();

Since I have worked extensively in Java before, I can say that this seems quite straightforward. In Java, the Object class is the parent class of all the classes. In the same way, the Object class in javascript is the main class from which all Objects inherit features. And because everything is an object, the fact that javascipt does not have predefined types seems to be a misnomer. There is in fact one master type, and that type is Object. No matter who you are or what you do, remember that the almighty Object is watching you!

If you are not sure of my previous statement, try this.

var bingo = new Object();
console.log(typeof bingo);
bingo=10;

console.log(typeof bingo);

As you can see above, we used the typeof operator to determine the type of an object. What you also would have noted is that even though bingo is an object, it was perfectly ok for us to assign a numeric value to it. And when we printed out the type of the variable bingo, we got the type as number. There is a very interesting story of inheritance in javascript that makes this possible. Its something that we will be discussing in absolute details in another article. For now, just be happy with the fact that you dont need to worry about the type of an object before assigning a value to it.

Literal declaration

This is perhaps the most common way to declare objects. The reason being, that its so easy that sometimes its baffling that you can even do this.

var bingo2 = {};

This is very easy on the fingers because it saves you a few keystrokes but it is practically equivalent to

var bingo = new Object();

If you are not used to this syntax, you better get used to it. Because to be honest, its not such a bad thing. In fact its pretty cool!

Declaring Properties On Objects

Objects are objects. And objects are meant to store information. However there is is a slight deviation from conventional languages here. When you create objects, you can directly declare new properties on those objects and assign values to them. Unlike Java, where you must have a predefined class where you first define the properties and the methods of the objects that you create, Javascript lets you do things differently. Lets see that with an example.

var bingo1 = {}; //Create an object of type Object
var bingo2 = {}; //Create another object of type Object
bingo1.shouts = 'hey!';
bingo2.says = 'hello';

Observe carefully. In the above examples, although the type of the objects bingo1 and bingo2 are the same, the language permits you to dynamically declare new properties on each of these objects and those properties dont even need to be same. Although the objects seem to be different because the contain different information, the typeof operator returns the same value for each of these variables.

(typeof bingo1==typeof bingo2) //This returns true

This is something that cannot be done in Java where you can have two objects with a completely different set of properties but still belong to the same class. You dont have the blueprint of a class in Javascript.But that does not mean that you cant have classes in Javascript. It just means that the concept of classes works a bit differently in Javascript.

This makes a short introduction to what is meant by objects in Javascript. That said, in this series, we will explore many more amazing features of the Javascript language such as functions, closures, prototypes and the different ways in which all of these ideas intertwine to create the web as we know it.

Happy Fungramming!

Ryan

How to clear the javascript console in google chrome or firebug programmatically

noreply@blogger.com (Unknown) — Sun, 08 Apr 2012 16:54:00 +0000

Just a quick tip.

If you are extensively working with the console in the chrome developer tools and the console in Firefox/firebug and you find the need to clear the console many times while you are testing your code, both Chrome and Firefox have a feature that lets you do that programmatically.

Chrome

clear()

Firefox

console.clear()

I feel that the Firefox version of the command makes more sense. I have absolutely no idea why the Chrome guys chose to do it differently.

If you are a mouse person, in chrome, you can use the context menu and select Clear Console. If you are using firefox instead, you can use the clear button on top of the firebug console. But I guess you know that already.

There are a few gocha's though.

While you can invoke console.clear() in Firefox from within your own JavaScript to clear the console, you cannot use the clear() function in chrome to clear the console from your own JavaScript.
Another point to be noted is that in case you are getting an "undefined" message upon typing the clear() function in chrome, you need to disable the option to preserve logs upon navigation for the console. You can do that by right clicking on the console and unticking the "preserve log upon navigation".

If you are a fan of typing, chrome also lets you clear the console via a longer api command - console._inspectorCommandLineAPI.clear(). IMO, the shorter version should be sufficient if you want to save typing time.

Happy Programming :)

Signing Off

Ryan Sukale

jdeveloper out of memory heap space error

noreply@blogger.com (Unknown) — Sun, 01 Apr 2012 05:49:00 +0000

Occasionally while working with jDeveloper you may get an OutOfMemory heap space error due to lack of heap space available for the jdeveloper ide itself. The following steps should help.

If you have installed jdeveloper on a windows machine you can

Go to C:\Program Files\jdeveloper\ide\bin\
NOTE : The path marked in bold should be your jdeveloper installation directory
Edit the file ide.conf
Set the AddVMOption property to be around -Xmx1024M
In case after making these changes, jdev doesn't start up, you probably need to decrease the AddVMOption to a lower value and restart jdeveloper again

Happy Programming :)
Signing Off

Ryan

Generate Javadoc Through Command Line

noreply@blogger.com (Unknown) — Thu, 22 Mar 2012 06:57:00 +0000

Here's a quick tip on generating Javadoc HTML files for your Java classes via command line.

javadoc < MySourceFileName > .java -d <Destination Directory>

You need to make use of the 'javadoc' command.

You can specify multiple files separated by a white space or you can simply specify a directory name containing all your source files.

javadoc -sourcepath < Source Directory > -d < Destination Directory>

Although I havent worked with eclipse, I believe it has an option where you can specify the javadoc command and then you would be able to easily generate documents via some menu option. Just FYI, if you work on windows, the javadoc command is located in the same directory as the java.exe command.

For more help and options on this command, check out the references

References

http://www.mcs.csueastbay.edu/~billard/se/cs3340/ex7/javadoctutorial.html - Contains a list of other available options. Its short, sweet and cool.
http://docs.oracle.com/javase/1.4.2/docs/tooldocs/windows/javadoc.html
http://www.myeclipseide.com/PNphpBB2-viewtopic-t-5191.html

Happy Programming :)
Signing Off

Ryan

Get the sql query for a view in Oracle

noreply@blogger.com (Unknown) — Wed, 21 Mar 2012 09:09:00 +0000

Here is a tiny snippet to get the sql query for view in an Oracle database.

SELECT text

FROM all_views

WHERE view_name like '%VIEW_NAME%';

Happy Programming :)
Signing Off

Ryan