Kae Job Sluder

5 July 2025: Strudel, New Role, and Mermaid Diagrams in Eleventy

Strudel: Learning to Understand cat, seq, and stack

I've been experimenting with music programming languages. This week it's been strudel which is built around the concept of a cycle—typically either a measure or a beat in most music notation.

Strudel interprets strings that represent sequences of notes, drumbeats, or other events. "c4 e4 g4" plays three notes of a c-major chord. But a tricky matter is determining how the notes should be interpreted. Does that fit in one cycle (fast) or three cycles (slow)? After a fair bit of frustration, I learned the following concepts for strudel. Something that tripped me up here was that the Strudel docs teach the abbreviated notation first.

Patterns can be nested inside each other. The example below is a simple Strauss waltz loop that consists of four sequences [bd rim rim] inside a cat <[bd rim rim] ...>.

Here's the logic in flowchart form.

flowchart TD
    Start["I want to play notes..."]
    Choice1{"... at the same time?"}
    Stack["stack"]
    Choice2{"... over multiple cycles?"}
    Cat["cat"]
    Seq["seq"]

    Start --> Choice1
    Choice1 -- Yes --> Stack
    Choice1 -- No --> Choice2
    Choice2 -- Yes --> Cat
    Choice2 -- No --> Seq

New Role

Starting in October I'll transition from contract to full time software development at Prime Revenue focused on JS. It's been a four-year journey and I'm very thankful for all the people at Ada Developer's Academy, Amazon, and Prime Revenue who have given me valuable support, advice, and learning opportunities.

Getting Mermaid on This Page

In the template base.njk, add the code to load and run the mermaid api.

<script type="module" eleventy:ignore>
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
</script>

Create a paired shortcode in eleventy.config.js to explicitly format the code block:

eleventyConfig.addPairedShortcode("mermaid", function (content) {
	return `<pre class="mermaid">${content}</pre>`;
});

Use the shortcode to wrap the mermaid code in a <pre> block in the post markdown.

{% mermaid %}
flowchart TD
    Start["I want to play notes..."]
    Choice1{"... at the same time?"}
    Stack["stack"]
    Choice2{"... over multiple cycles?"}
    Cat["cat"]
    Seq["seq"]

    Start --> Choice1
    Choice1 -- Yes --> Stack
    Choice1 -- No --> Choice2
    Choice2 -- Yes --> Cat
    Choice2 -- No --> Seq
{% endmermaid %}