After seeing how much my partner would visit my previous codepen experiment with Nonograms on codepen, I thought it was time to upgrade. Using Next, vercel, postgres and Auth0 I created a platform for her to be able to create and rank new puzzles, with her fastest time being persisted to a database for each one.

I also played around with Next themes to create, not only a light and dark mode but also custom themes that can easily be added to.

As a professional front-end developer of almost 10 years, it's odd I've never had my own personal website. I'm usually too lost in a project and would rather be exploring something new. However, the increase in popularity of server-side rendering has given me a great excuse to finally have a reason to tackle my own site.

Next.js and React 18 make for an interesting deviation from my usual client-side forte. The technical differences are fairly apparent, but I think the headspace of thinking in terms of keeping things server-side is more nuanced and hard to get used to. This is especially true when all your usual React comforts are there within easy reach with nothing stopping you. When you hit a problem or a suggestion from Next's surprisingly helpful builder, it's easy to take the quick fix and implement the client-side solution. I think so far I've managed to avoid temptation, and this site should be completely static... famous last words.

When the New World Trading Company pitched their idea to me as "A bit like the sorting hat from Harry Potter," I was in. Realizing that this meant connecting to an HR API, building an admin dashboard, and exporting everything daily to a third party made me a bit more hesitant!

The most important part of the project was helping to strip back the requirements to create a foundation that covered what the client really needed, leaving plenty of room for future additions. I chose Firebase as the backend, allowing me to quickly create and push features. For the front-end, I utilized a React, TypeScript, and Styled Components template I had created for exactly this purpose.

The hardest part of the project was working with live data that needed to be updated and manipulated daily. The key to tackling this was creating logs of performed operations and regular backups for the worst-case scenario. Writing about this project without using more Harry Potter puns was the real challenge.

As employee number one I created the frontend from scratch working with stakeholders to quickly iterate on the product whilst maintaining a solid technical foundation.

• I was in charge of the architecture and implementation for all front end projects.
• Onboarded and mentored new developers
• Created a design system and component library to easily integrate with the design team
• Created am editor to allow the rest of the team to quickly and easily iterate on our bespoke schema system

When a friend bought his first 3D printer, it sparked his ambition to turn it into a business. He wanted to share the wonder of rapid prototyping with people who didn't have the space, money, or inclination to buy their own printer. When he asked me if I would be interested in helping him build a website to facilitate this, I jumped at the chance, because I had a laundry list of things I wanted to print myself but no means to do it.

We used React and Firebase to create a production app allowing people to upload and view their 3D models, select options, and order prints. Stripe integration facilitated purchases and hooked in with a bespoke backend to help manage orders and print queues. The website was a success, seeing many return customers, and the app facilitated many orders until the business was sadly shuttered for personal reasons.

This project helped me step back and understand the multifaceted benefits of software. The web app had completely different criteria and use cases than the backend tools, but both had to seamlessly work together to support the process from start to finish.

Analytics, hosting, and testing were key areas to get right in a production system to allow us to iterate quickly and safely. I'm proud to say the system supported all its transactions with no major outages or issues. I attribute this to the robustness of the tools we used and the care we took in testing the system in a specific non-production environment.

This is a product I used myself many times and still have the chopping board holder, plant pots, and frog models to prove it.

I worked at Goodlord for 6 months as a senior frontend developer. Although I learned a lot from my experience, I ultimately realized it wasn't the right fit for me. Capable of the work, I didn’t feel either party was getting the most out of the relationship.

My responsibilities included:

• Updating legacy jQuery code to modern standards.
• Incident triage and support.
• Maintaining and improving the build process.
• Building out the self-verification process, including integrating Onfido to identify users.

This was my first official role as a senior developer, and it is where I realized how much I enjoyed mentoring and helping others. During my employment, I focused on building genuine rapport with junior developers, helping to build their confidence, providing pragmatic advice and support, as well as advocating on their behalf in senior meetings.

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.