On frauds, chickens and Visio

There’s a quasi-psychological disorder called “Impostor Syndrome” wherein the sufferer feels that, despite appearing to others as having mastered a particular skill and achieving numerous quantitative successes, he or she is not really “worthy” of the titles or benefits (or infamy) that goes along with those skills or successes. Sufferers are unable to internalize their accomplishments. It’s quite a fascinating condition and makes for a wonderful dinner party conversation with someone who self-identifies with the disorder. The only trouble occurs when you’re the one with the disorder. Actually, there’s no trouble if you have it. The trouble is that I have it. Well, at least I did until about two months ago.

You see, for the past many years, I’ve made my living as a “web architect”. Of course that means different things to different people and different projects, but I’ve always felt like a fraud. Why are people so interested in hiring me? When will these people discover that I’m not a real architect? Sure, I’ve written a book, been a tech editor for another book, had a heavy hand in the creation of the most widely-used version of Fusebox (the original ColdFusion framework) to date, traveled all over the country to speak at conferences, successfully operated my own business, and been involved in some very big-deal projects to some very big-deal clients, but there’s only one problem: I don’t use Visio.

In fact, until about two months ago, I can probably count (on one hand), the number of times I’ve actually done anything with Visio. Numerous teenybopper singers/actors/debutantes have come and gone without me even installing Visio on a workstation. Very occasionally someone would ask if I had Visio and I’d always answer, “Oh no, not yet on this new computer. Can you export it to jpeg? Thanks.” And on every occasion, I snuck by.

But on a recent project, I’ve billed dozens and dozens of hours while working in Visio. Now I’m a frickin’ architect. And lemme tell ya, the grass is soooo much greener over here.

You’re probably looking for part 2 of “Rejuvinating FLiP” where I talk about wireframes and prototypes. At least that’s what I promised in part 1. I’ll get to that topic in a minute, but first I have a story to share.

About three months ago, we picked out four fluffy chicks from a local plant nursery to take home. They were fluffy little balls with gi-normous feet sticking out. There must be some kinda genetic coding to grow the feet early because I haven’t noticed any increase in foot size despite an approximate 8000% increase in body size. For the first couple weeks, they lived in a cardboard box in the corner of the kitchen. Then they got too stinky for the house and too big for the box so we moved them into a corner of the garage with some scrap wood cobbled together into a little pen to concentrate all the chicken shit in one place. This whole time I was working on their hen house to be in the back yard. Now it’s important to note that I’m not much of a carpenter. But I am speaking from the perspective of real carpenters. Namely, the guys who taught me what little I do know. I’m more of a hack when it comes to carpentry and building in general. As the hen house was coming together, I did a little bit of Googling for inspiration, but I mostly just started from the bottom and built up. My wife would come out and say, “Where’s the door going to be?” Or she’d ask, “What’s the roof going to look like?” Or maybe, “Is that enough room for a roosting rail?” And to each of these questions I’d say, “I don’t know. I haven’t gotten to the [fill in the blank] yet, but I’ll figure it out when I get there.”

After about four weeks of hammering (actually pneumatic nailing) and slowly ticking off all those design elements, I moved the pre-built walls, floor, and roof outside only to discover that it was too big for the corner I had measured for it. It stuck way out into the yard and made it hard to walk around. And since I had built a cute little nesting box cantilevered off one side, I couldn’t rotate it around the site. It had to be just so or else I’d have to hack it up. So much for figuring it out as I go along.

My wife and I looked at it from all angles and settled on having it in a different position in the yard. Not ideal since now it’s quite the focal point to the scenery. The upside is that when people come over they all marvel at my mad construction skillz. I humbly mention that I’m not much of a carpenter and for those folks who also know my real carpenter friends, I politely ask them to not mention my hen house to anyone. Calling my little hen house “carpentry” and also calling my British friend’s house that was built with no nails or screws whatsoever “carpentry” is just not right. His house is carpentry: All the framing was done using wooden pegs and joinery. My hen house is a little hack-job. It only looks good to you if you don’t know the first thing about carpentry.

If my Brit friend had the same tools, the same materials and the same list of requirements as I did, his hen house would be twice, no, ten times the product mine is. See that’s what you get when you’ve got a master plan figured out before you start banging. Maybe he would have drawn some plans on a piece of paper. Maybe he would have sketched some designs after looking at another hen house. Or maybe he would have just winged it with the plan solely in his head. The point is that he would know, down to a relative level of detail, what the end product would look like before he picked up a hammer.

So back to the Visio thing.

Wireframing is generally done early in the project lifecycle. While the client isn’t sure what they want, you quickly create a simple, text-based version of the website. Screens link with each other, each one describing what it does. For some clients, this works very, very well. Those clients are capable of understanding that this plain-text version of their application is just a very early version. It gets the creative juices flowing for the spec doc work and the follow-up prototyping (or front-end development). Most folks I know throw away their wireframes quite early in favor of prototypes.

In the past, I’ve done wireframing primarily with Synthis’s now-free Adalon product which has a nice diagramming tool and spits it all out in HTML. The result is a pretty good looking set of screenflows. From the login page, you get to the home page. From there you can go to the My Account page or this other screen over there. I would take notes about what each screen does which would appear in the generated version. The only trouble is that this method doesn’t work well for web applications as opposed to web sites. I’ve always just glossed over that deficiency and used wireframes as a way to jump-start the project.

A project we’ve been working on at Webapper is going to have a 100% Flex front-end, which complicates the wireframing process even more. Complicates it to the breaking point, really. I wanted a new way to solve some of the same problems that wireframing typically solves without using Adalon. I was in luck that this project is a rewrite of an existing desktop application, so the client already knew much of what they wanted. Producing an early wireframe in Adalon would have just brought up all the deficiencies of that aging method. I needed something new. Enter Digimmersion’s Visio stencils.

This thing totally rocks. You open up the shapes panel, point to the stencil file and voila – you can drag-n-drop any Flex component onto your screen. Make multiple pages in the same Visio file to correspond to different screens or even view states in Flex and link them together with Visio’s built-in Hyperlinks, save the whole thing as a web page and point your client to a URL. Simple as that. And by using the Flex components, you can build interfaces that will actually look like the final screens. Every single screen, along with multiple versions of the same screen to highlight view states can all be built really quickly. And I mean really. For a day, I tried doing the same job using the Design view in Flex Builder, but there is no comparison. Visio is just incredibly fast. Seriously, this is something that you simply can’t afford to pass up. Getting preliminary screen renditions into the hands of your customers early and often is a tenet of many major programming methodologies, especially FLiP, and this stencil is the best way to do it when building Flex applications.

So from now on, whenever I’m working with on a project to be done in Flex, I’m using Visio and this awesome stencil. If you’re doing Flex work, you owe it to yourself to check out this stencil. Of course, you don’t need these stencils to make an application in Flex. Just make sure a real architect doesn’t look close enough to ask, “How are you going to clean out all the chicken poo that’ll build up in there without a full size door?”

Stay tuned for part three to hear about about a new DevNotes tool. (“Oh no, not another goddamn DevNotes, Nat!”)