When making games, I stumbled across a video talking about making a game feel 'juicy'. The idea was that 80% of the work was in the polish of the game, making things shake, stretch, bounce, pop, and generally feel good to interact with. This concept immediately resonated with me, and I started trying to implement it in my games straight away.

As I saw the fruits of this labor, I started thinking about its application in areas outside game development and realized the same principles applied pretty much anywhere but were obvious in the world of web development. Not everything needed to shake and beep, but crafting a UI that was satisfying to use is the holy grail of UX.

I started looking for libraries I could reach for and documented them in a public Github repo called "Pulp" (despite hating juice with bits, I couldn't resist the pun).

When Hacktoberfest rolled around, I realized it was an excellent, low-pressure candidate for people new to the Git process to collaborate on. Not only could people get a feel for open-source contribution in an easy to implement way, but they would also be encouraged to explore new libraries that might help them in the future.

Splain holds a special place in my heart as my first real public project. It was way too ambitious for me at the time, but over a few years, I persisted and iterated until I saw the results I wanted. Although now completely superseded by LLMs, I am still proud of tackling something so unthinkably big to me at the time.

Splain is a template library to create varied and dynamic text. The basic idea is to build a dictionary of phrases correlating to tags. These could then be used recursively to build more complicated language.

(The following examples are heavily inspired by the Sims loading messages that I thought were just the funniest when I was younger.)

For example:

let Splain = require("./splain");

Splain.addEntry({
    loading: {
        message: [`loading {{loading.media}}`, `extracting {{loading.media}}`, `compiling {{loading.media}}`, `signing in`],
        media: [`assets`, `images`, `effects`, `music`]
    }

});

function showLoadingMessage() {
    console.log(Splain.process(`{{loading.message}}`));
}

setInterval(showLoadingMessage, 5000);

The output of this could be something like loading assets or extracting media, and even in this simplified case, we gain the power of permutations to turn a few words into tens of different phrases.

This can then be built on to create more complicated language. For example:

Splain.addEntry({
    message: [`{{loading.prefix?4loading.content loading.suffix?5}}`],
    content: [`{{loading.verb loading.media}}`, `signing in`],
    prefix: [`currently `, `please hold `, `skipping `],
    suffix: [`, this is the tricky part!`, `...not much longer now`, `and failing`],
    media: [`assets`, `images`, `effects`, `music`],
    verb: [`loading`, `compiling`, `extracting`]
});

Splain grew with me as an operator, being re-written in TypeScript and used to explore build tools and collaboration. Right now, it gathers dust in my GitHub history, but I look back at it fondly and see its influence in my later projects. For example, the idea for Good Morning AI was born from seeing the outputs of Splain

The examples here come from this tutorial.

You can see more examples of Splain in action:

• As a loading screen like the tutorial
• As a conspiracy generator
• As a Dr Who episode generator
• As a cult name generator
• As an alexa skill to insult or compliment you
• As a legal mastermind

DXJS is my first ever public library. I made it to help learn the process of publishing to NPM and gain experience with the entire development process from start to finish.

The library allows you to easily roll any arbitrary TTRPG dice, from a common d20 to a bespoke "weather" dice.

By utilizing an intermediary Abstract Syntax Tree (AST), the library can parse a string into individual dice rolls and breakdown the output.

This allows users to perform simple actions like roll("d20") or more complicated ones like roll("2d6+4d4+2") and get the results in a structured format.

Users can even add their own dice: javascript new Dice("weather", ["sun", "rain", "snow", "wind", "fog", "hail", "thunder", "lightning", "clouds", "clear skies"]); roll("weather")

Over the years it had features added including weightings and modifiers and has recently had a complete rewrite in Typescript.