What You Offer

Do you want an innovative environment, technical challenges, and brilliant colleagues in addition to business stability? Wall Street on Demand, Inc. has doubled in size the last two years and continues to look for exceptional people who want to solve hard problems and truly make a difference at work.

Intermediate to advanced knowledge of Javascript, ASP.NET, ASP, C#, Ajax, D/X/HTML, CSS, Web standards, Browser compatibility issues. A crush on xmlHTTPRequest, JSON and purely semantic markup language, reverence for Crockford and Hewitt, dreams in #000 and #fff, a loathing of Redmond’s rendering engine (but the skills to bend it to your every whim). Experience with object-oriented programming, the prototype inheritance pattern, and understanding of systems like DWR, Dojo, Prototype, RoR, jQuery, YUI. Technical and user experience contributions to site design, site architecture, and site production. Ability to work in a collaborative environment.

What We Offer

Wall Street on Demand, Inc. is a growing organization, headquartered at the base of the Rocky Mountains in Boulder, CO, focused on the design, development and hosting of financial web sites, reports, and tools. We deliver innovative, high quality products to help our clients and their customers visualize, manipulate and understand complex financial information. Our compelling, presentation-rich services for financial professionals and individual investors have won acclaim for our clients, many of whom rank at the top of the Gomez and Forbes awards. Our products are custom designed for each client, completely private-labeled, and fully integrated into the client’s other offerings.

The opportunity to work on projects for almost every top-tier financial institution in the world. Training in the necessary knowledge in developing for financial information. Ramp-up time to gain comfort in our environment. Learning from some of the best developers this side of the Mississippi.

ALA #270 has more work-from-home tips, including links to web-based tools, pre-fab home office buildings for your yard, and more.

SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file.

Version 2 — just released last month –offers the new express install from Adobe as well as whole new method for loading Flash files into your pages. The project’s home base is over at Google Code now, and there’s plenty of examples, help, and even a code generator (which is pretty slick).

The best news of all: upgrading to version 2.0 fixed a “wmode” transparency issue I was having in Firefox 3.

Read more at Formation.

One of the first posts, “New Space“, shows off Wall Street On Demand’s newest digs. The company is growing at a sizable pace, and overflowing into this new office was natural — or so I’m told (I started here just days after the official move-in). Our creative director said:

It was interesting to take an IA perspective to physical architecture and design the space from a usability perspective. Our goals were to foster communication, help make new relationships, provide quiet in the storm, and give people a workspace that was professional (sorry, no dot-com foosball tables) while being adaptable and flexible to the myriad of uses that our team finds for their space.

We tried for art gallery + laboratory + library.

Check it out.

On the road again
Goin’ places that I’ve never been
Seein’ things that I may never see again,
And I can’t wait to get on the road again.

My wife and I have decided to leave our beloved home in Charleston for the foothills of the Rocky Mountains — Boulder Colorado. It’s with much excitement we embark on this journey, indeed it’s a brand-new chapter in our lives. Reading this, you might be wondering why I’d leave my post as “UI guy” at SPAWAR Systems Center Charleston. I’ve wondered myself. After all, it is a good job and the office is full of good people. But I’m ready for a change. And my wife, Jude, is ready, too.

I was fortunate during my super-short job search — which lasted only 5 days — I didn’t actually have to do all that much. I loaded up Word, updated myself on paper, saved as a PDF, and hit AuthenticJobs.com to see what was out there. When I was writing a short note to a company in Boulder with my resume attached, I hadn’t any idea just a few days later I’d be sitting in a room with a mountain view listening to a man offer me a new job. What’s funnier is it took my wife and I only a day or so to accept the position and to start readying to uproot our lives.

I start as the newest member of the design and development team at Wall Street On Demand in early July.

So we leave for Boulder early next week. We’ll go this way (see map), camping in off-the-beaten-path locations in the mountains and in the plains. We can’t wait.

See you on the other side. For now, we say au revoir — but not goodbye — to Charleston. We will be back.

As it turns out, Mark Millon’s camp business is thriving — 2,000 kids this summer alone — and along with his work with Warrior/Brine Lacrosse, Millon is retiring from Major League Lacrosse.

Millon is the all-time MLL leader in goals with 235 and points with 349. He is the fourth all-time MLL leader in assists with 110. He is a two-time offensive player of the year (2002 and 2003) as well as the MLL co-MVP in 2005. He won the MLL championship as a member of the Baltimore Bayhawks in 2002.

Millon was also a three-time All-America at UMass, with 155 career goals and 58 career assists in college, and a two-time gold-medal winner with the U.S. Team (1994, 1998).

Best of luck, Mark.

Lacrosse is the fastest-growing sport in America over the past 5 years. This news of Millon’s retirement comes only a week after Johns Hopkins University pulled out a victory against top-ranked Duke University in the NCAA Men’s Final in Baltimore.

I say what he says:

“One way to judge the scope of an app is to think about how much time you’re intended to spend using it. There’s plenty of room for apps you use here and there for a few minutes at a time, or which you launch just once or twice a week. There’s hardly any room at all, though, for apps you work in for hours at a time, every day.

By this measure, Coda, the new app from Panic, is an epic.”

Kudos, John.

In his most recent post, Zeldman offers:

“Over 12,000 people filled out The Web Design Survey during its first 24 hours online. Average completion time was 8 minutes, 45 seconds. Not a bad start. Keep spreading the word.”

There was a YouTube video (which now appears on Han’s website, too) going around a few months ago that showed Jeff using “blob” — an interactive lava lamp application — as well as a photographer’s lightbox and 3-D Google Maps interaction. There’s no mouse. The multi-touch sensors interpret finger tips and “gestures” as input. For example, a small counter-clockwise circle gesture instantly creates a context menu of sorts anywhere on the screen; say goodbye to the File Edit View menus ever-present in today’s standard interfaces. Using your index finger and thumb, moving them away from one another instantly zooms out on an object, and pinching them together zooms right back in. Han kept repeated it was “intuitive” for users to walk up and start using the MTMU screen, especially the Google Maps application, because it was so similar to a real paper map. Drag, pan, zoom, tilt, scan — all possible with quick finger gestures. It certainly looks easy enough, but then again this is the guy that actually invented the thing.

“Multi-touch inherently implies multi-user,” Jeff said. During his demonstration, two sets of hands were working with the 8′ screen simultaneously. Cool.

Where this is going is limited only by imagination. It’s such a new toy here at the Weapons Station that everyone’s chomping at the bit for a chance to play with it. When things cool down and we start designing actual applications is when the real fun begins. Watch this space.

On a related note, regarding Apple’s new OS, I read this a while back:

“I’d love to see some implementation of Jef Raskin’s ‘interfaceless interface’ principles in Leopard as well. For instance, if you sit down at the computer and start typing ’59 x 20′, the calculator should just automatically pop up and compute it for you. Same thing if you type something like ‘Dear John’; your word processor should pop up and begin a well-formed letter.”

Not a bad idea while we still have a keyboard and mouse.

First, let me say if you haven’t read that article, do so now. If you have already, continue. Remember we started with a simple but obtrusive “halt!”? The code looks like this:

var needToConfirm = true;
window.onbeforeunload = confirmExit;

function confirmExit() {
if (needToConfirm)
return "Are you sure you want to leave?";
}

We modified the above to handle many more fields, and to compare arrays using a combination of functions afforded to us by Prototype, 4Guys, and others. You should view/download the full script to see what I’m talking about. All this excitement is of course about how this script can now process (check, compare, validate) all the fields on any form. When I discovered this I slapped myself on my forehead like those new TV commercials for V8. Doh! It’s easy:

On line 4, replace this:

var f = $$('div#myform input');

with this:

var f = $$('form#id input','form#id select');

Replace “#id” with your form’s Id. Using Prototype’s utility function, this creates an array of all the form fields and hands it off to our script… ultimately stopping a user if they made a change to any values, and letting them go if they have had a view-only session.

Editor’s note: The previous version of this script was downloaded a ton of times. I’m assuming folks are using it, and I’m positive there are ways to improve it. Comment away!

Despite it’s numerous (and not-yet-fully-tested!) successes, there’s one fatal flaw with this new application I’ve built: the primary users are coming directly from a Microsoft Office Access ’97 form-driven database. (I know what you might be thinking. This gets good. Read on.) Their current Office system works well, but it’s been patched, band-aided, and added onto countless times since the early part of this decade. In fact, when it loads, the Access ’97 “dashboard” has 20 or 30 differently-colored bricks which when clicked take users on a magical ride through literally hundreds of custom queries, and thousands of records in one single gigantic table. Each of the company’s employees is fluent in the myriad codes and mystical shorthand that make up each row and column of data. It’s something to behold, let me tell you.

Over the past months, through endless revisions of specification documents, writing line after line of semantic code, and creating ingenious ways to handle complex scenarios, one of the simplest issues arose. It is a direct result of my client’s full-time use of and dependence on Access ’97, and it’s fun save-as-you-move-from-field-to-field feature. Users never have to click a “save” button, and can fly around updating customer data in a dash. Not so with the new web application. Here’s how we fix the problem.

Preventing Users from Leaving Without Saving Their Data

There are two views in the new software where numerous text fields, checkboxes and select boxes grace the page. During some initial testing, we found that users were changing data and immediately bouncing along to another view without saving their changes – an action they were quite comfortable performing in the past. It became clear I had to write some code that stopped users from leaving the page unless they saved their changes.

I immediately turned to the DOM’s onbeforeunload event. We’re already using a short and sweet function on the multi-step customer application form which is somewhat obtrusive; a user cannot go anywhere, close the browser, or even refresh the page without being hit with a JavaScript confirmation box asking them if they’re sure they want to go. The code looks like this:

var needToConfirm = true;
window.onbeforeunload = confirmExit;

function confirmExit() {
if (needToConfirm)
	return "Are you sure you want to leave?";
}

This wonderfully-crafted little snippet comes from 4GuysFromRolla. Although nice, I needed something “smarter” that only prompted a user if and only if they made a change on the page. Scott Mitchell, the 4Guys author, continued in his article with an example of how to achieve this by creating two JavaScript arrays and then looping through them comparing the values. Great inspiration, Scott. I couldn’t use this script because I have two dozen fields on one view (it actually looks pretty good) instead of his six and typing out each field ID would take too much time. So I used his example, and wrote this relatively short set of functions:

	//markhealey.org
	//Inspiration from Scott Mitchell: http://www.4guysfromrolla.com/webtech/100604-1.shtml

	var f = $$('div#myform input');
	var needToConfirm = true;

	//Get all form field values
	var formDBVals = '';
	for(var i=0; i
		formDBVals += "'" + escape(f[i].value) + "', ";
	}
	formDBVals += "''";
	//New arrary to hold DB vals, before changes
	var the_values = new Array(formDBVals);

	//http://www.breakingpar.com/bkp/home.nsf/Doc%21OpenNavigator&87256B280015193F87256BFB0077DFFD
	function areArraysEqual(array1, array2) {
	   var temp = new Array();
	   if ( (!array1[0]) || (!array2[0]) ) { // If either is not an array
		  return false;
	   }
	   if (array1.length != array2.length) {
		  return false;
	   }
	   // Put all the elements from array1 into a "tagged" array
	   for (var i=0; i
		  key = (typeof array1[i]) + "~" + array1[i];
	   // Use "typeof" so a number 1 isn't equal to a string "1".
		  if (temp[key]) { temp[key]++; } else { temp[key] = 1; }
	   // temp[key] = # of occurrences of the value (so an element could appear multiple times)
	   }
	   // Go through array2 - if same tag missing in "tagged" array, not equal
	   for (var i=0; i
		  key = (typeof array2[i]) + "~" + array2[i];
		  if (temp[key]) {
			 if (temp[key] == 0) { return false; } else { temp[key]--; }
		  // Subtract to keep track of # of appearances in array2
		  } else { // Key didn't appear in array1, arrays are not equal.
			 return false;
		  }
	   }
	   // If we get to this point, then every generated key in array1 showed up the exact same
	   // number of times in array2, so the arrays are equal.
	   return true;
	}

	function confirmExitAccountInfo() {

		var formChangedVals = '';
		for(var i=0; i
			formChangedVals += "'" + escape(f[i].value) + "', ";
		}
		formChangedVals += "''";

		var the_changed_values = new Array(formChangedVals);

		if(needToConfirm) {
			if(!areArraysEqual(the_values,the_changed_values) ) {
				return "It appears you changed some info. Did you mean to leave without saving it?";
			}
		}
	}

	window.onbeforeunload = confirmExitAccountInfo;

Let’s examine this script. We first need to set the variable “needToConfirm” to true, so as soon as the page loads, we assume the user is going to get the save-before-you-leave prompt (unless they click “save”). Then using the Prototype function $$(), we load the values of every field in my form into an array called formDBVals by using a simple for loop. Since most of the fields on the view are pre-loaded with information from our database, we easily have access to this data. But you could fill your array with null values. We ultimately want to capture any changes the user makes, and prompt them to save them before leaving the page.

To track changes the user makes, we’re not actually doing anything fancy… just re-looping through the form fields, and comparing the original array (formDBVals) to the values in a second array (formChangedVals) when the form is saved. Using a snazzy script I found at BreakingPar, we quickly compare the two arrays. If they’re different, that is, if the user changed anything, we fire the save-before-you-leave prompt. If the two arrays are the same, then the user hasn’t changed any values… and of course, they’re allowed to leave. We also have to add “needToConfirm=false;” to the submit button’s onclick.

What started with obtrusive prompts which get really annoying – especially if nothing’s been changed – has now evolved into a smart script that’s completely reusable in any form. Remember, you need to include the Prototype.js for this to work.

Use it in your app, just please give 4Guys and me some credit. Download the JavaScript. And check out the live demo at 4GuysFromRolla.

Update: Sorry friends, I forgot to mention: This script does not detect checkbox or select box activity; only text fields. If you have that working, let me know and I’ll append this script for everyone.

Blinksale’s developers have hit a home run with this application. It’s powered completely by a slick design, and standards-based XHTML/CSS. It’s fast. It’s easy. And most of all, it’s not bloated. I was a long-time Quicken user, but gave up on that a number of years ago because it was just too much. After some time doin’ the spreadsheet thing, I’m head over heels in love with Blinksale — the easiest way to send invoices online.

“With a near obsession to figure out how to offer reliable, high-performing, low-cost MySQL services, the (mt) Media Temple GRID architects went back to the whiteboard to completely redevelop the database strategy. What resulted is a new container system which will give each GRID customer their own dedicated MySQL server. This is great news for our customers because they will now have their own unshared copy of MySQL with their own dedicated RAM and CPU space which allows for a more stable, predictable, understandable MySQL application environment.”

Finally.

I wouldn’t dream of attempting to introduce NHibernate or n-Tier OOD / OOP in this post; I’ll leave that to Ben. But I did find an extremely useful set of utilities for SQL Server development — BenDay’s SQL Server Utility 2.0. I’ve been writing manual queries of these types for a while, and this proved to be exactly what I was looking for.

Need a SQL 2000/2005 development aid? Grab it. He’s not charging anyone for it… yet. Kudos, BenDay. Thanks much.

Enter stage left: Douglas Bowman’s Sliding Doors of CSS courtesy of ALA.

I added two tabs to my new view, repositioned them on the right side — which took some fancy footwork because this awesome technique only demonstrated the tabs as left-justified — and started the browser testing. With some minor edits to the CSS, my new tabs worked perfectly in almost uniform fashion, except in IE7. The browser correctly interpreted both of these declarations, including the Holly Hack (a.k.a. the Be Nice to Opera rule), previously undetected by IE.

#tabbednav ul { margin: 0; }
html>body #tabbednav ul { margin-bottom: -10px; }

A post on Zeldman.com helped me figure this one out, and allowed me to specify rules using a modified Holly Hack. This declaration targets Opera and Mozilla browsers, but all versions of IE don’t see it, including IE7:

html>/**/body #tabbednav ul { margin-bottom: -10px; }

Thanks to Zeldman and donovan.

Update @ nearly 4PM:
After further testing, Safari picks up my modified Holly Hack and improperly renders my tabs. I guess I’m going back to the drawing board.

Update @ just a bit before 4PM:
Ok, final update. I promise. In the end, I was able to make some modifications to one other rule and didn’t end up needing the negative margin. If anyone knows more about this “/**/” hack, ping me, I’m curious now.

If you have ever tried to send an (X)HTML email from your web apps, you and I both have a lot more to ask for.

I’m currently writing an application for a client of mine that’s rich in user interaction. In part, users can create accounts, verify email addresses, forget passwords, and more of the standard account-related functions. Needless to say, without any unnecessary overkill, we will be sending a good amount of emails to my client’s user base. I could have easily opted to send text-only messages, but the requirement included displaying a logo, bolding text, and other graphical presentations otherwise not available in text-only. So, without much hesitation, I charged ahead. Whip up some clean (and strict) XHTML, use loads of my already-fine-tuned CSS rules, pump in some content and we’re off!

Wrong. And this was just the beginning.

I use my Gmail account for testing — it’s convenient because all the messages get lumped into one conversation for easy review, not to mention the huge disk space and (my favorite) delete button closely within reach. But for all of Gmail’s successes, it sure wreaked havoc on my nicely-formatted XHTML messages. Evidently, Gmail strips every shred of code out of your email, and rebuilds it in its entirety before spitting it back into it’s wonderfully successful conversation view. Those unique div, span and other IDs? Gone. The short and sweet CSS rules? Gone, and definitely not working. Hell, even my one-line footer wrapped in a small tag didn’t render properly. I now know why I can’t read my itinerary confirmations from the airlines in Gmail.

To make sure I wasn’t out of my mind, I changed my testing email address to an account I manage with Outlook on Windows and Mail on the Mac. Naturally, the message came through looking as perfect as I could have ever imagined. I repeated this process with Mozilla’s Thunderbird and then webmail at Yahoo!, Hotmail, and AOL — all succeeded, but in different ways. Microsoft’s widely-used Outlook client performed the best (same goes for Outlook Web Access), followed closely by OS X’s Mail. Neither re-wrote my code. Yahoo! did better than Hotmail, but Hotmail’s new interface liked the HTML and CSS hybrid a little more than the old but it still wasn’t perfect.

I am fighting an in-browser application war! Here we have browser-based applications developed by the world’s largest software manufacturers performing the same basic functions displaying standard XHTML and CSS content from the same source — and it just doesn’t work. Grrr. In the end, it’s Gmail that is causing the biggest headaches.

Yesterday, I finished restructuring the code following tips I read about on this highly-useful Interweb (I love that old Verizon DSL commercial). Here are a few that helped me get going again:

• Don’t put anything in the head of your email template.
• Forget the love you have for your fine-tuned CSS document; there’s no hope of using it (as an externally linked file). You’ll have to drop all your classes and ids replacing them with hideous inline styles. If your email’s recipients use Gmail, you’ll need to do this one.
• If all else fails, especially with AOL, use a table to position your goodies. I can’t believe I typed that, but when it comes to this and saving time, it works.
• Have patience. I nearly tossed my lappie out the window on more than one occasion.

As of yesterday, my client’s customers are ready to receive fancy-schmancy emails. No matter which mail client, web-based or desktop, Mac or Windows, they’ll all see the same content — as it was intended by this designer. Now that it’s done and I’m filling out my time sheet, I find myself having a hard time justifying the large chunks of time spent formatting arbitrary (yet critical) emails when there’s plenty of other work that needs doing. It seems funny to me but after all these messages, like them or not, are part of your app and, more importantly, your client’s outward-facing marketing.

As time ticks later here on the east coast and my original content engine is in the garage for the night, I wanted to quickly tout a new forum package delivered as my early Christmas present from the folks over at WordPress. Called bbPress, they say it’s “simple, fast, elegant” — and from the less-than-3-minutes it took me to install it and give it a quick test drive, the software is certainly all that.

I’ve got a client that could use something just like this as their phpBB install is bloated and plagued with SPAM. I’m not going to hold out for bbPress’ coming-soon template system — I think I’ll dive right in and get customizing.

Born from her passion for stopping moments in time and capturing them on film, Jude’s new business specializes in wedding photography in and around Charleston, as well as traveling to destination weddings around the world. Her services also include engagement shoots, and family and individual portraits.

C’mon, put your party hat on, and join in the fun. Check out www.judehealeyphotography.com today.

As for the VAT refund from a trip to Ireland in 2001? I guess it’s still in “processing”.

I wonder what else is coming later this week at the WWDC?

If you’re a Boston sports fan, you’ve gotta take 10 minutes and read this. Edge: Bill Simmons.

Kudos, WordPress team.

The main difference between PPT and PPS is how PowerPoint treats the files when they are initially opened.

In my day-to-day work I see on average one hundred million PowerPoint presentations. Okay, maybe not that many, but a lot. After all it is the Navy. And as with everything government-related, if it is not in a PowerPoint, it cannot be done. A developer in my team came to me with a question today: what is the difference between a PPT and a PPS? I immediately replied that PPS was an antiquated file extension from Office 97 or something. It turns out I was dead wrong. (Have you seen that Office PowerPoint 2007 will be naming files .pptx?)

Thanks to Indezine, here’s the deal:

• By default, PPT files open in edit mode within PowerPoint allowing you to use all the menus and commands.
• By default, PPS files open in slideshow (play) mode and you see no PowerPoint interface. When the presentation finishes (or you manually exit), PowerPoint also quits.

So there you have it. The next time you’re whipping up a fancy-pants PowerPoint, remember to use “Save As…”.

So, take a few minutes and poke around. You’ll find articles written often daily, photography, details about my freelance work, and a list of some pretty amazing things. I hope you enjoy your stay, come back often, and feel free to comment on any articles.

Check out the article: Web accessibility soon mandatory in Europe? (from CNET News.com)