Best Of ColdFusion 10 Contest Entry - HTML Email Utility

Posted May 1, 2012 at 9:45 AM by Ben Nadel

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

May 1, 2012 at 10:12 AM // reply »
11,238 Comments

@All,

I added a copy of this code to my Hostek Beta account:

http://bennadel-cf10beta.securecb1cf10.ezhostingserver.com/bestofcf10/


May 1, 2012 at 4:45 PM // reply »
1 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? :)


May 1, 2012 at 9:50 PM // reply »
11,238 Comments

@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!


May 16, 2012 at 8:18 PM // reply »
6 Comments

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


Feb 6, 2013 at 3:02 PM // reply »
3 Comments

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?


Post A Comment

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.

Please review the following issues:

Author Name:


Author Email:

Author Website:

Comment:

Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>







  • Help Wanted - Find Your Next ColdFusion Job
Ben Nadel's Company - Epicenter Consulting Recent Blog Comments
May 17, 2013 at 7:42 PM
HashKeyCopier - An AngularJS Utility Class For Merging Cached And Live Data
Ben - thanks so much for posting these Angular articles and findings, they've been a huge help towards learning one of the more 'complex' JavaScript frameworks out there (IMO). I have been using Angu ... read »
May 16, 2013 at 5:01 PM
UPDATE: Parsing CSV Data Files In ColdFusion With csvToArray()
Your code was the closest thing I've found to obtaining some direction for converting ISO fields to values that CF can translate properly. Thank you for posting! ... read »
May 15, 2013 at 10:37 PM
Very Simple Pusher And ColdFusion Powered Chat
hi id making plz easy ... read »
May 15, 2013 at 6:07 PM
Making SOAP Web Service Requests With ColdFusion And CFHTTP
Ben, you once again saved my bacon at work. Thank you, thank you, thank you! ... read »
May 15, 2013 at 4:15 PM
What If All User Interface (UI) Data Came In Reports?
@Josh, Thanks! @Ben, I definitely recommend the David West book "Object Thinking" I've been quoting from. It goes deeply into the philosophy and history of OO programming. His breadth ... read »
May 15, 2013 at 11:36 AM
Ask Ben: Print Part Of A Web Page With jQuery
I found this helpfull when you need to keep (refresh) the original parent page after closing the iframe child print dialog (Hoping you're not using a form at this time so it won't submit again): On ... read »
May 14, 2013 at 7:13 PM
What If All User Interface (UI) Data Came In Reports?
@Jonah, If there's any books you'd recommend on the subject of domain modelling, I'd love to hear it. I just downloaded the free PDF of "Domain Driven Design Quickly". Figured I'd give it ... read »
May 14, 2013 at 6:57 PM
The UX Of Prototyping: Low-Fidelity Is The New High-Fidelity
@Phillip, I'm not sure I follow what you mean? Are you saying that you looked at the list of widgets provided by the jQuery UI and let that be your style guide? ... read »
InVision App - Prototyping Made Beautiful With Prototyping Tools