Sagar Ganatra's Blog

To measure the time taken for a page to load one can use the Date object in the head section and calculate the time taken for the page to load in window.onload function. However, it calculates the time taken for the page to load after the first bit of JavaScript in the head is executed. This doesn't indicate the time taken by the web server to serve the requested page. The Navigation Timing API introduced in HTML5 provides data that can be used to measure the performance of a website. The API provides a PerformanceTiming interface which contains several attributes that can be used to get end-to-end latency data.

Today I stumbled upon the PageVisibility API introduced in HTML5, which gives developers an opportunity to improve the performance of a web page and to better the user experience. Whenever a user opens a new tab or navigates to another tab, the behavior of the current page from which user navigated can be controlled using this API. Consider a webmail client that is trying to look for new mails every two seconds, if a user opens a new tab or minimizes the browser window then retrieving mails every two seconds would expend resources, whilst the user is not actively viewing the page. Here the PageVisibilty API would come handy and would allow developers to alter the behavior of the web page.

I came across a publisher\subscriber protocol called PubSubHubBub. It is a server-to-server web-hook-based pubsub (publish/subscribe) protocol - an extension to Atom and RSS. Here the parties (servers) get an instant notification when a feed URL, that  they are interested in is updated. Traditionally a subscriber would subscribe to a feed and poll for it at regular intervals, to see if there is an updated feed available. In this protocol rather than polling for a feed, the content is pushed out from the publisher. The theory here is that the subscriber can subscribe to a feed via a 'Hub', which then would inform the subscribers when the feed is updated. How PubSubHubBub works? A Publisher instead of sending an update to every subscriber, it includes a in its feed URL and sends an update to the Hub . A Subscriber sends a subscription request to the Hub with the feed URL that it is interested in. The request also contains a callback URL to which the Hub should send an up...

Today when I woke up and switched on the Television to see what's making the news; I heard about Steve Jobs death. For the first time in my life, I'm feeling very sorry for a tech giant who passed away. Steve was an extraordinary human being. He kissed success not just once but many times. He changed the way we experience technology. His charisma, passion and more importantly desperation to do something great is matchless.

One of the key aspects of building web applications that deliver great user experience is to build applications that are highly responsive. Browser vendors are trying to improve the speed of their JavaScript engines and are enabling the web applications to perform well. Since JavaScript was introduced, there has been no way to execute the code outside of the browser UI thread i.e. it has remained single threaded. The Web Workers API introduced in HTML5 enables web applications to run scripts in the background, independent of the UI thread. The performance of a web application can be greatly improved by using Web Workers since each worker would spawn its own thread. These threads can be used to perform computationally intensive tasks in the background without affecting the performance of the entire application.

In ColdFusion, CFPDF tag can be used to perform several PDF related operations such as adding a watermark, generating thumbnails, deleting pages, merging documents and securing a PDF with password. Today I wanted to merge all my bank statements into a single PDF document, such that only the first page from each document containing the summary of the statement is present in the merged document.

Today I was looking into web storage (localStorage) feature introduced in HTML5. Most of the modern browsers provide means through which key/value pairs can be securely stored and retrieved for later use. Browser cookies can indeed be used for the storage of persistent data but are limited in capacity. Also with cookies, the data is transmitted in every HTTP request thereby making the web applications run slow. Unlike cookies, in local storage there is no limit on the size of the data and it is never transmitted to the web server unless an attempt is made to send it manually. Whenever the data in the storage area changes a ' storage ' event is fired. This event is fired whenever the methods setItem(), removeItem(), or clear() are called on the localStorage object. However, when I tried to use these methods to update the localStorage area, the storage event never fired: The methods setItem and clear did change the storage area and I confirmed this by referring to the resour...

Yesterday at the ColdFusion Developer Week, I had demonstrated the Productivity features in ColdFusion Builder. Here is a cloud of these features: 

The Adobe ColdFusion Developer Week is here and is scheduled from 12th of September to 16th of September 2011. I'm pleased to announce that I'll be speaking on Wednesday, 14th of September and my session title is 'ColdFusion Builder: The Professional IDE to Boost Your Productivity' . This session would focus on how you can get started with using ColdFusion Builder and productivity features that would enable you to develop ColdFusion applications in no time. I'll also be demonstrating the new features that have been introduced in ColdFusion Builder 2.0. You can register for the session here -  http://www.adobe.com/cfusion/event/index.cfm?event=detail&id=1489920&loc=en_us

The Canvas element introduced in HTML5 is the most talked about feature in HTML5. It allows a developer to draw on a rectangular area and the ability to control each pixel in it. I'm not a very big fan of powerful graphics and animation on the web, however I wanted to try Canvas in conjunction with another popular feature - Web Sockets. The idea is to use the mouse events to draw on the Canvas and then send the coordinates to remote clients using Web Sockets. I have used the pusherapp Web Socket library in my example and this video shows how two clients can play a Tic-Tac-Toe game: Unable to display content. Adobe Flash is required. As you can see in this video, the mouse movements made on the canvas will draw lines on it and also cause lines to be drawn on another browser window.

Google announced the Places API recently at Google I/O (2011) and I was looking into this, to see how this API can be used in conjunction with ColdFusion maps created with CFMAP. The Places API can be used to retrieve place information which includes: Places of interests such as parks, restaurants, hospitals which are nearby to the users location. More detailed information on the place, such as the address, phone number etc,. The API can also be used to perform check-in at a particular place and to add\delete a place. These check-ins can then be used to evaluate the popularity of the place. In this post I'll explain how to retrieve the places of interests and displaying the same on a ColdFusion map using CFMAP.

HTML5 has introduced several input types such as EMAIL, URL, RANGE, SEARCH, DATE, TIME, etc,. Most of the modern browsers have implemented them and are ready to be used in a HTML document. Another exciting feature introduced in HTML5 is the form validation. Instead of writing JavaScript to validate users input, browsers can now validate it and show an appropriate message if the validation fails. The validation message is shown in line with the field for which the validation has failed. The default error message is shown when the validation fails. In this post I'll explain how these error messages can be changed.

The other day I had posted on uploading a file using XmlHttpRequest 2 and tracking the progress of the file upload process using the progress event on XHR2 object and the progress tag. Another enhancement added to the XHR2 specification is the introduction of FormData object. Using the FormData object, one can create a set of key-value pairs and send them as form data in a XHR request. The FormData object is passed in the send() method of the XHR object:

The Editor is the most important feature in an IDE and the code assist features in the Editor helps in developing applications quickly and hence help in increasing the productivity. One of features is the 'auto insertion of tag attributes'. Most of the tags in ColdFusion have a mandatory attribute, for example the attribute 'name' is mandatory when using the cffunction tag. In ColdFusion Builder 2, these attributes are auto inserted i.e. when a user types in the cffunction tag and invokes code assist (using CTRL + SPACE) the name attribute is auto inserted. auto insertion also works for function arguments wherein the required arguments are auto inserted. Auto Insertion of Tag attributes As explained above, the mandatory attributes are auto inserted whenever the code assist is invoked for tags such as cffunction : In the above picture, code assist for cffunction is invoked and the tag is selected from the list. This would auto insert the required attribute 'name'...

I had blogged about JavaScript debugging with Chrome Developer Tools  some time back, wherein I have explained how these developer tools can help in debugging javascript code. Today Google Chrome 12 was released and my Chrome browser was updated to this version. As with every release, there have been some improvements made on performance, usability etc,. One feature that stood out for me is the ability to De-obfuscate the javascript code. What is Minification? Minification is the process of removing unnecessary characters such as white spaces, comments, new lines from the source code. These otherwise would be added to make the code more readable. Minifying the source code helps in reducing the file size and thereby reducing the time taken to download the file. This is the reason why most of the popular javascript libraries such as jQuery are minified. A minified jQuery file is of 31 KB in size where as an uncompressed one is about 229 KB. Unfortunately, debugging minified javascript f...

I was working on an online\offline application, wherein I wanted to display a set of records stored in the local database to the user when he goes offline. The only way to determine the network status is to send a XHR request to the server at particular time intervals (polling). If the server responds back with some data it is understood that the user is online. However, I came across two event listeners 'ononline' and 'onoffline' which are triggered when the network status changes.

HTML5 has introduced several semantic tags such as HEADER, FOOTER, SECTION, ARTICLE, ASIDE, NAV etc,. The rationale behind creating these structural tags is to divide the web pages into logical parts with tags that are descriptive of the type of content they contain. Before HTML5 the div tags were used in creating blocks of content in a HTML document. Recently, I was having a conversation with one of my team members from whom I learnt that the CFDIV tag can be used to output these semantic tags. The CFDIV tag has an attribute  'tagname' . This attribute can be used to specify the HTML container tag i.e. one can specify tagname="header" to output the header tag. Similarly the tagname attribute can be used to specify other HTML5 semantic tags. Why should I use CFDIV tag to output the semantic tags? Well, this is an obvious question you are likely to ask yourself before you write the CFDIV tag. It is not so obvious to one who uses CFDIV tag in their day to day de...

I was looking into the Google Maps API the other day and came across some APIs which are really cool. I came up with a use case to show path from the current location to a particular destination entered by the user. I was also trying to achieve that Indiana Jones like effect on the map i.e. to show an animation of the path being drawn on the map. The idea here is to show the moving path until the destination is reached and also to pan the map accordingly. Unable to display content. Adobe Flash is required. As seen in the video, a marker is added to the map specifying my current location (Bangalore, India). The current location data is retrieved using the HTML5’s Geolocation API. Once the latitude and longitude information are available, a marker can be added to the map. You can now enter one of your favorite destinations in the text box provided and click the Submit button to see a path drawn from your current location to the destination. The path is drawn using the Google map...

Last Friday I was having a conversation with Ben Nadel and Jonothan Joyce on Twitter about examining the content of a JavaScript object. While the firebug add-on for Firefox comes in very handy in examining the request\response header and for various other internals, I can’t really debug the JavaScript code by adding breakpoints. I use Google’s Chrome browser for my day to day web application development. Both Chrome and Safari provide ‘Developer tools’ which help the user not only in debugging the JavaScript code but also in examining the content of an object at any point in time by providing watch expressions. What I like about debugging in Chrome is that it is very much similar to how I debug my server-side code using ColdFusion Builder or Eclipse. This certainly reduces the learning curve to understand debugging in a browser. However, Chrome has more to give when it comes to debugging web applications. In this post I’ll explain how Google Chrome can help you debug web applic...

The XmlHttpRequest Level 2 specification adds several enhancements to the XmlHttpRequest object. Last week I had blogged about cross-origin-requests and how it is different from Flash\Silverlight's approach .  With Level 2 specification one can upload the file to the server by passing the file object to the send method. In this post I'll try to explore uploading file using XmlHttpRequest 2 in conjunction with the progress events. I'll also provide a description on the new HTML5 tag -  progress which can be updated while the file is being uploaded to the server. And of course, some ColdFusion code that will show how the file is accepted and stored on the server directory.

A few days back I had posted on XmlHttpRequest Level 2 , describing how cross-origin requests can be achieved. A few folks on my team asked me how different it is from Flash\Silverlight's approach to achieve cross domain request\response with crossdomain.xml . The approach that these plugins take to send a request and receive a response is completely different from that of XmlHttpRequest's approach.

HTML5 specification has introduced a few enhancements for XmlHttpRequest object and one of them is the ability to make cross-origin request. That is, a host can send a XmlHttpRequest request to another host and receive a response in return. On the server-side, a check can be made to see whether the request can be accepted from the given origin. In this post I'll try to explain how this can be done using ColdFusion. Client side: On the client side, a XmlHttpRequest object is created and then a GET request is made to the remote server. var client = new XMLHttpRequest(); client.onreadystatechange = readyStateChangeHandler; client.open("GET","http://{remote-address}/{path-to-file}.cfm",true); client.send(); For example, say example.com wants to get a response from another domain say abc.com , then as observed from the above code the request would look like: client.open("GET","http://abc.com/dir1/foo.cfm",true); Serve...

Do you spend a lot of  time scrolling large files, just to find out the next function definition in place or to figure out the end\start of a tag? If your answer is YES, then why don’t you try the Navigation enhancements in ColdFusion Builder 2.0? ColdFusion Builder comes to you with three types of Navigation enhancements: -          Code Navigation -          Smart Tab Navigation -          Jumping to matching tag. Code Navigation Code Navigation is all about navigating to the next function definition in place. Imagine a CFC containing various cffunction tags. It is a time-consuming task to keep scrolling and keep an eye on the file to get to the next cffunction tag. ColdFusion Builder 2.0 provides a shortcut key CTRL + SHIFT + DOWN to navigate to the next function definition. And to navigate to the previous function definition, you can use the shortcut CTRL +...

Tag search is that one powerful feature in ColdFusion Builder 2.0 which allows you to search for tags that match some criteria. Also, there are various actions that the user can perform once the tag is found. Actions such as  'Replacing the tag block' with some text,  'Removing the Tag block',   'Setting an attribute',   'Removing an attribute',  'Adding text before the tag block' and  'Adding text after the tag block'.  In this post I'll explain how these actions can help you increase your productivity in your day to day application development. Action - Setting an attribute Consider a use-case where you would like your ColdFusion application to be available to other web clients such as a HTML client or a FLEX client. In these cases you will have to update the cffunction's  access attribute to remote.  Updating each and every function definition can be a time consuming task. With the action Set attribute  one can specify the attr...

In my last post I have explained about keyboard shortcuts in ColdFusion Builder 2.0. This blog post contains a list of all shortcut keys and I have listed these keyboard shortcuts based on the categories that it falls into. Well, this post was not planned since users can easily get to know the keyboard shortcuts by navigating to the preferences (ColdFusion -> Profiles -> Keys). However, I met Joshua at Scotch on the rocks in Edinburgh and he suggested that it would be nice to have the list of keyboard shortcuts handy. So this post is for those who would like to have the list with them and refer it whenever required. Keyboard shortcuts for inserting text: These are the keyboard shortcuts which are used to insert some text into the editor: Command Keyboard shortcuts on Windows Keyboard shortcuts on Mac Insert anchor tag CTRL + T, L CMD + T, L Insert bold tag CTRL + T, B CMD + T, B Insert br tag CTRL + T, R CMD + T, R Insert cfabort CTRL + T, A CMD + T, A Insert...

ColdFuison Builder 2.0 is all about productivity, it has introduced a lot of keyboard shortcuts, about 42 of them. Shortcuts have been provided for inserting text, invoking wizards, shortcuts for all new editor features and shortcuts for Extensions. Want to define a keyboard shortcut for a piece of code? Possible. Not only that, you can also Export and Import the keyboard shortcuts, so that you need not redo the task of defining a list of keyboard shortcuts on a different installation. What comes with ColdFusion Builder 2.0? You get 42 keyboard shortcuts and I know remembering all of these 42 keyboard shortcuts seems to be a daunting task, but the way these keyboard shortcuts have been designed doesn't require you to remember each and every shortcut. The keyboard shortcuts have been grouped into three categories: Insert options, Wizard options and the Extensions options. Each of these categories start with a key combination. For example the Insert options start with CTRL + T and wh...

Quick Fix is another interesting feature introduced in ColdFusion Builder 2.0. The CFML Editor now provides corrections to the problems found in the file that you are editing. The Editor tries to resolve the CFCs specified at various places i.e. in createObject function, the new operator or the ones specified in the tags cfinvoke\cfobject. The Editor also tries to resolve the functions using CFC introspection. Now if you have declared a CFC or a function which doesn't exist, then the CFML Editor instead of showing an error in document provides Quick Fix suggestions. Quick fix suggestions for components: As shown in picture above, the CFML Editor was not able to resolve the component 'Component1' and instead of showing an error, the Editor has shown a yellow marker indicating that a quick fix suggestion is available. On clicking the yellow marker, a list containing suggestions are shown. On selecting the first suggestion, the component will be created in the same directory ...

ColdFusion Builder 2 (codenamed 'Storm') the next version of ColdFusion Builder is now public beta and it comes packed with several new features. One of the highlights of this release is the ColdFusion specific Search and Replace feature; CFB is an Eclipse based IDE and the search\replace functionality provided in the 1.0 version of the product (codenamed 'Bolt') used the Eclipse's search and replace functionality. Storm now comes with a separate engine for Search and Replace. One can search not only for text but also tags based on the conditions that you specify. The search scope is now widened and users can search over various scopes such as Open documents , Projects , Workingset ,  Workspace , Local directory , Selected Resources and over any of your FTP\RDS connections . And that's not it, you can also perform certain actions on the matches found. In this post I'll be providing an overview and will try to deliver more complex scenarios in the comi...

ColdFusion Builder - Storm is public beta and you can download Storm from labs.adobe.com. I just completed my session at SOTR and all the new features are on the picture below:

There are several ways to interact with the server apart from the traditional request\response and refresh all protocol. They are polling, long polling, Ajax and Websockets ( pusherapp ). Of all these Ajax and Websockets have been very popular. There is another way to interact with the server such that the server can send notifications to the client using Server Sent Events (SSE) . SSE is a part of HTML5 spec:  http://dev.w3.org/html5/eventsource/