Some open web libraries

Google Chrome Frame, Enable open web technologies in Internet Explorer.

General Purpose
jquery
mootools
Modernizr
prototypejs

HTML Canvas
processingjs
easeljs
gury
MooTools Canvas Library
pixastic

3D
three.js
C3DL
copperlicht
j3d

Animation on Canvas
cakejs

Vector drawing on Canvas
Paper.js
Raphaƫl

Charts
rgraph

Javascript Graphics library
JSGL
unveil : Data driven application framework

Media
popcornjs
jsfx

Game
craftyjs
gameQuery
xc.js
mibbu
LimeJS
Cocos2D
akihabara
FlixelJS
GameJs
Gamma

Mathematics
Sylvester

Tutorials, examples and references :
creativejs
diveintohtml5
Chrome Experiments
html5games
HTML5 based Game Engines
Js Game Engines

javascript : prototype

Moving on with my study of javascript, the next thing is “prototype”. Before that, lets say it three times, “Everything in javascript is an Object“.

There are only 3 primitive datatypes in javascript! Though some refer as, there are 5 types, but all in all those are the only ones. These primitive data types are

string
numeric
boolean
//The other two are
null
undefined

Apart from these basic datatypes, everything else is an Object. Though there are predefined Objects in javascript with these primitive datatype names such as String,Number,Boolean,Null,Undefined respectively. Please refer this for a detailed understanding.
Well, the point here is everything is an Object in Javascript. Unlike other programming languages where a Class is needed to create an Object, Javascript comes with Objects from the beginning. The dynamic nature of the language allows us to do so many things in so many ways that there really needs an eye who can see the details, of how things are done.
We know from past tutorial that “prototype” is a property of an Object created with “new” keyword. What does this do? Well, this allows us to link Objects internally!! Lets take a pause and understand another very important lesson of javascript and object oriented programming in general.
In a Class based language(Java or Actionscript) it is thought as, “how to relate the Classes, so that something is possible?”, where in a dynamic language such as javascript, it is thought as “how to relate the Objects, so that something is possible?” Read it for a number of times so that you will get a hang of the metaphor and thought process difference, in mind.
So the point here is the same, we have to relate the Objects itself but not the Classes(Anyway, we do not have classes here in javascript but can fake them though).
Coming back to our “prototype”, its the property of an Object created through the use of “new”. This “prototype” property is also an Object in itself. To test this, let us refer our previous post, and the all in one page test. Go down to the “Understanding Javascript class.” box and click on the “what is prototype” button. The pop-up will say, its an Object. That’s good, lets move on and click on “prototype test” button, now it alerts “undefined” that means, “prototype” is an object but not yet defined! So lets define a prototype and call the same method again. First to assign an object to the “prototype” property click on “initiate with custom prototype” button. That will assign a custom object as the “prototype” property. Now click on the “prototype test” button again, and this time it will alert with some value, other than “undefined”.
Whoa!! Its that simple. Yes it is that simple and for the same reason many confuse with the concept. After all the world has become complicated to understand simple things :) :)

The source code of the example is here to download.
Happy coding.

javascript : Constructor

The confusion between a “function” and a “constructor” is always there. They may seem very similar from outside, but its the implementation that defines the difference. Actually its not even the function definition which is confusing, but its the concept and dynamism of the language itself.
First important thing to remember is everything in Javascript is an Object.
So anything that is Object can be functional. Now there are two ways we can create objects in javascript.
The basic and most used is the object literal with curly braces as

var myObj={
a:12,
b:"another string",
c:function(){}
};

Now if we want to access any thing of this object, the calls will go as below

myObj.a;
myObj.c();

That was quite straight forward for we are accessing an “object itself”.
Now lets see how we can create objects in another way.

var AnObject=function(){
this.a='A String value';
this.b=12345;
this.c=function(){};
this.d='Another String';
};

The above code is kind of a Class, that means it is not a class by any formal definition, but it is kind of a thing which makes objects. If one tries to access anything from it directly as

AnObject.a;
AnObject.c();

It will simply not work!! Why?! For its not an Object yet. To make an object out of it, we have to use “new” and then call it with a “()” like

var anO=new AnObject();
//now call the properties and methods as below
anO.a;
anO.c();

Thats simply because when we call this kind of object, or create objects in this kind with a “new” and a “()”, its called constructor.

varv anO=new AnObject();

Now this function call with a “new” is known as a constructor.
Apart from this difference there is a huge difference in terms of using “prototype” object of the constructor. The “prototype” itself is a huge topic, so its not explained here. The important thing here is to remember that any object which is created with a constructor has a “prototype” property but the objects, which are created with any other methods do not possess the “prototype” object.

javascript : An all in one test page :)

This took me some time to put a decent page online, where one can refer to some very basic concepts of Javascript. Now the page can be accessed here and the source code can be downloaded from this link.

I will go on putting the details of my learning in the coming posts, but for the time being if one needs to play around the codes, please download and start researching.

Keep in mind that every language has its own way of doing things and the more ignorant you become (at least pretend to become) about other languages while picking up one, the faster you will master the one you are studying.

The example and source files convey, how to make and use your own javascript library, how to make a reusable Object in javascript (i am not saying to make a Class here, but a reusable Object, there is a very big difference in those two), how to make a basic CSS3 usage of rounded corners, multiple shadows, custom fonts and text shadows.

Happy learning.

Aptana Studio, free IDE for web design.

This may be apparent by now that web design is not graphics in a page or the colour of the background of the webpage. It has gone well beyond that and for the same reason web designers are attracted towards an IDE (Integrated development environment) that would be best suited for this need. Previously the WYSIWYG kind of IDEs were a thing to look for. But currently it is the web standards, clean code and ease of use is what everyone looks for. Fortunately we are not limited to Notepad in windows or TextEdit on MAC.
One such IDE is APTANA Studio. This is based on the opensource Eclipse IDE. Current version of the IDE is much better than its previous versions and now it comes with project templates for HTML5 applications. There are project templates which are already installed with the IDE itself. There is an option to choose the template to use in your project, and if you are connected to internet then there are options for a template to be downloaded from the source control systems like github. This makes a perfect case for people who are just beginning to use Git or not used to it. That means whenever you create a project with these kind of templates, you are bound to get the latest one form the repository. So you will get the benefit of the awesome developer and designer community, who is constantly contributing to the original source code. And one does not need to know the inside working of the system. Thats a huge plus point.
Well, by this time you must have sensed that Git support is inbuilt with the IDE. So one can always see if the changes are committed or not. That way it will make your code constantly tracked by version control systems. There is a built in terminal(command prompt) inside the IDE. So one dose not need to open it separately to work in a command prompt.
Next is its look and feel and working in different operating systems and this IDE simply the same IDE in Windows and Mac operating systems (I have not tried the Linux version yet).
This supports a lot of languages starting from HTML, Javascript, CSS, PHP, Ruby and Rails. While writing my own CSS and javascript the code hinting and responsiveness of the IDE just blown me away. Its just those simple features, which, if one gets used to, then there would be no coming back to a bare-bone IDE like Notepad or TextEdit. While editing CSS, and adding a colour value, there is a little display as to which colour this value is representing! Thats just too good. There is a web previewer inside the IDE itself, if one needs to test the design one need not leave the IDE too.
Overall in my opinion this is one of the IDEs to get used to if one is doing web design in current age.

Mobile device emulator as Chrome Browser extension

If you are a mobile application developer, then it would have been always a quest to find the devices to test the applications. Apart from that, one need particular environments to develop the application too. Some device applications can be developed and tested in particular Operating system. Then there are HTML5 and JS frameworks and tool kits to develop mobile applications. These frameworks and toolkits allow one to develop applications as web applications. While this option, opens up the opportunity to develop mobile applications in any environment, there is still a lot of work to do, when it comes to test these applications in various mobile devices.
Ripple is an extension to Chrome browser. I think this can not be more easier than this. Once installed, the interface is quite straight forward. Well the process goes like this. If you are in a webpage (any webpage), just right click and say

Emulator > Enable

That will render the webpage in a mobile device, there are choices to configure the devices also. That means, any web application can be tested with a number of device emulators, right in the browser itself. There are options for Device, Platform, Accelerometer along with a lot more.
I think this can not get easier than this.

Getting into web design action

Once we are familiar with the key concepts of the web, browser and how it works, now its time to see how to get started with it. If you have not yet gone through them, here are the links,
1. introduction
2. getting used to the terms
I hope by now you have gone through the above links. This is not mandatory, but then going through them will bring you to the same page with me. Else it will be a little difficult for any one to understand what is being referred in the tutorial here.
Well, lets get into action. By now, you must be knowing to start with a web-page we at least need 3 files (Not mandatory but good way to segregate different functionality in different files, refer to the “getting used to the terms” reference for more on this ). So the 3 files are, one HTML file, one Javascript file and one CSS file. We will start to put the basic code for these.
The HTML file is stored with an extension of “.html”, CSS files are stored as “.css” and javascript files are stored as “.js” files. Lets write our first html file.
The very basic HTML page code will look something like

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




	





Continue reading

Where are my blog design gone?

There seems to be something wrong in this blog!! Really! Well, the images and styling are all gone!
This is not accident but intentional. I have started porting my blog to HTML5 . Yeah, you heard it right. For those of you asking me to learn HTML5, lets start here. You can right click on the page and view source. That way, you can go through the HTML5 tags. Do not worry, if things look similar/different to/from previous version of HTML. I will be posting updates and tutorials about HTML5 and CSS3 here only. Stay tuned.