Learning Coldfusion in 2017

If you’re a young programmer like me, chances are you’ve never worked with ColdFusion before. As a 19 year old programmer in 2017, I have worked extensively with Python, and heard about many other popular programming languages such as C, C++, PHP, Java, JavaScript, R, C#, HTML, and Swift. But until I started interning at Matrix Group, ColdFusion was nowhere near my radar, and it felt random.

At my first look at ColdFusion code, it looked like a mess of colors, words, and symbols. After learning the basics of the language, I figured out how to output statements, set variables, create and evaluate functions, manipulate numeric values and strings. Yet, the code was still a mess that I could not make sense of.

In the midst of struggling with syntax and usage errors, what I found was lacking in ColdFusion was FAQs. It was difficult to find examples of code that caused or resolved errors, and there was not an expansive online community of users, like many of the other programming languages have, that would lend value and importance to the language. This was not a surprise considering its current use and absence of adoption.

However, the support that was available was remarkably clear and helpful! The ColdFusion documentation was easy to navigate and easy to understand as it documented changes through all its version updates – Adobe did a great job with that! There were even many blogs that aimed to teach ColdFusion from the basics.

I realize now that the greatest challenge was really in understanding the structure of the code I was working with. ColdFusion requires certain “setting” files and “main page” files that are integral to the functionality of the language – it brings the entire program together. This hierarchy can be tedious, and in my circumstance it was intense! But, it was also the key to finally recognizing the purpose of ColdFusion which further led to a deeper understanding of how it worked.

From its simple function as a scripting language, to the functions it offers as a programming language, to its ability to elegantly interpret a language similar to JavaScript in cfscript, ColdFusion is highly versatile; I can only appreciate it.

Anyone my age has probably never heard of ColdFusion. In fact, many people in the generation above mine have not heard of it. However, it was used when the internet was booming. It was the popular choice, and hence, there are many companies that have maintained their ColdFusion applications to this day. A few days ago, I was on NASA’s website. I happened to take a look at the URL and noticed that it ended with “.cfm”. HA! And right there and then I knew exactly how the site was running! It was a lightbulb moment.

At the end of this journey, I am grateful for the exposure to ColdFusion – I probably would not have had the opportunity, or realization of the language otherwise. As the language is a “fusion” of HTML and JavaScript, this was a perfect introduction and immersion in both.

As a suggestion to millennials in tech out there, don’t let ColdFusion get under your radar! The internet and technology has been, and will continue to be, a journey. The development and use of ColdFusion was an integral stepping stone as it integrated an easy way to connect HTML, databases, custom features, and other languages such as JavaScript. It helped me realize its influence during its origin in the 90’s and thus the need for such specifications in programming. Maybe you will discover another.

Did you recently learn to work with ColdFusion? What were your initial reactions?

Alan Gunn

Programmer

Tracking To Do Items In CF Comment Code using CFEclipse TODO

CFEclipse TODO tasks and custom tasks

While developing applications I’m always dumping code to the screen in order to troubleshoot, and CFEclipse TODO makes this more convenient for me.

The TODO feature allows you to track items on your “to-do list” in the comments of your code.

Example of CF comment code

In the task-list view, you can track and view any comment that contains the string TODO:. From the task view you can double-click on the task, and the relevant file will open up in the editor.

CF Task list

Another powerful feature with CFEclipse tasks is the ability to create custom tasks. I’ve created a custom task, CFDUMP:, with a high priority (Note the red exclamation point in above task list).

As in the case of TODO:, you can track and view in the task-list view any comment that contains the string CFDUMP:.

CF Comment string

Now I can keep track of all the code dumps I have in my code, which lets me remove them before an application is passed off to the client for review.

I hope this quick review makes it easier for you to start creating and tracking your tasks.

Summer Intern

The Psychology of Web Response Times

Hi!  I’m David Reich, and I’ve been interning at Matrix Group for the summer. I’ll be writing a post summarizing my experience here before I leave, but I’ve still got a bit more time, so today I’m posting some slightly more technical content. clock close up

One of the most interesting things I did for my internship was research. A few times, I was assigned to study and summarize certain aspects of web development.  This meant I got to learn about both my research topics and, just as usefully, how to write professionally.

Recently, I did some research about design and psychology of response times in application development. Not just web app development, either – the principles that apply to Matrix Group’s products are just as applicable to other types of interaction between humans and systems like games, telephones, or even conversations.

Temporal Cognition: how long is too long?

When interacting with a well-designed piece of software, the user enters into a ‘conversational’ mode with it. Users receive useful responses just as quickly as in a verbal interaction, and feel just powerful as when manipulating physical tools. The application moves at the same speed they do, and never interrupts their thought processes, so they can reach a productive state of ‘flow’.

That’s for a well-designed application. What, then, is the quantitative difference between software that works with the user and software that breaks their concentration? In 1993, Jakob Nielsen described three boundaries that separate the two. George Miller, 25 years before, went into greater detail with a similar conclusion. In the context of user-interface design, that research might seem ancient, but in psychology it isn’t. People today have the same temporal cognition that they did forty years ago. Miller’s research isn’t outdated; it’s categorical.

First Boundary

Nielsen’s first boundary lies at 0.1 seconds.

A tenth of a second: this is time that it should take for a character to appear on the screen after being typed, for a checkbox to become selected, or for a short table to sort itself at the user’s request.  When it takes less than a tenth of a second for the user’s command to be executed, the user feels like they’re in direct control of the software – as direct as flipping a light switch or turning a doorknob.  People won’t even register waiting times of less than 0.1 seconds.  If an application takes half a second to run a JavaScript function, though, users will perceive the computer taking control.

Second Boundary

The second boundary is at 1 second according to Nielsen, but 2 seconds by Miller. In either case, it’s the point at which the user is in danger of losing their productive sense of flow. When the user is forced to wait for less than 2 seconds, they’ll notice a delay, but it probably won’t feel unnecessary or distracting. For delays between 0.1 and 2 seconds, a progress indicator is unnecessary, and might even be distracting.

Third Boundary

Neilsen and Miller also disagree over the time of the third boundary. Nielsen puts it at 10 seconds, and Miller at 15. This third boundary is the point when the user loses focus on the application and shifts their attention to something else. It should be avoided whenever possible. Times in between the second and third boundaries – between 2 and 10 seconds – should have some sort of progress indicator.  A spinning cursor is appropriate for times in the lower end of that range. For times above 10 seconds, assume that the user’s focus on their task has been lost, and that they’ll need to reorient themselves when they return to the application. A progress bar that either estimates the percentage of completed processing or provides some feedback about the current task is vital. Waiting times of longer than 10 seconds should only be used when the user has just completed some task, and the user should be allowed to return at their own convenience.

Key Landmarks

Those three boundaries – 0.1, 1, and 10 seconds – are the key landmarks of responsiveness for web applications. I would attribute Nielsen and Miller’s disagreement over precise numbers to the vagueness and context-dependency of the entire question. Nielsen’s numbers, powers of ten, are prettier and easier to remember, but Miller’s may be more psychologically accurate.

A lot of this sounds very academic and theoretical, but it could be meaningful for success of a web-based business: according to WebPerformanceToday.com, 57% of consumers say that they’re likely to abandon a page if it takes more than three seconds to load.

Sources:

Do you agree with these studies? How long do you wait for a task/web page to complete or load?

James Wood

Programmer

Random result from query

Recently, I was upgrading some code and we needed to pull a random result from a table. Not thinking about the SQL server version I went ahead and created a query using common table expression (CTE).

It looked like this (the real query has proper column and table names!)

WITH cte AS
(
    SELECT TOP 1 id FROM table ORDER BY NEWID()
)
SELECT
	table.id,
	table.id2,
	table.column1,
	table.column2,
	table.column3,
	table.column4,
	table2.column1
FROM
	cte
INNER JOIN
	table
ON
	table.id = cte.id
INNER JOIN
	table2
ON
	table2.id = table.id2

Super, I thought. It works great on our development server and boy is the code a lot simpler than before.

I moved it live and it didn’t work. We had SQL 2000 on live and CTE wasn’t introduced until 2005…

…So back to the old code. But surely I could improve on the old code and looping through result. Yes, I could :)


<cfquery datasource="datasource" name="qryRange">
	SELECT
		id
	FROM
		table
</cfquery>

<cfset listIds = valueList(qryRange.id) />
<cfset randNum = RandRange(1, listLen(listIds)) />
<cfset selectID = listGetAt(listIds,randNum) />

<cfquery datasource="datasource" name="returnQuery">
	SELECT
		table.id,
		table.id2,
		table.column1,
		table.column2,
		table.column3,
		table.column4,
		table2.column1
	FROM
		table
	INNER JOIN
		table2
	ON
		table2.id = table.id2
	WHERE
		table.id = <cfqueryparam cfsqltype="CF_SQL_INTEGER" value="#selectID#" />
</cfquery>

The main areas that I improved was that before, it was just using the record count of the number of records returned from the query and getting a random number from 1 to the record count and looping until it go to that ID.

Problems happen if something has been deleted from the table and there isn’t an ID for the random number. Also, it wouldn’t ever select a result if the ID was a number larger than the number of records in the table.

Once we upgrade to a newer SQL I’ll use the better code, but for now this is a vast improvement.

Hope this helps someone.

James Wood

Programmer

Responsive page development

Here at Matrix Group, most of the design work we’ve been doing is responsive. Being a developer and not a Front End Developer (FED) or designer, I didn’t really have as much exposure to it.

Recently, I had the opportunity to redo a page where I wanted 3 columns on my wide screen monitor, but knowing that other people have smaller laptop monitors, that would mean some very squished data.

So along came responsive to my rescue.

Because I wanted to learn how this worked, I did some research which helped me out. Here’s how to solve this issue:

Add this line in to the head of the page

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;

Then in your CSS, assign styles to the appropriate page widths using @media, which acts like an if/else statement.

So for example if your screen size is greater than 768px but less than 1120px you would have the following line
@media only screen and (min-width: 768px) and (max-width: 1120px) {
/*You would put in your styles here*/
}

You can put any style in including only showing certain things like a “close” link so that you can collapse a div.

For a super simple example take the following code and play around with it. I put inline styles so that you can just see the outline of the divs.

Have fun :)

Responsive.htm

&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;

&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Responsive Page&lt;/title&gt;
	&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
	&lt;link href=&quot;responsiveStyles.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div id=&quot;container&quot;&gt;
	&lt;div id=&quot;leftContent&quot; style=&quot;border: solid 1px #000; height:300px; margin-right:5px;&quot;&gt;
		&lt;div id=&quot;closeLeftDivLink&quot; style=&quot;float:right;&quot;&gt;Close&lt;/div&gt;
		This is the left content
	&lt;/div&gt;

	&lt;div id=&quot;middleContent&quot; style=&quot;border: solid 1px #c0c0c0; height:200px; margin-right:5px;&quot;&gt;
		&lt;div id=&quot;closeMiddleDivLink&quot; style=&quot;float:right;&quot;&gt;Close&lt;/div&gt;
		This is the middle content
	&lt;/div&gt;

	&lt;div id=&quot;rightContent&quot; style=&quot;border: solid 1px #cc0000; height:200px; margin-right:5px;&quot;&gt;
		This is the right content
	&lt;/div&gt;
&lt;/div&gt;

&lt;div style=&quot;clear:both;&quot;&gt;

&lt;/body&gt;
&lt;/html&gt;

responsiveStyles.css


/* anything larger than 1120 */
#leftContent {
float:left;
width:30%;
}

#middleContent {
width:40%;
float:left;
}

#rightContent {
width:28%;
float:left;
}
#closeLeftDivLink {display:none;}
#closeMiddleDivLink {display:none;}

/* if your widow display width is between 768px and 1120px */
@media only screen and (min-width: 768px) and (max-width: 1120px) {
#leftContent {
float:left;
width:35%;
}

#middleContent {
float:right;
width:62%;
margin-bottom:20px;
}

#rightContent {
float:right;
width:62%;
}
#closeLeftDivLink {display:none;}
#closeMiddleDivLink {display:block;}
}

/* if your widow display width is between 480px and 767px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
#leftContent {
float:none;
width:auto;
margin-bottom:20px;
}

#middleContent {
float:none;
width:auto;
margin-bottom:20px;
}

#rightContent {
float:none;
width:auto;
}
#closeLeftDivLink {display:block;}
#closeMiddleDivLink {display:block;}
}

/* if your widow display width is less than 479px */
@media only screen and (max-width: 479px) {
#leftContent {
float:none;
width:auto;
}

#middleContent {
float:none;
width:auto;
}

#rightContent {
float:none;
width:auto;
}
#closeLeftDivLink {display:block;}
#closeMiddleDivLink {display:block;}
}