Categories
News

Rand-o-Matic

Last week, I built a little widget for MindPosts.com that generates random quotes as if from Ayn Rand characters.

The generator uses pretty CSS3 styles in modern browsers.

My good friend, Rick Marazzani, put together the phrases and the template for combining them. I built the framework that allows anyone to embed the quotes in any Web site. Rick explained the philosophical ideas behind the RAND-o-matic. I want to discuss the technology.

To place the widget in an HTML document, you make a div element and you fetch a remote javascript file.

<div id="randomatic"></div>
<script type="text/javascript">//<![CDATA[
//Set width in pixels to 150-600
var randomaticWidth = 300;
(function() {
  var rom = document.createElement('script');
  rom.type = 'text/javascript';
  rom.async = true;
  rom.src = 'http://labs.18int.com/randomatic/randomatic.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(rom, s);
})();
//]]></script>

Rather than include the javascript straight away, I used javascript to generate a script tag. This ensures that rendering of the page does not block while the remote file is fetched. The remote script in turn creates new DOM elements and pulls in styles. This makes it easy for anyone wanting to use the widget, while also saving all of the control of functionality and design for me.

Look at the bottom of the right navbar to see the widget in action. It will generate a new quote every 20 seconds, or you can click the box to make a new one. In addition to the CSS3 styles I used for rounded corners and shadows, I also added little icons for posting the current quote to Facebook or Twitter. There really isn’t much magic to that–only making the right URL and sending the browser there.

One interesting hurdle was getting Facebook to take the recommended title text for wall posts. When you post a link to your news stream, Facebook pulls the remote URL and looks for Open Graph tags. The quotes are made in javascript, so I pass the whole quote back to the home page of the widget so that the PHP script there can set tags to match. I can even tell Facebook which icon to use along with the news item.

With the new Atlas Shrugged film opening in a couple of weeks, this can be a whimsical way to celebrate Rand’s greatest work. I also hope it generates attention for MindPosts and 18INT.

Enhanced by Zemanta