HTML 5 - Web Storage

To avoid any confusion, HTML 5 Web Storage is not the IndexedDB API which is also an HTML 5 related feature that most browsers now support.

HTML 5 Web Storage is a form of browser storage that is similar to cookies but with several advantages.

Storage Size

Cookies allow you to store a small amount of data (maximum of 4 KB per cookie) in the browser. For most web sites this is more than enough room and not enough reason to switch storage mechanisms. If your web site/web application has a need for more than 4 KB of space for storage in the browser then web storage might be an option for you.

The W3C specification for web storage allows each browser to determine how much storage space to allow by default but suggests a minimum of 5 MB. The specification also indicates that the browser is permitted to prompt the user to increase the storage space if more is needed.

Web storage in Internet Explorer is reported to be 10 MB while other browsers, like Firefox and Opera, have the size set to 5 MB.

Network Latency

Another downside to cookies is that they are passed back-and-forth with every web request. Having this data available on the server-side is sometimes handy but one can work around not having this data using other means (URL/Post parameters, AJAX request, etc).

For the most part, cookies are passed back-and-forth between the browser and the server and are never even used by the server-side code. They simply add to the bandwidth needed and cause the web requests to slow down because they need to transmit more data.

Web storage, on the other hand, is local to the browser and is not passed back-and-forth to the server. This results in faster web requests because less data needs to be passed around.

Browser Support

One of the nicest things about web storage is that it is already available in most browsers including Internet Explorer 8.

For the most part, the functionality, of the web storage objects, is very similar in all browsers with the exception of the storage event in Internet Explorer compared to the other major browsers. The storage event is discussed later in this post.

Web Storage Object Types

There are two types of web storage objects that sit within the window object called sessionStorage and localStorage.

The web storage objects are basically a list of key/value pairs.

Test for browser features

Before we dig too far into web storage it is important to remember that even though web storage is included in the latest release of all major browsers, it is not necessarily in older browsers that might be used when visiting your site or using your web application.

When using a feature that is not in older browsers, it is very important to test if the feature exists first before trying to use it. Otherwise, someone visiting your web site might not have a very pleasant time due to JavaScript errors or things just not working.

Testing to see if the web storage objects exist will tell you if the browser supports that particular functionality. In this case, since there are two different storage objects, it's best to test for their existence separately as in the following example:

// Check if the sessionStorage object exists
if (window.sessionStorage) {

g_bBrowserSupportsSessionStorage = true;

}

// Check if the localStorage object exists
if (window.localStorage) {

g_bBrowserSupportsLocalStorage = true;

}

Differences between sessionStorage and localStorage

Each window/tab gets its own copy of a sessionStorage object which allows for the storage of key/value pairs that are specific to the current window.

One thing to note about sessionStorage objects is that if you open a window from the current window, the sessionStorage object that is created for the new window is a clone of the sessionStorage object of the window that opened it. The sessionStorage objects are no longer in sync after the new window has been opened but this is something to be mindful of if you find values in the new window's sessionStorage object that you were not expecting.

With localStorage, each origin (SomeFreeWebSiteHost.com for example) gets a single copy of a localStorage object that is shared by all windows/tabs from that origin. This has the advantage that multiple windows of your web site/web application can easily share data but that ease of sharing could result in security concerns if you are not aware of how this object is shared.

The sessionStorage key/value pairs exist only while the browser is open. The moment you close the browser, the sessionStorage key/value pairs for your window are cleared.

With localStorage, the key/value pairs stick around even if the browser is closed and re-opened.

Web Storage Object - Methods and Properties

Both types of web storage share the same functions and properties:

• setItem(Key, Value)
• getItem(Key)
• removeItem(Key)
• clear()
• key(iIndex)
• length

setItem adds the key/value pair to the storage object if the key doesn't already exist in the storage object. If the key already exists in the storage object, the value is simply updated.

getItem returns the value from the storage object for the key specified. If the key does not exist in the storage object, null is returned.

removeItem removes the item specified from the storage object.

clear removes all items from the storage object

key returns the name of the item at the zero-based index specified. Returns null if the index doesn't exist.

length returns a number indicating how many key/value pairs are in the storage object

Shorthand methods

Since web storage is implemented in JavaScript, there are shorthand methods that can be used instead of calling setItem or getItem directly.

The following examples are all using the sessionStorage object but you can swap that for localStorage and they will still work.

The following examples are different ways that one could call setItem on the sessionStorage object:

// The method outlined in the W3C spec
window.sessionStorage.setItem("OurKey", "Some Value");

// Using array notation
window.sessionStorage["OurKey"] = "Some Value";

// Using dot notation
window.sessionStorage.OurKey = "Some Value";

The following examples are different ways that one could call getItem on the sessionStorage object:

// The method outlined in the W3C spec
var sValue = window.sessionStorage.getItem("OurKey");

// Using array notation
var sValue = window.sessionStorage["OurKey"];

// Using dot notation
var sValue = window.sessionStorage.OurKey;

The following are examples of ways to remove items from the sessionStorage object:

// Remove a single item using the method outlined in the W3C spec
window.sessionStorage.removeItem("OurKey");

// Remove a single item using the delete keyword (same as above, just
// with a different syntax)
delete window.sessionStorage["OurKey"];

// Remove all items
window.sessionStorage.clear();

Storage Events

According to the W3C specification on web storage, whenever a storage object is modified (setItem, removeItem for example) a 'storage' event is to be passed to all windows that the modification applies to.

The storage event does not bubble and cannot be canceled.

When you modify the sessionStorage object, the modification only applies to the current window. The weird thing is that only Internet Explorer 8 (and IE 9 Preview 3) receives a storage event call when the sessionStorage object is modified.

When you modify the localStorage object, the modification applies to all windows/tabs of that window's origin and as a result, other windows that happen to be open from the same origin will receive the event too.

Attaching to the Storage Event

Internet Explorer 8 implements the storage event differently than all other browsers, including IE 9 Preview 3, in that the event is passed to the document object rather than the window object. This difference might be due to the fact that the Web Storage specification is still a work in progress and Internet Explorer may have implemented the feature only to have the specification change to the window object (this is just a guess as to what might have happened - I really don't know but I'm giving Microsoft the benefit of the doubt here).

Getting around the Internet Explorer 8 storage event issue described above isn't too hard since Internet Explorer 9 Preview 3 now supports addEventListener. The following is an example of attaching to the 'storage' event that will also work with IE 8:

// Add the event listener (W3C browsers, including IE 9,
// use addEventListener)
if (window.addEventListener) {

// Listen for the storage event (triggered when the storage is
// modified - setItem, removeItem, clear)
window.addEventListener("storage", OurStorageListener, true);

}
else if (window.attachEvent) { // IE 8 and previous...

// Listen for the storage event on the DOM object
document.attachEvent("onstorage", OurStorageListener);

}

The above example might not be the best approach if other, non-IE browsers, also have the attachEvent method.

Receiving the Storage Event

Receiving the storage event is quite straightforward once you've attached to the event. All you need is a function that receives the event parameter as in the following example:

function OurStorageListener(e) {

// Take the event details and put it into a string
var sValue = ("Key: " + e.key +
" ...New Value: " + e.newValue +
" ...Old Value: " + e.oldValue +
" ...URL: " + e.url +
" ...Storage Area: " + e.storageArea);

// Display the event details to the screen
document.getElementById("divResults2").innerHTML = sValue;

}

This event will be called by all browsers that implement the 'storage' event when the storage object is modified if that object also applies to the window that has registered for the event.

I mentioned this earlier but I'll mention this again just in case, modifications to the sessionStorage object currently only trigger the storage event in Internet Explorer 8 and 9 Preview 3. The event is not currently triggered by any other browser from what I can tell even though the W3C specification seems to indicate that it should be triggered even for the sessionStorage object.

One thing to note about the above example is that not all browsers that support the storage event actually support all the storage event properties. Internet Explorer 8, for example, only supports the url property.

In the browsers that do support the storage event properties the following properties are available:

key is the key being changed. In our examples above this would be 'OurKey'. This will be null if the event was a result of the clear function being called on the storage object.

newValue is the value specified if a setItem call was made. If a removeItem call was made, this value will be null. This property will also be null if the clear function was called on the storage object.

oldValue is the old value if the key already existed when setItem was called. If setItem was called and the item did not already exist, this value will be null. This property will also be null if the clear function was called on the storage object.

url is the address of the document who's storage object was affected

storageArea represents the storage object that was affected (a reference to the storage object that was modified to give you easier access to the values within the object as well as the ability to modify items if need be). This way you don't have to guess if it was a session or a local storage object that was modified since you have direct access to the object that was modified.

Some closing thoughts on Web Storage

According to the W3C specification on web storage, there is a suggestion that web browsers can optionally have the web storage functionality turned off (perhaps as a security feature and only on for white listed sites). If you try to access a storage object when web storage is off, an exception could be raised.

There is also the possibility, if your web site/web application is storing a large amount of data that you will exceed the limit given by the browser for your window/origin. This limit is quite high (5 MB in most cases and 10 MB for Internet Explorer) but, if it is hit, it may result in an exception being thrown as well.

For more detailed information on the HTML 5 Web Storage specification you can view it by clicking on the following link:
http://www.w3.org/TR/webstorage/

Microsoft Project Server 2010

Overview

Microsoft Project Server 2010 is a project management application that sits within Microsoft's SharePoint Server 2010.

You can connect to Project Server 2010 using Project Professional or your Internet Explorer browser.

You can only use Internet Explorer to connect to Project Server 2010. If you try a different browser you will see a page indicating that you have been denied access. Another thing to note is that you must be using Internet Explorer 7.0 or higher.

The following screen shot is what you see if you use a non-Internet Explorer browser to connect to Project Server 2010. In this case Firefox was used.

(click to view the image full size)

Project 2007 Compatibility Mode

When connecting to Project Server using Project Professional it is usually the case that you would need to use the same version of Project Professional as the instance of Project Server that you are connecting to.

For Project Server 2010, if you upgraded from Project Server 2007, you can use Project Professional 2007 to connect by default. This is because when you upgrade from Project Server 2007 to Project Server 2010 a compatibility mode flag is turned on by default.

While the Project 2007 Compatibility Mode setting is on none of the new features of Project Server 2010 will be available.

Once all of your managers are using Project Server 2010 and all of your applications, that run on top of Project Server, are Project Server 2010 compliant, you can turn off the Project 2007 Compatibility Mode setting in order to enable the new Project Server 2010 features.

To turn off the Project 2007 Compatibility Mode setting, log into Project Server 2010 and click the 'Server Settings' link which is on the left-hand menu. Under the Operational Policies section click the 'Additional Server Settings' link. You will want to uncheck the checkbox for the 'Enable Project 2007 Compatibility Mode' item to turn off Project 2007 Compatibility Mode.


In previous versions of Project Server you could do some tasks using the browser but for the most part you needed to use Project Professional. This is no longer the case in Project Server 2010 as many tasks can be done using only the browser. In fact, this entire discussion will use only the browser.

When you first log into Project Server 2010, you will see a page similar to the following screen shot:

(click to view the image full size)

Resource Center

One of the things that you will need in your Project Server database is resources.

To add a resource, click the 'Resource Center' link in the left-hand menu.

When you arrive in the Resource Center you will have a ribbon bar at the top of the view. On the ribbon bar is a 'New Resource' button. Clicking the 'New Resource' button will bring you to a view allowing you to specify details about the resource.

(click to view the image full size)

If you simply wish to edit a resource, check the checkbox next to the item in the grid and then click the Edit Resource button.

Resources do not have to be employees but, in this case, we want employees. A resource can be set up to have the ability to log into Project Server and the security access, for each resource, can be configured to only the items that resource should have access to.

Project Center

To create a project, navigate to the Project Center by clicking on the 'Project Center' link in the left-hand menu. When you arrive to the Project Center you will see a ribbon bar as well as a grid of existing projects.

(click to view the image full size)

To create a new project using only the browser (there is an option to create the project using Project Professional if you would prefer that approach), click New and from the drop-down select 'Basic Project Plan'.

(click to view the image full size)

When you create a new project you are first brought to a view where you enter the project's name, an optional description, the project's start date, and the project's owner. Click the 'Save' button on the ribbon bar when you're satisfied with the project's information.

(click to view the image full size)

Editing the project information for an existing project...

The project information can be changed later, if need be, by selecting the project row in the grid of the Project Center, clicking the 'Open' button on the ribbon bar and selecting the 'In Project Web App for Editing' menu item.

If you simply click on the project's link in the grid of the Project Center, the project will be opened read-only and you will need to click the 'Edit' button on the Ribbon bar in order to edit the details.

Once the project is open, you can click on the 'Project Information' link on the left-hand menu to edit the project's details.

(click to view the image full size)

Once the project has saved, you will be taken to the 'Schedule Tools' portion of the project

(click to view the image full size)

To create tasks it's just a matter of clicking in the Task Name cell, of a blank row, and type in the task's name. When done press Enter, Tab or click off the row.

(click to view the image full size)

Once you have all the task rows created you can indent one or more of the rows if you would like some tasks to be sub-tasks of a previous task.

To create a sub task, simply select one or more rows and click the Indent button (or press Alt + Shift + Right arrow).

(click to view the image full size)

Now that we have the basic structure of the project, we need to specify how much work each task is expected to take in order to complete it. This is simply a matter of typing in an hour value in the Work column of each row.

By default each task is set to Manually Schedule mode. It is generally easier to let Project Server handle determining the start and finish dates by using the Auto Schedule mode.

To switch to the Auto Schedule mode, select all rows that you wish to be auto scheduled and then click the Auto Schedule button on the ribbon bar.

(click to view the image full size)

Changing the default scheduling behavior of new tasks...

Rather than having to adjust each row of each project you create to do Auto Scheduling rather than the default Manual Scheduling, you can actually change the default scheduling setting for new tasks.

To change the default scheduling setting for new tasks, click on the 'Server Settings' link on the left-hand menu.

Under the Operational Policies section click on the 'Additional Server Settings' link. There will be a section on the page called 'Task Mode Settings' that allows the default to be changed for new tasks from 'Manually Scheduled' to 'Automatically Scheduled'.


Now that we have the list of tasks created, it is generally a good idea to specify if a task is dependent on another task (to only start when the previous task finishes).

This way, if one task finishes earlier than expected or takes longer than expected, the start date of the tasks that follow will be adjusted accordingly.

To cause a task to be dependent on another task, you link them together by selecting the task rows in the order you want the tasks to be linked and then you click the link button on the ribbon bar.

(click to view the image full size)

One thing you may notice when using Internet Explorer compared to Project Professional is that some changes only show themselves after a save (things are not automatic in some cases which might simply be a bug in the implementation of the web based solution).

Now that we have our project and tasks created, it would be nice to assign some resources to the tasks. Clicking in the Resource Names cell, however, has no effect at this point.

Even though we do have resources in the system, the reason why they don't show up in the Resource Names cell, when we click in the cell, is because we don't yet have a team built.


If you've been following along building your own project, save your changes before we go any further.

Teams

Each project maintains a team of resources that will be working on the tasks within the project.

If a resource is not part of the team, for the project, the resource will not show up when assigning resources to the project's tasks.

To create a team click on the Project tab of the ribbon bar and then click the 'Build Team' button.

(click to view the image full size)

The Team view allows you to assign resources to the team that will be working on the current project.

Select the resources from the list on the left and click the 'Add' button to assign them to the project's team.

When you're satisfied with the changes to the team, click 'Save & Close' on the ribbon bar to be taken back to the Schedule Tools section of the project.

(click to view the image full size)

Once we're back in the Schedule Tools section of the project, we can go to the Resource Name column and click in the cells of the grid.

Now a drop-down of all resources, that are part of this project's team list, will be displayed and we can choose one or more resources per task.

(click to view the image full size)

Now that we have our project created and resources assigned we need to make the project public by publishing it.

To publish the project all you have to do is click the 'Publish' button (next to the Save button) on the ribbon bar.

Close the Project

When dealing with Project Professional, closing a project comes naturally when you close the application. With the web based Project Server solution, that is not an obvious need.

If you don't close the project, the project will remain checked out to you. An administrator could force the check in but that's a lot more hassle than it's worth. It's better to just close and check in the project when you finish working with it.

To close and check in the project switch over to the Project tab of the ribbon bar and click the Close button. When prompted you can choose if the project is to be checked in or not.

(click to view the image full size)

In Closing

So that gives a basic run through the process of creating resources and projects within Project Server 2010 using nothing but the Internet Explorer browser.

There is much more to Project Server 2010 than what I went over in this post but I hope this helps you get started.

TechDays 2010 is Coming to Halifax

(click to view the image full size)

TechDays 2010 is coming to the Maritimes and will be in Halifax for two information filled days on November 2nd and 3rd at the World Trade and Convention Centre.

TechDays will be held in other Canadian cities too if you happen to be elsewhere in the country (Vancouver, Edmonton, Calgary, Winnipeg, Toronto, Ottawa, and Montreal). The dates vary so check out the TechDays web site for more information on the schedule for the other cities.


Aside from being far less expensive than its parent event (TechEd), TechDays is two full days of sessions with over 50 live sessions across 6 tracks. One of the tracks is a 'Local Flavours' track with sessions from local experts on technical issues that might be more prominent in our region.

Being surrounded by developers from all parts of the Maritimes and having direct access to Microsoft experts and consultants makes this event very rewording.


There is early bird pricing for $349.99 + tax which is 50% off the full price of $699.99! The early bird discount runs out 6 weeks before the event and by my calculations that would be September 21st, 2010 for the Halifax location.

It sounds like a lot of money but to attend the parent conference in the US, TechEd, would cost thousands in registration, transportation, and hotels. With a local event like this one, the costs are far less.

I would recommend not waiting until the last minute to book this event because last year the Halifax event sold out!


For more information and to register you can visit Microsoft's TechDays site: www.techdays.ca

JavaScript Debugging in Firefox Using the Firebug Add-On

In this article we will discuss debugging JavaScript in Firefox by means of an add-on called Firebug (version 1.5.4).

If you need to debug JavaScript using Internet Explorer you can check out my blog post on using the Internet Explorer Developer Tools.

Aside from being able to debug JavaScript, Firebug also allows you to view HTML markup, CSS, inspect the DOM, monitor network requests, and much more.




For the purpose of this discussion we're only going to focus on the JavaScript debugging aspect of Firebug but I recommend exploring the other features in Firebug because many will prove useful in your day-to-day web development efforts.



Once you've installed the Firebug add-on there will be a small bug image in the status bar:

You can click on the bug image in the status bar to launch Firebug for the current window. You can also open Firebug by using the menu (Tools, Firebug, Open Firebug) or by pressing F12. The following is a screen shot of Firebug open in a window:

(click to view the image full size)

By default, Firebug opens as a pane at the bottom of which ever window had the focus. This is not always desired especially when trying to inspect a small pop-up window with limited space. You can open Firebug in its own window by using the menu (Tools, Firebug, Open Firebug in New Window) or by pressing Ctrl + F12.

The first time you launch Firebug, the information displayed will be the HTML markup of the page itself (the HTML tab). Since we wish to do JavaScript debugging, we need to switch to the Script tab as illustrated in the following image:


(click to view the image full size)

If you are following best practices for web development your JavaScript code should be located in a separate file.

 On the left pane's toolbar, in Firebug, is a drop-down menu that will show a list of all JavaScript files that are currently loaded for the page. Select the JavaScript file from the list that contains the code you wish to debug.


(click to view the image full size)

If you need to search the selected file for a particular item, you can do so by using the small search box in the top-right corner of Firebug:

(click to view the image full size)

Once you find the code that you wish to debug you can set a breakpoint by clicking in the margin or by right-clicking and choosing 'Set Breakpoint' from the context menu.

(click to view the image full size)

Note: Unlike Visual Studio and the Internet Explorer Developer Tools, you cannot set a breakpoint by pressing F9.


One nice thing about Firebug is that you don't have to tell it to start debugging. The next time the breakpoint is hit Firebug will take you to that line automatically. 


The Firebug toolbar contains some buttons to help with the stepping into, over, and out of code. You can also use keyboard shortcuts rather than the toolbar buttons (Step Into is F11, Step Over is F10, and Step Out is Shift + F11).

(click to view the image full size)



Another nice feature of Firebug is that you don't need to add a variable to the Watch window to see its value. You can simply hover the mouse over the value and see a tooltip. 



If you wish to add a variable to the Watch window you can do so by selecting the item, right-click on it, and then select 'Add Watch' from the context menu. You can also click in the watch window where the text 'New watch expression...' is and then type in the variable name.

(click to view the image full size)

And there you have it. Debugging JavaScript using the Firebug add-on within Firefox.