steve kwan user experience designer

Docmetrics 1.1 is almost out!

(February 28th, 2008 - 10:40AM)

I've been working hard to meet our March 3rd launch date for docmetrics 1.1. We've added some excellent new features for lead generation, plus a significant UI overhaul with a lot of new components done in Flex. When the application is released I'll post some screenshots up here for public consumption.

Review: Made to Stick

(February 19th, 2008 - 10:09AM)

(5 / 5 stars)

Made to Stick is easily the most compelling business book this year. I give it my highest recommendation.

It's about "sticky" ideas; that is, things that you don't soon forget. Remember Steve Jobs putting the new MacBook Air in a manila envelope? That's a sticky idea, and it's great marketing.

Sticky ideas are essential to anyone looking to influence the masses. If you have even a passive interest in psychology or business communications, you must read this book.

The best thing about Made to Stick is that the content is itself sticky. The authors have written it in such a way that its ideas stay with you long after you're finished reading.

I experienced the book in audio format from Audible, where it won their award for best business book of 2007. The narrator did an excellent job carrying the material.

Buy Made to Stick on Audible

Bizarre work-related nightmare

(February 14th, 2008 - 7:08PM)

Last night I dreamed my team was in the middle of a software demo, when I noticed that one of my co-workers had porn up on his monitor. I thought this was totally inappropriate, until I noticed that there was porn on all the monitors in the office.

Apparently a DNS error was rerouting all of our work domains to a porn site, meaning that anyone attempting to access our product or give a demo would be treated to some X-rated content.

This is basically the software engineer's equivalent of the old "showed up to class with no clothes on" nightmare.

The console wars

(February 2nd, 2008 - 11:22PM)

Alisa says:
i want a Wii so badly!

Alisa says:
im addicted

stevekwan.com says:
You can play with my Wii

stevekwan.com says:
All night long

stevekwan.com says:
Except I don't own a Wii. But I have a 360

stevekwan.com says:
It's pretty fun

stevekwan.com says:
...

stevekwan.com says:
I suck at girls.

CSS in Flex is not real CSS at all

(February 1st, 2008 - 8:06PM

When my latest project was pushed in the direction of Flex, we were assured that development in this new environment would be easy. After all, Flex apparently supports CSS, so it should be easy for anyone with previous Web development experience, right?

Well, I'm always skeptical about claims like that, and sure enough, Flex's CSS support turned out to be disappointing.

Let's just be blunt: Flex doesn't support CSS. It supports some rudimentary stylesheet language that was concocted by the boys at Adobe. It does not support CSS. A layperson might mistake Flex's "CSS" for real CSS, but a seasoned Web designer will be able to tell the difference in a matter of minutes.

• Flex CSS has no support for dimensioning (width, height) or relative positioning (float, clear) of an element.

  This is a huge oversight in Flex's implementation of CSS. Without being able to size and position elements in CSS, you have to hard-code these values into the markup. Since separation of presentation and content is the core principle of CSS, and since Flex's implementation doesn't let you do that effectively, Flex CSS is almost useless.

  I think the reason width and height aren't stylable is because Flex considers them to be "properties" rather than "styles." As far as I can tell, this is some arbitrary distinction made by the Flex guys. In your forays with Flex, you'll probably find other places where you can't style something because it's a "property."

  As far as float and clear go, they don't exist. This is because Flex handles relative positioning with elements called HBox and VBox. Since these are actual tag elements that are embedded right into your markup, there's no easy way to move layout options into your stylesheet.

• Flex CSS doesn't support descendent selectors.

  In CSS, you can change the behaviour of classes or elements based on where they appear in your document hierarchy. For example, with this style...

  div p
{
    font-weight: bold;
}

  ...and this markup...

  <p>First paragraph</p>
<div><p>second paragraph</p></div>

  ...only the second paragraph would be bold.

  Descendent selectors are one of the critical techniques in CSS. In fact, descendent selection is one of the ways that CSS "cascades," so you can't really claim to have 100% CSS (Cascading Style Sheets) unless you support it. And Flex doesn't.

• Flex CSS doesn't support multiple classnames on a single element.

  In HTML, you can make clever reuse of styles by using multiple stylenames on a single element. For example, if you have separate but similar styles for two different sections...

  emailSection
{
    border: 1px solid #000000;
    background-color: #EEEEEE;
    font-size: 11pt;
    color: #000000;
}
loginSection
{
    border: 1px solid #000000;
    background-color: #EEEEEE;
    font-size: 11pt;
    color: #0000FF;
}

  ...you could could create these sections with markup like this...

  <div class="emailSection">...</div>
<div class="loginSection">...</div>

  However, if you wanted to be clever, you could improve readability and maintenance by merging the styles like this...

  section
{
    border: 1px solid #000000;
    background-color: #EEEEEE;
    font-size: 11pt;
}
emailSection
{
    color: #000000;
}
loginSection
{
    color: #0000FF;
}

  ...then you could create these sections like this...

  <div class="section emailSection">...</div>
<div class="section loginSection">...</div>

  This results in a much cleaner, more maintainable stylesheet. This technique is critical in large applications. Unfortunately, it's unsupported by Flex CSS.

• Flex CSS has no ability to specifically position or repeat background images.

  Gradients, one of the design hallmarks of Web 2.0, are not well supported in regular CSS. But at least you can accomodate them by tiling background images.

  Unfortunately, Flex CSS supports neither gradients nor this CSS workaround. I was able to find a third-party extension that enables this feature, but it's a shame it wasn't included directly in Flex CSS. It's a bit of a stretch to call Flex a "Rich Internet Application" development environment if it doesn't support custom gradients.

Don't get me wrong: Flex has a lot of things going for it. However, myself and many other Flex developers I know have encountered extreme frustration in working with Flex. Although I'm using Flex 2, it almost feels like a beta. I'm planning to upgrade to Flex 3, but I suspect that many of my problems will persist.

Any developers reading this should know that Flex isn't necessarily bad. In fact, it has a lot of things going for it. It's proven extremely effective for prototyping, and believe me, I've put it through the wringer. It's also got a great componentization and extension model that you won't get in HTML. However, it's far from perfect. Be forewarned before delving into serious Flex development.