Welcome Text

Wednesday, 3 July 2013

Still we are learning and implementing CSS3.In the mean time a new CSS version CSS4 come into the picture.Now this is in a conceptual stage. And in the near future it can make web developer's life easy.Today I will tell about some beautiful feature of CSS4.

1. THE “PARENT” SELECTOR

Now for selecting parent of an element we need to use javascript or query or other languages. But now we can do that using CSS.$ul li: hover { background-color: #fff;}Using the above, when hovering a list element, the whole unordered list will be somehow highlighted by adding a white background to it.This property is very much helpful in case of fieldset element. Because in User input from we can change the color of the input row according to the mouse position.

2. Matches-Any pseudo-class

The : matches () CSS4 selector is the standardized version of Mozilla’s : -moz-any () pseudo class. This matches can group many elements to gather and implement the OOPs concept in CSS.The syntax is like below.: matches (section, nav, article, aside) h2 { font-size: 14px;}Using this CSS the all h2 elements under section, nav, article and aside tag become font-size 14px.This tag makes CSS file small and compact.

3.Location Pseudo-Classes - :any-link and :local-link

These pseudo-classes will be used for location-based elements. The :any-link pseudo-class is used for general links, while :local-link is used to identify links targeted within the same host (as opposed to external href's).So if we like to style the link element according to their redirect position then this tag is the only choice for us.#nav a:local-link {color:blue;}#nav a:local-link {color:red;}Using this style element all the link which redirect to different domain become red color and the link's which stay in the same domain become blue.

4.Linguistic Pseudo-Class - :dir

:dir Pseudo-Class idenfy left-to-right and right-to-left text display and you can give your custom style according to that.the CSS like belowdiv: dir (ltr) {font-size: 12px;} div: dir (rtl) {font-size: 14px;}Using this CSS all languages which are left-to-right(like English,Spanish,German) becomes font size 12px and the languages which are right-to-left(like Arabic) become font size 14px.5.Other Usefull pseudo-classes of CSS4:valid / :invalid:default:enabled / :disabled:checked:indeterminate:in-range / :out-of-range:required / :optional:read-only / :write-onlyThose above classes are self-explanatory.Still I write a small description about those.:valid / :invalid - it will check an input it valid or not.And style the element according to that.:enabled / :disabled - Style element according to their state.If they enable then its design according to the :enable style or it will design as :disabled.:checked - it will style the element when a checkbox or radio button is checked.:indeterminate - it's a special state of the element.Like there is a progress bar.And I did not did not get the grogress information about that element.Then that state is called as indeterminate.And it will design using :indeterminate in CSS4.:in-range / :out-of-range - if I restrict user to input data between a range then we can style the element as :in-range and :out-of-range to show different style betwwen valid and invalid input.:required / :optional - this style differentiat between mandatory and optional data.:read-only / :write-only - this can give different style to read-only field and read-write field.

6.New Properties for Borders

Some new properties for borders are introduced in CSS4. The most obvious one is a border-corner-shape, which allows values curve | bevel | scoop | notch. In addition, there are updates on border-images.

7.New cursor values

CSS4 define three new cursor values.They are - a) auto-hide - being added to WebKit as -webkit-auto-hide.b) grab - supported by Mozilla as -moz-grabc) grabbing - supported by Mozilla as -moz-grabbing

8.Touch-action

The touch-action CSS property determines whether touch input may trigger default behavior supplied by the user agent. This includes, but is not limited to, behaviors such as panning or zooming.When a user touches an element, that element's touch-action property determines the default touch behaviors permitted for that contact, like panning or zooming. The touch behavior is then performed on the nearest ancestor element that is capable of that behavior, unless an intermediate ancestor element specifies that the behavior is not permitted.Syntax :-ms-touch-action: auto | none | [ [ [ pan-x || pan-y || pinch-zoom ? ] | manipulation ] || double-tap-zoom ? ]for more details viewhttp://msdn.microsoft.com/en-us/library/windows/apps/hh767313.aspx

Friday, 15 February 2013

Web Storage is a new HTML5 API offering important benefits over traditional cookies. Although the specification is still in W3C draft status, already all major browsers support it.

This means you can start using the API’s sessionStorage and localStorage objects and enjoy their benefits.

Introduction

localStorage is a client-side key-value database, meaning it is stored in the users browser. This means the users data is saved on their machine inside their browser. This also means that their data is only available to them when on that machine and in that browser. Remember that localStorage is per browser not per computer.

The Limitations of Cookies

First, there were cookies. They have been a huge driving factor for the Web since the early days. In both a good and a bad way.

For example, cookies allow us to login automatically to sites we use frequently, such as Gmail and Facebook.

On the other hand, with cookies, our search and browsing history can be tracked andour privacy is a concern.

Another problem with cookies is that they have data-capacity limitations. The data storage limit of cookies in many web browsers is about 4 KB per cookie, based on a deprecated 1997 specification recommending a minimum of 4096 bytes per cookie.

Although most browsers allow 30 to 50 cookies, so if you exceed the 4 KB limit of one cookie you could create another one, this is still a real limitation.

This is why developers usually only store user and/or session identifiers in cookies, and then use server-side databases to store and get the rest of the user data.

Additionally, an often-overlooked side effect of cookies is that they are always sent with every HTTP request (usually even for images) resulting in more data being sent over the wire.

Web Storage and its Advantages

Web Storage picks up where cookies left off. The strength of Web Storage is in at least two things.

First, ease of use for web developers: It has a simple API to get and set key/value pairs (we will get more into this below).

Secondly, the amount of space it provides: the specs default the disk space quota decision to the user agent (i.e. the web browser developers) and most of them offer no less than 5 or 10 MB to be stored per domain. This means we can store more than just basic user/session info on the client-side: user preference settings, localization data, temporary offline storage for batching server writes and much more.

The data being stored can be accessed using JavaScript, which gives you the ability to leverage client-side scripting to do many things that have traditionally involved server-side programming and relational databases.

How to Check the browser support for local storage

if (Modernizr.localstorage) {

// window.localStorage is available!

} else {

// no native support for HTML5 storage :(

}

Browser version to Support localstorage

As you might expect with any HTML 5 specification older browsers versions and browser with Javascript turned off do not allow this method. The good news is that all modern browsers support it and will continue to do so. The following browsers support HTML 5 Web Storage:

Internet Explorer 8+

FireFox 3.5+

Chrome 4+

Safari 4+

Opera 10.5+

iOS 2+

Webkit 2+

localStorage and JSON

localStorage is a simple key/value pair database that allows you to store around 5MB of data per domain. Because it doesn't natively support the storage of JSON objects we will need to serialise our data to store it and deserialise it when we want to use it. Here's how we get and set our data in localStorage.

// Store

localStorage.setItem('key', JSON.stringify( value ));

// Fetch

value= JSON.parse( localStorage.getItem('key'));

Primary Methods of localStorage

localStorage.clear()

localStorage.getItem( key )

localStorage.removeItem( key )

localStorage.setItem( key, value )

Coding using HTML5localStorage

Now lets get into some code. Where localStorage differs from cookies or sessionStorage is that the data stored in localStorage is still there even after the browser is closed and is shared across multiple windows. You don’t have to worry about a user deleting the cookies and all their data. A quick note; because of my love for jQuery, I will be using jQuery when using localStorage. However, jQuery is not required to do any of this, I just like how clean it makes everything look. First lets see a simple example of using localStorage.

localStorage.removeItem("name"); //deletes the matching item from the database

Can’t get much easier then that. Line 1 saves a new entry in the local database with the key of ‘name’ and the value of ‘Amit!’. That pair is now stored in your browsers database. Line 2 gets the item from the database with the key of ‘name’. In this case would then return ‘Amit!’. In line 3 we remove the item from the database. Due to browser specific quotas you would want to check for exceptions so you would change line 1 above to the following.

localStorage.removeItem("name"); //deletes the matching item from the database

}

How to check local storage key-value using firebug tools

1.Press F12 or open your browser firebug.

2.Go to the DOM tab

3.scroll down to and expand localStorage

4.Expand the localStoragetab.Now you can see all the key-value saved in the localStorage.

5.right click item you wish to delete or edit and do whatever you want.

If your using Safari or Chrome then you have a much better option. You are able to view these databases directly in the developer tools. Opening the Developer Tools you will notice the last item is Databases, clicking this will show you all databases, localStorage and sessionStorage info.

Practical uses of localstorage

Now we know about the local storage. But the main question is where we’ll use this. The answer of this question is not universal and it depends upon the requirements and type of projects.I can give you some example where localstorage can be useful.

1. In multipage registration form you can store partial data in the localstorage. When user click on the submit button then you will take the value from localstorage and save it in database.

It will decrease the number of server call and unwanted entry in the database to make your application faster.

2. In shopping cart you can use local storage. You can store the shopping cart items in the localstorage first. When the user checkout the shopping cart then you will save the important data in the database. This will also decrease the number of server call and unwanted entry in the database to make your application faster.

3. In the previous article I’ve already discussed about the offline application in HTML5 and localstorage will play a key role in that aspect. When web application is offline we can store all the data in localstorage and when application becomes online we can store those data from localstorage to database.

Thanks for reading this blog.Hope you enjoy it.Follow this blog to get updated about design stuff.

Thursday, 24 January 2013

HTML5 Offline Website :

Today I am going to discuss about a magic of HTML5.Can you ever imagine that your website is running offline i.e without internet connection. You are thinking that I am joking with you. But now it's possible to make a website run offline using HTML5 application cache. If you can give 15 min to read this blog,then I assure you that you can create offline application.

The application cache is controlled by a plain text file called a manifest, which contains a list of resources to be stored for using when there is no network connection. The list can also define the conditions for caching, such as which pages should never be cached and even what to show the user when he follows a link to an uncached page.

If the user goes offline but has visited the
site while online, the cached resources will be loaded so the user can still
view the site in a limited form. By carefully considering the contents of your
manifest file, you can offer a suitable web experience to a disconnected user.

I don't like much more theory so let us come to the point and follow the step to create your first offline application.

Step - 1(Define the manifest file)

Define the manifest file in your page HTML
so the browser understand this website have a offline application cache file.

<!DOCTYPE HTML>

<HTML
manifest="/cache.manifest">

<body>

...

</body>

</HTML>

Step – 2 (Set content type)

Your cache manifest file can be located
anywhere on your web server, but it must be served with the content type
text/cache-manifest.

Then the question may arise how to define the content type.

For Apache-based web server, you can
probably just put an AddType directive in the .htaccess file at the root of
your web directory:

AddType text/cache-manifest .manifest

For IIS7 server you can define content type
using web.config file.

<?xml version="1.0"
encoding="UTF-8"?>

<configuration>

<system.webServer>

<staticContent>

<remove fileExtension=".manifest" />

<mimeMap
fileExtension=".manifest" mimeType="text/cache-manifest"/>

</staticContent>

</system.webServer>

</configuration>

From these two steps now your browser can know that you have an offline application cache and browser can access that file.

But nothing is stored yet.

Step - 3 (Creating a Manifest File)

The first line of every cache manifest file is:

CACHE MANIFEST

Let’s start with an example of a full
manifest file.I will discuss each of the part below.

CACHE MANIFEST

# This is a comment

CACHE:

/css/style.css

/js/jquery.js

/img/logo.png

http://abc.com/stylesheet.css

FALLBACK:

/ /offline.html

NETWORK:

*

So it have mainly 4 sections.

1.Comment section -

The comment section is
for write the version number of the manifest file. It's not only for your
reference but also it has a great impact. I will discuss that later.

2.CACHE Section -

The CACHE section is
considered the default — i.e., if no section heading has been defined, the
browser will assume this is the CACHE section. Beneath this heading, you can
list URIs to resources you want the browser to download and cache for offline
use, including URIs hosted externally.

Like

CACHE MANIFEST

/css/style.css

/js/jquery.js

/img/logo.png

http://abc.com/stylesheet.css

Every single resource that you want to cache
explicitly should be listed here, right down to the last image. The browser is
not aware of a resource unless you provide the full path to it. This means you
can’t use wildcards. If you list /images/* as a resource, the browser will
request that URI as if you typed it into your address bar.

But don’t run off and store URIs for every
single page on your site into your manifest. When a user visits a page that
points to the manifest file, that page will also be cached. This means that if
you want to allow users access to pages they’ve already viewed, just make those
pages point to the manifest file and the browser will cache them appropriately.

3.FALLBACK Section -

There is one more type
of section in a cache manifest file: a fallback section. In a fallback section,
you can define substitutions for online resources that, for whatever reason,
can’t be cached or weren’t cached successfully. The HTML5 specification offers
this clever example of using a fallback section:

CACHE MANIFEST

FALLBACK:

/ /offline.html

NETWORK:

*

Now look at the fallback section. The
fallback section in this cache manifest only has a single line. The first part
of the line (before the space) is not a URL. It’s really a URL pattern. The
single character (/) will match any page on your site, not just the home page.
When you try to visit a page while you’re offline, your browser will look for
it in the appcache. If your browser finds the page in the app-cache (because
you visited it while online, and the page was implicitly added to the app-cache
at that time), then your browser will display the cached copy of the page. If
your browser doesn’t find the page in the app-cache, instead of displaying an
error message, it will display the page /offline.html, as specified in the
second half of that line in the fallback section.

4.NETWORK Section -

Finally, we have the
NETWORK section, used to tell the browser explicitly which resources are only
available while online. By default, this uses the asterisk * symbol, meaning
all resources that are not cached will require a connection. Alternatively we
can whitelist specific url prefixes, like all the avatars if we wish.

CACHE MANIFEST

NETWORK:

*

You can explicitly define resources not to
cache by providing a list of URIs — essentially a whitelist of online-only
assets.

CACHE MANIFEST

NETWORK:

registration.php

payment.php

So now registration.php and payment.php page shown to the user only when they are online and those pages are never store in appcache.

Now your offline application is ready but I'll discuss some question and their respective answers to make this topic more clear.

1.What will happened if I add/remove/modify
one or more file names in the cache or other section of Manifest file ?

Answer: If we change any thing in the
Manifest file then the browser again remove all the files from cache and again
download all the files in appcache.

When we request for a page at first browser
check the Manifest file. If there is no change then it does nothing but if
there is any change then the browser again download all the files from server.

2.What will happened if I didn't change the
Manifest file but change the files which are mention in the Manifest file?

Answer: This is a very interesting question.
If we didn't change the Manifest file then browser doesn’t understand any
change and it will not fetch the file from server to render.

But as I change the file content so it's not reflecting my change in browser. To solve this problem concept of "Comment Section" has to be introduced.
In that section we mention a version number of Manifest file. So if we wanna change any pages which are listed in the Manifest file then we have to just change the version number.
So now when browser check the Manifest file it observes the change and load the content of the manifest file again from server. So our problem is solved. Change will reflect to the browser.. :)

3.What will happen if I write one of the file path wrongly in Manifest file or one of the resource fails to download properly?

Answer:
if even a single resource listed in your cache manifest file fails to
download properly, the entire process of caching your offline web application
will fail. Your browser will fire the error event, but there is no indication
of what the actual problem was. This can make debugging offline web
applications even more frustrating than usual.

4.Now the main question: which browsers are supporting HTML5 offline application feature?

Answer: The AppCache feature is supported by
almost all modern browsers, such as Firefox, Chrome and Safari. Unfortunately,
Internet Explorer 9 does not support this feature.

Thanks for reading this blog.Hope you enjoy it.Follow this blog to get updated about design stuff.

Wednesday, 16 January 2013

The most important thing of a website is it's load time. Because if a user click on a URL and it take too long time to render then the user get bored and close the site,it's happen with everyone. But we focus most of our time for functional and UI developments.
So our all efforts waste if user got bore by the loading time and didn't open out website.

Now I will discuss about some basic tips for making your website fast and it's very easy, just need some care when developing a website.

1.Minimise HTTP Requests :

About 70-80% of the end user response time is spent on HTTP Requests. So it's very much important to minimise http requests.
Each unique object in a web page requires a round trip to the server, that is, an HTTP request and a reply. So we need to remove all the unnecessary objects from the page for less http requests and make our site faster. Some other very easy way to minimise http request describe below :-

a)Combine CSS style –
if we have more than one css file included in the page then we need more than one http request to load the style element.So we can combine all the css style to a single external file then only one http request is needed to load the style element of the page.

b)Use Image map instead of separate image –
A web page contain lots of small and medium size images.So if we have total 20 images in our web-page then 20 http requests generate to load the images.But if we combine all the 20 images into a single image and use the image-position attribute to show the particular part of the image then only one http request need to load the all images.

c)Convert graphical text to styled text -
generally we used graphical text for header or menu item styles. But we use css text instead of graphical text it will be a good process to reduce http request.
And it's no need to say that remove all unnecessary and duplicate calls from your website.. :)

You can check HTTP request by using firebug.The picture is given below

2.Use Inline Image :

Often we keep all images in a folder and call specific image from the page every time when need. But we can use Inline Images for small and medium size images. It save time and make our site faster.
This is called 'Data URL'.

Data URLs use the following syntax:
data:[mimetype][;base64],[data]

Let we have a image and we want to embed that to HTML document. Then at first we need to convert that image to inline image. There are many online free tools for converting image to Inline image then use that inline image to the src tag of the image.
The image tag look like

In previous days one website run from one server and all it's content located from that same server. But now the expectation of the end user increase and we need more fast site. So now we need to distribute the files and load across multiple systems.
For cost reason it's not possible to use own CDN for start-up companies and private website. But the big companies like yahoo, google, facebook use their own CDN.
For the private and start-up companies, there are a number of free CDNs offered by Google, Microsoft, Yahoo and other large web organisations. For example, few people host their own videos when YouTube and Vimeo offer amazing free services. Similarly, if you require jQuery, you can load it on any page using:
you can get more details of CDN from
http://en.wikipedia.org/wiki/Content_delivery_network

4.Gzip Components :

The components of your web page came to the browser from the server through the http requests.
So bigger the file size it took longer time to download in browser. So if we Gzip all the server components then the size of the components reduce and it took less time to download and render in the browser.

After you've saved your .htaccess file, test your site again in GTmetrix.com to make sure it has been properly compressed and also analyze the performance of your website.

5.Put Stylesheets at the Top and jquery at bottom :

Always need to put style sheets at the top of the page before scripts and other html object elements.
Because in that case which part of the page render ,that render with proper alignment and style. That is very important specially for the slow internet user or the page with lot's of heavy components.
For jquery we need to add the bottom of the page. Because at first the user need to see the components of the page. So it's completely all right if the jquery effect come little bit late to the web-page.
But some exceptional case may happened when we add html elements using jquery or add some handler to page. I will discuss about these conditions later.
The structure of page should be

For faster response we need to use external javascript and css files. Because in that case only once the files are loaded and cached in the browser.
for other pages to be render we don't need to generate any http request to server for style or script elements.
Also it decrease the size of the html file so it look less time to download from server and render quickly in browser.
But it also have some exception.Like if my home page is very simple and not same with the other pages of my site. And the other pages contains lots of jquery,css effects.
Then if we use external css and jquery at the time of load the home page. Then it took very long time to render first time and we need to remember that more than 60% user click our site with no cache in browser.
So in that case if we use inline or page level css in home page and use post-load components to load the external files for other pages will be a good practise.
we can use a settimeout function in this case in the bottom document.ready function to load the external css and jquery for other pages. So our home page will render first and when the browser is idle then it call the server to load the external css and jquery.

8.Put defer attribute in script :

In HTML, the script element allows developer to include dynamic script in their documents. The defer attribute is Boolean attribute that indicates how the script should be executed. If the defer attribute is present, then the script is executed when the page has finished parsing.

So now we can define script any where in the page but with defer attribute we can ensure that the script will execute at the last.Is that not interesting?

9.Remove Duplicate Scripts :

It sound very funny that remove duplicate script. You may thing that way I add duplicate script in my page.
A review of the ten top U.S. web sites shows that two of them contain a duplicate script. I think the main reason behind it that if we add the script in page label then it may possible that we add the same script in the two separate page.
But when if your visit both of the page then he find one duplicate script because script is cache in the browser.
Another reason I can say if I add script in master page. But in any child page it didn't work properly then for quick fix may we add a script file to that page.
The solution of this problem includes all the script file in master page and no separate script file included in page label.

An alternative in PHP would be to create a function called insert Script.
<?php insertScript("menu.js") ?>

10.No 404(Element or Page not found) in the page :

If http request goes to the server for requesting some component and the element not present in that particular position then 404 error happened. It is totally unnecessary and will slow down the user experience without any benefit.
So we need to ensure that there no 404's in the page. We can check that using firebug in the browser.

11.Use GET Request in Ajax call :

We use ajax request from the page to get content load faster to the page. As ajax is asynchronous then it loads faster.
But POST is implemented in the browsers as a two-step process: sending the headers first, then sending data. So it's best to use GET, which only takes one TCP packet to send.
Again there are lot's of controversy like from GET have a fixed URL length and it less safe than post.
So we need to use the post in those exceptional condition where data size large or data is very sensitive .But for other cases we can use GET instead of POST request.

12.Splitting components and increase parallel downloads :

Splitting components allows you to maximise parallel downloads. Because in general from each domain we can download 2 resource parallels. So if we use 2 domain then we can download 4 resources parallels. So,it's increase the download speed of the resources and reduce the time of render website.
But we need to remember that adding domain increase the DNS time. So the most efficient to add 2-4 domains. If we add more than 4 domains then it will increase DNS time and makes the process of rendering slow.

So in this case we scale the image size 20x20 from the HTML image element. It's increase the render time of the web page.
The best practice is scale the actual image size to 20x20 and then use that image in web-page.

15.Make favicon.ico Small and Cacheable :

We request for favicon.ico image each and every time even if we don't find the actual page in the domain.. :)
Need to make the favicon.ico image small and importantly cache the image in the server. So that the image need not to be requested every time.

16.Split article into multiple pages :

If we have a very long article with lot's of images and jquery files. Then better to split that article in many pages with the next page link.
So it will reduce the render time for each page.

17.Avoid empty image tag :

This is a common problem of website. Many time we have html image tag with empty src tag.
This may occur for many reasons like:

In Html
<img src="" />

In Javascript
var img = new Image();
img.src = "";
If we planing to assign image source attribute from the server but it didn't assign correctly.
<img src="$imageUrl" >

So,It make unnecessary traffic to the server and slows down website dramatically.

HTTP Cookies are very important for website. We use cookies for authentication and personalisation. Information of cookies exchange in the header of http request. So it's very necessary to reduce the size of cookies.
For that we can follow following rules -
a)Eliminate unnecessary cookies.
b)Keep cookie sizes as low as possible to minimise the impact on the user response time.
c)Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner,
improving the user response time.
d)Setting cookies at the appropriate domain level so other sub-domains are not affected.

There are some more points which we need to remember when creating or hosting websites. Those are -

19.Cache the ajax.

20.Reduce number of DOM elements if possible.

21.Use Cookie free domain for the components to be hosted.

22.For adding style sheet use over @import.

23.Optimise Images for getting a faster response.

After follow those steps you can measure the performance of your websites using various free online tools.