Making a Custom Lorem Ipsum Generator

My first official app idea came in a weird way. I needed placeholder text for a web project and thought, "There's lots of weird Lorem Ipsum makers out there. Is there one for my favorite video game?" That game is the Ace Attorney franchise. And no, there wasn't. Cue personal outrage.

Fast forward to today, and Ace Attorney Ipsum is now available for all, deployed on Heroku as a simple Node app.

It doesn't have much complex code since, unsurprisingly, spitting out random text isn't that tough. It's also not perfect, since I'm still building my intermediate JavaScript skills. But I thought I'd break down the steps I took to making this custom Lorem Ipsum generator, since it was an easy yet enjoyable challenge. Hopefully someone reading this can make placeholder text from their favorite franchise available to the world too!

Make an Array of all the Text

The first step was obvious: I needed quotes. A LOT of quotes. In my case I got lucky and found the WikiQuote page for all the released Ace Attorney games at that time. The page was just what I needed - I just had to copy the HTML, remove the tags, put them in a JS array, clean up the punctuation, and it was done. My final result had this basic format:

const lines = [ 
    "Random sentences go here, one at a time!",
    "Here's another one! Just keep adding them on.",
    "Look, here's another one.",
    "And yet another. Along with dozens of others."

    // ...lots of other lines here
];

The more lines the better, and mine has at least 1300. Obviously this is overkill, and 100 lines is likely a safer minimum. You can maybe get away with less, since people likely won't care about some repeat lines every now and then.

Get a Random Line

Over time I've found I work best by breaking down a coding problem into smaller steps, and coding each step one by one. So I worked backwards from my final goal of creating paragraphs of Lorem Ipsum. For that I'd need to make a paragraph. For that I'd need a random bit of text.

I started with getting a single line from the array. The function is simple with ES6 and fits in one line:

const random_quote = () => lines[Math.floor(Math.random() * lines.length)]

Make a Random Paragraph

Using random_quote() now gives me, surprise, a random quote! Now I needed to do this several times to make a paragraph.

The function was only slightly tougher. The sole difference was setting the number of lines. I wanted some variance for a mix of short and large paragraphs. So this function gets 3-6 random quotes and puts them together like so:

const random_paragraph = () => {
  let
    num = Math.floor(Math.random() * (6 - 3 + 1) + 3),
    lines = ''
  ;

  for (var i = 0; i < num; i++) { lines += (random_quote() + ' '); }

  return lines;
}

Make Lots of Random Text

Now random_paragraph() makes a placeholder paragraph. The last task was making lots at once.

The catch is I wanted to let users decide how many paragraphs, so this function accepts a parameter for that. Plus this is final function the app used, so I exported it.

exports = function(num) {
  let ipsum = [];

  while ( ipsum.length < num ) { ipsum.push(random_paragraph()); }

  return ipsum;
}

Now it can make any number of Lorem Ipsum paragraphs a user asks for! Here's how it's used in the app itself, using Express for the routing. As I write this the current version uses require() instead of import, but I've updated it since it's more in line with ES6.

import {express} from 'express';
import {ipsum} from './_javascript/ipsum';

let router = express.Router();

router.get("/", function(request, response) {

  response.render("index", {
    title: "Ace Attorney Ipsum",
    ipsum: ipsum(3)
  });
});

router.post("/", function(request, response) {

  let paragraphs = request.body.paragraphs

  response.render("feed", {
    title: "Take That!",
    ipsum: ipsum(paragraphs)
  });
});

I use this ipsum function twice. The first creates three example placeholder paragraphs on the homepage. The second creates however many a user asks for from the homepage. The output is an array without <p> tags, so the template adds those when looping through the ipsum variable.

Keeping a Modular Approach

Once the functionality was done, I decided against combining these three functions into a single exportable one in the name of maintainability. For me, three simpler functions are always better understood than a single, cramped one. Plus if I want to use these pieces elsewhere, each is separate and easy to carry over. The code's more readable and flexible in the long-run.

As much as I enjoy writing code with this approach, I still encourage others to find a different approach! One of my favorite parts of coding is the same problem has near-infinite solutions. And Lorem Ipsum generators are one of those great projects that's simple but allows for creativity.

So choose your own favorite video game or television franchise, find some quotes, and give it a try! I'm sure your fellow fans will enjoy it too.

Comments

[Renato Cassino]

You can use the myipsum.net too.
You can create multiple lorem ipsums with subdomain.

Example: myname.myipsum.net