Copy & Paste

I was reading this article the other day. Got interested in Edgar Alan Poe and decided to add this book to my to-read list. So I tried copying the book’s name and something really amazed me. It was not just the book’s name that was copied..

1

You can see from the screenshot that the link to the page got copied along with the small crumb of words I actually tried to copy. Well, this seemed  interesting. I tried reading more on this and realized Cracked.com is not the only site that uses this trick. Answers.com, Financial Times, Fox News, New York Post and a lot more sites use this feature.

Well, what’s the idea behind this. It’s claimed that more than 80% of the content shared across the internet is over ‘Copy and Paste’. This mostly involves copying the content from a web page and sharing across e-mail.

I never thought such a simple thing like ‘Copy and Paste’ can be monetized. Most of these sites use the services provided by Tynt. It’s wonderful how Tynt uses simple JavaScript events to capture and manipulate this information. From how I see this, there are two possibilities.

  • Use analytical techniques to capture details on when any content from my website is copied. Huge details like how many users have copied my content, when did they copy and what did they copy can be collected.
  • A copyright statement or a link to the original webpage can be appended to the copied text. This will improve the SEO chances of the webpage in question.

Let’s see how they do this..

It all starts with a JavaScript event, oncopy. As the name says, this event is fired when,

  • Pressing CTRL + C.
  • Selecting the Copy command from the Edit menu.
  • Opening the context menu (right mouse button) and selecting the Copy command.

See the below example.

1

See that, in line no 5, I have registered an event handler for the oncopy event. This will fire on the conditions mentioned above. Within the event, the developer can make an AJAX call to the server. The call can be used for logging or analytics.

However, accessing the clipboard data is a bit tricky and all the browsers are not in the same opinion here. The difference comes when the oncopy event is triggered. For Internet Explorer, the event is fired just after the text is copied. However, in the case of Firefox or Chrome, the event is fired just before the text is copied. So in the case of Firefox or Chrome, the clipboard is empty ūüė¶

Fetching the clipboard data is simple in the case of Internet Explorer.

1

The clipboard values are accessed using the clipboardData object in Window object. See more about DOM objects here.

See the code carefully, and it can be seen in line no 11 that I am making a check for IE. The clipboardData object would be null for other browsers. And for other browsers, I am returning false and breaking the program flow. Remember that for browsers like Firefox and Chrome, the oncopy event is fired before the value is copied to clipboard. So, returning false will disable the copy here.

It’s a neat trick that can be widely used in content centric sites. However, it’s not without complaints.. see this article on how Tynt can annoy someone.

 

The HTML DOM (Document Object Model)

Anyone who has developed using¬† JavaScript should be familiar with the term, DOM or Document Object Model. It’s neat and interesting stuff, and how it evolved over ages is another epic in itself.. but that’s for another day..

So, in the world of Object savvy development, everything is an object. Every web page resides inside a browser Window which can be considered an object. It’s an object complete with cliche windows properties like scrollbar, frame etc..

And for the document, the content we see inside the window, is also an object. It’s quite evident that the HTML script is responsible for the content or HTML scripts are the content. The HTML document is displayed as on object within the window. Note that I used the words document and object. So, the standards by which the HTML document is displayed as an object is called the Document Object Model.

When we say Document Object Model, it means a standard for creating Objects out of a markup language. In addition to HTML, XML and XHTML has their own DOM standards.

This is what W3C says about DOM

The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.

The DOM follows an hierarchical representation.

1

Let me just put in a few words on the high level objects..

The Window object is the root of the tree. A Window object represents one open window in the browser. Having said that, in the world of dynamic HTML(will have to write something on it), it’s very common to introduce iframes in pages. In that case, the browser constructs one window object for each iframe. The same reason why the iframes acts as separate entities. The Window object API can be referenced here.

The History object stores the list of URL visited from the page. Consider this instance, I have opened two tabs, viz ¬†http://http://www.google.co.in and http://www.bing.com/. Both of them will have a separate Window object, let’s call them WIN1 and WIN2. And from google, I navigated to the maps tab, i.e https://maps.google.co.in/. So, the previous page(http://http://www.google.co.in) will be stored in the history object of WIN1. The other window object will be impervious to these changes. Having an array of the previous URLs gives the developer the powers of navigation. The History object has two major functions.

  • history.back
  • history.forward

Both returns no value and are similar to clicking the ‘back’ and ‘forward’ buttons on the browser. The entire API can be found here.

The Document object is the developer’s blue eyed boy. The Document object stores everything under the <HTML> tag. In other words, each HTML document loaded into the browser becomes a document Object. The Document object can be used to access anything in the HTML document. This is widely used and exploited by developers.

1

This example by W3C provides a perfect example on how the Document object is used in modern Web apps. The entire API reference can be found here.

The Location object stores the URL details of the current page. The Location object is part of the window object and is accessed through the window.location property. See the Location object dissected.

1

JavaScript objects and Prototype

I am huge devotee of JavaScript. Isn’t it wonderful, a cheap and dainty piece of code that supports the server side code. Even though that’s how it all started, it has grown much. Since the entire industry began moving towards web based apps, so many JavaScript libraries began sprouting like mushrooms. This is a good enough list.

The beauty about JavaScript is that every single thing you see in JavaScript is an object. Isn’t is beautiful, a variable,string,number or even a method is an object. So, whenever you say ‘Object’, what comes to your mind is ‘properties’ and ‘methods’. An example speaks louder than 20 lines, so here goes..

As i just said, everything is an object, even a String variable.

1

I assume what you see above is self explanatory and pretty naive. The entire list of methods and variable for a String object can be found here.

Now, with the basics out of the way, let’s get to some interesting stuff.

Speaking of objects, all the objects in¬†JavaScript¬†are descended from the object Object. Let’s see how to create custom objects in JavaScript.

Yes, JavaScript certainly does have the new operator

1

So we created a variable person ( i repeat, everything is an object) which hails from the object Object. I am setting properties to it. The method which reads the properties are added to it. Finally the method can be invoked just like any normal method.

Well, this is just one way of creating a JavaScript object. There is another way which uses constructors.

1

I would really suggest using the constructor. In the modern world of numerous frameworks and libraries, the more robust and clean the code, the better.

Having said all that, there is an alternate way for the lazy folks.

1

Let’s move on to the JavaScript prototype object.

Take any object in JavaScript and you’ll see it has a property by the name of prototype. This makes it an ubiquitous entity in JavaScript.

All objects inherit methods and properties from prototype. Looking from a developer point of view, prototype can be used to assign a ‘base-class’ object like¬†behavior¬†for JavaScript objects.

1

In the case above, both a musician and a writer can greet themselves. This is done using the greet method. The method is added to the prototype of both the objects.

The above program would alert the following lines,

Greeting and Salutations from Fyodor

This is the time when Fyodor writes

Greeting and Salutations from Bob

This is the time when Bob sings

Classloaders in Java

I’m an altruist who’s amazed by beautiful things out of my reach. My zeal increases whenever I come to know them better. One of them is the magical land of classloaders, the A-Team that loads all the classes in the JVM. Enough with the¬†twaddling, lets get to business.

Classloaders are pivotal in the lifecycle of a JVM. Like everything in an object oriented language, each Classloader is an object Рan instance of class that extends java.lang.ClassLoader. 

Let’s look at what the particular class has got. (An extract from ZeroTurnaround’s whitepaper)

 

1

So it’s an¬†abstract¬†class. The major methods we have above are loadClass and defineClass.¬†

Define class takes in the byte code for a compiled class and returns a Class instance. The byte code can be loaded from the disk or a remote location.

LoadClass is the superstar. It is responsible for loading the class to the JVM. The parameter to be passed is the Class name in the standard enforced by JAVA.(roughly the classname with the package structure)

So, making matters smooth, if you already have a class to be loaded, you can straightaway use the loadClass method, or else you’ll have to use the defineClass first. See the example

 

1

There are a couple of things that can me made out from the example above. Understanding them is critical while understanding Classloaders.

  1. Every class has a reference to it’s corresponding static class variable. The class instance was created when this class was initially loaded.¬†
  2. The static class variable has a reference to it’s ClassLoader. It can be seen in the classloader is fetched using the getter and consequently the loadClass method is invoked.
  3. Since the class is already available, it can be easily loaded using the loadClass method. Otherwise, we would have to use defineClass method.

 

ClassLoader Hierarchy

It’s not just one classloader that’s behind the play. Let’s split them into three.

  1. Bootstrap Classloader
  2. Extension Classloader
  3. System Classpath Classloader

1

 

The bootstrap class loader kicks in first and loads all the java standard classes. Then comes the extension class loader which uses the java extension¬†functionality which loads from the ‘java.ext.dirs’ directory. I wish to write more about the extension framework, but I will save it for later. As far as a developer is concerned, the System classpath loader is the most important one. This loads the classes from the defined classpath. This will include all the user created classes ( minus the user created libraries which should ideally go under extension ).

As it’s evident from the figure above, all the classloader has a parent except the Bootstarp classloader which occupies the highest level in the hierarchy. Whenever there is need for loading a class, the classloader follows a delegation approach. The system classpath loader sees if it can be loaded by extension classloader. If extension class loader can’t, the extension loaded delegates it to the bootstrap class loader.

Having said this order of delegation, from classpath to¬†extension¬†to bootstrap, i have to add that the order is reversed in the case of enterprise applications. I’ll save that discussion for sometime later.

Serialization in JAVA

One of the most interesting corners in ‘Java World’ is serialization. Serialization provides the developer with the ability to store an object’s state in memory, or converting the object to a stream of binary digits, and stored in memory.

Advantages of Serialization

1: Ease of transferring data between objects¬†: In the case of a modern enterprise application, which is spread across various platforms, the need to transmit data among the various components is very critical. In java, where everything is stored as objects, it’s reasonable to transmit data in the form of objects. But for all the platforms to communicate with each other, there should be a common means of communication, a common protocol ( which is nothing but a set of rules ).

In our case, the common protocol is sending data as a stream of bytes. When data is being transferred in the form of objects, the following steps take place in the light of the above figure:
Step 1: The object to be transferred is serialized and stored in the memory of Machine 1.
Step 2: The object stored in the form of a bit stream is transmitted across the network.
Step 3: The Machine 2 receives the bit stream, which is deserialized to get back the object.

2. Freeing up space in the RAM : Now let us see the next advantage of serialization. Making long story short, whenever u feel like your RAM is crowded with a large number of objects and they are eating up your resources, you can serialize some of them to the hard disk. only to deserialize and use them again.
Consider the following example. Suppose, you are running a online store application on your machine where each customer is stored as an object. This object contains all the login details, personal details and the status of the customer’s cart. A single customer object may be so small as a few kilobytes. But in an environment like this, when the number of customers logged in at a moment may go up to several thousands. All of the customers who logged in may not be active. So there is no point in wasting your precious RAM resource for them. So these objects can be serialized to the hard disk, and can be deserialized and used again whenever the particular customer becomes active again.

What is serialized?

In the above discussion, we have not clearly mentioned what part of the object is being serialized. In fact, only the state of the object is being preserved, i.e the values on the variables. Along with this, some metadata on the object itself is being stored. This metadata is used to store some information on the object. Consider the class shown below:

 

import java.io.Serializable;

class Match implements Serializable {
public int score = 100;
public int target = 256;
}
When this class is serialized,

1: The two integer values, viz score and target are converted to bitstream and stored.
2: The metadata about the class is stored. The metadata includes fields such as:
1. The serialization version
2. Length of the class name
3. Number of fields in this class

Also note that, the serialized information can be stored in more than one way. Observe the diagram shown below, it can be plainly to memory, to a file, or to a dedicated database.

Implementing Serialization

Now, let us move on to the most important section, i.e. how to implement serialization.

In order to serialize an object, we have to ensure that the object implements the interface java.io.serializable.

 

import java.io.Serializable;
class Match implements Serializable {
public int score = 100;
public int target = 256;
}

Serializable Interface and Marker Interface

The Serializable interface is, and empty interface. If u check the code of Serializable interface, you would find something like this.

public interface Serializable
{
}

But, dont get fooled by the plain looks. The serializable class does more than what it seems. Serializable is a type of interfce known as marker interface, which do not have any methods, but does the function of tagging a particular object. In this case, the serializable interface tags the object, there by communicating to the JVM that the particualar object can be serialized. An object cannot be serialized until and unless it implements the serializable interface. Other examples of marker interfaces are Clonable, SingleThreadedModel, EventListener etc.

Now that the class or object is eligible for serialization, lets get to the part where we actually serialize it.

See the snippet of code that is employed to serialize the object:

1. FileOutputStream fos = new FileOutputStream("temp.out");
2. ObjectOutputStream oos = new ObjectOutputStream(fos);
3. Match m1 = new Match();
4. oos.writeObject(m1);

 

The following classes are used here:

FileOutputStream: A FileOutputStream is an OutputStream which is used to write to a file. An OutputStream is a class used to transfer a byte stream. The OutputStream takes in bytes and outputs them to a sink. In the case of FileOutputStream, the sink is a file.

ObjectOutputStream: The ObjectOutputStream is used to write primitive data types and an object to an OutputStream. To make the method of serializable foolproof, only those classes which implements serializable can be written onto an OutputStream.

Now lets see how the code works:

Line 1: A new FileOutputStream instance is created which writes to a file by the name temp.out.
Line 2: A new ObjectOutputStream instance is created which writes the output to the FileOutputStream created in line 1.
Line 3: A new instance of the object to be serialized is created. The same example used above is used here too.
Line 4: The object instantiated in line 3 is written onto the OutputStream, which inturn writes to the file, temp.out. The class of the object, the signature of the class, and the values of the non-transient and non-static fields of the class and all of its supertypes are written.

That is all there to it.

Java Virtual Machine

Since i am starting out with a technical blog, it’s reasonable to take off from the heart of Java, the JVM. With this small discussion, let me try to throw light into the following questions:
  1. How is Java Platform Independent?
  2. What is JVM?
  3. Is JVM Platform Independent?
  4. How is JVM Implemented?
Before we actually get onto the questions, it’d be good to have an overview on how the java language works.
The image above will give a rough idea on how the java code you write gets translated to an application.As a skeleton, the code you write goes through two stages before it gets translated into an application.Stage 1: The first stage is familiar with everyone. It is nothing but the compiling of the .java file you have with you. The javac compiler translates the java code in the .java file to bytecode present in the .class file. The bytecode is nothing but an assembly language, similar to the 8085 machine language. But unlike the 8085 assembly language, our bytecode is not platform dependent. For bytecode, JVM is the platform.Stage 2: The bytecode in the .class file is then received by the Java Virtual Machine, which plays the role of converting it to the machine language recognized by the underlying hardware of a particular machine.

This is roughly how the javacode takes it’s journey from the .java file to being an application.

Now, let us see the answers to the questions we have above:

1) How is Java Platform Independent?

One of the many reasons why java is overwhelmingly popular is that it is platform independent. Be it Windows, Linux, Mac or even your blackberry..wham.. you have a java app. Well, what brings forth this magic? In a single word, it can be answered as the JVM. Most programming languages compile the code into machine language, which is suitable to be executed in a specific microprocessor architecture. But java programs is not specific to a microprocessor. But it is run the JVM. The JVM acts as an emulator for the processor. As discussed above the JVM is responsible for handling the bytecode. Based on the bytecode, it will throw actions or system calls to the machine.
2) What is JVM?
JVM or Java Virtual machine is in fact, the heart of java programming language. The JVM does the task of making the java programming language platform independent. As explained above, the JVM roughly does the following steps:
Step 1: Take in the .class file.
Step 2: Create the action and system calls that manage the underlying hardware.
Step 3: The application runs using these actions and calls.
As seen in the image, we have two platforms, one is the Intel architecture, which has a Windows XP Pro Edition running, and also an AMD Platform which has a Red-Hat Linux running on it. The bytecode is in the .class format and is same for both the platforms. The .class file is received by the JVM which generates action calls to the hardware on which it is implemented. The curious thing to be noted here is that, even though JVM is present in Windows XP ans Fedora Linux, they are not the same copies, but different versions designed in such a way to work in separate platforms. More into this in the next section.

3) Is JVM Platform Independent?

To make long answer short, JVM is not platform independent. It is as platform dependent as it can be. As seen in the above figure, a JVM runs in a specific operating system, be it a C# one like Windows or a java based one. To run in a java based platform jvm has to be platform based too. SUN( or ORACLE) claims there are over 4.5 billion JVM enabled devices in the world. The iamge shows the situation where a java enabled blackberry phone stopped responding due to java error.

5) How is JVM Implemented?

We have seem JVM is the heart of Java and JVM is enabled in over 4.5 billion machines. The one question that deserves to be answered is how JVM is implemented. The answer is simple, through the Java Runtime Enviornment, or JRE. SUN provides JRE for each platform. The virtual machine, and it’s supporting code is defined as the runtime enviornment.