🍪 Oreoreoreo + Making Things You Can Finish

I’ve been spending the bulk of my dev time since last summer flutter app.

I’m the kind of person who ends up building frameworks and tooling for things when they work on a project long enough. I get a perverse satisfaction from ergonomic APIs and developer productivity.

But lately I’ve been craving the feeling of doing a thing, putting it out there, and being done with it.

So anyway, check out oreoreoreo. it’s a dumb meme site I made to generate cookies from that one oreo meme

How it Works

oreoreoreo uses an ohm-js grammar to parse the oreo tokens from an input string. Their interactive editor is great and you should give it a try.

The oreoreoreo grammar itself is pretty straightforward

CookieGrammar {
    CookieStack = (Cookie | Cream)*
    Cookie = "o" ("r" ~ "e")*
    Cream = "r" "e"+
}

Two notable expansions on the template “oreo meme” grammar were

• Thicker cream can be made by an r followed by repeating es

• Thicker cookies can be made with an o followed by repeated rs.

  • This means that the meaning of the r will change from “part of a cookie” to “part of cream” based on if it is followed by an e or not.

That gets translated into a a whole lot of DOM elements

<section class="oreoreo-display" id="oreoreo-host">
  <section style="z-index: 1000" class="biscuit cookie">
    <section class="segment"></section>
    <section class="segment"></section>
    <section class="segment"></section>
  </section>
  <section style="z-index: 999" class="biscuit filling">
    <section class="segment"></section>
    <section class="segment"></section>
  </section>
  <section style="z-index: 998" class="biscuit cookie">
    <section class="segment"></section>
    <section class="segment"></section>
  </section>
</section>

And then styled and spaced relative to one another appropriately with CSS adjacency selectors.

All that just to generate some dumb meme images.

I hope you enjoy it!