Christopher
Stoll

Web Page to Test Web Pages

This past weekend I rolled out a major upgrade to one of the intranet web applications I maintain at work. The main purpose of the upgrade was to change the scope of the application. It was originally designed for use at one facility, but because of it's effectiveness, the business wanted to start using it at all of our facilities in North America. The catch was that each facility's data needed to stay isolated. When we last upgraded the application two years ago we thought that this might happen, so the structure for this was mostly in place and therefore the number of changes were mostly in the user interface as we exposed the new functionality.

Anytime I make changes to web user interfaces I worry about data validation and the impact on the user experience. We try to catch data entry errors up front and we also check again before posting to the database, but I worry that something will slip through. I have two main concerns with this. First, are we restricting the data that the users enters based on the type and size of the fields in the database. And, second, are we properly cleaning up the data for the database and for proper viewing in the future.

Our intranet applications are developed in a development environment and then migrated into a testing environment before finally being placed into production. Once a new version is available for testing I always solicit the application's owner to test it (each application has an owner from the business). But, they normally focus on the changes that they requested, ensuring that our implementation meets their desires. Because of this we have historically found bugs in the production environment caused by edge cases, and now we do a lot of manually testing for these cases.

I have seen some applications for assisting in the testing of websites, but most of them require some sort of external tools. Many seem to be based on recording and playing back situations. This approach is understandable, but I want something more automated. I don't want to miss a check on a new field because we forgot to add it to the checking macro.

I have been looking for a simple, automated tool with minimal requirements that could assist in test our intranet applications. I was thinking that it would be nice to have a web page that loads up the target application, maybe in an iframe, and then runs some rudimentary tests. Then, I could have a co-op load up this testing web page and run the tests it recommends as the application is navigated from front to back. Instead of containing the page in an iframe, it could somehow load a special JavaScript into each of the pages for the target application. Regardless of the implementation, I want something that proactively checks the current page for possible errors and automatically fills in fields with values that would stress test the submission mechanisms.

I have yet to find a tool that performs in this manner, and am considering writing one if subsequent searching turns up nothing.

continue reading


Online Web Development References

When I first switched from MooTools to jQuery for my primary JavaScript framework I made the comment that I liked the MooTools documentation better. It seemed that mootools.net/docs/ provided faster navigation than docs.jquery.com. However, I have since found api.jquery.com, which provides very quick access to relevant API documentation. In light of this discovery I have revised my opinion and now prefer jQuery's documentation.

I wanted to share this new discovery (api.jquery.com) and also mention some other great online web development resources that I use on a regular basis.

Mozilla Developer Center
The Mozilla developer center has a wealth of information for web developers. There are references on everything from AJAX to XUL. I frequently find myself searching the CSS reference and the JavaScript 1.5 Guide.

Color Scheme Designer
I have used this tool for a long time. I am more of a programmer than a graphic designer, so it is not that easy for me to pick out great color combinations, which is where this application comes in. You can save schemes that you design by saving a link to the specific scheme (here is a scheme I like).

w3schools.com 
I have used the reference that they have for years because it quickly shows me the tags or properties that I am looking for. They also have many examples and tutorials.

continue reading


Web Application Server Migration

We recently updated one of our intranet web servers, and had to migrate all of the web applications that it supported over to the new server. Setting up ColdFusion and getting the applications running on the new server was no problem, but updating all the links to them was. Unfortunately, the original server was referenced by name rather than an alias. I could have tried to preserve all the links and rename the new server, but I decided that it would be a good time to set up an alias for this resource.

I wanted to make sure that all the users would be redirected to the appropriate application on the new server. So, I used the following technique to accomplish that. For each ColdFusion application I put the following two files in the old application root directory.

Application.cfm
<cfinclude template="index.cfm">
<cfabort>


This will load my index.cfm template file regardless of the url used and then abort. The index.cfm file is a very basic file with a redirect after ten seconds.

index.cfm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>This page has been moved!</title>
<META HTTP-EQUIV=REFRESH CONTENT="10; URL=http://webapps.intranet.company.com/ApplicationName/">.
</head>
<body>
<div style="text-align:center;">
<br />
The server servername.company.com has been replaced by webapps.intranet.company.com<br /><br />

Please be sure to update any bookmarks that you may have to this page.<br /><br />
<a href="http://webapps.intranet.company.com/ApplicationName/">
Click here if you are not automatically redirected in 10 seconds.</a><br /><br />
For futher assistance please call the IT service desk.
</div>
</body>
</html>

continue reading


Google Chrome Portable

Since I do web development at work I wanted to be able to test some of our internal applications under Google Chrome. My company strictly uses Internet Explorer, but I like testing my applications outside of IE so that I can be sure that they will work properly if the company ever decides to change it's strategy. I already use FirefoxPortable for testing, but I would like to use Chrome also.

The problem is that software downloads and installations are strictly prohibited. I can get past the installation limitation since I am in IT, but the proxy rules are firm. And, the Google Chrome installer that I downloaded seemed to grab other files from the Internet, so I couldn't just download the installer and bring it in on my USB drive. I was considering finding all the installer files in attempt to bring them in and install them, but I thought that it might be easier to use a portable version.

I tried using the portable version of Chrome from Caschy, but it seemed to be an earlier version that still had some bugs. At that point, I decided to see if I could create my own portable version, then I could make sure it was using the current official files. I'm not concerned with creating a completely portable version that leaves behind no traces, just a version that I can run at work. I was able to do so quite simply, so I am sharing those simple steps.

First, I installed Google Chrome on my home PC.

Next, I navigated to "%USERPROFILE%\Local Settings\Application Data\Google\Chrome\" and copied the folders found there to the PortaChrome folder I created on my thumb drive (e.g. "%USB_DRIVE%\PortaChrome\" -- this could be any folder where you want to place the portable version).

Then, I navigated to "%USB_DRIVE%\PortaChrome\Application\%VERSION%\" and copied everything there except the Installer folder up one level to "%USB_DRIVE%\PortaChrome\Application\". I then deleted the %VERSION% directory, but this isn't strictly necessary.

Finally, I navigated to my PortaChrome directory ("%USB_DRIVE%\PortaChrome\") and created a command file named "chrome.cmd". In that file I have one command (all on one line, in case it is wrapped below):
start Application\Chrome.exe --user-data-dir="..\User Data"
Now I can test my applications under Google Chrome, even inside our rigid corporate environment.

If you decided to follow my directions you do so at your own risk. I don't think that Google intended the application be run in this manner, so you could inadvertently be opening yourself up to Internet threats or data loss risks. I'm not saying that you will, I'm saying that I don't know. I am only using it for testing, so data loss is not a great concern. And, I am running this inside of a corporate firewall, so threats from the Internet are reduced for me. I make no warranty.

Comments (newest first)

Christopher Stoll
You should be able to change the profile folder by starting Chrome with the --user-data-dir switch: chrome --user-data-dir="D:\PortaChrome\UserData"
Anonymous
the user profile folder is always saved onto the desktop. is there a way to change so that it saves to the USB Drive?

continue reading


Add Link to Selected Text in Textarea

I recently received a request to modify one of our intranet applications so that users would have any easy way of inserting links into a textarea. Due to how we use the data in the text area I didn't want to implement a full WYSIWYG editor, so I had to come up with another solution.

The users that will be adding links are power users, but they understandably didn't want to insert the links manually. They also wanted to select from a list of links that are defined in a different part of the application. So, I just added a little bit of code that shows a select box with all the possible links when text is selected in the textarea. When the users selects a link option, the textarea is updated to contain the HTML code necessary to display a link that opens in a new window.

Below is the code that I use to get the selection and insert the link. It is somewhat crude, yet effective.


<script type="text/javascript"
        src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    /**
    * Gets the start and end position for the selection
    * @param {string} pSelectArea The texatarea
    *        to get the selection from (jQuery selector)
    * @return An object with the parameters start and end
    * @type object
    */
    function getSelectionRange(pSelectArea){
        // if we are in IE
        if(document.selection){
            var tBookmark = 
                document.selection.createRange().getBookmark();
            var tSelection = 
                $(pSelectArea).get(0).createTextRange();
            tSelection.moveToBookmark(tBookmark);

            var tBefore = 
                $(pSelectArea).get(0).createTextRange();
            tBefore.collapse(true);
            tBefore.setEndPoint("EndToStart", tSelection);

            var tBeforeLength = tBefore.text.length;
            var tSelectionLength = tSelection.text.length;

            tSelectStart = tBeforeLength;
            tSelectEnd = tBeforeLength + tSelectionLength;
        }else{
            tSelectStart = $(pSelectArea).get(0).selectionStart;
            tSelectEnd = $(pSelectArea).get(0).selectionEnd;
        }
        return {start: tSelectStart, end: tSelectEnd};
    }
    
    /**
    * Inserts a link into text between a start and end point
    * @param {string} pText The text to insert the link into
    * @param {string} pLink The link to insert
    * @param {integer} pStart The starting location
    * @param {integer} pEnd The ending location
    * @return The new text with the link
    * @type string
    */
    function insertLink(pText, pLink, pStart, pEnd){
        tText01 = pText.substr(0, pStart);
        tText02 = "<a target='_blank' href='" + pLink + "'>";
        tText03 = pText.substr(pStart, pEnd-pStart);
        tText04 = "</a>";
        tText05 = pText.substr(pEnd);
        return tText01 + tText02 + tText03 + tText04 + tText05;
    }

    var selection = {start:0,end:0};
    
    // when a selection is made grab the
    // range and show the link select
    $("#MY_TEXTAREA").select(function(){
        selection = getSelectionRange("#MY_TEXTAREA");
        $("#MY_SELECT").fadeIn(1000);
    });
    
    // when the select changes add the link
    $("#MY_SELECT").change(function(){
        if(selection.end>selection.start){
            var tNewText = insertLink(
            $("#MY_TEXTAREA").val(),
                $(this).get(0).value,
                selection.start, selection.end);
            $("#MY_TEXTAREA").val(tNewText);
        }
    });

});
</script>

Comments (newest first)

Alisa
I like the easy way of inserting links that you made. You can also make something like a button. Anyway, great piece of code!
yainbowl
Click on the New Text Area button on the toolbar, text_new_text_area_button.png.
You can also select Insert > New Text Area from the menu.

continue reading


Leader in Technology: Government?

Ronald Reagan once said, "The best minds are not in government. If any were, business would hire them away." But, I'm not so sure that holds completely true. When it comes to adopting more efficient information technologies, it seems that government is leading the way, at least when compared to private organizations of similar size.

Where I work I have advocated the use of more efficient technologies, or technologies that present the best value to the company. In order to conserve money in these difficult times I have suggested switching to either open source technologies or cloud computing solutions. But, so far my ideas have been brushed aside as being too radical or too risky. In fairness, I didn't invent the ideas that I have presented. I just advocate the use of technologies which I have seen successfully implemented elsewhere.

I just recently read about how the French National police have saved millions by switching to Ubuntu from Windows. The organization had previously stop using Microsoft Office products in favor of the more economical OppenOffice, so they were familiar with open source software. Originally planning to upgrade to Vista, they decided on switching to Ubuntu because of the dramatic costs savings. They plan on moving all of their 90,000 computers to Ubuntu Linux by 2015. Their goal for this year alone is to migrate 15,000 computers from Windows to Linux, and have completed 5,000 so far. In general it would seem that the French government is serious about reducing IT costs through adopting open source technologies, they have multiple federal agencies using those types of technologies.

There are signs of change here in the United states as well. As CTO of Washington D.C. Vivek Kundra successfully implemented the use of Google Apps, an application-domain cloud computing service. Those actions not only saved the district hundreds of thousands of dollars, but also increased the efficiency and transparency of the organization. And now that visionary leader is the nation's CIO, so I look forward to broader applications of open source software.

Open source software has been used by the federal agencies in the United States for a while now, but it has mostly been limited to high-tech sections of government. The NSA has developed their own enhancements to Linux in order to create an ultra-secure computing environment. The FBI uses LAMP (Linux, Apache, MySQL, PHP/Perl/Pthon) to power their emergency response network. The Library of Congress uses Linux clusters to digitize the historic documents collections. And NASA was probably the first to adopt the use of open source software, they used Debian Linux to control space shuttle experiments on mission STS-83 in April of 1997. With Mr. Kundra in charge of national IT we may see the use of open source and cloud computing expand greatly.

I do see some open source software being used in business, but it is usually by engineering groups and not officially sanctioned by IT. Our IT organization does not posses the necessary skill sets to support technologies like Linux. I would suggest that if business leaders want to reduce their information technologies expenditures without reducing service levels, they should seek out IT leaders who are familiar with alternative technologies and not afraid to break the status quo.

Government has a bad reputation for being inefficient, but at least from a technology perspective that does not really seem to be the case. It looks as if governments around the world are adopting efficient, best-value technologies at a faster pace than private sector organizations. If the best minds are not in government, then they must be hiring the best consultants.

continue reading


Strange Text Messages Decoded

Occasionally I will receive some unusual SMS messages on my cell phone from numbers that I don't recognize. Some of the text messages seem to be questions, while others are locations or cryptic statements. At first I thought that they could be some sort of SMS spam. Latter I started to think that my phone number might just be similar to that of some very popular person, and their friends were mistyping the number. In any case I would just delete the message and not think much of it.

Today I received the message "define: paraphyletic". Then it finally struck me that I must have a number that is similar to one proved by some sort of SMS answer service. Sure enough, if you type Google on a phone, the numbers are 466453. If another number is accidentally inserted in the right place, it becomes my phone number.

Now that I know this I can have some fun with people who mistype Google into their phone.

continue reading


iBlogger for iPhone

I just downloaded iBlogger for my iPhone today, which is where I am writting this post from, and I have some mixed feelings about it. So far it has functioned as advertised, yet it has some quirks.

It is definitely better than posting via email. I always seemed to have problems with line breaks when posting from email, so this is step in the right direction. The editor works well. I don't mind the lack of horizontal typing, but that has never really been my preference. And, due to the limitations of the mobile interface, you can't format your text (font size, bold, etc.), but that isn't the applications fault. This is also probably why XHTML markup is shown when editing existing posts. One other limitation for Blogger users is the inability to post photos.

So, it does work well for new posts. Working with old posts is problematic. When it initially loaded my existing blog posts, it took the load time and date rather than the time and date the article was actually posted. So, posts from a week ago were dated today. I thought that this was no big deal, but when I edited a post it saved that date and time instead of the original (or even instead if the current). Therefor, when I corrected a typo in a post from last week it changed the time to this morning, effectively making it the most recent post.

One other curiosity is on the blog posts screen. The scrolling is not fluid, it's slow to scroll and feels like it must be doing a lot of work in the background.

I do like the ability to add tags, the interface is clean and efficient. There is also a neat feature that allows you to create a link to Google maps of your current location. And there is an option to automatically add a signature, though the default signature contains a link to the iBlogger website, which is a mild irritant for a paid application. The signature is enclosed in a div, so I think that you could customize the style of it.

You can also add links. It is a little awkward to use, but it gets the job done. It seems to add the links at the bottom, so when you are editing an article you would want to exit edit mode at the spot where you wanted the link. Add the link and go back into edit mode and clear away the unneeded spacing.

In conclusion, I think that I will continue to use iBlogger to add new posts when I am on the go, but I am hesitant to use it for updating existing posts due to how it changes the timestamps.

continue reading