Pattern Lab

What is pattern lab?

Is that a framework like bootstrap? it looks like that with interface but its not ūüôā

So what is it exactly?

Go through the following link..

Still confused?? Cool!! go through the video which explains more clearly..

Now go through the demo..

Hope you understand what is atomic design pattern using pattern lab by this time now…

Good day Enjoy ūüôā

HTML5 Canvas Basics Part 2

This is the continuation post of canvas basics

Canvas Custom Shape Tutorial

To create a custom shape with HTML5 Canvas, we can create a path and then close it using the closePath() method.  We can use the lineTo(),arcTo(), quadraticCurveTo(), or bezierCurveTo() methods to construct each subpath which makes up our shape.

<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);

// begin custom shape
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);

// complete custom shape
context.lineWidth = 5;
context.strokeStyle = ‘blue’;

Above code creates a visual like

23-06-2014 14-44-13

Canvas Rectangle Tutorial

To create a rectangle using HTML5 Canvas, we can use the rect() method rather than constructing the shape with 4 connecting lines.  An HTML5 Canvas rectangle is positioned with x and y parameters, and is sized with width and height parameters.  The rectangle is positioned about its top left corner.
context.rect(88, 100, 400, 200); // x,y,width,height
context.fillStyle = ‘yellow’;
context.lineWidth = 7;
context.strokeStyle = ‘black’;

Canvas Circle Tutorial

To draw a circle with HTML5 Canvas, we can create a full arc using the arc() method by defining the starting angle as 0 and the ending angle as 2 * PI.

The arc() method creates an arc/curve (used to create circles, or parts of circles).

Tip: To create a circle with arc(): Set start angle to 0 and end angle to 2*Math.PI.

Tip: Use the stroke() or the fill() method to actually draw the arc on the canvas.


23-06-2014 14-52-10

Syntax: context.arc(x,y,r,sAngle,eAngle,counterclockwise);

x The x-coordinate of the center of the circle
y The y-coordinate of the center of the circle
r The radius of the circle
sAngle The starting angle, in radians (0 is at the 3 o’clock position of the arc’s circle)
eAngle The ending angle, in radians
counterclockwise Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.

Eg: context.beginPath();
context.arc(300, 100, 70, 0, 2 * Math.PI, false);
context.fillStyle = ‘green’;
context.lineWidth = 5;
context.strokeStyle = ‘#003300’;


To fill an HTML5 Canvas shape with a solid color, we can set the fillStyle property to a color string such as blue, a hex value such as #0000FF, or an RGB value such as rgb(0,0,255), and then we can use the fill() method to fill the shape.  Unless otherwise specified, the default fill style for an HTML5 Canvas shape is black.

Note: When setting both the fill and stroke for a shape, make sure that you use fill() before stroke(). Otherwise, the fill will overlap half of the stroke.

context.fillStyle = ‘#8ED6FF’;
context.strokeStyle = ‘blue’;

Linear Gradient:

To create a linear gradient with HTML5 Canvas, we can use the¬†createLinearGradient()¬†method. Linear gradients are defined by an imaginary line which defines the direction of the gradient. Once we’ve created our gradient, we can insert colors using the¬†addColorStop¬†property.

The direction of the linear gradient moves from the starting point to the ending point of the imaginary line defined with¬†createLinearGradient().¬† In this tutorial, we’ve used two color stops, a light blue that originates at the starting point of the gradient, and a dark blue that ends with the ending point. Color stops are placed along the imaginary line somewhere between 0 and 1, where 0 is at the starting point, and 1 is at the ending point.

<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);
context.rect(0, 0, canvas.width, canvas.height);

// add linear gradient
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
// light blue
grd.addColorStop(0, ‘#8ED6FF’);
// dark blue
grd.addColorStop(1, ‘#004CB3’);
context.fillStyle = grd;

23-06-2014 15-17-49

Radial Gradient:

To create a radial gradient with HTML5 Canvas, we can use the createRadialGradient() method. Radial gradients are defined with two imaginary circles Рa starting circle and an ending circle, in which the gradient starts with the start circle and moves towards the end circle.

context.rect(0, 0, canvas.width, canvas.height);

// create radial gradient
var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
// light blue
grd.addColorStop(0, ‘#8ED6FF’);
// dark blue
grd.addColorStop(1, ‘#004CB3’);

context.fillStyle = grd;

23-06-2014 15-20-18


To create a pattern with the HTML5 Canvas, we can use the createPattern() method of the canvas context which returns a pattern object, set thefillStyle property to the pattern object, and then fill the shape using fill().  The createPattern() method requires an image object and a repeat option, which can be repeat, repeat-x, repeat-y, or no-repeat.  Unless otherwise specified, the repeat option is defaulted to repeat.

<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);

var imageObj = new Image();
imageObj.onload = function() {
var pattern = context.createPattern(imageObj, ‘repeat’);

context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = pattern;
imageObj.src = ‘;;

23-06-2014 15-23-09

Canvas Image:

To draw an image using HTML5 Canvas, we can use the drawImage() method which requires an image object and a destination point. The destination point defines the top left corner of the image relative to the top left corner of the canvas.

The drawImage() method draws an image, canvas, or video onto the canvas.

The drawImage() method can also draw parts of an image, and/or increase/reduce the image size.

JavaScript Syntax

Position the image on the canvas:

JavaScript syntax: context.drawImage(img,x,y);

Position the image on the canvas, and specify width and height of the image:

JavaScript syntax: context.drawImage(img,x,y,width,height);

Clip the image and position the clipped part on the canvas:

JavaScript syntax: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);


img Specifies the image, canvas, or video element to use
sx Optional. The x coordinate where to start clipping
sy Optional. The y coordinate where to start clipping
swidth Optional. The width of the clipped image
sheight Optional. The height of the clipped image
x The x coordinate where to place the image on the canvas
y The y coordinate where to place the image on the canvas
width Optional. The width of the image to use (stretch or reduce the image)
height Optional. The height of the image to use (stretch or reduce the image)


<canvas id=”myCanvas” width=”578″ height=”400″></canvas>
var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);
var imageObj = new Image();

imageObj.onload = function() {
context.drawImage(imageObj, 32, 50,440,600);
imageObj.src = ‘;;

image size:

To set the size of an image using HTML5 Canvas, we can add two additional arguments to the drawImage() method, width and height.

<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);
var x = 188;
var y = 30;
var width = 200;
var height = 137;
var imageObj = new Image();

imageObj.onload = function() {
context.drawImage(imageObj, x, y, width, height);
imageObj.src = ‘;;

Image crop:

To crop an image using HTML5 Canvas, we can add six additional arguments to the drawImage() method, sourceX, sourceY, sourceWidth,sourceHeight, destWidth and destHeight.  These arguments define the location and size of a rectangle that we want to cut out of an image.


<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);
var imageObj = new Image();

imageObj.onload = function() {
// draw cropped image
var sourceX = 150;
var sourceY = 0;
var sourceWidth = 150;
var sourceHeight = 150;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = canvas.width / 2 – destWidth / 2;
var destY = canvas.height / 2 – destHeight / 2;

context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
imageObj.src = ‘;;

Categories PHP

.htaccess tutorial

Guys today we will see what is .htaccess and why for it is used effectively…

What is .htaccess??

You may have been working on a website, or reading an article about web development, and heard about the .htaccess file, but wondered what it was, or what, if anything, you can do with it. This tutorial will tell you the basics about .htaccess, and show you a few ways you can use it on your website.

Before we go any farther, let’s explain what the .htaccess file is. htaccess is short for Hypertext Access, and is a configuration file used by Apache-based web servers that controls the directory that it “lives” in–as well as all the subdirectories underneath that directory.

Many times, if you have installed a Content Management System (CMS), such as Drupal, Joomla or WordPress, you likely encountered the .htaccess file. You may not have even had to edit it, but it was among the files that you uploaded to your web server. BTW, that’s its name, .htaccess–it begins with a period, and ends with “htaccess”. If you edit it, you need to make sure that it stays that way, and doesn’t end up with a .txt or .html extension.

Also note that some web hosts do not allow you to edit the .htaccess file–but even on most of those hosts, you can create your own .htaccess file and upload it to specific directories, and as discussed above, it will control those directories and subdirectories below it. Now lets see the features and usage of it clearly by following the tutorial.

More on htaccess

In this tutorial you will find out about the .htaccess file and the power it has to improve your website. HostMonster supports .htaccess files however as a customer you are responsible for what is in this file and how it changes your site.

  • Creating a .htaccess File
  • Alternative Index Files
  • Custom Error Pages
  • Stop a Directory Index From Being Shown
  • Deny/Allow Certain IP Addresses
  • Redirection
  • Password Protection


Creating a .htaccess File

You can create a .htaccess file on your local computer or on the server.

On your computer:

Windows: Using Notepad save the file as .htaccess

Mac OS X:¬†Using TextEdit save the file as “.htaccess”
Note: If you save the file as .htaccess it will be hidden and you will not be able to see it in the Finder.Using your preferred FTP client upload the file to the server. The .htaccess file will need to be in the folder where your site is located, typically the public_html folder.

On the server

  1. Login to your cPanel Account
  2. Click the File Manager icon, located in the Files section.
  3. From the File Manger popup choose¬†“Choose Hidden Files (dotfiles).”
    Note:¬†If you do not see this popup you will need to click the¬†“reset all interface settings”¬†link at the bottom of the cPanel page.
  4. From the File Manager popup choose the folder you would like to open, most often the¬†“Web Root (public_html/www)”
  5. Click the Go button.
    Note: If you are in the File Manager already you can add &showhidden=1 to the end of the URL.
  6. Click the New File icon to create a new file and name it .htaccess

Alternative Index Files

You may not always want to use index.htm or index.html as your index file for a directory, for example if you are using PHP files in your site, you may want index.php to be the index file for a directory. You are not limited to ‘index’ files though. Using .htaccess you can set foofoo.blah to be your index file if you want to!

Alternate index files are entered in a list. The server will work from left to right, checking to see if each file exists, if none of them exist it will display a directory listing (unless, of course, you have turned this off).


DirectoryIndex index.php index.php3 index.html index.htm


Custom Error Pages

You can customize your own, personal error pages (for example when a file is not found) instead of using HostMonster’s error pages or not having an error page. This will make your site seem much more professional.

You can use custom error pages for any error as long as you know its number (like 404 for page not found) by adding the following to your .htaccess file:

ErrorDocument errornumber /file.html

For example if I had the file notfound.html in the root directory of my site and I wanted to use it for a 404 error I would use:

ErrorDocument 404 /notfound.html

If the error page is not in the root directory of your site, you can enter the path to the file:

ErrorDocument 500 /errorpages/500.html

These are some of the most common errors:

        401 - Authorization Required
        400 - Bad request
        403 - Forbidden
        500 - Internal Server Error
        404 - Wrong page

Stop a Directory Index From Being Shown

Sometimes, for one reason or another, you will have no index file in your directory. This will, of course, mean that if someone types the directory name into their browser, a full listing of all the files in that directory will be shown. This could be a security risk for your site.

To prevent against this (without creating lots of new ‘index’ files, you can enter a command into your .htaccess file to stop the directory list from being shown:

# disable directory browsing
        Options ExecCGI Includes IncludesNOEXEC SymLinksIfOwnerMatch -Indexes
        # enable directory browsing
        Options All +Indexes

Deny/Allow Certain IP Addresses

To only allow people with specific IP addresses to access your site (for example, only allowing people using a particular network to get into a certain directory) or you may want to ban certain IP addresses (for example, keeping disruptive members out of your message boards).This will only work if you know the IP addresses you would like to ban.

Please keep in mind that most ISP’s use dynamic IP addresses, so this is not always the best way to limit/grant access.


Block an IP Address

#Deny List
        order allow,deny
        deny from #specify a specific address
        deny from #specify a subnet range
        deny from 123.123.* #specify an IP address wildcard
        allow from all

Allow an IP address

#Allow List
        order allow,deny
        allow from #specify a specific address
        allow from #specify a subnet range
        allow from 123.123.* #specify an IP address wildcard
        deny from all

Note: This will still allow scripts to use the files in the directory.


There is a tool in the cPanel that can create the Redirects for you, please see How to create a Redirect

Redirect from a specific file to a new file


Redirect /redirect_from.html

In the above example, a file in the root directory called redirect_example.html is redirected to the URL
If the old file were in a subdirectory then you could use:


WildCard Redirect / Redirecting from one folder to a new folder

Redirect /redirect_from

Now any request to your site below /olddirectory will be redirected to the new site, with the extra information in the URL added on, for example if someone typed in:

They would be redirected to:

Redirecting (URL Rewriting) with Joomla

To enable URL Rewriting in Joomla you will need to copy and paste the following code into your .htaccess file.

        # For security reasons, Option followsymlinks cannot be overridden.
        #Options +FollowSymLinks
        Options +SymLinksIfOwnerMatch

Password Protection

One of the many uses of the .htaccess is being able to reliably password protect directories on websites.
Note: If you would like to use the cPanel tool to password protect your folders please see our article: Password Protect a folder on your website

The .htaccess File

Adding password protection to a directory using .htaccess takes two stages. The first part is to add the appropriate lines to your .htaccess file in the directory you would like to protect. Everything below this directory will be password protected:

AuthName "Section Name"
        AuthType Basic
        AuthUserFile /home/username/.htpasswds
        Require valid-user 

There are a few parts of this which you will need to change for your site. You should replace “Section Name” with the name of the part of the site you are protecting e.g. “Members Area”.

The /home/username/.htpasswds should be changed to reflect the full server path to the .htpasswds file (more on this later). If you do not know what the full path to your webspace is, check your HostMonster cPanel. Look on the left “stats” column of the cPanel.

The .htpasswds File

Password protecting a directory takes a little more work than any of the other .htaccess functions because you must also create a file to contain the usernames and passwords which are allowed to access the site. These should be placed in a file which (by default) should be called .htpasswd. This can be placed anywhere within you website (as the passwords are encrypted) but it is advisable to store it outside the web root (in your home directory) so that it is impossible to access it from the web.

Entering Usernames And Passwords

Once you have created your .htpasswd file (you can do this in a standard text editor) you must enter the usernames and passwords to access the site. They should be entered as follows:


Where the password is the encrypted format of the password. There is a good username/password service at the KxS site which will allow you to enter the username and password and will output it in the correct format.

For multiple users, just add extra lines to your .htpasswd file in the same format as the first.

Accessing The Site

When you try to access a site which has been protected by .htaccess your browser will pop up a standard username/password dialog box. Alternatively you can send the username and password (unencrypted) in the URL as follows: 


Basic example on RESTful webservices in php

Hope you are aware on basics of RESTful webservices in php..if not pls clickhere

Lets start up with a basic example on RESTful services. I would like to thank YRRHELP in youtube for providing best example on this..

First let me explain a basic difference between website and webservices. I too have the same doubt before i review YRR tutorial..he explained in detail..let me start with that..

Difference between Website & Webservices:

Website will be requested by humans and response will show in HTML

Webservices: In most of the cases, request will be done by programs and response will be generated in XML or Json

This webservices is widely used to communicate between heterogeneous system and platform like PHP,Windows and anyother platforms can communicate to java/android.


Lets start up with a basic example like, if you call up for a book(C/Java) in an URL should display its price in JSON format.

02-04-2014 19-50-59

From the above pic you can notice that if i type “”C” it should display its price..similarly if i type “java” it should display java book price..

Here everything is coded in program and if you type some parameter it will display that desired result. This how webservices works..replace book name with city name and price with temperature will display the temperature of the city. This is the best real world example which i can explain.

Now lets peek into the code.. ūüėČ

1. create a folder in wamp server with name rest

2. create a index.php file

3. create a functions.php file

4. create a htaccess file

Now just copy the code from below..then save and run ūüôā



// process client request via URL
$price = get_price($name);
deliver_response(200,”book not found”,NULL);
deliver_response(200,”book found”,$price);
deliver_response(400,”Invalid request”,NULL);

function deliver_response($status,$status_message,$data)
header(“HTTP/1.1 $status $status_message”);
$json_response = json_encode($response);
echo $json_response;



function get_price($find)
$books = array(“java”=>299,”c”=>348,”php”=>267);

foreach($books as $book=>$price)
if($book == $find)
return $price;



options +FollowSymlinks
RewriteEngine On

RewriteRule ^([a-zA-Z-]*)$ index.php?name=$1 [nc,qsa]

I hope by this time your brain is running with a doubt where comes this htaccess to live?? good question..let me explain with an image..

It will be very difficult to call up with parameters like below…

02-04-2014 19-50-59

Hence by using htaccess we can do like below..

02-04-2014 19-59-17


clickhere to know more about htaccess


What are webservices

In simple words, webservices will establish a good mode of communication with other servers. Lets say like this, we have temperature widgets everywhere(android,ios,windows etc etc). Now you want to display temperature in your widgets..will you code everywhere to show the temperature? its a very bad idea..instead you can easily call up some webservices through api’s where your api will contact to yahoo temperature server and display temperature. Here yahoo server will have a kind of method in public where receives parameters from different clients and then process and send back responses to the websites through webservices. This is how webservices will work..the same procedure will follow for cricket score updates, currency updates etc etc. Hope this is clear to get an basic idea of webservices..

web service is a method of communication that allows two software systems to exchange this data over the internet. The software system that requests data is called a service requester, whereas the software system that would process the request and provide the data is called a service provider.

Different software might be built using different programming languages, and hence there is a need for a method of data exchange that doesn’t depend upon a particular programming language. Most types of software can, however, interpret XML tags. Thus web services can use XML files for data exchange.

Rules for communication between different systems need to be defined, such as:

  • How one system can request data from another system
  • Which specific parameters are needed in the data request
  • What would be the structure of the data produced. Normally, data is exchanged in XML files, and the structure of the XML file is validated by an .xsd file.
  • What error messages to display when a certain rule for communication is not observed, to make¬†troubleshooting¬†easier

All of these rules for communication are defined in a file called WSDL (Web Services Description Language), which has the extension .wsdl.

Web services architecture: the service provider sends a WSDL file to UDDI. The service requester contacts UDDI to find out who is the provider for the data it needs, and then it contacts the service provider using the SOAP protocol. The service provider validates the service request and sends structured data in an XML file, using the SOAP protocol. This XML file would be validated again by the service requester using an XSD file.

A directory called UDDI (Universal Description, Discovery and Integration) defines which software system should be contacted for which type of data. So when one software system needs one particular report/data, it would go to the UDDI and find out which other system it can contact for receiving that data. Once the software system finds out which other system it should contact, it would then contact that system using a special protocol called SOAP (Simple Object Access Protocol). The service provider system would first of all validate the data request by referring to the WSDL file, and then process the request and send the data under the SOAP protocol.

Show results while script is still executing


Would you like to see results while script still executing..??

good..try the below code..i tested this and its working perfect..finally understood output buffering a bit ūüėČ


if (ob_get_level() == 0) ob_start();

for ($i = 0; $i<10; $i++){

echo “<br> Line to show.”;

//echo str_pad(”,4096).”\n”;



echo “Done.”;



How to find execution time in php


For every project we will check performance of execution..In order to check performance first and foremost thing we do is..checking execution time..right?

Now lets see how can we write a script to check execution time..

Basically we will use microtime() function to calculate execution time..

At starting of execution we will call microtime() and ending of script also we will call microtime()..Now we will calculate endtime-starttime to get execution time..for more clickhere


$time_start = microtime(true);

// Sleep for a while


//your code here

$time_end = microtime(true);



* Simple function to replicate PHP 5 behaviour
function microtime_float()
return ((float)$usec + (float)$sec);

$time_start = microtime_float();

// Sleep for a while
usleep(100);        (or)  //your code here

$time_end = microtime_float();


with this you can display execution time in seconds..if you want to display in mins..just add “$min = $time/60;” and echo $min.

Thats are done with your code now ūüėÄ