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;}
}
Sarah Jedrey

Marketing Coordinator / Video Editor

Prove you’re a human! With games!

One of my jobs is to track down interesting, pertinent articles and reduce them – and their URLs – to Twitter-friendly lengths. To get those links short, I use Ow.ly.

Full disclosure: I chose it because it was easy to remember and, at the time, had the fewest number of steps and sign-ins to go through. Lazy? Yes. I’m human.Screenshot of test

But I recently went through my URL-shortening routine and discovered that the normal CAPTCHA – those little boxes of text that look like someone scanned a photocopy of a water-damaged book printed in the 1630s – wasn’t there!  Instead, you just have to click “Shrink it!”

What pops up then is an interesting intersection of gamification, tech security, and a possible accessibility nightmare. A randomized, simple game shows up in which you drag the appropriate animated image to a predetermined spot. “Make lemonade”, the game requests, and if you drag the lemon and the ice – but not the basketball – to the pitcher, you have proven you’re a human. Your reward is the shortened URL.

Now, I’m not a big CAPTCHA hater. I’m quite good at deciphering the blurry letters and the s that looks like an f – again, text from the 1600s – and it never is unduly time-consuming for me to use the traditional CAPTCHA. However, if I remember correctly, computers are getting better at making the same distinctions I find so simple, and security folks have been scrambling for a good way for humans to prove their humanity without enraging every one of them. So I see why they upgraded their methods and made sure those upgrades were in a game form.

Matrix staffers tried it out, and most were conservatively positive about it. Oh, one person didn’t mind, and another loathed it, but most saw that this new method could be effective with a few tweaks. I’m mainly concerned about accessibility; there is an accessibility icon a user may click to get a different task, but since I’m able-bodied, I don’t think I’m in a position to judge.

You should go try it out.

Tell us what you think about Ow.ly’s replacing CAPTCHA with its new game.