+ All Categories
Home > Technology > Cloud mafia etan_email_template_proj

Cloud mafia etan_email_template_proj

Date post: 24-Jun-2015
Category:
Upload: etan-lightstone
View: 104 times
Download: 0 times
Share this document with a friend
Description:
New Relic Cloud Mafia talk
Popular Tags:
58
Developing “rich” email reports Etan Lightstone New Relic @ Cloud Mafia Friday, February 17, 12
Transcript
  • 1. New Relic @ Cloud MaaDeveloping rich email reportsEtan LightstoneFriday, February 17, 12

2. Browser monitoringFriday, February 17, 12 3. Friday, February 17, 12 4. Server monitoringFriday, February 17, 12 5. What Im going to talk aboutFriday, February 17, 12 6. What Im going to talk about Weekly email report introFriday, February 17, 12 7. What Im going to talk about Weekly email report intro Email report re-design goalsFriday, February 17, 12 8. What Im going to talk about Weekly email report intro Email report re-design goals HTML technical hurdlesFriday, February 17, 12 9. What Im going to talk about Weekly email report intro Email report re-design goals HTML technical hurdles JavaScript charts and NodeJSFriday, February 17, 12 10. Weekly email reportsFriday, February 17, 12 11. Weekly email reportsFriday, February 17, 12 12. Weekly email reports, for big accountsFriday, February 17, 12 13. Weekly email report re-design goalsFriday, February 17, 12 14. Weekly email report re-design goals Target early customers & cold customersFriday, February 17, 12 15. Weekly email report re-design goals Target early customers & cold customers Better summary of most relevant data, withvisual appealFriday, February 17, 12 16. Weekly email report re-design goals Target early customers & cold customers Better summary of most relevant data, withvisual appeal Give customers a taste of our real UIFriday, February 17, 12 17. Weekly email report re-design goals Target early customers & cold customers Better summary of most relevant data, withvisual appeal Give customers a taste of our real UI Draw more clicks back to New RelicFriday, February 17, 12 18. Weekly email report re-design goals Target early customers & cold customers Better summary of most relevant data, withvisual appeal Give customers a taste of our real UI Draw more clicks back to New Relic Not upset people who use the current reportFriday, February 17, 12 19. Finished designFriday, February 17, 12 20. Limitations of HTML emailsFriday, February 17, 12 21. Limitations of HTML emails Code like its 1999 (in-line css, limited tag and style support)Friday, February 17, 12 22. Limitations of HTML emails Code like its 1999 (in-line css, limited tag and style support) Use tables for layoutFriday, February 17, 12 23. Limitations of HTML emails Code like its 1999 (in-line css, limited tag and style support) Use tables for layout 640px widthFriday, February 17, 12 24. Limitations of HTML emails Code like its 1999 (in-line css, limited tag and style support) Use tables for layout 640px width Check how it renders without imagesFriday, February 17, 12 25. Limitations of HTML emails Code like its 1999 (in-line css, limited tag and style support) Use tables for layout 640px width Check how it renders without images Always include a plaintext versionFriday, February 17, 12 26. Limitations of HTML emails Code like its 1999 (in-line css, limited tag and style support) Use tables for layout 640px width Check how it renders without images Always include a plaintext version No JavaScriptFriday, February 17, 12 27. Limitations of HTML emails: http://www.campaignmonitor.com/css/Friday, February 17, 12 28. Limitations of HTML emails: http://www.campaignmonitor.com/css/You can forget aboutcss positioning, use a based pagelayoutFriday, February 17, 12 29. Limitations of HTML emails: http://www.campaignmonitor.com/css/Friday, February 17, 12 30. Limitations of HTML emails: http://www.campaignmonitor.com/css/ No background images!Friday, February 17, 12 31. Version 2Our browser monitoringchartFriday, February 17, 12 32. Version 2Our browser monitoringchartFriday, February 17, 12 33. Highcharts libraryA quick example

Friday, February 17, 12 34. Highcharts libraryA quick example

Renders in-browser:Friday, February 17, 12 35. Highcharts libraryA quick example

Renders in-browser:Friday, February 17, 12 36. Charts in an html emailFriday, February 17, 12 37. Charts in an html email JPEG or html based chartsFriday, February 17, 12 38. Charts in an html email JPEG or html based charts Leverage our existing chart codeFriday, February 17, 12 39. Charts in an html email JPEG or html based charts Leverage our existing chart code Dont store thousands of chart imagesindenitelyFriday, February 17, 12 40. Charts in an html email JPEG or html based charts Leverage our existing chart code Dont store thousands of chart imagesindenitely What if an ex-customer opens the email?Friday, February 17, 12 41. Enter NodeJS ... and convertServer side JavaScript Unix command-line svg -> jpeg conversion toolFriday, February 17, 12 42. Enter NodeJS... and convertServer side JavaScriptUnix command-line svg -> jpeg conversion tool // Using express http server var express = require(express); var app = express.createServer(express.logger()); var jsdom = require(jsdom), var spawn = require(child_process).spawn; // Load Jquery and Highcharts too app.get(/, function(request, response) { var window = jsdom.jsdom().createWindow(); // Prepare a div container var $ = window.jQuery, Highcharts = window.Highcharts, document = window.document, $container = $(

), chart, svg, convert, buffer; $container.appendTo(document.body);Friday, February 17, 12 43. // Create the chartchart = new Highcharts.Chart({ chart: { renderTo: container, type: bar }, series: [{ data: [16.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] });// Grab the chart from the container svg = $container.children().html();// Use convert toolconvert = spawn(convert, [svg:-, jpeg:-]);response.contentType(image/jpeg);// Pump in the svg contentconvert.stdin.write(svg);convert.stdin.end();// Write the output of convert straight to the response convert.stdout.on(data, function(data) {response.send(data, binary); });} // END of app.get /Friday, February 17, 12 44. // Create the chartchart = new Highcharts.Chart({ chart: { renderTo: container, type: bar }, series: [{ data: [16.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] });// Grab the chart from the container svg = $container.children().html();// Use convert toolconvert = spawn(convert, [svg:-, jpeg:-]);response.contentType(image/jpeg);// Pump in the svg contentconvert.stdin.write(svg);convert.stdin.end();// Write the output of convert straight to the response convert.stdout.on(data, function(data) {response.send(data, binary); });} // END of app.get /Friday, February 17, 12 45. // Create the chartchart = new Highcharts.Chart({ chart: { renderTo: container, type: bar }, series: [{ data: [16.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] });// Grab the chart from the container svg = $container.children().html();// Use convert toolconvert = spawn(convert, [svg:-, jpeg:-]);response.contentType(image/jpeg);// Pump in the svg contentconvert.stdin.write(svg);convert.stdin.end();// Write the output of convert straight to the response convert.stdout.on(data, function(data) {response.send(data, binary); }); Thanks David Padbury} // END of app.get /https://github.com/davidpadbury/node-highchartsFriday, February 17, 12 46. Dealing with {data: [] }Friday, February 17, 12 47. Dealing with {data: [] } Friday, February 17, 12 48. Dealing with {data: [] }Friday, February 17, 12 49. Dealing with {data: [] } data_series = JSON.parse(unescape(request.param(chartjson, null)));Friday, February 17, 12 50. Size limitsFriday, February 17, 12 51. Size limitsFriday, February 17, 12 52. Size limitsFriday, February 17, 12 53. Size limitsFriday, February 17, 12 54. Size limits Anything beyond 2000 characters is riskyFriday, February 17, 12 55. Size limits Anything beyond 2000 characters is risky Compress using zlib in Ruby & NodeFriday, February 17, 12 56. Size limits Anything beyond 2000 characters is risky Compress using zlib in Ruby & Node Dont escape json?Friday, February 17, 12 57. Size limits Anything beyond 2000 characters is risky Compress using zlib in Ruby & Node Dont escape json? Lower resolution chartFriday, February 17, 12 58. Thanks!Questions?Friday, February 17, 12


Recommended