MDBitz Development Resources

Javascript Cookies are variables that are stored on the visiting users computer. These cookies are unique to a domain so that if the site www.example.com sets a cookie with information in it that cookie can not be read and utilized by www.xyz.com. In most cases cookies are used to save user settings for your website, when they last logged in, etc. However they should not be used to store sensitive information as the cookie information is transferred with each page request to the server.

With that out of the way lets get right into things, and understand the 3 things that define your cookie value.

• Name: The name to identify your cookie
• Value: The value to be stored in the cookie
• Expiration Date: When does this cookie value expire

The cookie is set and read by using JavaScript and in particular the document.cookie element of the DOM. You set a cookie by setting document.cookie to your desired name-value pair and expiration date with the format of “name=value; expires=date;”. For example if we wanted to define a cookie with the property user and set it to abc123 with an expiration day of March 3s^st

document.cookie ='user=abc123; expires=Wed, 31 Mar 2010 20:47:11 UTC;

To access the saved cookie we would read out the value of document.cookie. This property returns a string representation of all the name-value properties that have been set to the cookie. Therefore you will need to parse the returned String to get your desired value. The easiest way to do this is to get the indexOf method to get the starting point of the property value and get the value up to the next semi-colon or end of the string if one doesn’t exist.

To help illustrate lets assume I have set a cookie with user = abc123 and settings = Show All. If a cookie was set with these properties then document.cookie would return the following.

user=abc123; settings=Show All

Therefore to get the user property you would need to get the index of user= and return the string from that index plus its length until the next ; or end of the cookie value if user was the last property.

start_idx=document.cookie.indexOf("user=");
cookie_value = "";
if (start_idx != -1)
{
    start_idx=start_idx+ 6;
    end_idx=document.cookie.indexOf(";" , start_idx);
    if (end_idx == -1) {
        end_idx = document.cookie.length;
    }
    cookie_value = document.cookie.substring(start_idx, end_idx);
}
alert(cookie_value);

To make things easy on yourself, there are a lot of existing functions and libraries that have defined methods for reading and writing cookies. W3Schools has an excellent set of functions at www.w3schools.com/JS/js_cookies.asp. In addition many JavaScript libraries either have built in cookie support or plugins for handling them.

Promotions are a very common aspect of store websites. Most promotions you create will have a set amount of time they are valid for. As a responsible site administrator you may want to know how to stop the promotional page from being displayed in Google’s search results after it expires. To let you do this Google has provided the unavailable_after META tag.

unavailable_after

The unavailable_after META tag notifies google that this page is going to expire at this date and time. This allows google to remove it from it’s indexes so that it does not appear in search results after the expiration date.

<META NAME="GOOGLEBOT" CONTENT="unavailable_after: 35-Aug-2010 06:00:00 EST">

A helpful feature for any site that uses online promotions.

Resources

• Google Blog: Robots Exclusion Protocol

In some instances you may have content on your website that you don’t want Google to archive. Google understands this and provides various META tags for you to use in notifying their crawler in how to handle your website’s content. Two such tags are NOSNIPPET and NOARCHIVE.

NOARCHIVE

The NOARCHIVE META tag is used to tell the Google crawler to not archive this page and its content. This wil stop their being a cached version of the page in the google search results.

<META NAME="GOOGLEBOT" CONTENT="NOARCHIVE">

NOSNIPPET

The NOSNIPPET META tag notifies the crawler that you do not want a snippet of of the pages content to be dispalyed in search results. If you specify NOSNIPPET then the crawler will also not archive the page contents so you do not need to put both META tags in your pages.

<META NAME="GOOGLEBOT" CONTENT="NOSNIPPET">

Resources:

• Google Blog: Robots Exclusion Protocol

For those of us that have applications that require the uploading of files, our work has just gotten easier. Earlier this month the folks of moxiecode (tinymce) released the first version of their File Uploading tool Plupload.

This handy tool enables users to utilize Flash, Silverlight, HTML5, and other web assets for handling and displaying the progress of the files being uploaded. In addition it also contains handlers for resizing images on the client side before the file is transmitted over to your server. An interesting tool that you definitely want to review before creating your own file upload tool. Check out the Plupload official site to learn more.

Every day it seems more and more web developers seem to think that tables should not be used. Instead all we see now a days is style=”float: left” or style=”float:right”, even when all the developer is trying to do is create columns. Why do we need to complicate things. If you are creating multiple columns then use a table that is what it’s purpose is, and to top it off you don’t have to worry about how to clear your floats appropriately. For those that need a refresher course below is the basic structure for a 2 column table with its content vertical aligned at the top and not center of the column…

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">
        <!-- content for left column -->
    </td>
    <td valign="top">
        <!-- content for right column -->
    </td>
  </tr>
</table>

Now the next time you find yourself using floats, take a deep breadth and ask yourself should I be using a table for this?