Tobias Bjerrome Ahlin

Loremify

Loremify is a one-click tool to copy Lorem Ipsum. It lets you wrap in html, specify the amount of text, and copy it to your clipboard—all in one click.

Loremify runs as a Dashboard Widget in Mac OS X, and is a mere 400kb download. In this case study I’ll take your through how I built it—if you want to download it, see my blog post on Loremify.

Oh-My-God-This-Takes-Forever

After using countless of lorem ipsum services, I became fed up of making 3-4 choices before it handed over the god damn nonsense text. I started thinking about how I could compromise all those choices into—ultimately—one click.

The first sketches consisted of three buttons with rulers beneath them, to enforce the skimming metaphor. With this design you could 1) choose context by choosing a button, 2) choose the amount of text and 3) copy it to your clipboard—all in one click. The text would be copied to your clipboard as you clicked a button, and a marker would show up when hovering a button to help visualize the selection size (here shown on List). This first sketch was very close to the final interface, but a few problems appeared as I started to build it:

• It was too cluttered
• I wanted more information about the selection
• I had a hard time giving any visual feedback when text had been copied

So I decided to scrap the rulers for a display. This made it less cluttered; I could show information exactly when I needed it—like details about the selection, or the “click top copy”-instruction—and then hide it. I could easily give some visual feedback when you clicked a button, and it also brought with it an unexpected benefit.

Each button has a unique maximum value to suit its selection type; a heading generally consists of few words, where as a paragraph can be quite long. A ruler (the first sketch) is linear, yet the more text you select the less exact you have to be. There’s a big difference between five and ten words, but not so much a difference between, say, 500 and 505 words. Thus, it would be easier if you chose your selection by an exponential curve—not a linear.

When there were no rulers beneath the buttons and the display showed the exact amount of text, the exponential curve felt very natural as I implemented it. I would guess most won’t even notice—it just behaves as you want it to—which is exactly the point.

The Icon

The icon for Loremify is very simple—it’s basically the interface minimized to the size of 73×74px—but it also tells you how to use it. Click a button to copy.

Building it with jQuery

I had no plans on building this widget on my own—I had searched for a developer for quite some time—until I realized I could build it with jQuery. I added jQuery to the project in Dashcode, and the whole widget took just a few days to build, tweak and test. Almost everything in jQuery works out of the box in Dashcode—except some crucial features.

For some reason, the mouseover/mouseenter event doesn’t trigger on link elements. If you want to use these events (like I did), you have to create a button with Dashcodes interface builder and use that as a starting point. I couldn’t find much documentation on using jQuery to build Dashboard widgets so it was all a trial and error process—though not that painful.

What could be better

Of course, there are some things that could be better. It’s an early release, and I’ll be working to improve it, but this is what currently bugs me:

• Occasionally it can take some time to wake it up after launching Dashboard.
• Some seem unable to install it — “This is not a widget”. I have no idea if this is a bug on my side, or in OS X.
• There’s some delay (milliseconds) when you click a button before the check-mark appears. This problem isn’t present while running it in Dashcode, though.

If you have any idea how to fix any of these issues, please drop me a line on twitter.