Great article about ECMAScript Internationalization API.

I ran across this great introduction article to ECMAScript's new International API, written by Raymond Camden

The article is at http://code.tutsplus.com/tutorials/working-with-intl--cms-21082, and it has great examples of showing how to sort strings, format dates and numbers with International options.

Using JavaScript to find the cursor position of a keypress.

Have you ever needed to prevent one or more characters from occupying a particular position in an input field? Well recently I needed to ensure that a dash was not the first character in a string, but it was permissible in other parts of the string. So I started wondering if it was possible to get the position via JavaScript. Turns out it is possible with element.target.selectionStart

In my example below, we only allow the first character of a string to be a letter:

It's official! Adobe has announced a ColdFusion Summit 2013.

Per the official ColdFusion blog (blogs.coldfusion.com)...

"We recently announced that Adobe will be holding our first ever ColdFusion Summit conference!

Event Details:

October 24th and 25th

Manadalay Bay Resort & Casino, Las Vegas, Nevada

Registration cost: $250

Each paid registration will receive a FREE copy of ColdFusion Builder (MSRP value of $299!)"

Checking available free space from ColdFusion

Earlier today I noticed on Ray Camden's site a blog post about determining the amount of free space on a drive from ColdFusion. It looks like in CF10, a new function, getFreeSpace('path') was added that will return the amount of free space in MB back. Here's the article: http://www.raymondcamden.com/index.cfm/2013/1/22/Using-ColdFusion-to-check-available-disk-space

For those of us not yet on ColdFusion 10, the following article outlines how you can drill down to the Java File class to get the free space.

http://www.jozza.net/blog/measuring-disk-space-in-coldfusion/141/

In particular, pay attention to the second part, because with the .init() outlined, you can pass in an exact path. This can be handy with AWS, local file shares, etc.

So if you aren't on CF10 yet, you could put together your own custom CFC, to return the amount of free space, something as simple as:

With the function above, you can run a simple test case such as...

Your dump should look something like this:

Eclipse Trick: Open a Second Window

Recently I found myself thinking, I would like to have a second instance of Eclipse open, or at the very least, be able to un-dock a file and move it to a second monitor. After fumbling around a bit, I found a way to pull this off.

Turns out it was as simple as:

  • Go to WINDOW
  • Click: New Window

ColdFusion 10 has been released

Adobe has just release ColdFusion 10. Looks like the price tag has increased slightly, but I think it is still a great deal.

I have played with the ColdFusion 10 beta for a few months and really like a lot of the improvements. Perhaps the biggest under-the-hood change is that it now runs atop of Tomcat instead of JRun. There is a whole host of new and improved features including the new hotfix installer that is built into the administrator tool.

Check it out:

Bound CFDIV content caching

Recently I had a CFDIV that was bound to a SELECT box with the intent of showing more details about the selected item. The CFDIV was bound to a CFC method which looked up results from the database and returned the results as an unordered list. But as I was working with this, I ran into instances where the data was not changing as expected. I quickly realized I had a caching issue.

I had heard about a similar issue with CFSELECT, and that a solution seemed to be to use

ColdFusion.bindHandlerCache[objectName].call();
but that didn't seem to have an effect on the CFDIV.

I believe that the real problem is in Firefox 7.0.1 and it's internal caching. In fact, I did notice that with the Web Developer Toolbar, if I told it to "disable cache" that I got the expected results. Which is good for me, but I cannot expect the end-users to disable their browser cache, and they shouldn't have to do so. So I came up with a simple method of attaching a timestamp for each call.

First I created a function to capture a change event on the SELECT box, when called it sets the event's timestamp to a form object. See the JavaScript below:

function setTimeStamp(strObj, event) {
if(event.timeStamp) {
var ts = event.timeStamp;
} else {
var ts = new Date().getTime();
}

if(document.getElementById(strObj)) {
document.getElementById(strObj).value = ts;
} else if(document.getElementsByName(strObj)) {
document.getElementsByName(strObj).value = ts;
}
}

Next, I added that function to the onChange event of my SELECT box, then I added a hidden field and populated it with the current timestamp.

<select id="category" onChange="setTimeStamp('my_timestamp', event)">
....
</select>

<input type="hidden" id="my_timestamp" value="#dateFormat(now(),'yyyymmdd')#.#timeformat(now(),'HHmmss')#" />

To finish it up, I altered my CFC method to expect a time stamp parameter, and I altered my CFDIV bind so that it was now bound on the SELECT box and the hidden timestamp.

<cfdiv id="mySubCategories" bind="cfc:lib.categoryMgr.getSubCategories({category},{my_timestamp})" bindOnLoad="true">

So now every time my select box value changes, the field my_timestamp gets updated to the millisecond, and the built in AJAX methods fire the request, and Firefox does not cache the result.

Rumored: Adobe to release info about the next version of ColdFusion at RIACon

According to both Ben Forta and Raymond Camden, it looks like Adobe is set to release some details of a new version of ColdFusion at this August's RIACon outside of D.C.

Check it out:

CF Quick Tip: Display a CFINPUT element from a CFC

Suppose you want to write a helper function in a ColdFusion Component library, that will draw a HTML FORM field for you and you need to do so using a CFINPUT tag. The ColdFusion compiler will complain if the CFINPUT tag is not inside a CFFORM tag inside that function. This can be a problem if you wish to make this a portable function to be used in any number of form's.

There is an easy way to get around this. Wrap the CFINPUT element in a CFFORM with an undefined action. Then use a HTML comment tag around the and tags.

Example:

<cffunction name="drawDateField" output="true" returntype="void">
<cfargument name="fieldName" default="" required="true" />
<cfargument name="dateTime" default="#now()#" />

<!-- <cfform name="foo" action=""> -->
<cfinput type="text" name="#arguments.fieldName" value="#arguments.dateTime#" onBlur="doSomeFancyValidation()" />
<!-- </cfform> -->

</cffunction>

So now, we can use our object on any form in our site that has access to our CFC. It would be a simple call such as:

<cfset objDateLib = createObject("component", "lib.cfc.dateTimeObjects") />

<cfform name="TVScheduler" id="TVScheduler" action="#">
<cfoutput>
Start Date = #objDateLib.drawDateField('StartDate', now())#
</cfoutput>
</cfform>

Be sure to use HTML comment tags and not CFML comment tags. The CFML engine needs to see the CFFORM or it will throw an error. The HTML comment tags will keep your browser from thinking that there are nested FORMs.

CF Quick Tip: Removing Non-Numeric Characters from a string

Suppose for a moment that you have a variable that you want to ensure it only contains numeric data. For instance a telephone, PIN, or credit card number.

ColdFusion makes this extremely simple to using a regular expression with the reReplace and reReplaceNoCase functions, as I will demonstrate below. For those new to ColdFusion the "re" in reReplace and reReplaceNoCase stands for "regular expression."

<cfset variables.myDirtyPhoneNbr = '(555) 222-4444'>
<cfset variables.myCleanPhoneNbr = reReplaceNoCase(variables.myDirtyPhoneNbr, '[^[:digit:]]', '', 'ALL')>

<!--- Now let's display the cleaned phone number --->
<cfoutput>#variables.myCleanPhoneNbr#</cfoutput>
<!--- myCleanPhoneNbr should now be: 5552224444 --->

With a few exceptions, ColdFusion supports Perl compliant Regular Expressions. For more information, check out the online documents at: http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=regexp_13.html

You can test out the removal of all none digits at the link below: Remove Non-Digit Character Example.

Please welcome: hellotecho.com

There is a new technology blog out on the internet, called hellotech.com

The idea behind hellotecho.com is a simple one, it consists of former echo developers sharing war stories and advice on our various areas of expertise and is a way of giving back to the development community.

My friend and colleague Doli Stepniewski came up with the idea. Doli is an incredibly brilliant technologist and I have had the pleasure of working with him both at SmartDM (now Acxiom Direct) and echo (a former TicketMaster company).

Great tutorial website

A good friend of mine and former cohort at echo, told me about this website called NetTuts+ recently. They have a ton of great net tutorials ranging from PHP regular expressions to HTML5 to advanced CSS.

Give them a look: http://net.tutsplus.com/

Don't forget about ColdFusion Custom Tags

Since ColdFusion introduced Components (CFCs) I've seen a lot less mention of custom tags. But it seems to me like there are still good uses for custom tags. One place that comes to mind is your application's look & feel.

For instance a recent project required that I build a security challenge question micro-app for two web applications that utilize the same back-end. Think of it like a "Pro" and "Light" version of the same application. The originators of the web app built two different CF applications to talk to the same database. So with challenge question portion I built a custom tag to wrap all the content, then all of the forms were just simple, plain Jane HTML. Then based on our URL we initiated passed in the look & feel ID to the wrapper. BAM! We have two distinct product views, from one source code.

Moreover this turned into a proof of concept for a larger project the client had on their books. They were planning to integrate the two code-bases into a single code base. However, they originally thought they would have to give up the look and feel of one of the two applications. We have started migrating this concept to the pro-version of the application and will soon begin testing of providing the "light" view on the PRO app.

So if you haven't used custom tags in a while, just keep an open mind that there may be some instances where these could be valuable to you.

Joel S. tells Developers to, "Updgrade your career"

I don't know if you read Joel on Software or not. I think it is certainly worth keeping up with if you are a software developer or an IT manager. His concepts on work environment are fantastic, but not for the faint of companies.

In one of his most recent articles Joel points out that most software developers are unhappy with their job and their work-place environment. You should check it out the article: http://www.joelonsoftware.com/items/2009/11/05.html

I have worked at a number of places as a software developer over the past 10 years. My favorite to date was echomusic (or just echo). Did I have my own private office? No, in fact I gave up an office to take the job. Did I look forward to going into work every day? Yes. Yes I did. Why? Because they treated people well and they had an awesome workplace vibe and respect for each other.

As my own software company grows, I am going to try to mimic things that FogCreek and echo did in order to have a company that people want to work at. In my opinion more companies need to take a similar approach.

FireFox: The stylesheet ... was not loaded because its MIME type, "text/html", is not "text/css".

Recently I ran into an issue with FireFox where it indicated that our CSS file was of the wrong MIME type. The error read:

The stylesheet http://dev.somedomainname.com/css/new_design.css was not loaded because its MIME type, "text/html", is not "text/css".

Our first thought was the MIME type in IIS on this server must not be setup correctly. So we checked that out and it was set correctly. It turns out that the issue was with our DOCTYPE.

The DOCTYPE was:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

But by changing the DOCTYPE to transitional, we were able to get it to load and function correctly.

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

It worked for us. But it is worth noting that even after this change, FireFox and Firebug still displayed a warning about the MIME type.

JavaScript and CSS Classes

For years I have known that one can muck with an object's style using JavaScript and the STYLE attribute of a DOM object. However, I have found this to often be frustrating as the naming convention of the elements is not always the same as CSS. I wondered for a while if we could simply apply a pre-existing CSS Class to an element.

Well it turns out that you can apply a CSS class to a DOM object via JavaScript, via the className attribute.

Here's an example:

<input type="text" id="QA1" name="QA1" value="" class="Answer" />

<InvalidTag language="javascript" type="text/javascript">
// function declaration ...
var QA1 = document.getElementById('QA1');

if(QA1.value.length == 0) {
QA1.className = "AnswerRequired";
// More actions ....
}
</script>

Since I found how to do this a few weeks ago, it has made adding some visual spark to forms in particular, a bit easier. Enjoy!

Hide form items from the Web Developer 1.1.8 plug-in for Firefox

Like a lot of web application developers I develop and test against Firefox first and IE second. I love a number of plug-in's including Firebug and Web Developer.

The Web Developer plug-in has some nice features such as the ability to view all form objects. Recently I discovered that with some simple CSS you can hide a form and its elements from the Web Developer display. Note, any user can still view source and see the form element, but it is still handy if you are concerned about site security. As it happens, I ran into this while working on some security enhancements for one of my clients.

So for the sake of argument let's pretend we have a FORM that is only populated by JavaScript and submitted by JavaScript. All input elements in the FORM are hidden. Something like:

<form id="frmForgotPassword" action="forgotPassword.cfm" method="post">
<input type="hidden" name="username" id="fpUsername" value="" />
</form>

Now using the Web Developer toolbar you go to "Forms > Display Form Details" then the form would become visible. But you can hide it from this view by setting the CSS Display property to NONE.

Example:

<form id="frmForgotPassword" action="forgotPassword.cfm" method="post" style="display:none;">

While this doesn't really increase your sites security any, it is an interesting effect.

fooling around with "plus" addressing

Several month's ago I noticed that one of my webmail clients, SmarterMail, had an option called "Plus Addressing." I didn't have time to look into it at the time, but then I was looking around last night to see if there was an option to create or include a vCard when I send out an email and I ran across this again and decided to take a look at the feature.

For those that do not know, plus addressing allows you to easily create throw away email addresses. Here's an example: somebody+trash@somewhere.com

You see, the portion of the email address between the plus symbol and the @ is ignored by the email server and delivers it to the real account. On some email clients, like SmarterMail, you can specify that the item after the plus should be treated like a folder and that items should be moved to said folder if it exists. So in the example above it would land email into the trash folder.

YUI DataTable and Non-US Currency Formats

Recently I have been adding in localized currency formatting to the echotools platform. In most cases I can use the Zend Framework, Zend_Currency to handle most of the heavy lifting. However, we are starting to use the YUI DataTable more and more often, and one such page had me scratching my head trying to figure out how to display a non-US currency in a sortable column.

You see when the columns are not sortable, we can easily treat the column like it is a string, and simply pass in the value with say the British Pound (GBP) symbol or the Euro symbol. But as soon as you want to sort on this column you run into issues. If you set it to a string, then 14.95 comes before 2.50, and that's no good.

If you have ever setup a DataTable, then you probably know that can provide a formatter for the table column, which we had set to currency. When that is the case, YUI defaults to the US Dollar (USD) format. Getting it to show GBP or Euro takes a little work. After a bit of digging around I found that you can modify the currency options as part of your table configuration. Below is an example:

For more details on YUI DataTable options, follow this link to Yahoo's developer network: http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html#config_currencyOptions

PHP preg_replace() no longer matching, when it once did

Recently I ran into a case where a PHP preg_replace was no longer matching on a condition. After nearly pulling my hair out, I discovered that the problem was that the subject now had newline characters in it.

In this particular instance, I was replacing part of a SQL statement, so my preg_replace looked something like:

$insertSQL = preg_replace('/SELECT (.*) FROM/', "INSERT INTO...", $sql);

The above should replace everything between the "SELECT" and the "FROM clause. As it turns out, there were newline characters after each database column listed, and this cause the PHP preg_match to fail. After stripping the newline characters, the code was matching and replacing as expected.

I'm just glad we caught this during our test cycle before our next big release, as this is part of a feature that is used quite frequently by the sales team.

YUI DataTable doesn't render in IE7

Recently I ran into an issue where we were using a YUI DataTable that worked great in FireFox, Safari and Opera, but when it came to IE 6 & 7 it was a different story.

Our code page was originally rendering the data from a JSON feed. But as I attempted to diagnose, I decided to have PHP render the data into a HTML Table, and change the expected data type to TYPE_HTMLTABLE. Still I continued to have issues, only now in FireFox and Safari, both the HTML table and the YUI DataTable were showing, but IE would only show the HTML table.

After a few more hours of hair pulling and eye straining, I discovered the problem. It turns out that the code page included a header and footer. As it turns out, the header, opened a HTML Table and the footer closed that table. That said, no where in my code page did it open a table row and table cell. So once I wrapped my code in a TR/TD set, low and behold it worked as expected in all of the major browsers.

Below is a condensed version of my final solution.


<?php echo $this->render('header.phtml'); ?>

<!-- The header.phtml ends with a table tag, but does not open a row, be sure to add it -->
<!-- Open up a table row and table cell, otherwise the YUI datagrid will not display correctly -->
<tr><td>

<!-- Assume there are links to YUI controls here -->

<div id="markup" style="width:850px; text-align:center;">
   <table id="data" width="100%" border="0" cellspacing="0" cellpadding="1" class="itemList">
      <thead>
         <tr class="itemListTitle">
            <?php foreach($this->columnDefs as $columnArray) : ?>
               <td><?php echo $columnArray['label']; ?></td>
            <?php endforeach; ?>
         </tr>
      </thead>
      <tbody>
         <?php foreach($this->importData as $importArray) : ?>
         <tr>
            <?php foreach($this->importSchema as $colName) : ?>
            <td><?php echo$importArray[$colName] ?></td>
            <?php endforeach; ?>
         </tr>
         <?php endforeach; ?>
      </tbody>
   </table>
</div>

< S C R I P T type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function() {
   YAHOO.example.EnhanceFromMarkup = new function() {
      var myColumnDefs = [
            {key:"id",label:"Import",sortable:true},
            {key:"category",label:"Category/Name",sortable:true},
            {key:"uploaddate", label:"Upload Date",sortable:true},
            {key:"uploader",label:"Uploaded By",sortable:true},
            {key:"list",label:"Mailing List",sortable:true},
            {key:"checks",label:"Import Progress",sortable:true},
            {key:"status",label:"Status",sortable:true}
         ];
      

      var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("data"));
      myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
      myDataSource.responseSchema = {
         fields: [ {key: "id", parser:"number" },
      {key: "category" },
      {key: "uploaddate" },
      {key: "uploader" },
      {key: "list" },
      {key: "checks" },
      {key: "status" }
   ]
};

      var oConfigs = {
         paginator: new YAHOO.widget.Paginator({rowsPerPage: 10}),
         sortedBy: {key:"id",dir:"desc"}
      };

      // Load the datatable       var myDataTable = new YAHOO.widget.DataTable("markup", myColumnDefs, myDataSource, oConfigs);
      
   };
});
</script>

<!-- Close the Outer Table Row -->
   </td>
</tr>

<?php echo $this->render('footer.phtml'); ?>

PHP Whois

I wanted to throw a shout-out for PHP Whois. I used them recently for a dashboard widget in a project. This is an extremely handy PHP library. You can check them out on SourceForge at: http://sourceforge.net/projects/phpwhois/

In particular I like how it returns an array of the data, and it is quick and easy to pull out the portions you may need. Additionally it includes a really good example, along with a nice HTML format, straight text output, or a view of the PHP array.

Warming up to ZendFramework

Over the past few weeks we've been busily porting echoTool's to using Zend's MVC pattern. I'm digging the MVC pattern and it is starting to make some portions of the Zend Framework, that I originally found odd, to make a bit more sense.

For my part, I've done some nifty things with JSON and our dashboard system on the home page. We're in a heavy testing phase right now, but one we launch, I believe our systems will be more nimble.

Why no timezone info?

I've been working with MySQL 5.x for several months now, and I'm confounded by the fact that the datetime data-type does not allow us to include timezone information.

For my current project this has been a big deal as I am in the process of adding in the ability to handle multiple timezones as part of our efforts to take EchoTools global.

For us, our product and servers started out based in US Central Timezone. Had MySQL been capable of storing the UTC offset, it would make a lot of our conversions much simpler. As it is, we must take special care whenever a user enter's a date, say to schedule an email drop, to ensure that the date and time are converted from their timezone to our server's timezone and stored.

It's a bit more work than one has to do with some more mature database engines. Is it horrible, no. Just something to be wary of.

PHP's iconv function

On a recent project, I found myself working on a tool to "preview" email. The idea is that once you have created your email, you want to see what it will look like. While running tests utilizing non US-ASCII characters, I ran into some rendering issues. The window itself was set to display using a charset of UTF-8, but the HTML version of the email was rendering as ISO-8859-1 once converted to text.

I believe that the real issue was that our development database was not set to accept UTF-8 characters. However, not wanting to run into a similar issue in the production environment, I went looking for a way to convert the text. What I found was PHP's iconv(). This did the trick.

Here's an example of how you might use it:

<?php
// Some Spanish to play with.
$strIn = "comenzó a cantar desde niña en la estación de radio local y en un programa de televisión";

// First let's convert the value of $strIn to the target encoding
$strOut = iconv("ISO-8859-1", "UTF-8", $strIn);

// iconv() returns FALSE if unable to translate
if($strOut == FALSE) {

// Could not convert, so set $strOut to $strIn
$strOut = $strIn;

}

echo "<div>".$strOut."</div>";
?>

Great blog on international address web forms

I ran across this blog today while doing some research for a internationalization project I'm working on. It is worth a read if you are trying to decide how to handle international addresses.

http://www.uxmatters.com/MT/archives/000295.php

An example of when Not to use a User Defined Function

First and foremost, I love user defined functions and think that they are one of the best features of ColdFusion and SQL Server. Custom functions are fantastic....

... until they are used in the wrong fashion. This is typically a sign of either inexperience or lack of fore thought on how the application would grow.

Recently I ran across a project that made poor use of UDFs. Briefly, the project has a function that when passed in a office location id, it queries the database and return the name of that location. Its a simple little function and when editing one record at a time is quite effective.

But what happens when you want to show a list of all employees and their office locations? Well if you were to loop through a recordset of your employees and while doing so you called this particular function, you would end up re-querying the database for each and every employee. In fact, that is exactly what was happening on this page. Did I mention that we had roughly 600 employee records (that's another story) on this page?

In this case, this was very poor programming. The page ran 601 queries against the database, when the results could have been gathered in 1 query. You see the employee table had the office location id, so a simple JOIN against the Location table provides us with the name of our location.

Moreover, calling the function on each iteration of the employee recordset resulted in the page taking a minimum of 625ms to return and sometimes much longer. Whereas by removing the call to the function and altering the query to perform the JOIN, the page now routinely loads in under 80ms.

Where do you shop for Technical Books?

Often times I hear developers complaining about the high cost of technology books. I'm right there with them. So many of the books feel over priced. In particular, you hate to buy one only to find out as you dig into it that it really isn't what you were looking for.

So what do I do? Well for starters I buy the majority of my computer books at BookPool.com. They always have good prices and they run great specials throughout the year. I have bought books from them since 2000.

In fact, I will even tell you that they do not currently have a ton of customer reviews and ratings on their books. Because of that, I often look up the books at Amazon, then compare the price at BookPool. In most cases BookPool beats Amazon's price.

As for is this book really what I'm looking for. Well unless you have a local book store that happens to have the book in stock, its hard to say. But at least with BookPool, you can save some bucks.

Disclaimer: I use BookPool's service on a regular basis and am just passing word on to my fellow software developers and tech heads. I have not been paid for this endorsement.

ColdFusion 8.0.1 Now Available

Just in case you haven't heard already, Adobe released ColdFusion 8.0.1 yesterday. It adds 64 bit support for most platforms, provides updates to several of the Ajax engines (YUI, EXT JS, Spry), an update of FCKEditor, and addresses a number of issues.

Check out the Release Notes at: CF 8.0.1 Release Notes

Slow page load in Firefox and Safari, but not IE and Opera?

Recently I was asked to look into an issue for a Macintosh user, using Safari. It seems that some of the pages on one of my clients sites was not loading very swiftly. As I started looking into the issue I decided to take a baseline using Internet Explorer 6 on a Windows XP box. Then I moved to Firefox. When I got to Firefox, sure enough several pages were taking more than a minute to load, in some cases more than 3 minutes. These sames pages loaded in under 20 seconds using IE and Opera.

Next I fired up a Macbook and took a look at the same site using Safari. Low and behold I had the same issue as Firefox on my Windows box. So I decided to test the site with Firefox and Opera for Macintosh, and again Firefox was slow and Opera was fast.

To add to the problem, I found that testing the development versions of this site ran without a problem in all of the browsers. So I started thinking of what differences existed between the two environments. The biggest difference being that production has an added network appliance that validates you are allowed to access the page you have requested. But even with that in mind the question remains, why would IE and Opera be able to request and receive a response quicker than Firefox and Safari?

As it turns out, I happened to notice that some of the URLs a user would click on were open-ended directories.

Example:

<a href="http://localhost/Reports" >Reports</a>

However, if I were to change that link to be:

<a href="http://localhost/Reports/" >Reports</a>

Notice that I added a / after the directory named "Reports".

After making the change, the page loaded in seconds on all of four browsers. While I have not confirmed it yet, I suspect that part of the problem is related to how each browser sends the HTTP Request, and that part of the problem was with the network appliance.

BlogCFC was created by Raymond Camden. This blog is running version 5.8.001.