Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at Scotch On The Rock (SOTR) 2010 (London) with:

Best Of ColdFusion 10 Contest Entry - HTML Email Utility

By Ben Nadel on
Tags: ColdFusion

As you know, Ray Camden has been hosting the latest "Best Of ColdFusion" contest for the public beta of ColdFusion 10. The point of the contest is to have fun, naturally, but also to showcase one or more of the features added in the latest release of the language. For my entry, I created a single-page application that will take an HTML page with STYLE tags and output new HTML with the CSS properties merged into the HTML document as Style attributes.


 
 
 

 
Best of ColdFusion 10 Contest Entry by Ben Nadel. 
 
 
 

This project is available on my GitHub account.

According to the Campaign Monitor CSS for Email guide, Style tags will be stripped out of Google Mail emails. And, since Google Mail is the email client that I use (and is apparently one of the most limited email clients), I thought it would be fun to create a utility that would merge easy-to-read/maintain Style tags into the Google-Mail-compliant inline Style attribute. This way, you could develop HTML emails like you would any other HTML page; then, "compile" the email version as a subsequent build step.

NOTE: Even the HTML Email Boilerplate advocates moving most of your CSS styles inline.

In the past, I've tried to do this by converting CSS selectors into XPath queries and applying them to a strict XHTML (ie. XML) document. Now that ColdFusion 10 supports the loading of per-application Java libraries, however, I thought it would be fun to have Java do some of the heavy lifting for me.

I decided to use the jSoup library as the means to parse the incoming HTML, extract the Style tags, and then find the target elements based on the given CSS selectors. The loading of Java libraries was the big feature that I was trying to explore; but, in the end, I touched upon several new features of ColdFusion 10:

  • Per-Application Java Loading: As I stated above, I'm using the per-application JAR settings to load the jSoup library.
  • Invoke Implicit Accessors: This settings allows property access to implicitly invoke the associated getters/setters without an explicit method call. I am not sure how I feel about this one. I used it (CSSRule.cfc) mostly because I have never used it before - not because I thought that it was necessarily the right tool for the job. I am a little confused as to the proper use-case for it.
  • arrayAppend( x, y, true ): I absolutely love the new, third argument for arrayAppend() which allows the appended value to be flattened into the target array. This is hugely useful.
  • arrayEach(): Using closures to iterate over an array. Awesome! Though, I must say that using For-In on an array feels equally useful at times. But, there are times when arrayEach() feels like the better choice.
  • arraySort(): Using closures to define the comparator for the sort.
  • structEach(): Using closures to iterate over the key-value pairs.

In addition to any ColdFusion 10 specific feature, I also wrote this application (the server-side aspects) entirely in CFScript. As I've stated before, ColdFusion 10 feels like it facilitates CFScript much more than any of its predecessors, perhaps primarily because it supports Closures (which makes me think of JavaScript).

Anyway, this was a lot of fun to build; though, I must admit that my inadequate knowledge of Object Oriented Programming (OOP) is beginning to frustrate me in my ability to craft a beautiful domain model. I feel like so much more elegance could have been applied here! This is timely, however, as I really want to dedicate myself back to learning about application architecture.




Reader Comments

Hey Ben, great stuff as always

Just playing with the styles and couldn't get the container class to change font size.

  • font-size 16px;

Missing colon? :)

Reply to this Comment

@Brendan,

Nice catch! The CSS parser just ignores properties that don't "make sense". I probably didn't notice cause I think 16px is the default font-size on the browser. Good catch!

Reply to this Comment

Just found this, looks good!

I'm trying to run it on local, it's the 64bit version and I'm experiencing horrible lag. On average the generate.cfm processes the content change in 60-90 seconds. I've tested it with 4 different browsers and even stopped service on CF9 multiserver instance.

Thoughts?

Thanks!
Jaana

Reply to this Comment

Looks awesome, but sadly, I'm stuck on CF 9.0.1.

Anyone aware of a comparible utility that will run on that version of CF?

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.