Create CSS3 Gradients

What is Gradients
Gradient is a smooth transition from one color to another. Its a color technique where one color gradually fades into another color. Several color combinations can be applied to a single element. In most of the popular sites logos, menus, buttons are created just by using color variations in subtle, very creative way. Gradient enhance the look of a web page and makes the web page look more richer. In older versions of browsers gradient was produced by using images given in a fallback attribute. But now gradient are supported by almost all the latest version of browsers and you can create gradient using CSS3 in your own style. 


Types of Gradient:

• Linear Gradient
• Radial Gradient

Linear Gradient
The most common type of gradient you will see is a linear gradient of two colors or multiple colors. This means that the gradient will move in a straight line changing gradually from the first color to the second along that line. 
Linear Gradient looks like:

Syntax to define Linear gradient
      linear-gradient(pos, #AAA B, #XXX Y);
Where:
pos = the position of  first colour, giving direction to the gradient
#AAA = primary colour
B = where the fade begins (%)
#XXX = secondary colour
Y = where the fade begins (%)
Position can be projected in following ways

• Horizontal
• vertical
• Upper side diagonal
• Lower side diagonal

Setting Horizontal Gradient:

linear-gradient(left, # F4305E  0%, # F4305E  100%);

In above example transition of color(fading) will start from left side to right side horizontally.

linear-gradient(right, #F4305E 0%, #EFACBD 100%);

In above example transition of color will start from lright side to left side horizontally. 

Now to set it as the background of a DIV you have to write

div {

background: linear-gradient(left, #F4305E  0%, #EFACBD 100%)

}

Div with above gradient applied will look as shown in below image:

Browser Specific syntax for CSS3 gradient:
To make your gradient to work cross-browser, you need to use browser specific syntax for most browsers and filter for Internet Explorer 9 and lower (actually 2 filters). 


For Internet Explorer
IE 5.5–7 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F4305E ', endColorstr='# EFACBD ', GradientType=1);

 IE 8–9 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F4305E', endColorstr='# EFACBD  ', GradientType=1)";

 IE 10 +
-ms-linear-gradient(left, # F4305E  0%, # EFACBD   100%);


For Mozilla: -moz- prefix is added
-moz-linear-gradient(left, #F4305E 0%, #EFACBD 100%);


For Chrome/ Safari: -webkit- prefix is added
-webkit-linear-gradient(left, #F4305E 0%, #EFACBD 100%);


For Opera 11.1+ : -o- prefix is added
-0-linear-gradient(left, #F4305E 0%, #EFACBD 100%);


Setting Vertical Gradient:
To give vertical gradient pos parameter in syntax mentioned above will take value top if we want to have color transition from top end or to have color transition from bottom end, pos will take value bottom
Example
For Fire fox:

background: -moz-linear-gradient(top,  #66dd04 0%, #84bc56 49%, #c5e0af 100%);

For Chrome 10+, Safari 5.1+:

background: -webkit-linear-gradient(top,  #66dd04 0%,#84bc56 49%,#c5e0af 100%);

For Opera 11.10+

background: -o-linear-gradient(top,  #66dd04 0%,#84bc56 49%,#c5e0af 100%); 

For IE 10+:

background: -ms-linear-gradient(top,  #66dd04 0%,#84bc56 49%,#c5e0af 100%); 

For IE-9

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66dd04', endColorstr='#c5e0af',GradientType=0 );

In above example I have used three colors to make gradient. We can use any number of color and can set their fading %  accordingly.
So the gradient made above will look like:

Setting Diagonally Gradient:


Up side Diagonal
To give up side diagonal gradient pos parameter in syntax mentioned above will take value 45deg 

For Fire fox:

background: -moz-linear-gradient(45deg,  #66dd04 0%, #84bc56 49%, #c5e0af 100%);

For Chrome 10+, Safari 5.1+:

background: -webkit-linear-gradient(45deg, #66dd04 0%,#84bc56 49%,#c5e0af 100%);

For Opera 11.10+:

background: -o-linear-gradient(45deg,  #66dd04 0%,#84bc56 49%,#c5e0af 100%); 

For IE 10+:

background: -ms-linear-gradient(45deg,  #66dd04 0%,#84bc56 49%,#c5e0af 100%); 

Upside diagonal Gradient looks like:

Down side Diagonal Gradient
To give upside diagonal gradient pos parameter in syntax mentioned above will take value -45deg 


For Fire fox:
background: -moz-linear-gradient(-45deg,  #66dd04 0%, #84bc56 49%, #c5e0af 100%);

For Chrome 10+, Safari 5.1+:

background: -webkit-linear-gradient(-45deg, #66dd04 0%,#84bc56 49%,#c5e0af 100%);

For Opera 11.10+:

background: -o-linear-gradient(-45deg,  #66dd04 0%,#84bc56 49%,#c5e0af 100%); 

For IE 10+:

background: -ms-linear-gradient(-45deg,  #66dd04 0%,#84bc56 49%,#c5e0af 100%); 

Down side diagonal Gradient looks like:

Radial gradients:

In Radial Gradient  color will start fading from center to outward direction.

Syntax to define radial Gradient:

For Fire fox:
background: -moz-radial-gradient(center, ellipse cover,  #66dd04 0%, #84bc56 49%, #c5e0af 100%);

For Chrome 10+, Safari 5.1+:

background: -webkit- radial -gradient(center, ellipse cover , #66dd04 0%,#84bc56 49%,#c5e0af 100%);

For Opera 11.10+

background: -o- radial -gradient( center, ellipse cover ,  #66dd04 0%,#84bc56 49%,#c5e0af 100%); 

For IE 10+:

background: -ms- radial -gradient( center, ellipse cover ,  #66dd04 0%,#84bc56 49%,#c5e0af 100%); 


Radial Gradient looks like:

This was all about to create gradient. You can add more beauty to gradient applied on any element by adding gradient effects on mouse hover and on mouse out.

Best Practices to Enhance Performance of Website

Performance of a website can be visualized in two ways:

• Server Performance
• Perceived Performance

Server Performance is concerned with the number of request a server can handle at a time and time taken to process request

Perceived Performance is concerned with speed of website from visitor(end user) perspective. Even if the server performance is high , site might appear slow to visitor because of poor client side performance and due to this visitor can distract away from your website. 

There are several areas in which performance can be improved. But as front end is most commonly accessible part of website by visitor so client side performance matters a lot. Thus for the user, it is the speed of Web page delivery that indicates the performance level, not how fast the application is executed on the server. In this blog I will throw light on ways to enhance client side performance of website.

Minimize HTTP Requests

Yahoo did experiments on improving performance of website and concluded that popular sites spend 5%-38% time downloading HTML document, remaining 65%-95% time is spend in making HTTP request to get the components(Images, Stylesheets, Scripts, Flash and more...) used in HTML web page. More component used, more will be the HTTP request, But in rich UI web pages, components used are more but you have several ways to minimize HTTP request while also maintaining rich UI design web pages.

Combining Script / Style sheet files into single file :

By combining all scripts file into a single script file, and similarly combining all CSS into a single style sheet you can reduce number of HTTP request.

CSS Sprites: 

You can reduce number of image requests and even over all size of image by combining all images into a single image(sprites) and can use background-image and background-position properties to display the desired image part. Creating sprites is hard, requires arcane knowledge and lots of hit and trial efforts. But no worries there are web services like SpriteMe available which can help you in creating sprites.

Image Map:

Image Maps are used to combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests speeds up the page. Image maps only work if the images are contiguous in the page, such as a navigation bar. Defining the coordinates of image maps can be hard and error prone. So this is rarely used technique.

Use Content Delivery Network

Most of the end user time is spend in loading component of web page like image, script, style sheet, flash etc. So to reduce loading time, it is possible to disperse contents. This can be achieved by CDN. CDN is a group of servers around the world, optimized for fast delivery of static files and positioned to be as close as possible to your site's visitors.

 Advantage of using CDN 

• CDN servers are faster and closer to your visitors. 
• They're also usually on another host like cdn.example.com for your site. This means your browser will open 5 requests to example.com and  5 requests to cdn.example.com at the same time. Allowing it to load even more at the same time. 

Some large Internet companies own their own CDN, but it's cost-effective to use a CDN service provider, such as  Akamai Technoligies , Edge Cast, Level 3 etc. For small companies and private web sites, the cost of a CDN service can be prohibitive, but if the target marget is large and global then CDN is necessary to achieve fast response times of website. 

Caching:

Web servers and browsers use a tool called a cache to help pages load more quickly. When browser cache is unable, the first time you load a web page, it is loaded straight from the server, but if later during the same session if you make request for the same page, then it is loaded from browser cache instead of making HTTP request for the same page. This loads the page quickly and reduces strain on server cache can be controlled by the user  at browser level and the Web developer at server level.

Three Ways to control Server Cache

• Via <meta> tags (<meta http-equiv="Expires"...>)
• Programmatically by setting HTTP headers (CGI scripts etc.)
• Through web server configuration files (httpd.conf)

Use HTTP Compression

Time taken to transfer HTTP request and response across depends on network bandwidth and network traffic. End user bandwidth and internet service provide are beyond control for development team. But still this response time can by reduced by compressing HTTP response.

 HTTP/1.1 web clients indicate support for compression with the Accept-Encoding header in the HTTP request.

      Accept-Encoding: gzip, deflate

If the web server sees this header in the request, it may compress the response using one of the methods listed by the client. The web server notifies the web client of this via the Content-Encoding header in the response.


 Content-Encoding: gzip

Gzipping reduces the response size by about 70%. In Apache, the module configuring gzip depends on  version: Apache 1.3 uses mod_gzip while Apache 2.x uses mod_deflate. There are known issues with browsers and proxies that may cause a mismatch in what the browser expects and what it receives with regard to compressed content.  But Apache modules help out by adding appropriate Vary response headers automatically.

Reduce DNS Lookups

The Domain Name System (DNS) maps hostnames to IP addresses. When you type in your domain name into your browser, a DNS resolver contacts the browser to return with the servers IP. Usually the browser takes some time to complete this process.  The browser can't download anything from this hostname until the DNS lookup is completed. Reducing the number of unique hostnames has the potential to reduce the amount of parallel downloading that takes place in the page. Avoiding DNS lookups reduces the response times.

Reduce  redirects

Ways to redirect user to different URL

• Server ways (301 and 302)

      HTTP/1.1 301 Moved Permanently
      Location: http://example.com/newuri
      Content-Type: text/html

• Meta refresh tag and Java scipt 

        <meta http-equiv="refresh" content="5; url=http://example.com/">

    

        <script type="text/javascript">

        window.location="http://www.google.com"

        </script>

Redirect is done to connect the old web page to a new URL. But reducing this to a minimum is the best practice to increase the performance of a web page.Redirects slow down the users experience because inserting a redirect between the user and the HTML document delays everything in the page since nothing in the page can be rendered and no components can start being downloaded until the HTML document has arrived.

One of the most wasteful redirects happens frequently and web developers are generally not aware of it. It occurs when a trailing slash (/) is missing from a URL that should otherwise have one. For example, going to http://example.com/documents results in a 301 response containing a redirect to http://example.com/documents/ (notice the added trailing slash). This is fixed in Apache by usingAlias or mod_rewrite, or the DirectorySlash directive if you're using Apache handlers.

Reduce the Number of DOM Elements

Less DOM elements means better page performance. It means better javascript performance, especially in older browsers.

Example: 

Use

<ui id="navigation">

//code goes here

</ui>

Instead of

<div id="navigation">

<ui>

//code goes here

</ui>

</div>

Use additional element only when required

Place Style sheet in Header

Style sheets to the document HEAD makes pages appear to be loading faster  because putting stylesheets in the HEAD allows the page to render progressively. This is especially important for pages with a lot of content and for users on slower Internet connections. The HTML specification clearly states that style sheets are to be included in the HEAD of the page, A, [LINK] may only appear in the HEAD section of a document.

Place Scripts at the Bottom

Scripts causes progressive rendering to stop for all content below the script until it is fully loaded. Moreover, while downloading a script, browser does not start any other component downloads, even on different hostnames. 

In some situations it's not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. 

Alternative solution is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering.  If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.

Avoid CSS Expressions:

CSS Expression have become deprecated since IE8. 

Example of CSS Expression 

 The background color could be set to alternate every hour in below CSS expression

 background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF":"#F08A00" );

In above example , the expression method accepts JavaScript expression. CSS property is set to the result of evaluating the JavaScript expression. The expression method is ignored by other browsers, so it is useful for setting properties in Internet Explorer needed to create a consistent experience across browsers.

One way to reduce the number of times your CSS expression is evaluated is to use one-time expressions, where the first time the expression is evaluated it sets the style property to an explicit value, which replaces the CSS expression. If the style property must be set dynamically throughout the life of the page, using event handlers instead of CSS expressions is an alternative approach. If you must use CSS expressions, remember that they may be evaluated thousands of times and could affect the performance of your page.

Simplify tables and avoid nested tables

If more tables /layout are nested,longer it will take for the Web browser to render the Web page.

Minify Javascipt and CSS

Minification is the practice of removing unnecessary characters from code to reduce its size, thus improving load times. When JS/CSS code is minified all comments are usually removed, as well as unneeded "white space" characters like space, new line, and tab. Various online tools are available to minify js ans css files.

Optimize Images

Optimizing images reduces the size of image without doing any harm to image quality. Optimized image takes less time to load on a web page. Various online tools are available to optimize images. One of them mostly used is Yahoo Smush.it


Make Ajax Cacheable

PHP Life Span

This blog talks about the  life span of a PHP script i.e. the internal execution of a PHP script. Before working on PHP, I worked on Java and there I learned about the life cycle of Servlet and Struts. So one day, thought arised in my mind regarding the internal execution of a PHP script.  Its good know in depth about the language on which we works, this is what I feel. I explored, read about Zend Module structure, PHP internals, and extension and finally I came to know about the life span of PHP. So here goes the Life cycle of PHP.

 Brief Overview :

• We never start any PHP daemon or anything to run PHP script. When we start Apache, it starts the PHP interpreter along itself
• PHP is linked to Apache (SAPI i.e. a Server API) using mod_php5.so module
• PHP as a complete consists of 3 modules (PHP Core, Zend Engine and Extensions)

• PHP Core : Handles the requests, file streams, error handling and other such operations 
• Zend Engine(ZE) : Converts human readable code into machine understandable tokens(op-codes). Then it executes this generate code into a Virtual Machine
• Extensions : Bunch of functions, classes, streams made available to the PHP scripts, which can be used to perform certain tasks. For example, we need mysql extension (php_mysql) to connect to MySQL database using PHP
• While Zend Engine executes the generated code, the script might require access to a few extensions. Then ZE passes the control to the extension module/layer which transfer back the control to ZE after completion of tasks
• Finally Zend Engine returns back the result to PHP Core, which gives that to SAPI layer, and finally which displays it on your browser  

Life Span of PHP in depth:

Above was brief overview on PHP life span. Now let us understand life span of PHP script in depth. 
As I wrote that when we start Apache Server, it also starts PHP interpreter along itself . Now the PHP start up takes in 2 steps:

• 1st step is to perform initial setup of structures and values that persists for the life of SAPI
• 2nd step is for transient settings that only last for a single page request

First Step of PHP start up:

This step takes place even before any page request is being made.

• As we start Apache, it starts PHP interpreter 
• PHP calls MINIT method of each extension, which is being enabled. In php.ini file we can see the modules which are being enabled by default. MINIT refers to Module Initialization. Each Module Initialization method initializes and define a set of functions, classes which will be used by future page requests

            PHP_MINIT_FUNCTION(extension_name) {

               /* Initialize functions, classes etc */
             }

Second Step of PHP start up:

• When a page request is being made, SAPI layer gives control to PHP layer. PHP then set up an environment to execute the PHP page requested. In turn it also create a symbol table which stores various variables being used while executing this page
• PHP then calls the RINIT method of each module. RINIT refers to Request Initialization Module. Example of RINIT module implementation is the Session’s module. If enabled in php.ini, the RINIT method of Sessions module will pre-populate the $_SESSION variable and save in the symbol table

       PHP_RINIT_FUNCTION(extension_name) {

          /* Initialize session variables, pre-populate variables, redefine global variables etc */

       }

First Step of PHP shutdown:
 

Like PHP start up, shut down process also happens in 2 steps.

• After the page execution is complete, PHP starts the cleanup process. In turn it calls RSHUTDOWN method of every extension.
• RSHUTDOWN method, destroys the symbol table (memory management) by calling unset( ) on all variables maintained  in the symbol table

      PHP_RSHUTDOWN_FUNCTION(extension_name) {

          /* Do memory management, unset all variables used in the last PHP call etc */

      }

Second Step of PHP shut down:

• PHP calls the MSHUTDOWN method of every extension, which is basically the last chance for every extension to unregister handlers and free any persistent memory allocated during the MINIT cycle

      PHP_MSHUTDOWN_FUNCTION(extension_name) {

          /* Free handlers and persistent memory etc */

      }

This was all about the Life span of PHP.


 Main References:
http://php.net/
http://www.laruence.com/