I am remembering, It was around 1:00 PM of this 16th. I was surfing internet to find solution to the problem I was facing, but suddenly my focus switched to the topic of Client Side Storage. So, Finally I got this interesting topic to share with you. I did little bit research work over it to collect the basic things. I have also prepared demonstration for it

As you may know, web is getting more and more dynamic these days, web applications like Google Wave, Gmail (Mobile) and other mobile app are capable of doing client side caching. For growing market of mobile, client caching is really nice to have feature.

Till 16th I was knowing just one way to store data on Client, the most popular Cookie. Cookie is simply the key-value pair that is stored in form of text file on client machine. The major limitation of cookie is its size, you can only store 4kb of data in cookie. So, web developers needed more smarter way to store details on client machine.

So, Client Side Storage method is one of the feature that came out of HTML5 bundle. Client Side Storage is memory space that is allocated to browsers to store persistent data. All data are associated with their domain.

HTML5 provides three ways to store data on client machine.

1. Local Storage
2. Session Storage
3. Database Storage

Let’s discuss all of them one by one.

1. Local Storage :

Most simplest form of storage available is Local Storage. HTML5 provides way to store key-value pairs on client machine. Data stored in Local storage is persistent. It means that, you can access those data in your further requests, even if browser window is closed. Data stored in Local Storage is accessible to all browser window.

It is one of the great way to implement client caching.

Here is the way to write Local Storage

// way to set local storage variable
localStorage.setItem(“userName” , “eHussain”);

// way to retrieve the value of local storage variable
alert(“User name is : ” + localStorage.getItem(“userName”));

// another way to retrieve the value of local storage variable
alert(“User name is : ” + localStorage.userName);

// way to remove the local storage variable
localStorage.removeItem(“userName”);

2. Session Storage :

You might be wondering for Session Storage at Client Side! But yes, HTML5 offers the way better solution than the Cookie. Session storage having ability to store data in amount of MBs.

Also, Unlike Cookie (which is sent to server for every requests), Session is not sent to the server for every requests. So, request load is minimal than the Cookie. However, this sessionStorage has nothing to do with Server’s Session.

Session Storage and Local Storage methods are identical. However they only differ in persistence and scope. Scope of the Session storage is limited only to specific browser window. Browser creates new instance of the Session Storage if you open same url in different tab/window. Also Data stored in Session Storage persist as long as browser window is open.

Here is the way to write Session Storage

// way to set session storage variable
sessionStorage.setItem(“userName” , “eHussain”);

// way to retrieve the value of session storage variable
alert(“User name is : ” + sessionStorage.getItem(“userName”));

// another way to retrieve the value of session storage variable
alert(“User name is : ” + sessionStorage.userName);

// way to remove the session storage variable
sessionStorage.removeItem(“userName”);

3. Database Storage :

We have discussed Session Storage, Local Storage and Cookie. You may have noticed, all techniques offers key-value method for storing the Data. But, sometimes you need way better solution to store huge amount of data on Client Side. One of the great way to do this is, Database. Database Storage is one of the best feature (I think) of HTML5. So far, as per my research, Safari is the only browser who supports the Database Storage. Database Storage uses the SQLite database, which is light weight, and fast.

Here is how you can make it.

var db = openDatabase(“Database_Name”, “Database_Version”);
database.executeSql(“SELECT * FROM tbl_users”, function(result1) {
  // iterate over resultset or do some other operation
  database.executeSql(“DROP TABLE tbl_users”, function(result2) {
    // do some cleanup
    alert(“My second database query finished executing!”);
  });
});

For many browsers Database storage has limited functionality and few vulnerabilities, I will discuss it some other day.

I have prepared the demonstration of Local Storage & Session Storage, If you have mozilla firefox then you can have a look at them.

If you liked this post then don’t miss to share it with other people. You can also post your valuable thoughts as comment below. That’s it for today, Signing off.

-
Hussain Cutpiecewala | ehussain

I am back with my second & useful post. There are wide range of skills that are available and constantly changing, being a good developer means staying on your toes and always learning to be the best one, and that is my favorite thing about web development.

Here is the list of few skills that are most important for being a good web developer. You may feel that this is focused on front-end skills. but they apply to all developers. I haven’t discussed here much about back-end skills because they are specific to language & platform. I will provide more details on back-end skills on my upcoming posts. But let’s talk about the general skills first.

1. Regular Expressions :
   Regular expressions are among the one from which I was scared most during early days of my carrier, but later I found that, Regular Expressions, a most powerful tool to manipulate string and data. They are found in scripting languages, editors, programming environments and specialized tools.
   
   Regular expressions are used to parse strings, basically to find and replace bits of text. Versatility of regex makes it quite powerful tool.There are wide variety of methods for optimizing a regex string, which may lead to huge performance improvement to your app/system.Regular expressions can be used with just about any language, they work great with Javascript & PHP to name a few. They are also great with Apache rewrite rules for htaccess.Its surprising how few developers use regex considering how useful it is. So if you haven’t learned already than make sure to learn regular expression.
2. Javascript Library :
   Even if you don’t write much javascript you should have basic knowledge of javascript library that can make too easier for you. Whether its JQuery, Mootools, or whatever. My personal choice go with JQuery. Writing native javascript code takes too much efforts & introduces many vulnerabilities in your system, on other hand using javascript library will cut your development time to less then half.
   
   These libraries takes the cross browse dirty work out of javascript programming so you can stop checking features of browser and start animating. Also these library provides wide variety of options to access the nodes of DOM & provides the easy way to animate them. These library also has many plugins available and many are getting available daily to make your life easier.
3. Debugging Code:
   A good debugger will make your web programming go so much quicker & easier. If we talk about front end then I specially like Firebug, which allows you to go through the elements of the page & analyze the styles & details about which stylesheet is being used. Using firebug you can also modify the styles of elements on fly, you can modify elements as well as page markups.Another useful thing about firebug is javascript debugging. Firebut helps with javascript debugging. providing a better analysis of javascript errors as well as console for running javscript on the fly.It also provides the NET panel through which we can see the loading time of various front end assets as well as anything that is 404′ing or otherwise not loading. We can also analyze the data being transmitted through GET/POST request.
4. Debugging View :
   In order to obtain many visitors as possible. your website need to work with majority of browser (IE6, IE7, IE8 , FF2 , FF3, Safari 4, Opera 9). If you ask any designer then most of them hates to do cross-browser debugging, but the better you get the less you’ll have to do it. Most better technique to design cross browser website is to be preventative. starting with valid HTML and good reset style sheet. For your work you can go with this reset css. Beyond that it is useful to understand compatibility master table.
5. Layout with valid HTML/CSS (and no tables) :
   Its not 2000, even a back end developer need to know how to write front end code with valid HTML & CSS – not with bunch of tables. The markup should be clean and valid according to its DOCTYPE. CSS of website should be separated from the HTML markup, it means that there should not be any inline styles.If you are beginner to front-end then you should learn various css tags and CSS Box Model.
   
   Whenever you write HTML code it should be XHTML valid. it means that you should have properly nested nodes, closing tags, Image tag with necessary attributes and other basics. You can check XHTML validity of your HTML code by using W3C’s HTML Validator, it will show an errors if any on your page. Its really a good practice to fix all those errors shown by Validator.
6. Basic Performance Rules :
   End user spents most of his time on the front-end. When end user opens the website, he gets tied up in downloading components of your page like images. css. javascript, flash etc. Performance of website can be improved in many ways, but most basic way to improve performance is reduce the number of HTTP request made by the browser to render the page.
   
   There are techniques like CSS Sprites are available to reduce the number of image requests. Also using Content Delivery Network for the loading your javascript library can reduce the HTTP request time considerably. For more details you can see Yahoo’s Best Practices for Speeding Up Your Website.
7. Basic SEO :
   A knowledge of basic SEO is essentially for any good web developer. You can leave work of research of keywords to your client. but developer should have basic knowledge of targeting those keywords on the web page. Web developer should use clean markup and should know the good use of <title>, <meta>, <h1> and <h2> tags on the front end. It is also very important to have solid & organized directory structure on back-end. Best resources I have found for learning basics of SEO is Beginners guide to Search Engine Optimization and Search Engine Ranking Factors
8. Payment Gateway Integration :
   Obviously your clients wants go get paid for their investment. So as being a web developer you should have basic knowledge of payment gateways like Amazon, PayPal, Google, etc. Every payment gateways provides API to integrate your website with their gateway. Many payment gateway provides their own development kit that you can plug into your site, but you must have strong knowledge of any of the back-end language to handle the issues that arises during the integration. I will talk more on this in my later posts.
9. Apache rewrites :
   Apache rewrites are very useful for converting your messy URLs and make them cleaner & easy to type. If you know regular expression then you can remove the ugly URLs like index.php?section=post&section=comments&limit=10 and you can rewrite it as post/comments/10. Apache rewrites are not only useful for making clean urls but it can also be useful for converting simple page into complete app with a directory structure. Simply, rewrite all of your query strings to the directories and that’s it, you are all set. However be careful, apache rewrites are very hard to debug (I feel it personally). The rewrites can’t be traced because they don’t provide any debugging information. They are nightmare that can’t be tracked.
10. Version Control :
    Last but not the least, every developer should know & use the verison control. Version control is not only only provides way to backup your files but it also provides smooth integration with other developers working on same project. Version control works by keeping track of the changes made in directory content. Using version control you can commit your changes to centralized server, or revert back to previous version.
    
    I personally prefer SubVersion which is centralized, and I use it at my work place. You can also find distributed as opposed to centralized version control, since it provides two levels of version control. You can commit changes to your local repository and then push those changes to centralized server. Using it you can make small numbers of unstable changes to your local repository and then push final revision to your team. If you have large team working on same system then you should go with distributed version control. Mercurial provides distributed version control.

Did I leave anything important from above list? What you think for above items? They may not be in good order but is any item more or less important to you? Please post your valuable thoughts as a comments below.

-
Hussain Cutpiecewala | ehussain