Skip to main content

Posts

Showing posts from 2012

Back to quality education with Udacity and KhanAcademy

A slight deviation from my usual posts and this time I am reflecting on the state of education, when I was a school student and the new digital era being revolutionized by the likes of Udacity, KhanAcademy and Coursera.

Every child goes through this phase, and its the decision that he makes, at that point, that may change the future course of his life.

Every child has a dream and every dream has some limitations, which are constrained by our imaginations and most of which are self created.  As a child I always wanted to study and understand mathematics and its applications, but was never able to.

I never understood what my teacher was teaching, as it was a pure mechanical process.  Put a formula, here and a formula there and you get the solution.  They never made us ponder why things work the way it does.

For me mathematics was one of most dreaded subjects and also one which I loved most, for being one of the subject on my top hate list.  Pretty contradictions, and that's what th…

Quickly build a jQuery watermark plugin with HTML5 and modenizr support

In this edition of blog post, we will quickly build a jQuery watermark pluigin for input controls.  This is an adapted post from  http://uniquemethod.com/html5-placeholder-text-jquery-fallback-with-modernizr.  I have quickly refactored the code as a jQuery plugin.  The author in the above blog post has done a great job of summarizing the concept.

A watermark or placeholder text is an indicator by input controls as to what data could be enter in the field.  It's kind of a hint to user entering the data.

HTML5 has native support for watermark in the form of "placeholder" attribute.  Any text that you put in the placeholder attribute will show as watermark in modern browsers.

For browsers that doesn't yet support HTML5, jQuery comes to the rescue.  Also, we are using Modernizr for feature detection.

Modernizr is an excellent feature detection library, with which we can detect for support of modern standard by browsers.


You can see a working version here

You can use thi…

A new startup initiative: Ownabook.org - A community site

Lately there has been a traction from my usual work, and was thinking about starting something very different and helpful to the community.  Various ideas where jumping in my mind, but as usual ideas are ideas and of no use unless it sees the light of the day.   Did tried attempt at various small open source projects, in PHP, rails, MVC, jQuery, but never completed any of them fully.  Something always stopped me at the last moment.

But the good thing is there was tremendous learning in all these activities.  Learned a ton.  But one thing always hounded my mind, my incomplete OSS projects.

So, this time, didn't thought much,  just jumped straight in, took the code editor and begin designing my ideas as code.  One of the outcome is http://ownabook.org, a community initiative were some lucky bookwormers may get cool books, absolutely free.  That's not all, once the site is up, there will be unique features and opportunities to grab.

The idea behind this is to keep the reading ha…

Building a jQuery PPT like presentation - Part 1

This is more a video post and it covers how to build a simple PPT like presentation using jQuery. This is very elementary at this stage and we will incrementally add features to this.

The first version is a very rough one and cover elementary ideas and proof of concept.

Hope you like this. Do please note the video doesn't have any voice as I am still improving my recording skills (and also having a bad throat since couple of days). In any case, I do think action speaks louder that words.. (though this is just an excuse).

The URL for the source code is at http://jsbin.com/ovaxop/edit#source

JavaScript Function Spaghetti Code

In this post we will have a look at the spaghetti code created by functions and how to avoid them. First lets quickly go through why this is a cause of concern.


Problems with Function Spaghetti Code

Variables/ functions are added to the global scope
The code is not modular
There's potential for duplicate function names
Difficult to maintain
No namespace sense.
Let's take for example the following set of functions and check whats the issue with them.
// file1.js
function saveState(obj) {     // write code here to saveState of some object     alert('file1 saveState'); }
// file2.js (remote team or some third party scripts) function saveState(obj, obj2) {      // further code...     alert('file2 saveState"); }
Now the problem here is if your application is using saveState() then the execution of saveState() which one to call is determined by the script loading.  The later script overrides same functions already defined by earlier script.
For e.g.

If this script is refer…

JavaScript - The this keyword

"this" is one of the most misunderstood construct in JavaScript.  To understand this first lets go through how to create a construction function in JavaScript.  A constructor function is a function which is used to create instances of objects in JavaScript.

You define a constructor function using the same notation that you use to define a normal JavaScript function.  The convention to follow is to capitalize the first letter of the function name.

This requirement is not enforced by the JavaScript language but it is a generally accepted practice and there are many benefits which we will shortly discuss.

Let's define a constructor function to hold our menu information.

function Menu() { }
So, in the above snippet you have a constructor function named Menu defined. At present this function doesn't do anything good.

Let's see how to invoke this function

var menu = new Menu();
Let's add some public properties to this function.
function Menu() { this.menuName = &q…

JavaScript Scope

In this blog post we will dig deeper into various aspects of JavaScript scope.  This is a pretty interesting topic  and also a topic which confuses many beginning JavaScript programmers.

Understanding JavaScript scope helps you write bug free programs (hmm.. atleast helps your troubleshoot things easily)

Scope control the visibility and lifetimes of variables and parameters.  This is important from the perspective of avoiding naming collisions and provides memory management service.

Unlike other languages, JavaScript does not have block level scope.  For e.g. take for instance the following piece of c# code.
public void Main () {
int a = 5;
if (true) {
int b = 10;
}
// This will throw compile time error as b is not defined
// and not within the scope of function Main();
Console.WriteLine(b);
}
If you write the same code in JavaScript, then the value of 'b' will be available outside the 'if' block. The reason for this is JavaScript does not have block…

Hoisting

Hoisting is one of the feature in JavaScript that puzzles many beginners and intermediate developers.  Hoisting is a feature wherein all the variables are moved to the outermost scope, which is function, in JavaScript.  This may sometimes result in seemingly strange behavior.

Before and after hoisting





The output of the above program is an alert with a value of 10.  Traditional logic would have lead us to believe that the value of alert should be undefined.  But because of hoisting the variable is moved to the top of function declaration.  Its important to realize that only the variable declaration is moved and not the initialization.
Recommendation: Always declare your variables at the top of the function scope.
Similar to variable hoisting we also have function hoisting.  Function hoisting has different behaviors based on the fact if the function is an expression or a declaration.

A function is an expression if it is assigned to a variable.  The assignment may also hold an anonymous…

JavaScript for Web and Library Developers

This is my first blog post on my home domain and in this series of posts I will explore various facets of JavaScript language that will help us become better programmers.  The idea is tear apart the language and understand how to use the features and build libraries like jquery, knockoutjs, backbonejs.

The idea is not to replicate this libraries, but understand the inner workings using better JavaScript coding practices, design principles and thereby make the web a better place to visit..

We will be covering the following topics, though not in order and there may be addition to this list.

Foundations
Patterns
Closure
this keyword
Hoisting
Anonymous function
Currying
Server side JavaScript
Canvas
etc.

Hope you will enjoy this journey with me!