Proof of Concept: Components

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.

Related: portfolio_project_xio explains a little about front-end components.

Front-end Components

Footnotes

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.

Obfuscation

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.