under construction

Complex Flash interactives are often composed of a series of small, modular swf's being loaded and choreographed by a primary shell ("Shell.swf"). This way, the smaller modular swf's ("Module.swf") get loaded in an on-demand fashion, to obvious advantages. Traditionally these seperate swf's create a bit of overlap in terms of which classes get compiled into which swf, leading to a moderate-to-profound degree of redundant information in each swf's byte footprint. Using ANT to compile your modules (swf's) you can tell the compiler to ignore any classes already included in Shell.swf, leaving them out of the Module.swf and resulting in a leaner, meaner byte footprint. The savings can be very significant, but its worth pointing out that any classes in the flash.* packages don't get compiled into your swf at all as they are cached within the player itself (Flash 9.3 can also cache the Flex framework, keeping it out of your swf by using magic, but never mind that for now). The trade-off is that if you try to run Module.swf as a stand-alone, Flash will give you a popup error telling you that it doesn't know what you're talking about and that it doesn't like you anymore and who the hell built this thing anyway.

ANT accomplishes these wonders by generating something called a "link report" when it compiles both Shell.swf and Module.swf. The link report is an XML file that lists what got compiled into the swf, along with its prerequisites ("<pre>" XML elements, pointing at other definitions for classes that must be compiled before you can compile "this" class) and dependencies ("<dep>" XML elements, which are the reverse of "<pre>" and point to classes that will depend on "this" class being compiled first). But the real fun comes at the end of the link report, where you'll find the "<external-defs>" XML element and child "<ext>" nodes which point to the classes that should be found in the containing swf, either Shell.swf or the flash player itself. When ANT, configured correctly, compiles the Module.swf, it checks the "<pre>" nodes against the "<ext>" nodes, and if they match then guess what? They are excluded from the swf's bytecode. Your swf is now smaller.

Getting ANT to do this is a smaller deal than it might sound (but install it first). ANT requires 2 files to work properly, build.properties and build.xml. First I'll cover build.propertis. Build.properties defines a bunch of command-line compiler arguments, like classpaths, default swf size and framerate, and any other variables you need to define so you can reference in build.xml- for instance, where to put your link reports and where to spit out the compiled swf's. Here's an example of how I set up my build.properties:

Now let's see how build.xml uses the above nonsense to get some work done. Build.xml files declare one "<project>" XML element that will contain at least one "<target>" XML element. The <project> element usually looks like this:

As you can see, it defines a name for the project and points to the default

The <target> nodes define the work that gets done- they're the "what gets run" in your build file. A build.xml file can have any number of targets, and targets can depend on other targets. They can also reference any variable defined in our build.properties file. Sometimes targets just define a couple <property> nodes to pass to other, more ambitious targets that will execute our compiler. (ANT can do more than just execute a compiler but its close enough for our purposes. Or at least my purposes.) Here's an example of the "compileEverything" target XML node. When it runs it just calls the other 2 nodes, compiling both swf's in one process:

If you don't want to compile everything in one go, you can run the targets individually. As long as "compileShell" has run previously there will still be an xml link report file for "compileModule" to mooch its classes off of. The main take-away from the above xml is near the end, where it says "-load-externs '${shellLinkReport}'." This tells it to compile the module swf as if it can expect to find all the classes that overlap with shell in the shell swf.

This was waiting for me in my in-box this morning:

It is my pleasure to inform you that Cisco Data Center Assurance Program Interactive Tool has been selected as an Official Honoree for the IT Hardware/Software category in The 12^th Annual Webby Awards.

The Official Honoree distinction is awarded to work that scores in the top 15% of all work entered into the Webby Awards.  With nearly 10,000 entries received from all 50 states and over 60 countries, this is an outstanding accomplishment for you and your team.

Congratulations!

YOUR OFFICIAL HONOREE LISTING:

Your listing on the Webby site is located at http://www.webbyawards.com/webbys/current_honorees.php?season=12

Again, congratulations!

David-Michel Davies

Executive Director

Here's the winning (well, "honoring") interactive.

There's something surreal and heartbreaking about reading a job post for the job I'm leaving. I don't know what to make of the fact that they're hiring two people to replace me- one for the ColdFusion & database stuff, and another for the crazy Actionscripting. Here's the ad for my job, a good explanation of about 60% of my current responsibilities:

INTRODUCTION:
Established interactive development and marketing firm looking to hire an experienced Flash Programmer.

OVERVIEW:
We’re looking for someone with strong Flash programming skills, effective project management and communication skills to expand our design and project development team. This individual must be able to demonstrate through past work strong development skills of Flash interactives and applications. This individual should keep in touch with trends in Web programming and technologies, be capable of working under tight deadlines, provide a creative contribution to the projects and our team, and participate in constructive client-focused problem solving and project implementation. A sense of humor is key!

NOTES:
This is a part/full time contract position with potential to lead to a Full Time employment position.

JOB DESCRIPTION:
Work with our team in the development and programming of Web-based applications.
Understand our business objectives, and become a contributor in its evolution and success.
Demonstrate superior client interaction and communication skills as well as a strong work ethic

SKILLS:
Flash Actionscript 2.0 – Be comfortable writing classes that extend MovieClip, working with XML, and dynamic tweening

Flash Actionscript 3.0 – Master the concepts of Display Lists, Event Dispatching, polymorphism, inheritance. Experience with Tweener, PaperVision, recursion a plus (Trees? DListIterators? Euler Integrators? Move to the front of the line if you even know what I'm talking about).

Experience with XML, RSS and Web service technologies a plus

Experience with ColdFusion and AJAX programming a plus.

Proficiency in Dreamweaver

Comprehensive knowledge of MS SQL and MySQL database structure, creation and integration with applications

Well-developed sense of logic combined with a flair for “thinking outside the box”

Solid problem-solving and technical skills that can be delivered while meeting deadlines

Ability to analyze and delineate large-scale projects and properly prioritize their development

Highly organized with a talent for multi-tasking

REQUIRED QUALIFICATIONS:
3-5 years Flash programming experience

ABOUT OUR COMPANY:
We’re growing and expanding and looking for the right group of people. With our long history, it’s not just about talent and skills, but also about the chemistry you add to the group. We have long-term, close relationships with our clients, and amongst our team.

Quick Facts:
13 years in operation
Small group of professionals
South End Boston location
Markets include: Financial Services, High Tech, Music/Entertainment, Research, e-learning,
architecture/engineering/construction

It used to be that if I had an XML document to parse and load into Flash actionscript (and I'm talking in 2.0 days) that I was going to spend all day on it asking each node, step by step, "DO YOU HAVE ANY CHILDREN? WHAT IS THE NEXT ONE? WHAT IS THE NEXT ONE?" until none of us could take it anymore. Then in one of my weeping fits one of the smurfs I see sometimes said, "Why don't you see if there's an Actionscript implementation of the easy-to-use XML parsing language, XPath?" So I checked and there was. I've been using it for almost a year now and it performs really well, you should have seen how proud of myself I was for finding it. Thanks to the Open-Source Flash community its now been a long time since I had to cut myself over an XML headache. The savings in band-aids have been tremendous.

When there's lots of complicated look-ups or exceedingly long drop-down lists involved in an application's workflow, I generally replace them with AJAX widgets- little bits of code that vastly improve the user friendliness of an application. I discussed the main method I use to do this in the previous blog entry, "Using the Adapter Pattern in Prototype."

This creates a situation where you have a form on a page and lots of surrounding Javascript widgets that operate on the form, usually setting hidden form fields. This week I had a "submit" event handler for the form setting two hidden fields, but the second field just wouldn't accept the new value in IE 7. The code looked like this:

But when the form was submitted, the "newHire" field had its original value. Performing an "alert($("newHire").value);" following the assignment showed a popup with the expected (str2) value. Firefox posted the expected value of newHire, but IE7 refused to change it (though it changed the first field flawlessly). After pulling out my hair for three hours, I used this workaround:

It now works fabulously with both IE and Firefox.

So you're building a sophisticated Prototype AJAX application with all kinds of request objectsflinging nested Hashes and dealing with JSON server responses. You're going to run into the problem of needing to explore your client-side javascript objects, especially if your server responses are JSON strings with embedded coldfusion exception data.

The first (rather obvious) approach is to convert the Hash objects to a JSON string, easy enough to do with a simple call to Hash.toJSON(), probably like this:

Which admittedly is more useful than:

This would only give you a message saying "[Object object]." The toJSON() gives you a detailed debug string, maybe something like this:

Given the dense character of javascript object notation, this is still a total pain in the ass. If your eye is very well trained to the grammar of object notation, you can extract useful information from simple examples but if you're dealing with queries or server-side exception data you're going to want a better way to inspect your objects.Inspecting complex data structures in ColdFusion is easy, you just use cfdump, giving you a pretty color-coded table with collapsible rows that makes it is easy to visualize the nested character of complex data structures. Wouldn't it be great to be able to do this with your client side javascript?

Here's a clever way to make ColdFusion do it for you with Prototype Ajax.Updater:

This takes a Prototype hash object, sends it to a ColdFusion template called "CF_json_dump.cfm" and tells it to display the output in an HTML element that has the id attribute set to "debug_area."

Now here's the code for "CF_json_dump.cfm," which just takes the json string we prepared as part of the above code listing and uses the lovely CFJSON component to decode the JSON string into a ColdFusion struct (or array, nested structures/arrays, whatever).

Today I had to conduct my first job interview, not as an applicant but as an interviewer. It was for a position like mine: a programmer-analyst do-it-all type who has to design, build, and support whatever it is that my agency decides it needs that day. Whether its a new module for our vast client management system or someone asking for a list of all the one-armed clients with freckles who were born on a Tuesday, it can be pretty varied and fast-paced stuff.

One thing's for sure: I wish I had put together a coding test because its pretty hard to get a sense of someone's capabilities when they've clearly been coached on how to tell me what I want to hear. You get lots of meaningless dribble about being an "eager team player." I'd be more impressed if an interviewee confessed to being a self-centered prima donna. I probed the boundaries of his technical abilities with specific questions and for the most part I got competent answers. But what I really learned had nothing to do with the candidate but about the nature of job interviewing itself: everyone's an over-polite bullshitter, which really frustrates the process of finding new team members. A few times I tried daring him to cut through it. After my coworker asked a few canned questions about why he wanted to leave his current position and getting one of those coached responses, I desperately wanted to ask, "Your current boss is a douche, isn't he?"

I don't expect a candidate to know about half the questions I ask about AJAX postbacks and CSS floating and clearing. I'm not looking for a direct technical answer, I'm looking to see whether their eyes light up or glaze over. If they light up, I know I have someone I can teach. If their eyes glaze over, I have a troglodyte who thinks AJAX is just a buzzword and who honestly can't imagine a role for object-oriented ColdFusion. It tells me nothing if they merely panic.
Its an odd thing to sit in a room with someone in a state of terror. I don't know if I learned anything actionable for future job interviews of my own, other than that most people know transparency when they see through it.

If anyone ever comes before me for a job interview, here's the playbook of how to impress me:

Refer to some great article you just read on A List Apart.

Know about Sliding Doors CSS technique.

If you're showing me a code sample with a SQL statement that starts with "Select *" you can stop right there. Don't call us; we'll call you (but probably not).

Demonstrate knowledge of a Bean/DAO design pattern.

Be nervous enough to look like you want the job, but not so nervous that you freak out and risk incontinence.

If you have a canned answer for a generic question like, "What is your greatest strength?" at least pretend to think about it for a second. Don't quote directly from "Who Moved My Cheese?" And don't say "my enthusiasm"- that's my stock answer.

Figuring out how to get Wordpress to respect my ColdFusion code has been surprisingly not very difficult for this Wordpress neophyte, considering the time I've been able to invest in it. With the simple preserve-code-formatting plugin I first used I had to copy and paste coldfusion code into invisible code tags that had to be created in HTML view- only to have cf tags removed after each edit! Much fancier is the ig:Syntax highliter. While it's not everything I'd hoped: there's still some extraneous html code showing up at the end of my RSS example.

One trick to the ig:Syntax highlighter for ColdFusion is that you need to add cfm.php to the ig_syntax_hilite\geshi folder of the install, which you will find in the GeSHi zip on sourceforge. (ig:Syntax is based on GeSHi, I'm not clear on the relationship but the file appears to (mostly) work so I'm done with it for now).

Here's my CSS to style the code:

I just got my invitation to join me.dium.com, a private beta of a Firefox plug-in that allows you to see other medium users who are on the same web page as you and chat with them. This is going to be a very big deal. With 10,000 users and another 4,000 waiting to join I can imagine they're waiting to expand their server clusters before a public roll out, but it seems promising [update: its now 3 months later and NOBODY is using it].

Medium works like a Firefox sidebar with a chic slate gray interface (see this screenshot). At the top you'll see a circle with a bunch of icons representing the website I'm on and similar websites which may or may not have medium users. See that orange person with the plus in the middle on myspace? That's me. The little blue people are other medium users. Below the website HUD you'll see a tabbed interface- those are "chat rooms." The way it works is a little confusing at first: Type something in on the "Home" chat room and it creates a child chat room. People click on "join" next to the comment you leave in "home" and a tab opens for that chat room (you can see I have 5 chats open plus the "home" chat which appears to be local to the website I'm on). Basically any of those little blue people can see something you type in the "home" chat (and everything you say there becomes its own chat room).

Concerned about privacy? After all, these users can see what site your on, and clicking on the icon will navigate to whatever page they're on. The good folks at medium thought about that too: check out this screenshot.

Sweet.

My BlogRSS component has progressed to generate the list of links you see at the left (if you're reading this on samedwards.net).  So this has become a blog about making a blog... wow that's really something.  But at least it forced me to slice up the background images and tile the middle with CSS.  You can still faintly see a line where the top and bottom slices meet the middle but overall not bad.