Skip to main content

Posts

Drawing paths on Google Maps, the Indiana Jones way

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.



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 maps ‘Polyline’ API.

JavaScript debugging with Chrome Developer Tools and some tips\tricks

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 applications …

File upload and Progress events with HTML5 XmlHttpRequest Level 2

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.

HTML5 XmlHttpRequest 2 v/s Flash\Silverlight approach to cross-origin requests

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 XmlHttpRequest 2 - Cross origin request

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);
Server side:

When a …

Navigation enhancements in ColdFusion Builder 2.0

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 + SHIFT + UP.
Code Navigation works in conditional statements as well. Consider an example of a cfif-cfelseif-cfelse conditional statement. If the cursor is placed,…

Tag replace - Actions in ColdFusion Builder

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 attribute that …