One day build: Chippy Ipsum

Fellow designers, did you ever felt your lorem ipsum is lacking some…chips?

Well I’ve got just the solution for you: Chippy Ipsum!

Chippy ipsum dolor amet skate fish cake jumbo battered vegetarian saussage burger burger curry chips chicken burger pickled onion. Cheeseburger chicken burger jacket potato vinegar irn-bru coleslaw fried chicken fish. Jumbo saveloy battered plaice pickled egg beef burger mixed salad onion rings cheeseburger battered haddock. Battered skate cheeseburger irn-bru gravy chips chips fish cake lemonade.

That’s a sample fetched directly from Chippy Ipsum. Try it yourself! Use it, don’t use it, abuse it, etc. As you can see it is laced with your favourite (and less favourable) items from your typical chip shop.

Wh….Why?

I’m bored.

I don’t do that when I’m bored…

Alright, seriously, I’m just a bit burnt out from working on my personal secret project for the past week and thought I should take some time out…and make another project. 🤦‍♂️

For the secret project I was working on, I needed some dummy text. Traditionally you get some lorem ipsum:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis convallis augue. Fusce dapibus euismod felis sit amet rhoncus. Etiam vel ante dui. Curabitur augue ipsum, congue sit amet eros eu, semper iaculis nisi. Proin velit ante, consectetur vel metus eget, fringilla suscipit dui. Curabitur finibus, dolor vel semper tincidunt, lacus justo viverra velit, sit amet convallis magna urna at urna. Vestibulum sagittis ligula eu tempor lacinia.

However, quite awhile ago I found Bacon Ipsum:

Bacon ipsum dolor amet jowl pastrami sausage tenderloin porchetta. Leberkas short loin tongue meatball alcatra andouille drumstick. Jerky kevin strip steak swine sirloin chuck ham. Cow beef ground round filet mignon cupim.

I had been using Bacon Ipsum just for the heck of it, it’s just dummy text and my brain tunes out of text I don’t want to read anyway. When conceiving Chippy Ipsum I was thinking what I could make quickly and still be a fun thing to do. It’s been awhile since I made anything useless and I could really use some salty chip shop chips nowadays, so why not make Chippy Ipsum?

The Technical Bits

For Bacon Ipsum, it is simply a Wordpress site generating the dummy text with backend PHP scripts, there’s a plugin for creating lorem ipsum site as well if you are interested. I, however, decided that I don’t want to spend too much money on this and I’m only going to spend money registering chippyipsum.com. That means I am not going to hire a backend server and I’ll stick to what I’m familiar with, front end only webpage.

It’s the standard HTML, CSS and Javascript. I’m just going to focus on the JS side here as the other parts are not as interesting. I’m only using two libraries on the site: jQuery for DOM manipulations and RiTa.js for generating the dummy text. Worth mentioning as well is I’m using the (relatively) new Fetch API in vanilla JS which is one of my favourite vanilla JS API out there. I’ve implement it for p5.js v0.5.8 and find it just such a breeze to use. I’ll write up about it some other day, perhaps when p5.js usage of it stabilized a bit more so I can speak more from experience.

What I want to talk about is RiTa.js. RiTa.js is a library (available in Java as well) for computational literature and natural language analysis & generation. It is a pretty comprehensive library covering almost everything you would need for computational literature. I have used it in another unpublished project before in more or less the same way I did this time, it is a very well made library.

The part of RiTa.js I used is RiGrammar. It is one of two text generation method provided by RiTa.js (the other being Markov chains). RiGrammar uses a grammar file and according to the definition of the grammar file, randomly generates a “sentence” following the grammar you defined.

Back in Primary School

Let’s have a look at Chippy Ipsum’s grammar file: (json)

RiGrammar let’s you expand from the item <start>, when it reaches a label which correspond to another item in the json file, it will expand that expression before continuing, if it finds an array, it will randomly pick an item from that array and carry on.

The main grammar rule for Chippy Ipsum is the <menu-items> rule which contains all the possible menu items I can think of for a regular chip shop, some items expand to other rules as well such as <condiments> expand to ["vinegar", "mayonaise", "ketchup"]. RiGrammar will churn through the grammar file and by default return one menu item.

RiGrammar also allows you to add new grammar rule on the fly so I use that to create rules that generate sentences with random length of 8–13 words to create a bit more variety (I probably can do this in the rule file itself as well, see if you can figure out how 😉). Next, I combine multiple sentences to form a paragraph then combine multiple paragraphs to finish the whole dummy text.

That’s it really, I got the domain, publish the site on surge.sh and done.