IBM BPM V8 brings new Coach designer and live collaboration

I led the design for IBM BPM 8.0. We demonstrated it live to an audience of about 8,000 people at IBM's Impact 2012 conference. On seeing the demo, Bruce Silver wrote:

"More impressive to me is the new task UI (“Coach”) designer, which features reusable composite controls that dramatically simplify authoring of complex task user interfaces without so much javascript and css code. For example, a data entry and a graph control can both point to the same data and communicate with each other automatically without scripting.  IBM has also carried forward real-time collaborative editing from Blueworks Live into the Coach designer.  Very cool."

Lots of interesting examples are starting to land on the BPM Community Samples site. Start with Coach Bonus toolkit (link requires registration) which includes the live data examples Bruce was writing about.

Web Development for the fun of it

Right now I'm co-leading Product Design for IBM BPM. That means I create all the detailed specs for how a product feature is going to work, but I don't get the luxury of building it myself. An army of software engineers does that part.

Although I don't get to write production code these days, I still like to do prototypes to prove the feasibility of my ideas. This has opened my eyes to an array of incredible new libraries for web developers.

Bourbon makes it reeeeally easy to write modern CSS3, hiding all the convoluted vendor-specific repetitive ugliness from you. It's built on sass, whose mission was basically to fix CSS's stuttering problem. Finally, writing CSS is actually fun again!

"But Jeoff, what about IE, I thought it can't do CSS3?" No problem, even Internet Elephant (IE) can be made to dance with CSS3 gradients, rounded corners, and shadows: it's as easy as PIE! Also, check out flexie, which brings the CSS3 flexible box model to IE and other browsers. Create some layouts using flexbox and style some stuff using CSS3 fx and you'll never go back again. I guarantee it.

Now that you're ready to write some CSS3, check out what's possible!

p.s. Yes, I'm still using jquery. I agree with the SproutCore folks that jQuery has become the standard library of the web.

Long live the quirks-mode box model!

There are lots of things to hate about Internet Explorer, but I've always preferred their "broken" box model. Well sometimes bugs turn out to be loveable, soft, furry critters, and so now you can have it even in standards mode, thanks to CSS3:

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

From wikipedia:

Web designer Doug Bowman has said that the original Internet Explorer box model represents a better, more logical approach.^[18] Peter-Paul Koch gives the example of a physical box, whose dimensions always refer to the box itself, including potential padding, but never its content.^[10] He says that this box model is more useful for graphic designers, who create designs based on the visible width of boxes rather than the width of their content.^[19] Bernie Zimmermann says that the Internet Explorer box model is closer to the definition of cell dimensions and padding used in the HTML table model.^[20]

The W3C has included a "box-sizing" property in CSS3. When box-sizing: border-box; is specified for an element, any padding or border of the element is drawn inside the specified width and height, "as commonly implemented by legacy HTML user agents".^[21] Internet Explorer 8, Opera 7.0 and later, and Konqueror 3.3.2 and later support the CSS3 box-sizing property. Gecko-based browsers such as Mozilla Firefox support the same functionality using a proprietary "-moz-box-sizing" property,^[22] and WebKit browsers such as Apple Safari and Google Chrome support it as a proprietary "-webkit-box-sizing" property.^[23]