Best Of ColdFusion 10 Contest Entry - HTML Email Utility
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.
| |
|
|
||
| |
 |
|
||
| |
|
|
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
@All,
I added a copy of this code to my Hostek Beta account:
http://bennadel-cf10beta.securecb1cf10.ezhostingserver.com/bestofcf10/
Hey Ben, great stuff as always
Just playing with the styles and couldn't get the container class to change font size.
Missing colon? :)
@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!
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
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?