Bob Ross, Lorem Ipsum, Heroku and Cloudflare Workers

It may not be immediately obvious how these things are related, but bear with me... It was 4pm Friday and one of the engineers on the Cloudflare Tools team came to me with an emergency. "Steve! The Bob Ross Ipsum generator is down!".

If you've not heard of Lorem Ipsum, it's an extract from a latin poem that designers use as placeholder text when designing the layout of a document. There are generators all over the web that will spit out as much text as you need.

Source: Wikipedia

Of course, the web being the web that we all love, there are also endless parodies of Lorem Ipsum. You can generate Hodor Ipsum, Cat Ipsum and Hipster Ipsum. I have a new, undisputed favourite: Bob Ross Ipsum.

Not growing up in the U.S., I hadn't come across the lovable, calm, serene and beautiful human that is Bob Ross. If you haven't spent 30 mins watching him paint a landscape, you should do that now. He built a following as host of the TV show “The Joy of Painting” which ran on the U.S. PBS channel from 1983-1994. He became famous for his relaxed approach to painting and his catch phrases like “Happy Little Trees”

Here's a sneak peek of the sort of language you'll hear. I feel better already!

Remember how free clouds are. They just lay around in the sky all day long. These things happen automatically. All you have to do is just let them happen. There are no mistakes. You can fix anything that happens. Volunteering your time; it pays you and your whole community fantastic dividends. You create the dream - then you bring it into your world. You can do anything here - the only prerequisite is that it makes you happy. A tree needs to be your friend if you're going to paint him. Nice little clouds playing around in the sky. Pretend you're water. Just floating without any effort. Having a good day. Nature is so fantastic, enjoy it. Let it make you happy.

OK, so it turned out the distressed engineer always uses Bob Ross Ipsum when he's building UIs. But the site was down!

My guess is the site got popular enough that the VPS wasn't worth paying, or the hosting provider didn't appreciate the traffic. As a well-trained Cloudflarian, my initial response was:

OK Step 1, stand on the shoulders of giants. Has anyone open sourced a Bob Ross Lorem Ipsum Generator?

$npm search "bob ross"
NAME                      | DESCRIPTION          | AUTHOR          | DATE       | VERSION  | KEYWORDS       
postcss-bob-ross-palette  | Bring a little Bob…  | =jonathantneal  | 2015-12-01 | 1.0.1    | postcss css pos
bob-ross                  | Bob Ross Color…      | =azz            | 2017-02-14 | 1.0.0    | Bob Ross Color 
hubot-ross                | A hubot script to…   | =tcrammond      | 2015-03-31 | 1.0.1    | hubot hubot scr
bob-ross-lipsum           | Phrases from Bob…    | =forresto       | 2016-01-15 | 1.1.1    | lorem ipsum

Of course they have! And the code is delightfully simple:

function getPhrase () {
  return phrases[Math.floor(Math.random()*phrases.length)]
}

function getPhrases (length) {
  if (!length) length = 1
  var happyPhrases = []
  for (var i=0; i<length; i++) {
    happyPhrases.push(getPhrase())
  }
  return happyPhrases.join(' ')
}

// Compiled by http://www.bobrosslipsum.com/ 2016 January
var phrases = [...elided for clarity...]

Assuming we've registered a domain and put it on Cloudflare, let's see how quickly can we get a globally distributed, highly available API running in 150+ data centers, to generate some Bob Ross Lorem Ipsum.

I'm going to:

1. Launch workers

2. Confirm I get console output

3. Put a test response

4. Paste in my code to generate Bob Ross Lorem Ipsum

5. Test it out

6. Add a route

7. Save*

8. Request it in the browser

* This pushes it to 150+ data centers... no biggie.

So it takes about 90 secs to build a basic Worker serving dynamically generated text from the Edge. It blows me away just how productive you can be with Cloudflare Workers. With a few clicks, we have code deployed to 150+ data centers and within 10ms of 90% of the world's Internet population. And it's fast.

The more I use it, the more it reminds of Heroku, and how ease-of-deployment and the developer experience really drove adoption of that platform.

OK, so generating dynamic text is OK for an MVP, it would be nice if we at least had a UI and some options. You can use Webpack to bundle resources in your Workers, but I wanted this app to be as simple as possible, so I created a basic HTML page to capture some options, included my HTML as a string, and served it from the root of my Worker. The full code listing is on  Github.

const ui = '...basic html page...';

async function handleRequest(request) {

    let url = new URL(request.url);
    //Serve the UI
    if (url.pathname === "/" ) {
        let init = { "status" : 200 , "headers" : { 'Content-Type': 'text/html' } };
        return new Response(ui, init);
    }

    let phraseCount = Math.min(parseInt(url.searchParams.get("phrases") || 100), 10000);
    let newLine = Math.min(parseInt(url.searchParams.get("newline") || 0), 10000);

    let phraseArr = getPhrasesArr(phraseCount);
    if (newLine > 0) {
        phraseArr = breakLines(phraseArr, newLine);
    }
    return new Response(phraseArr.join(''));
}

The team is now unblocked. Development can continue. Here's the full version in action. You can play with it live at: https://www.bobrossloremipsum.com

Want to join a rocketship? I’m hiring in Austin and San Francisco