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..

https://www.phase2technology.com/blog/your-frontend-methodology-is-all-of-them-atomic-design-patternlab/

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

Now go through the demo..

http://demo.patternlab.io/

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

Good day Enjoy ūüôā

Advertisements

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.

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

// begin custom shape
context.beginPath();
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.closePath();
context.lineWidth = 5;
context.strokeStyle = ‘blue’;
context.stroke();
</script>
</body>

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.beginPath();
context.rect(88, 100, 400, 200); // x,y,width,height
context.fillStyle = ‘yellow’;
context.fill();
context.lineWidth = 7;
context.strokeStyle = ‘black’;
context.stroke();

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.

img_arc

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.fill();
context.lineWidth = 5;
context.strokeStyle = ‘#003300’;
context.stroke();

ColorFill:

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.fill();
context.strokeStyle = ‘blue’;
context.stroke();

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>
<script>
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;
context.fill();
</script>

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;
context.fill();

23-06-2014 15-20-18

Pattern:

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>
<script>
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;
context.fill();
};
imageObj.src = ‘http://www.html5canvastutorials.com/demos/assets/wood-pattern.png&#8217;;
</script>

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)

Eg:

<canvas id=”myCanvas” width=”578″ height=”400″></canvas>
<script>
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 = ‘http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg&#8217;;
</script>

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>
<script>
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 = ‘http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg&#8217;;
</script>

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.

html5-canvas-image-crop-diagram

<body>
<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
<script>
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 = ‘http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg&#8217;;
</script>
</body>

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 messagebrd.pl 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 123.123.123.123 #specify a specific address
        deny from 123.123.123.123/30 #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 123.123.123.123 #specify a specific address
        allow from 123.123.123.123/30 #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.

Redirection

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

Example:

Redirect /redirect_from.html http://www.newsite.com/folder/redirect_to.html

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

/subdirectory/redirect_from.html

WildCard Redirect / Redirecting from one folder to a new folder

Redirect /redirect_from http://www.newsite.com/redirect_to

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:

http://www.example.com/redirect_from/images/image.gif

They would be redirected to:

http://www.newsite.com/redirect_to/images/image.gif

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:

username:password

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:

        http://username:password@www.website.com/directory/ 

Soruce: https://my.hostmonster.com/cgi/help/htaccess