Install Git for Ubuntu

1. Create an temporary folder.
2. Go inside the folder, (mango@mango03:~/Desktop/$ cd temp).
3. type command:
- wget http://kernel.org/pub/software/scm/git/git-1.5.5.1.tar.bz2.
- sudo apt-get build-dep git-core
- tar xjf git-1.5.5.1.tar.bz2
- cd git-1.5.5.1/
- ./configure
- make
- sudo make install
4. There you go, good luck

JazzRecord

jazzRecord is ActiveRecord for JavaScript (ORM), and it support both Gears and AIR, at www.jazzrecord.org

Trimpath open source with javascript

Trimpath provides quite interesting project with javascript:

1. Next Action - a web-based todo-list manager in the Getting Things Done style. You can use Next Action even when your network is offline
2. The JavaScript Templates engine is a lightweight, standards-based, open-source component that lets web application developers have template-based programming (like PHP/ASP/JSP) while running in a web browser.

Check it out at url: http://code.google.com/p/trimpath/

Rest Uniform Interface

Rest defines a uniform interface, but it doesn't say how. It says, we should define the interface that other HTTP service used in common and understand the same way.

The most 4 popular HTTP methods that we already know (GET, POST, PUT and DELETE) can be defined as a uniform interface to communicate with the resources.
Let take a look at GET. HTTP GET is the best name for read operation. Let say two web sites, A and B, if we use HTTP GET to get some resource from web site A then web site B will have the same interface of getting its resource through the same HTTP GET, meaning all services on every website should have a uniform interface in providing it services or resources.

The Four Commonly Used Methods

1. POST: HTTP POST is commonly used to create a resource which is a subordinate to any existing parent resource. Some time POST is also being used to the information we posted to its own state rather then creating a new resource. POST neither safe or idempotent, when you making two identical requests to a factory resource, may result in creating two subordinate resources with the same information.
2. GET: HTTP GET is commonly used to request some data. we should implement the service that GET is a safe and idempotent method, meaning to say every request with GET should not result in changing server state. The client machine can make 10 or 100 times request, he/she will still get the same resource. It a bad idea to implement a resource that will increment any time client sends a request with GET to access the resources.
   

know this 'document.createDocumentFragment()'?

I know some of you already knew and even very skillful with 'document.createDocumentFragment()', I'm here just to present some new finding that I second time encounter this method, first time I just happend to come across that method when I was searching some technique with dom on W3School site, but yesterday I found that 'document.createDocumentFragment()' is useful and even easy to use.

Creating "createDocumentFragment()" is needed when you want to store a newly created nodes before you wish to append them to ocument. You may find more detail with this link url: http://ronsguide.com/js/docfrag/

Table's Attributes

I just happened to know that we can traverse rows columns in table easily with the table's dom method like tBodies, rows and cells, they all are array.

Example

Var tbody = document.getEelementById('myTable').tBodies , will return the array of tBody inside the tablbe.

Var tableRows = tbody.rows, will return the array of row inside tbody.

Var tableCells = tableRows.cells, will return the array of cells inside tableRows.

From that, you can traverse all the elements inside the table, and one of application that people are using now is sorting the row of a table. You may find it in 'Professional Javascript for Web Developer ' by Nicholas C.zakas.

Javascript UI Libraries

Fore those of you who wants to build a rich UI in javascript, these are the famous libraries that will save years of your developing time.

1. Yahoo UI at url : http://developer.yahoo.com/yui/
2. Mochikit: at url: http://mochikit.com/index.html
3. Scriptaculous at url: http://script.aculo.us/visual-effects
4. Sproutcore at url: http://www.sproutcore.com/
5. Jquery at url: http://ui.jquery.com/themeroller/
6. Prototype at url: http://www.prototype-ui.com/
7. dojo at url: http://dojotoolkit.org/projects/dijit

JSON.stringify and JSON.parse

Before sending the json data to server, we used json.stringify to serialize the json object.

When retrieved the json object, we used json.parse to formate it into human readable json object.

Web Service in Restful way

Principles of REST Web Service Design

1. Identify all possible conceptual entities that we want to expose as web services. Everything is a consider the resource that will make available as services.

2. Each resource should has its own URI and identify the resources by a noun not a verb

Incorrect: http://www.parts-depot.com/parts/getPart?id=00345

Correct: http://www.parts-depot.com/parts/00345

3. Categorize the resources so that the client can receive a representation of of resource or they can modify it. At the initial state, make those resources accessible using an HTTP GET, Then using HTTP POST, PUT, and/or DELETE for modification states.

4. Resource that is accessible through HTTP GET should just return a representation of the resource. The invocation of the resource should not result in modifying the resource.

5. No resource should be placed in isolation, but hyperlinks (href), so the user can drill down to detail information or at least to the related information.

6. Don't put all resources in a single show room. Provide hyperlinks to obtain more details resources.

7. Specify the format of response data using a specific schema (DTD, W3C Schema, RelaxNG, or Schematron). For those services that require a POST or PUT to it, also provide a schema to specify the format of the response.

8. Describe how your services are to be invoked using either a WSDL document, or simply an HTML document.

What make pair programming doom

When start talking about pair programming, it's so obvious that there must be two people working together. wow it sounds such a wasteful to spend on work that can be done with only one man work. I would say 'yes' and 'no'. it's all about how you implement it. Kent Beck has a good explanation and guide line about XP. I'm here not to repeat him, but just to give some feed back of what I have read and sharing some experience that my team has implemented for this last 5 months.

What made our team success

1. Our work survives and goes smoothly width rhythm of switching keyboard, writing test, make the test pass and refactor the code. one person become a driver start writing a test, then other person become an observer and thinking ahead of making the test pass. after the driver finished hist test, he pass the keyboard to other person to make the test pass and he becomes the observer. the next person just has to make the test pass, no matter how the ugly the code is. Once the wrote the code that makes the test passes, Then he passes the keyboard to other to make the code clean.
2. Break the big task into smaller task that can be done within a day if possible and keep the rhythm to complete those tasks.
3. Survive with rules defined by team. Rules is one of the most important thing to make pair programming effectively executed. eg. the team member must update the code every morning, every time he wants to added new feature or event before start fixing bugs. the member must not leave code uncommitted over night. That looks simple, but it needs times, effort and practice to be part of your work.
   

I think i won't go to much into detail, Kent Beck is still the best person that you can refer to regarding all aspect of pair programming.

Cool javascript pie chart generator with SVG

You might found this very interesting and useful to be able to generate a SVG piechart. I have done all the heavy calculation to make this pieces of code, so you just need to provide only few value, then will be able get the piechart display on the screen. For the other kinds of statistical graph I will post it once I have free time to complete it. Now let enjoy my SVG Piechat in javascript.
var drawPieChart = function(/*Value of slices*/val, /*Optional object*/ o){

/**
* Store a polyline object
* (object)
*/
var pieChart;

/**
* Store a string of points required by polyline object
* (string)
*/
var pointStr;

/**
* Contains the namespace for SVG-related utilities
* (Object)
*/
var SVG = {
ns: "http://www.w3.org/2000/svg",
xlinks: "http://www.w3.org/1999/xlink"
};

/**
* Create default object if not being passed
* (object)
*/
var o = o ? o : {};

/**
* Create a SVG dom object
* (object)
*/
var svg = document.createElementNS(SVG.ns, "svg:svg");

//Set default value if (options {o}) not being passed
var xOrigin = o.xOrigin ? o.xOrigin : 0;
var yOrigin = o.yOrigin ? o.yOrigin : 0;
var xCoordinateSize = o.xCoordinateSize;
var yCoordinateSize = o.yCoordinateSize;
var strokeColor = o.strokeColor ? o.strokeColor : "black";
var strokeOpacity = o.strokeOpacity ? o.fillOpacity : 0.7;
var strokeSize = o.strokeSize ? o.strokeSize : 2;
var strokeLinecap = o.strokeLinecap ? o.strokeLinecap : "round";
var strokeJoincap = o.strokeJoincap ? o.strokeJoincap : "round";
var radius = o.radius ? o.radius : 150;

// Set the size the canvas in pixels
svg.setAttribute( "width", xCoordinateSize + "px" );
svg.setAttribute( "height", yCoordinateSize + "px" );
svg.style.position = "absolute";

// Set the coordinates used by drawings in the canvas
svg.setAttribute( "viewBox", xOrigin + " " + yOrigin + " " + xCoordinateSize + " " + yCoordinateSize );

// Define the XLink namespace that SVG uses
svg.setAttributeNS( "http://www.w3.org/2000/xmlns/", "xmlns:xlink", SVG.xlinks );

var onePixel = xCoordinateSize / yCoordinateSize;

//The total value of slices
var total = 0;

//Figure out the value in degree of each slice value
for(var i = 0; i < val.length; i++){
total += val[i].value;
}

for(var i = 0; i < val.length; i++){
val[i].percentage = ( val[i].value * 100 ) / total;
val[i].value = ( val[i].value * 360 ) / total;

}

/** Create Shadow **/
var pieShadow = document.createElementNS( SVG.ns, "circle" );
pieShadow.setAttribute("cx","655");
pieShadow.setAttribute("cy","205");
pieShadow.setAttribute("r",radius);
pieShadow.setAttribute("fill","black");
pieShadow.setAttribute("fill-opacity","0.4");
pieShadow.setAttribute("filter","url(#dropshadow)");
svg.appendChild(pieShadow);

/** Creating pie chart **/

//Creating the first slice
var pieChart = document.createElementNS( SVG.ns, "path" );
var startX, startY, endX, endY;

//The point the the pieChart will draw from the center point
startX = Math.cos(0) * radius;
startY = Math.sin(0) * radius;

//The end point the pieChart will end its drawing before close
endX = startX - Math.cos( (val[0].value) * 0.017453293) * radius;
endY = (Math.sin( (val[0].value) * 0.017453293) * radius) - startY;

//Build a string of value to be used by path
var pieValue;
pieValue = (val[0].value > 180)? "M650,200" + "l"+ startX + ","+ -startY + "a"+radius+","+radius+" 0 1,0 " + -endX + "," + -endY + "z" : "M650,200" + "l"+ startX + ","+ -startY + "a"+radius+","+radius+" 0 0,0 " + -endX + "," + -endY + "z";

//Draw piechart and set its attributes
pieChart.setAttribute( "d", pieValue);
pieChart.setAttribute( "stroke-width", strokeSize * onePixel);
pieChart.setAttribute( "stroke", strokeColor );
pieChart.setAttribute( "fill", val[0].color );
pieChart.setAttribute( "stroke-linecap", strokeLinecap );
pieChart.setAttribute( "stroke-linejoin", strokeJoincap );

//Append polyline dom object to view box
svg.appendChild(pieChart);

//The point the the pieText will be placed
var textX = Math.cos( (val[0].value/2 ) * 0.017453293 ) * radius;
var textY = Math.sin( (val[0].value/2 ) * 0.017453293 ) * radius;

//Create svg text dom
var pieText = document.createElementNS( SVG.ns, "text" );
pieText.setAttribute("x",650 + textX/2 );
pieText.setAttribute("y",200 - textY/2 );
pieText.setAttribute("font-family","verdana, arial, sans-serif");
pieText.setAttribute("font-size","14");
pieText.appendChild(document.createTextNode(val[0].percentage.toFixed(2) + "%"));
svg.appendChild(pieText);

//Accumlate the agles
var angles = val[0].value;

/** Creating the rest of piechat slice **/
for(var i = 1; i < val.length; i++){

//Create pieChart dom
var pieChart = document.createElementNS( SVG.ns, "path" );

//The point the the pieChart will draw from the center point
startX = Math.cos( angles * 0.017453293 ) * radius;
startY = Math.sin( angles * 0.017453293 ) * radius;

//The point the the pieText will be placed
textX = Math.cos( (val[i].value/2 + angles) * 0.017453293 ) * radius;
textY = Math.sin( (val[i].value/2 + angles) * 0.017453293 ) * radius;

//Accumulate the angles
angles += val[i].value;

//The end point the pieChart will end its drawing before close
endX = startX - Math.cos( angles * 0.017453293) * radius;
endY = (Math.sin( angles * 0.017453293) * radius) - startY;
pieValue = (val[i].value > 180)? "M650,200" + "l"+ startX + ","+ -startY + "a"+radius+","+radius+" 0 1,0 " + -endX + "," + -endY + "z" : "M650,200" + "l"+ startX + ","+ -startY + "a"+radius+","+radius+" 0 0,0 " + -endX + "," + -endY + "z";

//Draw piechart and set its attributes
pieChart.setAttribute( "d", pieValue);
pieChart.setAttribute( "stroke-width", strokeSize * onePixel);
pieChart.setAttribute( "stroke", strokeColor );
pieChart.setAttribute( "fill", val[i].color );
pieChart.setAttribute( "stroke-linecap", strokeLinecap );
pieChart.setAttribute( "stroke-linejoin", strokeJoincap );

//Append pieChart dom object to view box
svg.appendChild(pieChart);

/** Create piechart text **/

var pieText = document.createElementNS( SVG.ns, "text" );
pieText.setAttribute("x",650 + textX/2 );
pieText.setAttribute("y",200 - textY/2 );
pieText.setAttribute("font-family","verdana, arial, sans-serif");
pieText.setAttribute("font-size","14");
pieText.appendChild(document.createTextNode(val[i].percentage.toFixed(2) + "%"));

//Append pieText dom object to view box
svg.appendChild(pieText);
}

return svg;
}

function init( ) {

var sliceValue = [
{value: 3000,color:"red" },
{value: 1000,color:"pink" },
{value: 500,color:"blue" },
{value: 500,color:"white" },
{value: 500,color:"yellow" },
{value: 500,color:"black" },
{value: 500,color:"silver" }

] };

The memoization

The memoization is a very efficiency way when you want some heavy computation to be done only once at first time. Let check the ajax creating an XhrObject example createXhrObject: function() { // Factory method.
var methods = [
function() { return new XMLHttpRequest(); },
function() { return new ActiveXObject('Msxml2.XMLHTTP'); },
function() { return new ActiveXObject('Microsoft.XMLHTTP'); }
];
for(var i = 0, len = methods.length; i <>
try {
methods[i]();
}
catch(e) {
continue;
}
// If we reach this point, method[i] worked.
this.createXhrObject = methods[i]; // Memoize the method.
return methods[i];
}
The object creation will be heavily checking the computability of each browser. But it will done only at the first time, the function createXhrObject will replace itself with the creation method once found the browser compatibility.

How to implement the Least Knowledge Principle

We should only invoke methods that belongs to:
1. The object itself
2. The object that is parameterised to the method
3. The object that a method created or instantiated
4. Any component of object

The Least Knowledge Principle

The principle of least knowledge guides us to reduce the interaction between object to just only few close friend the class itself. Don't try to be a close friend to all other class in the system. When you designing a system which composes of many classes and sub classes, you gotta be careful that one class should only interacts with those close immediately close friend and try to make least coupling as much as you can. For one system that all class are tightly coupling ( one class has interactions to many classes) will increase the complexity of the system and boost up the cost of maintanance.

SOLID will make you a solid programmer

The below article is referenced from http://mmiika.wordpress.com/oo-design-principles/

S.O.L.I.D. Class Design Principles

Collected by Robert C. Martin for his book “Applying Principles and Patterns”,

Single Responsibility Principle (SRP)

A class should have only one reason to change. For example, if a change to the business rules causes a class to change, then a change to the database schema, GUI, report format, or any other segment of the system should not force that class to change.

• http://davidhayden.com/blog/dave/archive/2005/05/29/1066.aspx
• http://c2.com/cgi/wiki?SingleResponsibilityPrinciple
• Head First Design patterns page 185, 336, 339, 367
• http://msdn.microsoft.com/en-us/magazine/cc546578.aspx

Open/Closed Principle (OCP)

Software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification.

• http://davidhayden.com/blog/dave/archive/2005/06/04/1096.aspx
• http://en.wikipedia.org/wiki/Open/closed_principle
• Head First Design patterns page 86-87, 407
• http://c2.com/cgi/wiki?OpenClosedPrinciple

Liskov substitution principle (LSP)

Subtypes must be substitutable for their base types. If class A inherits from class B, then wherever you can use A you should be able to use B. E.g. remember that square is not necessarily a rectangle! When extending: Preconditions cannot be straightened, Postconditions cannot be loosened, visible Invariants cannot be changed (?). Invariants: users depend on this both before and after sending a message. Use a proper set-based inheritance relationship. Not following set semantics is very risky. Subsumption Rule: A reference to a subtype can be used in any context where a reference to a super type is expected. This principle extremely limits what SHOULD be done with the pure extension (inheritance) mechanism. Do not follow at your own risk.

• http://davidhayden.com/blog/dave/archive/2005/06/10/1226.aspx
• Agile Principles and Patterns page ?
• http://c2.com/cgi/wiki?LiskovSubstitutionPrinciple
• http://en.wikipedia.org/wiki/Liskov_substitution_principle
• http://javaboutique.internet.com/tutorials/JavaOO/

Interface Segregation Principle (ISP)

The dependency of one class to another one should depend on the smallest possible interface.

• http://davidhayden.com/blog/dave/archive/2005/06/15/1482.aspx
• http://c2.com/cgi/wiki?InterfaceSegregationPrinciple
• http://www.google.com/search?q=interface+segration+principle
• http://doodleproject.sourceforge.net/articles/2001/interfaceSegregationPrinciple.html

Dependency Inversion Principle (DIP)

Depend upon abstractions (interfaces), not upon concrete classes.

• http://davidhayden.com/blog/dave/archive/2005/06/10/1261.aspx
• http://en.wikipedia.org/wiki/Dependency_inversion_principle
• Head First Design patterns page 139-143
• http://c2.com/cgi/wiki?DependencyInversionPrinciple

Positioning dom element

Static positioning:

This is the default way that an element is positioned; it simply follows
the normal flow of the document. The top and left properties have no effect when an element
has static positioning. eg. position: static; top: 0px; left: 0px;

Relative positioning:

This means the positioning is very similar to static positioning, as the
element will continue to follow the normal flow of the document until instructed to do
otherwise. However, setting the top or left properties will cause the element to be shifted
in relation to its original (static) position. eg. position: relative; top: -50px; left: 50px;

Absolute positioning:

Positioning an element absolutely completely breaks it out of the
normal flow of page layout. An element that’s been positioned absolutely will be displayed
in relation to the first parent element that has a nonstatic position. If no parent
exists, it’s positioned in relation to the entire document. eg. absolute; top: 20px;
left: 0px;

Fixed Positioning:

Fixed positioning works by positioning an element relative to the
browser window. Setting an element’s top and left to 0 pixels will display that element
in the top-left corner of the browser for as long as the user is on that page, completely
ignoring any use of the browser’s scrollbars. position: fixed; top: 20px; right: 0px;

OffsetParent:

offsetParent: This is the parent that an element is positioned within. However,
in practice, the element that offsetParent refers to depends on the browser (for
example, in Firefox it refers to the root node, and in Opera, the immediate parent).

offsetLeft and offsetTop: These parameters are the horizontal and vertical offsets of the
element within the context of the offsetParent. Thankfully, this is always accurate in
modern browsers.

Concept of reference in javascript

The basic concept of reference in javascript is the pointer to the actual location of an object. let take a look at the example and see how reference react in object assignment.

// Set items to an array (object) of strings
var items = new Array( "one", "two", "three" );

// Set itemsRef to a reference to items
var itemsRef = items;

for(el in itemsRef) alert(itemsRef[el])

The output will be "one", "two", "three".

Let add some more element to an array through push() method

items.push("four");
items.push("five");
for(el in itemsRef) alert(itemsRef[el])

The output will "one", "two", "three", "four", "five"

The itmesRef has a reference to items, thus anychange to items will also change in itemsRef

Event in javascript

1. Event Object

In javascript event also an object that can be attached to any element. In IE event object is a global that can be access anywhere in the page (e = window.event), whereby other browser beside IE, the event object (e) is need to passed in with call back function
eg. element.onclick = function( /*For none IE browser*/e){
if(e) {
alert("this is none IE event object" + e)
}else{
e = window.event;
alert("this is IE event object" + e)
}
}

2. Stop Event Capturing and Bubbling

IE : window.event.cancelBubble = true
Mozilla: e.stopPropogation()

3. Stop Default Browser event

A browser event is an event that fired by the browser which you don't really realize about it, like when you right click on any element, the browser will fire its event by default. To stop that let look at this.
IE : window.event.returnValue = false;
Mozilla : e.preventDefault();

4. Attach Event to An Element

There are two ways which you can attach event to any dom element.
1. Using classical way
element.onclick = function(){alert("event click happens")};
2. Using attachEvent/addEventListener
Mozilla : dom.addListener("click",function(){}, false/true );

Dom Object in javascript

Dealing with javascript dom object in javascript is quite convenient once you know it features. Here are some useful information about dom.

1. nodeType key word

- element.nodeType = 9 meaning the rood of the element
- element.nodeType = 3 meaning the element is a text
- element.nodeType = 1 match any element like

2. Get text of element

- IE : element.innerText
- Mozilla : element.nodeValue

3. Get innerHTML inside element
- All: element.innerHTML

4. Create element with name space
document.createElementNs('uri', element)

5. Set and Get attribute of element
element.setAttribute('value', 'my value')
element.setAttribute('id', 'my id')
element.setAttribute('style', 'position: absolute; left: 50pxl;')

assingment operator " = "

Remember, the assignment operator " = " in javascript is assigned by reference not the coppied value.
e.g var number1;
var number2 = 3 ;
number1 = number2;
number2 = 5 ;
alert(number1) ;

Guest what? 3 or 5.
The right answer is 5 not 3, since its reference has been changed to 5.

Remove child node for parent node

The kind of removing a child node is always the case when you want to remove the child node from parent node. let say you got a dom object that has 3 child node you may want to remove all of them. how to do so you might using a for loop to loop through all its child node and remove all of them accordingly to the child node's index. you are right but will it work? let take a look at this.
e.g var parentDom = document.CreateElement("div");
var child1 = document.CreateElement(''div'');
var child2 = document.CreateElement(''div'');
var child3 = document.CreateElement(''div'');
//Append all the child to parentDom
parentDom.appendChild(child1);
parentDom.appendChild(child2);
parentDom.appendChild(child3);

//Let use 'removeChild' key word and FOR LOOP to remove them
for(var i = 0 ; i < parentDom.childNodes.length ; i++){
parentDom.removeChild(parentDom.childNode[i]);
}
You sure, this will work ? oops it won't, because when you remove the first element the second element will be moved to the first index, that make the second index blank which will cause the error.
//It will work like this
//Let use 'removeChild' key word and FOR LOOP to remove them
for(var i = 0 ; i < parentDom.childNodes.length ; i++){
parentDom.removeChild(parentDom.childNode[0]);
}

Create artificial event to the dom object

Below is the artificial event that is created to trigger an event on a dom object. e.g you may want to a click event happen on a dom object without any actual mouse click on the dom. You can do so by using 'dispatch' for firefox and fireEvent for IT

Sample DIV.

The use of keyword 'continue' in for 'if' statement

Using continue key word will skip the current action in 'if' statement and continue to do normal work.

var j = 3;
for( var i = 0 ; i < 5 ; i++ ){
if( i == j) continue;
}

Memorise the index for click event in FOR loop

It always course trouble when come to deal with click event in for loop. Let say you got few dom element and you store it in array and you want to traverse all of them and add event listener to it. You wont be able to know which dom you click when it come to use for loop to traverse them.

Here is the solution, we use closure here to solve this problem

//User activities -- switching contents
for (var i = 0; i < tabs.length; i++) {
(function() {
var j = i;
eventObj.addDomListener(
self._tabContainerDoms[j],
'click',
function() {
self._tabContainerDoms[j].style.height = parseInt(self._tabContainerDoms[j].style.height) + 1 + "px";
}
);

})();
}

Reqular expression in javascript

regular expression in javascript

We have two ways to construct a regular expression in javascript
1. reg = /ab+c/; using expression literal when you want the req to be compiled at evaluate time
2. re g = new RegExp("ab+c"); Using the constructor when you want to to compile the reg at compilation times. Using the constructor function when you know the regular expression pattern will be changing.

Using Simple Patterns

Simple patterns are used when we want to find a direct match. Let say we want to find a pattersn /abc/, thus it will be only matched when the string contains the 'abc' in the same order. for example we want to find the patterns /abc/ in string 'we want to find abc', this will match the patterns.

Using Special Characters

Special character is used when we want to find something more than a direct match. Let say we want to find something like /go*d/. This pattern means that it will match any combination that start with 'g' and follow by zero or more occurrences of 'o' then followed by 'd'. For example the pattern /go*d/ will match in any string 'I want to buy som goods and god book'

^ = Matche beginning of input. eg. /^a/ will match 'anruna' but not 'banana'.
$ = Matche the end of input. eg. /a$/ will match 'nruna' but not 'arun'.
+ = Matches the preceding character 1 or more times. eg. /a+/ will match 'aruna' or 'arunaaaaa'.
? = Matches the preceding character 0 or 1 time. eg. /e?le?/ will matche the 'el' in "angel" and the 'le' in "angle."
. = Matches any single character but not the new line character. eg. /.l/ will match something in string 'long live, long day' but not 'long'.

My beginning day

Hi to everyone, I'm a Dracular and wish to good and professional programmer.