Google DOC offscreen word rendering

Google DOC is a brilliant piece of software not just for its functionalities but also for genius of engineering that is employed in its implementation. This article gives a small peek into some of the ideas. Out of curiosity I have started poking around Google DOC to find how they have implemented small things (they just seem small), for example displaying the cursor using DIV when user clicks in a text block. My search led me to Range DOM APIs, and in turn I found rangy position module which can be used to do this. 

Since Google DOC handles editing on its own, it must use some logic to split text into different lines as user is typing. Since the article above mentions off screen rendering, I thought to look at the DOM elements to find these offscreen DOM elements. And I found one element that renders a word under the cursor. If you remove its z-index, positioning and overflow attributes, you will see the current word rendered on the top left corner of the page. You can find this element all the way at the bottom of the DOM tree with <span> tag as shown below. 

Variable spilling in global space

Let's say you have defined members using "this" within a function. Instead of constructing an object from this function you use it as a regular function call. What should happen here? In this case we are not calling the function with a specific context, hence all the objects defined by "this" will be created under the scope where this function call is made.

Example,

function Person()
{
    this.name = "XYZ"
    this.address = "Somewhere"
    
    this.displayPerson = function(){
        alert(this.name + " lives at " + this.address);
    }
}

// Call it as normal function instead of constructor using new
Person();

// members defined by "this" are available in current scope
console.log(name);
console.log(address);
console.log(displayPerson);

Calling a function with different context in JavaScript

In JavaScript it is possible to call a function with different context, i.e. a different object instead of the object of the defining function. We can think of context as scope. So the question is what happens when we change the context when calling a function?

When we call a function in a standard way everything in that function is executed under the default scope. And all the variables (or objects) are created under the scope of that function object (remember function is also an object in JS). So when we call a function with different context, everything executed in that function assumes new scope and everything is created in this new scope.

Here is a very simple example that illustrates what happens when we change function's execution context:

function createMsg(msg){
    finalMsg = "ControlRoom:: " + msg;
    return finalMsg;
}

function displayMyMsg(){
   // change the scope by using Function.call
   //   and scope is changed to current function object by passing "this"
   createMsg.call( this, "Welcome to the world of JS!" );
   // Now we have finalMsg variable (from createMsg) available to use
   alert( finalMsg );
}

displayMyMsg();

This technique is called "Delegation" since we are delegating execution scope to a different object. This technique can also be used with constructor functions allowing us to create a kind of inheritance.

Check out this great article by Angus Croll to understand the use of this technique.

Inheritance and JavaScript

I am working on a project using JavaScript and I needed to use Inheritance. I didn't know it is not part of the language itself. Since ActionScript and JavaScript both are based on ECMA standards and ActionScript got classes & inheritance I thought JavaScript might have it as well.

Anyway long story short, here are some of the links I found to be very useful in implementing inheritance logic. I did a mix of few, but main chunk is still from Kevin's snippet.

http://kevlindev.com/tutorials/javascript/inheritance/index.htm
http://ejohn.org/blog/simple-javascript-inheritance/
http://www.crockford.com/javascript/inheritance.html

I really like John Resig's solution, it's clever and provides some great features like the use of _super.method() only available inside the child class method. And I like how he uses JavaScript closure to his advantage. His solution also allows to call the parent class constructor automatically, but he delegates all the constructor work to init() function so you can get flexibility of calling it when you want while skipping it during the inheriting process (read his post for details).

Douglas Crockford has great explanation of different kinds of inheritance in JavaScript and how to achieve it with his own implementation of inheritance utility. He makes some excellent points about JavaScript's features.

Kevin's solution is the simplest yet works great. The neat trick he uses is to create a temporary object to transfer the prototype members to the subclass. This gives you the control to call parent constructor when you want inside the subclass constructor.

Programming many things at the same time is already complicated enough and so any solution that is simpler is the best for me. So went with Kevin's solution in the end.

Cliché : Hello World

I still like using this title :)
I have started one more blog to keep my programming notes separate from my animation and technical art blogs. In my journey so far, I have discovered that no matter how long I work with programming I never lose the passion for this field. I do have my ups and downs, but in a long run I know I am not going to leave programming. I really like working with different technologies. I have worked with Flash & ActionScript quite a lot in the past and I have also been working with python and c++. In the recent times, I have been working with web programming using PHP and jQuery.

At present I am working on my new website using CodeIgniter framework. There are not many frameworks or platforms that are easy to start with and unobtrusive. Many frameworks give freedom to do whatever you want, but only few give the freedom in a way that does not come in your way to solving your problems. CodeIgniter lets me use my own coding style without imposing too many rules to my workflow.

I have also started using jQuery for creating rich user experience. I like many convenient features of jQuery to create dynamic content with less code. Recently I have developed more interest in web applications with great looking and efficient user interfaces that give users rich experience on the web. I find this very challenging and enjoy making it very much :)

My wife has proposed a great idea and we have started planning on how to realize this idea. Hopefully if time goes well this idea will start shaping into what we have imagined :)