Jun 20, 2011

Auto Insertion of Tag attributes and Function arguments in ColdFusion Builder 2

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':


There are some tags such as cfpdf, cfimage wherein a few attributes become mandatory when one of the attributes' value is specified. For example, in case of cfimage when the action attribute is specified as 'convert', the attributes destination and source become mandatory and are auto inserted:


Now on selecting the action attributes' value as convert, the attributes destination and source are auto inserted:


If the user selects action attributes' value as rotate, then the attributes angle and source are auto inserted:


Another thing to note here is that, after inserting the required attributes the cursor is positioned such that one can go about specifying the next attributes' value.

auto Insertion of required function arguments

Whenever one tries to invoke a built-in function or a user defined function the required arguments are auto inserted. For example, consider a function foo which takes three arguments, of which the first two arguments are mandatory:

When this function is invoked using code assist, the required arguments are auto inserted. As seen above, arguments arg1 and arg2 are marked as required and are auto inserted when the function is invoked. After inserting the required arguments the first argument is selected so that the user can go about specifying a value for the argument. The tooltip here shows the list of arguments that the function accepts along with the argument type. The last argument - arg3 is marked optional and is surrounded by square brackets indicating that it is optional. 

Jun 17, 2011

De-obfuscating javascript code in Chrome Developer Tools

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 files is an impossible task.

With the latest version of Google Chrome one can choose to de-obfuscate the javascript code right with in the developer tools. This is how the jquery.js file would look before de-obfuscation:



Now, to de-obfuscate the code one can right click on the file and select the 'De-obfuscate Source' option. This would de-obfuscate the javascript code and present the code which is readable and ready to debug:



Update:

This post was written when Chrome 12 was released. In recent versions, this option is available as a button - 'pretty print', at the bottom left corner of the screen. Look for the button with the icon '{ }'.


Jun 8, 2011

Getting notifications of Network Status changes using online and offline events introduced in HTML5

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.

Jun 2, 2011

ColdFusion's CFDIV tag can be used to output HTML5's semantic tags

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 development because CFDIV tag comes with an attribute bind, which is used to specify a bind expression that returns the container contents. One can dynamically populate the tag contents by specifying the bind expression which can be a CFC function, a URL or even a javascript function. You can refer to the CFDIV tag documentation here.