How to deslop your code

Hi, my name's Mike and I am an

AI-aholic. Hi, Mike.

I have a confession to make. My last big

feature that I worked on,

>> [music]

>> you know the one, the AI files one, the

one that I just did a whole big video

on. Well,

it's total slop.

You see,

I just I just got so carried away with

the speed of development that AI gave me

that I just didn't stop. Just stopped to

think of the consequences.

Okay, enough of that. So, basically, the

problem was that I didn't actually truly

understand what the code was doing.

Now, don't get me wrong. I understood

the feature from like a high-level

perspective, but when I was getting

requests about specific parts of the

code, I was kind of like,

"Yeah."

And that's not great when an important

feature like this is on the critical

path for our users.

So, I decided, "No, enough was enough.

I'm going to get my hands dirty and wade

through this slop to try and uncover

exactly what's going on here."

I learned some valuable lessons along

the way on my de-slopping journey that I

think are worth sharing. So, stick

around as I have three actionable things

that you can do to de-slop your code

today. And I might even share a skill at

the end that can help you because, you

know, the only way to fix AI slop is

with more AI, right?

Anyways, once you grab yourself a lovely

cup of tea, drop me a like and sub,

we'll get into it.

Let's just start off with a quick

reminder of this feature if you haven't

watched my previous videos on this

already. But, basically, AI files is

going to inject this additional prompt

when you set up a Convex project asking

you whether you would like to add the AI

files to your project. Now, AI files are

guidelines and agent skills that are

designed to enhance the model

performance when writing Convex code.

And as part of this feature, there's a

new CLI that you can use to update the

AI files or remove them or a few other

things.

Okay, so so far, so good. Seems pretty

simple, right?

Yeah, well, the issue is that there are

a number of different logical flows that

the code can go through, whether you're

running Convex dev the first time or

subsequent times, or you're running from

the AI files CLI, or you're running for

the Convex dev path.

Are you a human, or are you an agent, or

are you on the CI, or some other sort of

non-interactive prompt?

And so, in short, we just have this

tangle of logic and rules that's just

hard to follow at the best of times, let

alone when the code looks something like

this.

Yeah, so most of the code here is

contained in this 1,000-line index file

uh that I personally find really hard to

know where even to start when code looks

like this.

So, my first step is to break this up

into smaller files, areas of different

responsibility.

So, now I think it's much better. We

have a number of smaller files that

pertain to key areas such as the

agents.md, claude.md, guideline skills,

etc.

By the way, as we go through this, I

just want to note that I didn't actually

do all this manually by hand. I'm not

some kind of savage. I just swapped to a

smaller model, smaller faster model, and

then I would just queue up a bunch of

orders, like split this off here, split

that bit off there, etc.

Now, maybe I could have given the AI a

high-level goal such as split this up

into, you know, sensible uh sections,

and it would have worked fine. But, for

me, part of the reason for doing this

de-slopping process, doing this first

initial de-slopping process, is for me

to get a better grasp of where the

various parts of the code base are, what

the various functions are. So, this

little bit of extra manual work

>> [music]

>> is acceptable for me at this stage.

Okay, so now that we've split things up

a bit and I have at least a general

high-level idea of the different parts

of the code base, I began working on the

actual code itself.

So, as an example, let's take a look at

one of these gnarly tangled functions

that I've been talking about.

Yeah, so if this makes you go a little

bit cross-eyed, you aren't alone, as

that's exactly what I thought when I

first saw it.

Not only is it far too long, it's also

just doing like far too many separate

things. It's kind of hard to tell where

one part ends and another one begins, or

one one part begins and another part

ends, you know.

There's also a bunch of this

nesting and sub-nesting logic in here

and error handling, which makes me just

go "Ugh."

Now, when I encounter a big gnarly

function like this, the first thing I

try to understand is, what is actually

the purpose of this function? What is it

trying to do?

So, we actually have a comment at the

top here, which is handy.

But, don't forget, you can't always

trust comments because they can very

easily go stale.

But, what it does say is write/update

all Convex AI files, guidelines,

agents.md, claude.md, skills, etc.

Yeah, so a quick scan uh of the code

here makes me think this comment

probably isn't stale, which is nice. I'm

seeing parts that seem to be handling

the various um different functions as

mentioned.

So,

this most sensible thing that I would do

next here is to split this into

different sub-functions.

And that results in something that looks

more like this.

Ah.

That's much better, in my opinion.

Now, we have a clear set of things that

the function's going to undertake,

extracting out each part to its own

little self-contained function.

It's much It's also much easier to

understand what this function is just

going to do at a glance and allows us to

easily make more changes in the future.

Now, I don't want to bore you guys and

going through every minor clean code

practice that I followed here.

I have a couple of videos on this topic

already uh if you want to know more.

But, I do want to just quickly dive into

this function, read AI config or

default, as it illustrates a couple of

things that I'm aiming for.

Note how we named this function read AI

state or default. So, it's clear from

the name of the function what it's going

to do. And also note that it's going to

call into this attempt read AI state

function.

Right off the bat, note that we named it

read AI state or default, so it's super

clear from the name of the function what

it's supposed to be doing.

And you can see that it handles the

various different code paths that could

potentially come out of this function,

the [music] attempt read AI state, which

is actually doing the reading.

And if we just double-click into there,

you'll note that this function again is

is being prefixed with a sensible name

attempt here, so it indicates that it

could potentially fail,

but we are also going to be catching

those errors [music] and leaving it up

to you to deal with those errors.

So, this clear separation of

responsibilities between the function

and the caller of that function makes