Proof of Concept: Components

payload for smtp2go
string <div class="xio-alert" style="font-family: arial; font-weight:normal; line-height: 1.319; color:dimGray; border:2px solid indigo; padding:0.25rem; background-color:white;"> <div class="xio-alert-title" style="color: white; background-color: indigo; padding: 0.25rem; font-weight: bold; margin: -.25rem -.25rem .5rem"> xio | production | | Check for obfuscation in google </div> User Agent: CCBot/2.0 (<br> (still mangled by apache)<br> Requested Path: /blog/Proof-of-Concept-Components Sarumino production </div> <!-- ==start== dump {ts '2022-12-01 17:46:23'} format: html --> <div id="x23" class="-lucee-dump"><style> .-lucee-dump .disp-none { display: none; } </style> <script> window.__Lucee = { initialized : false, addEventListeners : function(selector, event, handler, useCapture){ useCapture = useCapture || false; document.querySelectorAll(selector) ,function(el, ix) { el.addEventListener(event, handler, useCapture); } ); } ,getNextSiblings : function(el){ var orig = el ,result = []; while (el && el.nodeType === Node.ELEMENT_NODE) { if (el !== orig) result.push(el); el = el.nextElementSibling || el.nextSibling; } return result; } ,onDocumentReady : function(){ var L = window.__Lucee; if (L.initialized) return; L.addEventListeners(".collapse-trigger", "click", function(evt){ var tr ="tr"); var siblings = L.getNextSiblings(tr); siblings.forEach(function(el, ix){ el.classList.toggle("disp-none"); }); }); L.initialized = true; } } document.addEventListener("DOMContentLoaded", __Lucee.onDocumentReady); </script> <style type="text/css"> div#x23 table {font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:11px; empty-cells:show; color:#000; border-collapse:collapse;} div#x23 td {border:1px solid #000; vertical-align:top; padding:2px; empty-cells:show;} div#x23 td span {font-weight:bold;} div#x23 td.luceeN0 {color:#333399;border-color:#333399;background-color:#ccf;} div#x23 td.luceeH0 {color:#333399;border-color:#333399;background-color:#99f;} div#x23 td.luceeN1 {color:#990000;border-color:#990000;background-color:#fc9;} div#x23 td.luceeH1 {color:#990000;border-color:#990000;background-color:#f60;} div#x23 td.luceeN2 {color:#999999;border-color:#999999;background-color:#ccc;} div#x23 td.luceeH2 {color:#999999;border-color:#999999;background-color:#fff;} </style> <table title="/var/www/xio/production/com/alerter/alerter.cfc:248"><tr><td class="luceeH2">ALERT</td></tr><tr><td class="luceeN2"><table><tr><td class="collapse-trigger luceeH0" colspan="4" style="cursor:pointer;"><span>Scope Arguments</span></td></tr><tr><td class="luceeH0">stop</td><td class="luceeH0">1</td><td class="luceeN0"><table><tr><td class="luceeH1">boolean</td><td class="luceeN1">false</td></tr></table></td></tr><tr><td class="luceeH0">links</td><td class="luceeH0">2</td><td class="luceeN0"><table><tr><td class="collapse-trigger luceeH0" colspan="3" style="cursor:pointer;"><span>Struct</span></td></tr><tr><td class="luceeH0">Bing</td><td class="luceeN0"><table><tr><td class="luceeH1">string</td><td class="luceeN1"></td></tr></table></td></tr><tr><td class="luceeH0">DuckDuckGo</td><td class="luceeN0"><table><tr><td class="luceeH1">string</td><td class="luceeN1"></td></tr></table></td></tr><tr><td class="luceeH0">Google</td><td class="luceeN0"><table><tr><td class="luceeH1">string</td><td class="luceeN1"></td></tr></table></td></tr></table></td></tr></table></td></tr></table></div> <!-- ==stop== dump --><hr>timestamps, application mode, cgi info, etc.<hr>request uuid: true
stringAlex <>
stringxio | production | | Check for obfuscation in google

This blog post is not for pleasure reading. I’m using it to prove, show-off, and repeatedly test components I’m developing for this site. It gets pretty nerdy.

Front-end Components

Footnotes are the raised superscript like you see at the end of this sentence.

I’ve put together a component that collects footnotes inline during the output of an article, and then later we call the component to output the actual text of the collected footnotes. They are numbered automatically. If one of them fails, no superscript number is output.

Later, wherever I want the footnotes to appear, I call:

I like this solution because it fails gracefully (ie no output), and all the information is in one place: right where the writer was already thinking about it.


In my template, the above HTML is captured and passed to the obfuscator (gist not actually updated, it’s just an example):

This yields the following HTML:

…which doesn’t look like anything, unless you actually run the javascript. When your browser runs the JavaScript, it renders the normal looking HTML paragraph above. It also has a graceful fallback if the user turns off JavaScript. Note also that I am calling other component methods before the obfuscator. As long as it makes HTML, it all works.

I’ll check on that search result every once in a while. If you get this page in your search results, please let me know using the contact form and I'll send some puzzle ranking points your way.

  1. A footnote is often used for citation, but many writers like to put related and interesting information that doesn’t belong in the referring text.