Coding with Cursor: Session 2

Welcome everybody to Coding with Cursor, session 2. Someone told me Cursor is down, but we'll find out soon. Last time we talked a lot about how to basically ship faster, how we use Cursor at Gumroad. A big topic of conversation last week was switching to Tailwind and how Tailwind basically allows you to correlate your design system within the HTML so you don't have CSS files elsewhere that The AI doesn't know about Tailwind, makes it a lot easier to embed all that context right into the, into the UI itself. So I thought it would be good to basically show people, one, how to actually migrate to Tailwind and then use it and use Cursor to ship, ship some stuff. So I thought it would be fun to basically take my personal website, which is not using Tailwind, it's a little Next.js app. That's a couple years out of date actually, and start there and then try to basically upgrade Next.js to the newest version. I think it's 15 from 13, and then add Tailwind and then use both of those things to actually improve the stuff. And just to go through this blog post, which you can check out at the live version of this, sahil-lavingia.com/dividends. But basically I talk about Gumroad dividends. This is a good example actually of imagine you were trying to do some of this stuff with LCSS, for example, like this table is an image. I would make all these charts in Google Sheets and then screenshot them, put them in the repo. And all these charts are like that. This email is like that. This text, which these two texts, which are screenshots of Kindle, are like that. There's a tweet here. This is what I'm talking about, like how interactive you can make it. This is like a Next.js little extension that allows embeddable tweets that are nice and rich. And even hover states work.

It's cool.

This is another component. That's an image. This probably should remain an image.

It's a cool chart.

And then here's the final image, but you can, a lot of my blog posts have charts in them. If you go to my other blog posts, my most famous one. Did you see that? Do you see that, by the way?

How cool is that?

Can't do that with an image, right? Like loads instantly and then fills it in. So this chart, for example, similar thing, right? Google Sheets, take a screenshot. I go into here. I have like a Gumroad metrics thing. I put all this stuff in. I generate this graph. I take a screenshot of this and put it, download it to all these. Imagine like all of these steps. This is a similar process to share shipping a feature at Gumroad, right? You have tons and tons of intermediate steps. You can't just go directly into the code and update it. And unlike this blog post, which has these beautiful charts that make it a lot more compelling to read, this one doesn't actually have any of those. So I don't think it's that great. And actually there is one, if you read this whole thing and there's a mention where I talk about a calculator. So I basically talk about this equity split thing that we do. We allow everyone at Gumroad to choose their equity split, the equity allows you to have this like cash equity trade-off, allows you to like basically take some risk on and then get dividends for that risk. And so I linked to this thing where you can see the inputs right here. So the hourly rate, $200, how many hours per week, weeks per year, your total comp, your equity split, you know what that means in terms of 80% cash, 20% equity, the Gumroad net income, blah blah blah blah blah, right? So all this stuff turns into this nice little chart And this is very useful for folks to make that decision, but as you saw, it's not actually in the blog post itself. So I thought that this would be a fun project to see how much of this we can actually move into the blog post. There's a bunch of wins you get. You saw this sort of instant loading that you get if you move into that world. You also get potentially internationalization, translation, copy-pasting, better for SEO.

Interaction.

You could potentially, like, for example, in this context, let's say you want to go from a 20% to a 40% equity split. All these, this graph changes, which is cool, but it doesn't animate.

It doesn't let you compare the two.

So there's a lot of really, I think, cool things. Basically, Google Sheets is like a website builder, right? And they basically, the reason I use Google Sheets is they imagine how many hundreds of thousands of lines of code They've written in order to make this UX really positive. So similarly, we're gonna take a little tiny 1% of Google Sheets and basically build it into the website that I have. And we'll use Cursor to do it. So you can see this is like the, let me go to the original one. This is localhost. So you can see the URL changing. This is running locally. And the other one is running— is actually the website. So without further ado, I think we should get started with that if everyone sounds good.

Is good? People can chat? All good? Awesome.

Let me just check Discord and make sure there's no questions people have.

And yeah, awesome. Let's get started. So first off, let me reshare my screen so everyone can see what I'm looking at. We'll get started.

Start.

If you want to join the Discord, you have to upgrade your tier for Coding with Cursor, the Gumroad product.

So let's open Cursor and see what's up. So I have— I just have this running.

It's running, loads all good, awesome. This is just a test just to see if it was working, but all looks pretty good.

Nice.

So let's upgrade.

This is how I work. I personally use Command+A, Command+K. I know a lot of people use chat, but this is my default. So Command+A, Command+K is edit.

That's how I work. Command+A, Command+K. Actually, you know what I'll do is I'll keep that Discord open so people can chat into the Discord. Ask me questions here if you are in here. Yeah, so Command+A, Command+K, update.

That's wrong.

I know that's not correct. Not the newest code.

Let's see what it decides to do.

It's like arbitrarily.

All right, it's not working. Why is that not working? That's interesting.

I guess it probably just doesn't know.

It doesn't have the context. What does it say? What is the newest version?

This is why you still have to be a software engineer to actually do stuff.

Oh wow, last update is October 2023. Oh no, what is the latest update of Next.js? How's the upgrade? 13 to 14 hours. Questions coming in on the Discord. You need atweb. Oh, if you, yeah, defeats the point of using AI, to be honest, in my opinion. Fast for the browser web. Okay.

What did this do? It updated that.

It did.

By the way, this repo is open source.

So if anyone wants to go, you can go to GitHub.

And find this repo and clone it if you want. You can just clone it, git clone this, and then you can go through. I highly recommend going through this with me, and I'm just going to put this in a different branch so it's easy to see the diff. You guys can easily see what I'm up to.

Upgrade. So it just changed 13.2.4 into 14.2.5.

And whoa, it can do that while it's still up there.

Seems like it didn't break anything. Still loading.

That's pretty cool. But I don't think this is actually the newest, right?

Because there's 15 too.

Is there no 15?

I thought there was like a 15.

Pretty sure there's a 15, but whatever, that's fine with me.

It works, happy with that. Uh, 14 is fine with me. I don't need the hottest, latest, sexiest thing. Let's do add to—

add to Next.js app.

So this is all, if you guys wanna see what this looks like, this dividends article, it's pretty simple. It's just Next.js. It's just a page, head layout, tweet. This is that tweet thing I mentioned before, React tweet, footer. You can see how I don't use any CSS inline. It's just p, h2, but you can see I'm like adopting this utility class system, which is basically everyone ends up doing this kind of thing.

So instead we should just use Tailwind, right?

Here's a good example maybe of just doing apple-a, apple-k, and how long, how many lines of code is this file? It's pretty long.

It's like 400 lines of code.

Let's remove all class names. Actually, you know what I could do instead?

I'll show you the styles that I have. So I just have this one file because I'm a, my personal website, but you can see this is like the whole file. So I wonder if I just deleted this or copied this, went to Dividends and said Apple A, Apple K, and just said, I'm moving from doing my own CSS in globals.

CSS to Tailwind. This utility Tailwind classes, so I can delete the globals file. This is the globals CSS file, so you know what classes do this. To be clear, Tailwind utility classes. Put that in so it has all of this context and then boo, let's see what it does. While it does that, let's check in on the chat. Ooh, loading. The loading screen.

Can I zoom in?

Yes, I'll zoom in. No 15.

Oh, it's the RC.

Oh, interesting. It's not a—

for folks that don't know that, release candidate, meaning it's not actually legit, legit yet. So you can see it's going through and doing all that stuff. It's a pretty big file. So this is normally what I do is just wait for it to do—

go do other stuff and come back.

You can see it's adding all these Ps. Annoying. So eventually I'll probably use cursor to get rid of these things. But for now, I think it's healthy. Sometimes it's faster to just take one step back first instead of trying to do things the perfect way.

Interesting.

It added this because normally A-refs would automatically change the color. It's making sure that it remains black. This is taking these styles and putting them inline. This is doing this roughly the same thing. It's probably better, like it's probably doing this properly. I have a hack where I just do 48% to have the padding in between. So it's actually, my guess is it's doing a better job than I would've done, but this probably has a lot of stuff to make that legit. There you go.

Awesome.

Yeah, so I mean, it seems to do its thing. We're done.

There you go. What more do you guys want?

So we accept these changes. It's probably not gonna work. Oh yeah, I saw how my globals file, so I gotta delete that.

So let's go in here.

Where are these styles coming from? And let me just delete all these files. We're going to Tailwind land. Ooh, styles is not defined.

Oh, it's doing the same thing.

So let me first actually go back to what I was deleting. Feels like I shouldn't need any of this stuff, but we'll do the same thing. Inline this with Tailwind.

By the way, I don't actually have Tailwind installed, so none of this actually should render, but cool. There you go.

Cool. All right.

Delete and fixes all in one.

Pretty nice.

There you go. And then delete. Are you guys ready?

I'm gonna delete this.

Everything's gonna get ugly. Delete styles. Just delete this whole folder.

We don't need it anymore.

Failed to compile because we're looking for this thing.

We don't need it anymore.

Bye-bye.

Boom.

All right.

So this is what it looks like if you don't have CSS installed. Just has like those inline classes, which don't do anything. Not bad, right? You're using an H1. So I'm gonna say pretty readable. Like a Paul Graham-y type website. And these things are doing this 120% thing. So yeah, that kind of works.

Now let's install Tailwind.

You guys want to try using chat? I don't like chat, but we'll try it out.

See, I'd like to add Tailwind to this project. Tell me how. Update this. Do I have this? Oh, it created— I guess if I hit this, it applies it. Deleted some whitespace too. I like that. Looks good to me.

Create ACS.

Oh, I got to create it again. All right, come back. Styles. Look at that. And then put this in here. I've never set up Tailwind, by the way, so I have no idea what I'm doing. Import the CSS file in your app_app.js. Oh, cool. Just do basically add back what I deleted. Create the styles directory. Let's delete this, put it back.

Oh, whoa, it worked.

100% width. 100%.

All right, so what did it get wrong?

That not perfect.

AI not do a good job.

Not perfect yet.

It's a bit different. To be honest, I like it better though. This is one nice thing about AI, often improves the design and using Tailwind, frankly, right? They've thought, imagine how much they've thought about all this stuff. So I personally like this more. I think this is better.

It's all on one line.

This I would have preferred underlined. I personally, this stuff underlined, I think it's a bit more obvious.

Oh my gosh.

This is my paintings. Forgot we only did one page. So I don't want to do all the other pages yet because I don't really like this look, honestly, it worked. It's really nice. Honestly, this is like an improvement.

I think this is great.

Ooh, this is a bit janky.

Yeah, let me actually fix this.

So here's an example, right?

So if you—

let me do the easiest one first. Let's just fix that underline. So where is that underline coming from? This part.

Why, why underline this? Please.

Actually, I won't even say links. Let's just see if it figures out that I'm referring to link. I've highlighted the entire thing.

No, see, it got it wrong.

So just the link.

Too smart.

See, that's interesting. I would've added a class name.

Excuse me.

But apparently there's this u thing I've never heard of.

Boom.

Underlined.

Oh, that's nice. That fixed.

Again, I don't know any HTML, CSS, Tailwind. Who knows?

Who cares?

Doesn't matter. Ooh, I don't like how these— you notice this? This is big, this is small, but now this and this are the same.

It's weird. So let's fix that too.

Why did that happen?

Why? It's because this should be an H1. Every, all of these are H2s now.

Interesting. Is that something that happened with, is, was that how it was before? Let me just push this in my one-liner for git commit add.

Message CP, blah, blah, blah, blah, blah, because committing is stupid.

And let's notice, let's see what it did. H2 here, H2 here.

This should be an H1, but I probably was scared of making the H1 cause I was probably using H1 on the, on the homepage. It's actually almost definitely what I was doing. So there's a good reason why global CSS is annoying. This is an H1. If I made another H1, then everything would, you have to like think about H1s and one page is different than H1 on another page. It's annoying.

So let's fix that. So just make this an H1, which is probably an easy-ish fix.

I love this thing. So this H2, I just hit Tab and it updates. So that's a CursorTab thing. It's like smart editing, smart tabbing.

So that's cool.

Still has the same problem.

If you're super lazy, you just Apple+A, Apple+K, and you just say the H1 should be bigger. Than the H2s. The H2, make the H2 smaller. Like headings in a blog post would be.

Yeah.

This is like insanely inefficient if you think about it, right? Like I'm going through 400 lines of code.

Can you zoom in?

Okay, I'll zoom in.

I'll zoom in. Try this.

What I'll try to do is I will try to do— what I can try to do is open my laptop so I can have a second screen just to have my Discord and chat. And then I can move this here. Yeah, this would be better. So then I can actually zoom in more.

Boom. All right.

Cursor, move my cursor.

We have a big large cursor. Did this finish? Sure, I don't really care what it did. Oh, it fixed it.

It's big here and small here.

Cool.

Oh, did that one change though, or did it give up?

This one still feels too big. Sometimes if it's really large, it'll give up. But the cool thing is you just git diff, you see what changes happened. So you can see it basically turned this text 3XL into a text 2XL.

Sure, sounds reasonable to me.

I still think it might be a bit too big as like a header, but given that it helped me out, now I can figure out the rest of the work myself. It's probably, I assume, just changing this to 1, right?

It's a bit too small now.

I don't really like the bold of it.

Presumably this is the bold aspect of it. So maybe I go back to 2. That's kind of hard to tell that it's a header. Let's go back.

Whatever.

It's good enough. So let me just go make sure those other ones are changed to X1. Awesome.

Cool. Awesome.

Sweet. We're making progress. So that worked nicely.

Now what I want to do is actually remove all of these tags.

It feels like aggressive, don't you guys think? It's a bit intense. I'm pretty sure there's a way to do this. I don't want to keep the tailwind classes in line. Is there a way to use a config file to do the basics such as set paragraph display, etc.?

Nice!

That's exactly what I want. See if it just fixes that, what I want to do. Go into my globals file.

Now in your components, prose.

Oh, that's cool, that's cool. I like that.

That's better than how we do our paragraphs in my opinion.

That's nice.

So we—

what does it say?

Just add.

It removes the centered main thing too. Oh, nice.

Pros.

Okay, probably have to restart this server as well.

All right, sick.

Pretty cool. This is still janky, so let me fix that. Yeah, I prefer this. So here's a good example. So take a screenshot of this, go to the bottom. Oh, I have a footer. That's annoying. That's probably why it's being annoying. I haven't updated this. Update this footer to match this using Tailwind classes. Looks like this, which is basically got a styled version.

So let's do that. That was better, closer.

You see that?

But I don't like— it's weird, like it doesn't match.

I don't really like how this is. So I'm gonna separate the input from the button. Brown.

Be less ugly. There you go.

He's fine, right?

That looks good. Pretty close.

It's not perfect like this thing, but honestly, I think this is even better.

So there you go.

Awesome. Looks good to me.

Actually, you know what? I'm a little— gonna be a little annoying and just zoom in really close.

Oh, I don't like it.

You see this? It's one pixel on the top. The way you tell is you see that Doesn't line up. So I get paid the big bucks.

It's 2 pixels too tall because of this border.

This border—

see that?

You think the AI will be able to pick up on that?

Make the input 2px small. Do this in the way that people—

just basically reminding it, do it in the, I don't know, like the whatever, the Tailwind-ish way you're supposed to do it.

There's probably a way.

Whatever, this is p by -7.

Sounds good to me.

Oh, it fixed it.

You saw that? It looks right to me.

So think about how much I haven't ever visited Tailwind Docs, I'm able to improve my website.

Pretty cool. It's better, honestly, it's better than what I did before, better than we had before. So that's nice.

All looks good to me. It's all now in Tailwind.

Oh, we did the It went back on one line and two lines. Why did it do that? I liked what it was doing before. So let me tweak.

Oh, it's probably because I added that, those default settings.

So let me remove those. Maybe I don't need them anymore because if I go here, Oh, that's cool. It does. Yeah, I see how it does that.

It's nice.

So I'm just gonna go here and say dividends. I now have a global Tailwind config, so I don't need all these classes anymore. Remove the ones that aren't needed. Here's my Tailwind config. Yes.

And then it goes—

oh, there's people who want to join. Let's see.

And then all does its thing.

So you can see, removed most of them, but it kept some like these a refs.

See that?

Few steps back and now we're all ahead of time. Imagine if you're trying to do everything perfectly, it would have been harder to debug and test and make sure things are going right the way—

the right approach. I can probably fix this a ref thing too, so I'm going to try to fix that before moving forward.

Okay. Oh, it gave up.

Didn't get it all the way to the bottom. That's okay.

I should have copied the prompt, basically just copy part of what I changed and just say remove the tail— p and h2 tailwind classes like the first few left with code because no longer necessary because using tailwind.config.js.

And then it will continue.

Shouldn't. Okay, whatever. I'll keep these inline images with their own custom thing. Ba ba ba.

Nice. Almost done.

We have these text things, so let me see if I can fix this. Can you update this file so I don't need to specify text1 for all the arefs?

Probably there's a way to do that. Yeah. Cool.

Looks pretty good, I think. Is that like a black or is it like slightly off black? Ooh, there's— so you see that slightly off black? Very interesting. I guess it's good for something or other that I'm not familiar with, but Daleland has done the research. I don't have to, so I trust.

I trust.

Awesome. Making good progress, I think.

What else? What else do I want to do? I want to remove all these text-blacks. I don't need them anymore.

So remove all the text-blacks that are from Arefs. Now that my code config deals with making the Arefs inherit their color. Um, um, um, harder. Oh, we just launched something for Helper AI. Nice.

Cool. All right, it's going through and doing their thing.

But just so you guys know, think about this, AI is not do, you know, it's not going line, like skipping the lines and editing only the important ones. It's so good at not hallucinating that it knows of all of these hundreds of lines as it's going through. You can see it, it knows like basically, I know I'm not exactly sure. I'd be curious to get the cursor, one of the cursor team members on board or one of the next two sessions I'll ask, see if I can get some secret sauce out of them. But how exactly it's like doing this, I guess it's streaming the response and it's like, just has a really tight prompt. To get like the new code and it's doing some sort of diff. You see how I gave up, by the way?

Just stopped.

So it probably means there's still gonna be some of these.

So we're gonna keep going, do the rest, remove text, black, et cetera, from Aref, no longer needed. Boom.

Cool.

So yeah, this blog post looks good. I think it's fine. Better than this one. This should still be a bit janky, but not as janky because we've added some things. And the cool thing is, because I did that thing, most of these should be fine now, right? So why aren't they fine? It's because in this dividends article, I have this part, right, that's doing this bit.

So you go into here and go to my, you know, meeting with my employees.

A bit janky, but the cool thing is maybe I'll do chat with codebase for this one. This is maybe a good example of it. So let's say I wanted to update, oh, I need, there's these blog posts, 1, 2, 3, 4, 5, 6, 6 blog posts, and then the homepage, 7 that I, I have to update, but 6 that look very similar. So this one is work.js. So, you know, same, all of the same stuff I had to do, I would have to do again.

It's annoying.

So maybe this will work.

I'm just saying I updated dividends.js to use Tailwind Global, global config, update work.js to match.

Actually, can I do all of them at the same time?

Let's see, border.js, bubble.js, ipo.js, and reflecting.js to match. Classes used and the DOM structure, I don't know, whatever, should be fine.

Let's see what happens. This is the nice thing about this, it's a very small repo, right?

It's like a little personal website. It's worked it out, kept the lines.

Replace the content between these lines with—

it's okay.

See, this is why—

oh, this here, you see this?

It's annoying, it does this, right? This is why I don't like Chat personally. It's—

will this work?

Apply to whatever. I'm just gonna continue. Is it gonna work?

Yeah.

Oh, there you go. You saw that?

It worked. Okay. So pretty cool. Good job, cursor. Good job.

And then, so how do I—

oh, it's still generating shit.

Oh, it's removing the— see, that's nice. See, it knows that I guess I don't put the images in Ps themselves. So it's fixing that for me. Doing its thing, doing its thing. It's adding— it's turning these quotes into normal quotes.

Sure, that's fine with me.

It's updating to these, to emdash, like the HTML escape version of them.

Fixing those. Yeah, seems fine.

Looks pretty good. It, it's still doing this thing, if you notice, like this these headers are too big.

But yeah, seems reasonable to me.

How do I apply it?

Do I just say yes? I don't want to hit yes on all of them. That's a lot of— I just hit accept and it just does it.

And then I need to update the label structure.

Cool. I think it did that too. Change class name item to h going.

Where is—

oh yeah, that—

yeah, I guess it did all that and then it did that.

Cool.

Yeah, so it seems like it did the thing.

Continue.

I don't know what the hell's going on. Yeah, see, now it's just doing some weird—

oh, you can see you get some outputs doing some— the prompt is basically telling it to return data that looks something like this.

Interesting.

Or bubble, yeah, bubble. But you can see it worked, right?

It did the thing.

Similarly, we can compare it and make sure we're happy with it.

Awesome.

So yeah, I think I'll simplify the life, try to make it a bit faster. So there you go. Boom, that one's done.

IPO.

Oh, sometimes it does this also thing. Let's see if it doesn't do the tab properly. Let's see if I go back in here and change it.

No, so sometimes it knows that I'm trying—

what I'm trying to do, and it'll automatically suggest it, but not do it this time. Update to match.

This one is actually going to be interesting. So if you go to this, this thing, I have this like kind of custom. So I have actually some custom parts, like I have these little things that do a little animation.

This is a sci-fi story that I wrote and has this header.

It's a little different than my other posts. So it's supposed to imply that there's like some sci-fi. I should probably have a tag here that says this is sci-fi. So someone starts reading this, what the hell's going on?

Who's Matthew?

So all these things I can probably just fix while I'm here.

Might as well.

But yeah, let's compare it. Let's see what this looks like.

I'll also go fix this.

I'll fix this page last.

It's like the most different weird page, but if you go across the border, it probably does weird shit.

Yeah, I can't see. Any of this.

So let's fix this one. Or first, let me do Bubble. That's the one.

So, oops. Fixed to match.

But you notice, think about it, it knows somehow that I want to update the class names, but it doesn't update the date to match, the title to match.

It knows what I'm trying to do. So there's that bubble post. Let's just make sure that I didn't mess anything up.

Bubble post.

And it's good.

I still need to fix these H1s. Man, you can see my writing style has changed a lot, like how dense this thing is. This one I want to—

this is bigger than that one, which is fine.

But yeah, let's fix this one. So last one, border header.

You see that border header?

So I must have deleted border header so it doesn't exist. Oh, what I'm gonna do first, I can at least still fix this stuff.

So I'll fix that. Fix to match. Bloody bloody blue.

Ooh, it's fine, but you can see these, this is the text things over here. Had this cool thing going on. Not happening anymore. This is centered. This is not centered. This is like a, basically a new scene. And I think there was probably another one here. So let's fix these.

Might as well.

See, this class name doesn't exist, right?

Why would it? It used to because I made it up, but use Tailwind classes to center these instead of centering.

Excellent.

Okay, sure.

Works for me.

All right, these are centered.

These don't really format this way, so let's see if I can get it to— okay, notice that this is a hover, or when you click it, sure.

So which one are these?

These is awesome. Text messages to look like this using Tailwind classes. Instead of repeating the classes over and over again, use a for loop.

Or whatever. Boom.

What do you got? Oh, let's see. The first one is the hover state. Also do a cool—

let's see what it will do with it. I feel like you can improve on this design.

I think that's all right. It's some—

somewhat.

It doesn't really give me the vibe I'm looking for.

But honestly, in some ways it's better because I feel like it matches like the iMessage framing versus I do this weird thing right here.

It's not bad. Oh, that did a fun active state.

This is nice. It's like iMessages. I would say I want a little bit more padding in here, or maybe I'll just say make this look more like an iMessage dialogue.

See what it does. Close.

I actually like it.

Close. I'm just gonna say what I just said. But this is messages being sent to the main character. So shouldn't it be the other side of the screen?

Right? Is that right?

Someone tell me. See what it does.

It's interesting. It made it a div, but yeah, I like this cuz it also keeps it on this side.

I think it's a bit too gray, so I'm gonna make that now slightly lighter, less gray, more Apple-y.

This is what I mean when designers should be designing in code, right?

This is design.

Yeah, pretty good. Center those.

Oh, didn't center that one because I didn't get there.

But now I know what it is.

It's just like text center thing, right? So I can just go here, fix this myself a bit faster. Cool. Oh, missed another one.

Awesome.

Nice.

Great.

So almost there. I just want to fix getting this image and the reason, the way it works is it has this massive border image.

Cause there's no, my, my global CSS file that was supposed to do this is gone. Right? So let me just say update to use Tailwind utility classes to replicate this old behavior.

I don't know what—

that's cool. Yeah, I did it.

The image isn't there.

This image, and that image is here, public border.

Why does—

why is this—

see, border.png. See, it didn't get that right. For some reason it wasn't able to pull that out of the image.

Short.

I like how tall this is though.

So presumably this is what it's doing, but it's 600 here and make 600px high using Tailwind.

Sure.

Whatever this is gonna do, right? Oh, cool. Yeah, so there you go.

Looks great.

All right, let's fix this guy.

So this is what it used to look like. This is what it looks like now. And the file that is Updating.

No, no sense.

So what should I do? Let's fix it, right? Let's fix it. How do we fix it? You think it'll do it in one shot?

Remove classes and replace with Tailwind, Tailwind classes to resemble this look, right?

If this doesn't, I'll be very impressed.

So I'll ask some question.

Oh, trouble. Please, no, I need you. Oh no, what are we gonna do?

We're gonna have to do this manually. I guess I can just switch. You wanna get— you guys want to try a different model? All right, we'll try a different model, but let me take a break and let me answer some questions. This is the hour mark, one-third in, one-third in. Someone asked, Shree asked, how do you like Cursor compared to VS Code with autocomplete plugins?

I haven't used that.

You can select the underlying model with Cursor. Yeah, I honestly, yeah, you can use it with OpenRider, I think, but yeah, it's fine.

It works great.

I pay $40 a month or whatever. And if it's, if there's a better one, I'll switch.

I'm not loyal or anything.

I feel like this is a Crucial problem, not a— they're blaming Anthropic, but my guess is they're both—

can someone in the chat try this and see if they're having the same issue?

I like that it's making things difficult.

It's good.

Gonna have to actually learn Tailwind now. All right. See Discord, any questions? No, dude.

Oh man, I'm doing such a good job.

No questions.

Great.

Come on. Okay.

Do it myself.

Wow.

This is like dinosaur mode.

The first thing would be just to give you guys what— you're like, oh, whatever.

No big deal.

Cursor AI.

It's not that cool.

Okay. Let's see how annoying it is to do manually.

This is what—

all right, pretty close. Just that one alone. See these H1s, H2s, header. Let's remove this. Shouldn't need any of this. They're the same. Awesome. Label writer.

Sure.

You can see, look, index list of writings title, right?

So stupid.

The reason it's so stupid is because we're trying to support cascading style sheets, which is stupid.

I removed all those. Looks good.

Awesome.

Have you tried Command-I? Yeah, I have tried Command-I, actually.

I'm not a huge fan of it, to be honest. I prefer Apple-A, Apple-K. But I have done some multiline.

I can go through that. Well, we're gonna try one more time to see if I can get cursor to work. So let's take this back here and for the cursor and say, add Tailwind classes to make this page look more like This one.

Boom. And now, by the way, because we're using Tailwind, I don't have to actually take a screenshot of what it currently looks like, right? Because the AI knows, because these class names are there. The only thing I guess you could potentially pass would be like the tailwind.config.js file.

I guess it's not gonna work, but if it's back, it has to send this image. That's my guess. That's why it's like crashing. It's like this image. Is probably causing some issues.

But you can see it's pretty close, right? Basically, I just have to style these little labels, which is like a small and light gray.

Okay, whatever. Let's do it manually. Let's keep going. I'll come back. All right, this new badge doesn't need to be there. What would be Tailwind new badge?

Do they have a new badge?

Default badge.

Cool.

I don't really like it.

I prefer mine, but I'm sure— oh yeah, they basically have the same thing. Mine is this pretty close to Oh, I like this actually. This is nice. It's like a new, really like a new badge. I guess I'll just take this one for now, which is this red one. Copy all of these. Remove it. No, it's fine. It's not exactly the same, but let's see if I can edit it to get it closer, see if it'll fit with my font.

Oh, it did it.

It didn't get it right, but it's not bold nor white.

Text, nor all caps.

Yeah, it's closer.

Why is it not white though?

Text. Oh, see, that's why.

I guess it wants it to be this. Oh, I have to learn to tilt. All right, fine. What is this BG red? What if I remove this? What does it do? So I want a red 700 to match it. Yeah, there you go. And then what if I make this just white? Oh, there you go. Cool.

And then I want it to be uppercase.

Make text uppercase. Use— actually, the easiest thing to do is just capitalize the E and the W. Yeah, it's pretty good. I kind of prefer my color, so I'm just going to steal it and get it to update the BG color to be— I don't know how it's going to do that. Okay, cool.

Nice. Pretty close.

And You see, it's like, like there's something weird. This kerning is strange. You notice that? Probably have to do with this thing. Yeah, see, that's better. Almost there. It's still like a bit, I want some padding. These things are not padded well. So let's see if I can make the label, you badge, and the years published have some left margin and vertically center with the title of the post. See how that goes.

I also wanna make it smaller and gray, but I'm gonna start here.

That was better.

This vertical thing— oh, he's the verticals on here.

See if it gets it.

He's doing this thing. Oh, that worked. It worked for that one. All right, so that's pretty close. Px, Py, blah, blah, blah, blah, blah.

ML, so presumably it's in margin-left.

So if I make this 4, it'll be better. It'll match that. Cool. If I do mt-1, yeah, see, there you go.

Sexy.

Awesome.

And then I want to just make these labels of these years to be smaller.

Let's do that. Fix these up.

Oh, you know what I could do?

I could probably just do a similar thing and make these use the What's it called? The global file as well.

Should I do that?

Is that a risk? First I'll fix these and then I can always move it in there.

So let's do that.

Make the years gray and smaller, like text small is 1. See if it does it.

Cool, cool, cool.

Still, I don't think it's too— is this like 200 if I make it? Yes. What about 300? What about 400? Yeah, 400, but I want it to be— I don't want it to be bold either.

That basically matches, except I want some ML—

I want this ML4. Cool. So then can go back, change all these, and say make the bands match the last one into of ML and color. I think this will work if I just do a reverse thing. Does it know all of it ahead of time? Yeah, it does.

Okay, cool.

All right, we're getting there. We're getting there.

It's still not perfect because first you want these images, they're janky, and then some padding stuff's messed up here. And these fonts are big. But the nice thing is You can just fix these with inline instead of having to update your whole design system. Just go here and say, make these font sizes smaller so that it can fit on one line.

Text base.

What do you think that does? Oh, that's too small. That's way too small. I don't like it. Ew, too small. Just one size.

Maybe H3.

See how this looks like. Is this the normal?

Yeah, this is still a bit weird.

Don't you guys think it's a bit weird?

Honestly, it's nice.

This padding is still a bit janky, but I don't know, I feel like it's pretty professional. I'm gonna keep it H2. Keep it H2, actually.

I still want it to be on one. Yeah, that's better.

Yeah, that's nice. And then I wanna fix this padding, or let me fix these images so that this is a bit smaller. Alright, that's not great because it's squished. Why is it an H2? That seems off.

Feels like we don't really want that, but whatever.

The left two are squished. Keep the same height. For all the, the wits. I'd be impressed if it figured this one out because I feel like it's hard to do. Ah, not bad. But why is it so small? What does this SpaceX thing do? Oh, it adds like a thing. All right, or this h32, I think is too small. I think it needs to be bigger. So presumably I'm gonna don't use h2 and make images taller, maybe 400 pixels. Oh, better, but too much now.

Yeah, basically, right?

I mean, it's pretty close. So just paint these to 200 or something. Oh, that's too small.

Maybe 300.

How small did I make them? I really made them small, huh?

Pretty good.

I personally don't— like, do I need this header thing?

How often do I use this? Is this really productive?

Yeah, see, I only use it in one place.

Kind of stupid, right? Don't you guys think it's stupid?

Can I just get rid of it?

Feel like there's no point in this. Yeah, let me just delete it.

Component.

All it does is have an H1 anyway, so I'm just gonna move it right here. And the nice, the reason I do that is that I can just change this to an H2 if I want to. Yeah, see, I like that better.

Almost done. I just want to get the padding. I want— I don't like how this—

it's like less here, more here, less here, more here.

So let me just fix this.

Update the spacing between the writer and painter labels below after to be the thing. See what that does.

All right, skip the writer label.

Ballsy.

All right, it didn't do anything. Why not?

Let me comprehend what change I'm trying to make. So I basically want this to be the same as that. The reason it's not is because of this, I guess, this line-height thing.

So it's basically, I'm just lucky that it did that. So I guess what I could just do is add some margin-top to Didn't do it though.

Why not?

Why you no do? Weird. I don't know why it's not doing this. Is this because it's not display block or something?

Oh, I'm correct.

Presumably you don't want to use a label then if you have to add that manually. So What should I do? Should I use a small? Is that the same issue? You see that tab? Boom. Oh, it's too small. I guess we can just make this a block. Make a block. Display block.

Sahil Lavingia.

All right, cool. Writer. And I just do a similar thing here.

So I think I'm done with that aspect of it, converting my whole website to Tailwind.

So folks who—

Tailwind is awesome, or we're excited about shipping 20 times faster, as we talked about last time, but don't know exactly how to do it. Here's a good example of Dalewind. And let's just review the amount of code that we wrote in about an hour.

So anyone can go to this URL and let's see. Oh, I also upgraded Next. Forgot about that.

I don't know how long, how many days it would've taken me to update all these. But there's like an insane amount of different changes.

No, that's cool. Making good progress. Let's see if the compilation works. Ooh, 53 minutes ago it failed. Ooh, it worked. It worked. Let me go back. Not too shabby. Not too shabby.

All right, I don't know why it's not loading, but you can see it worked there.

Oh, there you go.

So yeah, pretty good.

Uh, not bad. Oh, it has this— cool, that's cool. Whoa.

Oh, it's giving me some errors.

Oh, okay, sure, I gotta add blah blah blah, whatever.

Thanks. I'm happy.

So that's nice. Should we get— should we merge it in or should we keep going?

Should I merge this in or should I keep going?

There's no real point of merging in it.

I feel like I should just keep going, but let's see if anyone has preferences.

Awesome.

Cool.

Yeah, I think a good one would be to do that calculator. These images, I can show you what I was thinking about doing. Let me see if this will work. I just don't think this is that compelling, but We can try, which is I was thinking of basically just making these tables real, right? So instead of being images, it would be cool. So that image, this one is after technical depth. So this image is this PNG metrics 2019, but Anyway, let me see if I can do this part.

So I'm going to take this image. I take the image of the table and make it in HTML.

See if it works.

See how good this is.

Do you think it got the right numbers? All right, that's weird.

It stopped midway through. You see that? Why did it stop midway through? Don't stop midway through, man. I want to see if it works.

I guess it won't. My guess is it's going to hallucinate here because there's a lot of stuff to perceive. But yeah, he randomly did that same thing. All right, see, it's not going to work, but we can complete it ourselves just to get it to render and see how close it got. So not bad. See that 36 became 38. But yeah, how nice it is to be able to actually, like, you want to take this, put it in Claw, do something with it. I think it's nice. So yeah, might as well finish it up, I think.

What do you guys think? Should we finish it up? Let's finish it up. To 2017. All right.

The problem is that the annoying thing with tables is you see how it has to do it row by row.

It's tough. Whatever, take it and keep going. Add finish row for 2017 and add 2018, 2019.

Awesome.

So it's not perfect.

It made some mistakes, like for example that 36, 38.

So let's fix them because I don't want to be a liar.

Nobody want to be a liar.

So let's make sure these are accurate. All these are fine. Nope, he also hallucinated there. Okay, wow, 0.75. This is 3.91. Yeah, this last one should be 7.3, 105, 515. Actually, you know, I have the Google Sheet so I could actually copy in all the numbers. Maybe I'll do that next time. This should be I022.

Oh, actually, this is actually a great example of something that would take me forever.

So let me see if I can actually do that.

So I'm gonna go to Government Metrics, find this chart I got.

I'm just gonna paste. All this in and save. Got some numbers wrong, please fix. These are the right numbers.

Commit edit.

Fix that one. Fix, fix. Oh, it's kind of cool, you see it fix in real time. This should fix.

Come on.

Oh, we did it!

Yay! Is that fun?

This is weird.

You see this weird thing though? This is 0% over there. Why did I do this? 0%. 0, and then this should be 0. Why is it somehow went to a 0%? 0 books. Eyeballing it, eyeballing it. All looks good to me.

Cool.

There's some stuff I don't like. Let me see how this— I don't like how these are in New lines.

I like how it was in one.

Oh, now I can delete this image.

Bye-bye.

And let's see if I can fix How did it do it? What did it do? Nope. Oh yeah, anyways, you get the gist.

Still don't get why it's doing this.

It's kind of Could I just make the text smaller for these?

Yeah, there you go.

That works for me, I think. Cool. Pretty nice, I think. I think I should move on to the calculator.

What do you guys think?

Calculator. Any questions on streams? All right, let's do it.

Let's do this little calculator. This is the intensity, and this is the intense one. We've been prepping, we've been mentally preparing ourselves. I made a calculator to help. Bam, you want this whole freaking thing in here. I think it's super slick. Honestly, would be awesome once we have this live is to actually integrate the coolest parts of this.

Thanks, Calculator, everybody. Awesome.

Into Flexile as a product, because the truth is you should be able to go here, apply, and then as you choose your equity, you have this little table thing that shows you per year, but It really should be like all of this cool UI should exist here. Like I was thinking when you start, when you go over zero, like this, like a whole thing shows up on this side and gets really cool. That's where I wanna take things.

But first let's build it into this, which is less complexity and then we can worry about how to move it to there.

So let's do that. Now that I did this one chart, I should probably not merge it.

I probably should fix all these other charts, but, but that's— oh, I should also center these tweets.

Whatever.

Oh yeah, let's do the calculator.

Awesome. I don't know, what's the approach here, guys?

Do we just take this whole thing and see what it does?

I think it's gonna have a meltdown, personally, but let's see.

Oh, I like this image too, but whatever. Boom.

How cool would it be to have an inline interactive calculator?

Wouldn't that be so freaking cool?

I think it would be.

So that's what we're going to do with the power of AI.

Introducing— let's go, Apple K.

It's not going to work out, I'm sorry to say. AI is not this good, but we'll see what happens.

Embed an interactive version of this compensation calculator into my blog post.

Told you this doesn't exist.

That is a cop-out if I've ever seen one.

Compensation calculator don't exist, mate. Build it yourself, lazy.

All right.

Okay, fine. It's doing a little bit of something or other, but it's not doing what I really want. But whatever. That's—

I told you.

But it's a start.

You got to start somewhere and move from there. Something's weird here too. Got to figure out what the hell's going on. All right.

See, this is a good example of like probably overfitted on some stuff.

But that's okay.

That's the fun of it. The fun of it is to actually do it, iterate with AI and make it awesome.

All right, let's go.

Let's do it. What do I want? What I want is I want the inputs to be the hourly rate, hours per week, similar to this. Actually, I should probably make it like this, right? The hourly rate of the role, which is really not disclosing it.

I guess we do it here.

All this I want to redesign and maybe I'll do that another week. But yeah, basically you have these 3 inputs, equity split, hours per week, per year. And then it does this crazy thing.

What is this crazy thing?

So first of all, I want to get rid of all this ugly-ass style. Remove all styling.

Okay, cool. Yeah, there you go.

Now I can— problem is this file is so big that it has to go through this whole file if I want to get whatever. Okay, instead of you make it so that updating the inputs, which in my— should be sliders, not text inputs, or hourly rate, hours per week, weeks per year, and equity split automatically update chart and use, uh, standard Next.js charting lib for this interaction.

See what it does.

Okay. Actually, it's probably fine.

I think that maybe we can fork off and that way we're just worrying about this part. What do you guys think? What happens if I hit accept? Is that scary? I'm a bit scared. I'm going to reject this. Give me this. Ject.

I'm gonna commit this and then I'm gonna go to a new branch, calculate.

Boom, awesome. And then I will do this. It probably will do the same thing, right? It'll delete all my— just too big of a file.

Yeah.

That's fine, we can always copy-paste that back into the place.

But all right, what's wrong? React ArcJS 2, I don't have.

I'm pretty sure I just need to install it, but let's ask.

Oh no, I copy the same thing. Why does this Oh, it's going to switch to the different library. Okay, sure, if you want a new library, I will use it.

How did this do it?

What is this?

Um, recheck.

And then this doesn't exist for some reason. Boom! See that?

Oh yeah. Okay, there's no chart.

Where's the chart?

Why there's no chart?

Let's ask. Why is there no chart rendering? Bar? Yeah, I'll do bar.

Fine with me.

And then this should be All right, there's something happening.

Whoa, I wonder if I gave it to Claude, by the way.

If I just took this whole thing, let's see how much— how close it would get if I use this to generate a Claude artifact. No context, just see what it does. Will it work?

Okay, create.

I didn't even read it, but whatever. Let's see if it works.

No, what is it doing? I don't want—

oh, funny.

All right, then didn't work.

That's good. Claude's not better than us. We are better than Claude.

Archer and Bond.

Still don't get why— know why not. Cash versus equity is, uh, very hard to debug given I've never done anything close to this. We figure it out. You think this is showing the right data at least?

But where do I see the data?

How do I know what data is being passed?

The other alternative is to do it with ChatCN and then plug in the data.

Oh, all right, there's something there. Something shows up.

Okay.

And then there's an update.

It works, right? It's only doing it for one year, but it is the—

it is doing what I want it to do to some degree. The problem— there's a lot of issues here though.

One is it should be doing like this. Really what I want to do is compare I don't need this dividend, so I'm going to delete this.

I don't need the dividends. I'm just confused.

Yeah, this is really what I'm trying to show, right? If you take all cash, you're going to get paid the same, but if you take equity, you get paid less in the beginning but more later.

The gist.

So do you think I could just screenshot this part? Columns.

3. Follow. All right, good luck.

Oh, problem reaching Anthropic.

Come on.

All right, maybe it's because the image, but presumably, presumably I'm close in the sense that I could maybe even figure some of this stuff out myself. This value is just a single number, but if I change this to be—

the chart data to be 30 years of data extrapolated out from a 10% yearly growth rate.

All right, something's happening, but there's no—

all of a sudden this is zero.

There's no data showing anymore, but I like it. We're getting there, we're making progress. Certainly way more than I would manually. I'd be getting nowhere. The chart isn't showing up using the data.

This is how you learn, by the way. I think the best way to learn is just try building stuff and then seeing what AI does.

Oh, what's up? What is up? No way this is going to work.

So 0% equity, you just have cash. This assumes a yearly growth rate. So I—

the other thing I'm going to do is I'm going to, below the chart, put a yearly growth rate input between 0% and 100%. Use that instead of a static temperature. Does its thing. Meanwhile, I go see if the chat has questions.

So now it does this I'm just—

I'm just saying. Oh yeah, I guess.

Yeah, it's a pretty good decision.

If you use 0% growth, you get exactly the same every time.

The 10% is great, but the problem is it's still not doing what I really want it to do. You can notice with this 10%, it should be the same. All cash should always be the exact same amount, which is just these numbers multiplied by each other.

There's no equity component.

What I just told you, I got to tell the AI.

Close the cash versus equity. Change cash to all cash and change equity to— all cash should stay the same because it is always hours times weeks per year times hourly rate. Meanwhile, the equity should grow because getting a percentage of the profits each year, which grows by 10% a year, it starts— assume it starts at a 5.34% dividend rate. Not figuring it all out.

Okay, so all cash is $312,000 per year, and then cash equity.

So as I change the equity percentage I want to fix these guys to be— actually, you know, it's really cool. You see, that's what I'm talking about. I guess you need a growth rate so you can do some prediction.

You're going to break even about year 19.

That seems wrong.

I guess it's not wrong.

You're getting a 5.34% dividend yield, assuming no growth, versus let's say it grows super fast, you should get your money back. So you get your money back almost immediately if it, if it's growing that fast. Yearly income is hourly rate.

All cash is always going to be the same. Initial comp— hey, by the way, you know what's really cool? Just do this and go to Claude, explain the math, see if it's correct. Boom, that's true, but it's not working right because even with the 10%, like for example, if you have 10% here I think the issue is we're taking this initial rate and we're just multiplying it. Oh no, it's doing it to the power of—

shouldn't this be 1 plus that?

Okay, so All cash is now correct and equity goes bonkers, so that's wrong. Cash plus equity in 2054 should end up at $1.2 million, but here it's ending up at— yeah, so that change was not good.

That was a bad change. So instead, what I can do is I can Go back and calculate it. What is the equity dividend? The equity dividend is—

how was this before, right?

Cumulative equity is— yeah, cash plus equity In the first year should be less. $246,400. Oh, it's almost there. It's not exactly there.

The reason is you don't get a dividend the first year.

Yes, you don't get a dividend the first year. I'll fix that part. There you go. Awesome.

Okay, cool. So this first year is accurate. Second year is 249,689.

Oh, it's not exactly right. It's 250,023.

And the reason is you can see this math equation that I'm trying to replicate in code is complicated. The cash is correct. Cash plus equity is wrong.

And the reason it's wrong is that the equity on year 0 should be 0. This I think should be -1, right?

Still, I think—

oh, there you go, 250,018.

And what was this?

250,023. I mean, it's pretty close, probably some rounding error. And then year 30, I don't know why it's so under it. Should be way above it.

So that's one issue which is we got to fix, figure out why that's happening.

My guess is this compounding is not happening appropriately, so let's figure that out.

The growth rate is 1 plus— oh, you know why? It's probably getting the growth rates problem.

My guess is it's doing maybe 0.17, but you see how this is 10%.

Could be doing something— I know, seems be fine.

All cash.

This is the whole thing. It's the initial dividend, right?

1.

Then you multiply it by—

Let's move this here.

Or I3 equals Great.

I3 equals—

oh, it's because I'm doing a cumulative, because you need to—

uh, yeah, that's okay. Maybe I was right, that was a cumulative problem.

You have to add the last one, actually. Let me see if I can get that right.

If it was, it would have told me where I3 equals last year's dividend, C11 equals share of annual profit, C21 equals growth rate of 10%-ish, D4 equals of years past since first year. Year. Okay, sure.

I think it's the same. I think it's basically that you have to keep calculating this and add it.

So yeah, let's fix it.

Uh-oh, it's not charging.

Cool.

Yeah, let's fix it then. So basically you gotta update this. Not adding last, should be a— could show cumulative. Should show the cumulative amount if it does the thing.

Not exactly what I wanted it to do.

But whatever. Yeah, why didn't it work?

Rejected. I don't want this.

Do it again.

Also, I think we should like add—

it's kind of annoying, you don't have axes.

Sure. Oh, fucked up the cache though. Why did it do that? All cash should not go up.

Oh, there you go.

Boom.

It looks like it, doesn't it?

That's it. Awesome.

So now you have it, and it goes to about year 30, you make $700K, $784K, and in the—

where did they go? I lost it. Oh no, not this one. Sorry.

Equity Dividends Calculator.

So it's a bit off still.

Why is it off? So $1.2 million versus—

the reason is 10% growth rate.

That's pretty close.

So if we make it a 0% growth rate, and what is it? It matches at $236,000 and it gets about $408,000 versus $308,000.

See, look, it's too little. 235 equity split. What do you guys think? Let's do that.

Sure.

Oh no, that's the new table.

Oh, cool.

All right, cool. There you go. Um, 3294, it's all a little bit off, but yeah, all cash. And then if you go to 10%, you go up to cash plus equity, you get 184. But here you get way more than that. I wonder why that is. You're doing cash plus dividends. The dividend This is good.

Build it twice, you'll discover a bug. One of the things is wrong. Maybe this is right and the other thing is wrong.

Should I just ask?

I wonder why.

Does anyone know on the chat? This is—

you see the mistake I'm making? Cash, cash bonus, total cash dividends.

The dividends— yeah, see, look at that, 3 and then 10, right? And then 17. But here it's 0 and then 3 and then 7. So I think this should be including that amount. Oh, you know, that's from— this is right, actually. I think this is wrong. I think this might be double— this might be double counting, right? Because you're taking the last dividend and you're update— you're adding the new dividend to get this amount.

But this may already include this one, so I feel like you might be double counting.

But I think this is actually the right mechanism.

Oh, isn't that nice?

You guys want to fix this?

Let's see if this is broken actually.

So you get the dividend.

I don't want to include the last one, so let me take this out. And this is what you make every year.

This is year of annual profits. Why is it divided times 0.6?

Oh yeah, because our dividend is less. But see, now it's too small.

Oh no, I, I Anyway, I think we're making good progress. So do you guys want to see if we can combine the two and get one nice little article on him? I think so. Pretty simple. All you do have to do is add back this part and this part. So let's go to video version control, go to Dividends. Now we can all clean it up. Able to calculate. No, eh.

We—

so, for— what did I put here? It can be confusing. I think it was like the original line I had. Footer, two footers.

Bye-bye. Awesome.

Sweet. Oh yeah, to be honest, I feel like this blog post is still very confusing. So make growth of first chart zero for comparison. Yeah, that's probably a good idea.

It should be zero, actually, otherwise you're like implying some growth rate.

So I think that's good. Do I need this compensation calculator header? I think I do. Fine.

I'll keep it as—

I personally don't like sentence casing stuff, so I'm just gonna do that.

And then what I'm gonna do is I'm also gonna move this. The equity split, in my opinion, should go last. You know what I can do?

I could actually summarize all these things and have it do—

so what do I wanna do? Let's see if it can do all my changes in once.

Okay, I want move equity percentage down so that it's under its last before the chart.

That's one thing I want to do. Sentence case everything instead of title case. I want that after hourly rate, hours per week, and weeks per year, display the annual compensation before the equity split, then show the amount of net annual compensation versus amount taken as equity.

Under the equity split slide. It should make it more comprehensible. How good it does—

a lot.

I mean, it's quite a lot. Awesome.

Do you think this should be above? I feel like it would be more clear if it were above.

What do you guys think? Where's the chart? Where's this magic? I guess Legend does that, but it's weird that it puts it at the bottom even though it's up here. But I guess that's the way it goes, huh? I think it's pretty cool, to be honest. I feel like we're making nice good progress.

This doesn't really mean anything because you're just getting paid more.

So it's really just this that's the cool thing. So you get boom, cool.

But really the big win is you get— hopefully you're betting on some growth, 20% growth. Most people are gonna do more like a, let's say, 20% equity. That's, that's the dream, right?

It's like, boom.

So we're getting pretty close.

I wanna add some y-axis to this. Also, I can do all these tables really quick.

I just—

where's the code that does these, this axis? Probably here. Nope, I guess it must be in the other part. Yeah, cool, awesome.

This is annoying.

What?

Anyway, let's do all these charts really quick.

Update this.

Blanket, but whatever. Or maybe I'll just remove it.

I feel like now we have that cool chart, doesn't really mean as much.

You have the slider and stuff.

Awesome.

All right, let's do the tables real quick, get the tables fixed up. Oh, damn, damn. Yeah, you know what?

It'd be nice to save it and then just render it from a single place.

So let's try to keep the table data somewhere so we can—

Vague, but whatever.

Why did it skip?

Oh, okay, there's a lot going on this page now.

There's no way it's going to make it all the way down, but we'll see. No, it did this thing again. I don't want this.

I just did this annoying thing.

What the hell? But it basically did what I wanted.

Go back.

I'm gonna have to piece it together based on what it did because this file is too big, right?

So when— take all this tabular data and put it in here.

Awesome. Oh, and then I just need to take— basically take this function and replace this. Oh my God, you like that?

Boom! Awesome.

All right, so we're getting pretty close to doing this. The nice thing here now is I can just go into this file.

Get all of the numbers from 2012 to 2023, right? I think is the final one. Yeah. And then basically 2020, 2020, Boom. And then want to change this. See, this render thing doesn't actually— it just takes the financial data, which is right here. So I need to update this function. To take in the number of years to update this function, you take in the maximum year and show all years from 2012 up to that year.

So Cool.

And then this I just need to pass in, I guess, 2019, 20. This is 2022. This is pricing. 2023 is at the very bottom.

Cool.

So boom, now you have all these things.

Oh, it's doing this annoying thing again, which it didn't seem to do at the top, right? How did I resolve it? It's probably just this number, I guess.

Like, yeah, the cool thing is now we use a single function.

It's probably possible to just update this. Failed. No. Why? Death.

I deserve it.

Light. There you go. Cool. Awesome. Yeah, the reason is I think I, I have this this div thing, but you probably don't need this then. This is not gonna work very fast.

Well, you need—

all right, yeah, so we don't really need to use You can see how you can switch to Tailwind and upgrade Next.js really easily and how the benefits of this, like this should probably also be not an image, right? This can easily be made into, just take it, just go to that pricing image, place this. Place this image with HTML, Tailwind, Tailwind CSS.

Blue, blue, blue.

And see what it does. Probably gonna get pretty close. It's pretty easy, I think.

It's kind of nice though, right? I mean, think about it, you don't have to copy paste any of that stuff. Yeah, it's not bad.

You can tweak it to be more More better.

Don't want to have extra spacing after best. Have border 1px black around email.

I just keep iterating on it. This is like why I think it's awesome, right?

You don't have to write code. You just type English. It's better, but it's still— it's rounded. It's weird. Don't need the rounded. I assume that's what that does. It's getting closer and closer. Yeah, see, this should be different. This should be break. Boom. Oh, what? Why can't you do this?

Can you not?

Yeah, you can.

Okay, cool.

This div is getting a bit too paddingy. You want this to not have any padding. Margin-bottom, maybe you want to do a margin-top as well.

This should probably both be 4.

I need this margin-left 4.

Is that right? Yeah.

And then this stuff, these Ps will also want to be—

it's getting there.

Pretty close.

Uh, oh yeah, new. I want to do important, so always makes it black. Well, that one, funny.

But yeah, this is probably kind of an extreme example, but it is nice to maybe make this less, make this like Super solid.

Oh, too much. I didn't do a proof, but some importance. That's pretty good. Oh, finally I got to— hello, request. Nice.

That's pretty close.

It'll be funny if I just took that and said make it closer and see if it can do it.

All right, let's see.

Oh, we made it bold. I don't think that's good. But it's getting there, it's getting— that was— it's a bit better. I think these MBs are a bit too much, these patterns.

I'm gonna manually do that. Oh no.

MX6 and B2. You see how it's still doing a bit? I think it's because I have that global CSS thing and it's, it's like, you might not actually need any, like even if I remove these, it's not actually doing it. That's my guess. It's global.

See, look, there's a new— large top.

Interesting. You see, automatically does it. Looks like an emoji.

I'm gonna add, uh, MB. Yeah, that's pretty good.

I also wanna change this actually. I'm gonna, I actually wanna rewrite this whole blog post cuz I think it's still too confusing. I'm rewriting this blog post to Delving into Dividends. This is about the process of deciding and implementing dividends at Gumroad and why it's awesome. This blog post is too long and confusing. Help me boil it down. Give me a list of bullet changes to make in order to make it more comprehensive.

I got some notes from somebody which I'll share with you as we're like recruiting.

Let's move it over here.

And there are all these questions they had. The dollar value, blah blah blah. It was like, there's a lot of complications, right?

Also include anything from here that would make it more comprehensible. I want to paste this also, the Getting Paid doc at Gumroad, and I'll paste that in. Oh, the Getting Paid doc at Gumroad is This is a public doc as well, but we talk about earning equity here. I'm going to just copy all this in.

Boom. See what it asks me to do.

And now I'm going to try one magic trick and then we'll do some Q&A and then I got to run.

Shorten the up introduction. Remove or significantly condense All right, all this.

All right, now I'm going to take all these changes.

I'm going to go here and I'm just going to select all, select K, and say, edit this blog post to address this feedback.

Oh, see what happens.

I'm bruising it. Okay, it's made it worse.

This is the problem with the big files. It's nice to narrow your focus. Oh wow, it's adding this back. Oh wow, it actually Oh shoot, this is actually good.

It summarizes it. Oh well, maybe this is better.

It didn't finish it, but let me just hit save and think about— let's compare.

You guys want to compare? I'm going to delete all my progress, my chart, but let's see how it is.

What's more understandable?

Honestly, I probably love—

to be honest, this is like super narrative-driven, and maybe it just doesn't matter. It's very different, but it is nice to compare and contrast. Like, for example, I think this chart is like much easier to read and just focuses on GMV, revenue, net income, and then the year-over-year revenues, all this stuff.

So yeah, anyway, hopefully that was helpful. I think that was a good approach to, uh, diff. I canceled GitHub Copilot. Should I merge this? Is this ready to merge or no? Did I mess anything up?

The dividends piece, I didn't update the images, right?

Oh no, see, I started it, so I would have to complete this if I wanted to merge it. So I guess I will have to do that another day.

Yeah, let's take a look.

You can discount this 9,000 stuff because there's these package-lock, if you go to package-lock, that's 5,000 lines.

So get rid of that, but that's still like an insane amount that we did. And oh, see, this is nice.

It fixed this for me.

Yeah. So let's see.

Yeah, let's review it.

No, it's nice.

It's gone.

I don't know what these were, but it's gone.

I guess we've upgraded to X14. Footer.

This is so much nicer to just have without having to worry about like conflicts, like what this could be. This could change in the future and do some weird stuff. So I love this.

We don't have a header anymore.

We don't really need it. That's nice.

We still have the footer because we put the email subscribe in a bunch of different places. This is nice.

I think there's like an overreaction.

People love just doing this super clean, but the truth is you only have this once anyway, so it's better to just have it inline. Updated some stuff. Do some linting and then Yeah, just goes through and updates it. Border header is gone.

Now we just do everything inline. We pick the URL.

That is sexy.

Nice.

That is very nice. That's all the underlines. Nicely formatted.

This is nice too. Like instead of repeating like These—

this is—

does this nice array with a map.

Yeah, pretty cool.

Oh yeah, the dividend one, I guess, was the crazy one.

Yeah, this is the— this was the big one with all the chart, the chart.

So big chart, update the chart, render the tables. Each table now can— you can just give it the max year and it'll show you the year, format them nicely. If they're not present, you have to do it each time.

H1. Rendered inline. This email is now inline.

I could have done the Kindle screenshots too.

Compensation calculator.

I think about, like, I didn't look at any docs this whole time, right? That's such a powerful thing. Like, I just, I think in the beginning it was a little bit of Tailwind Docs, but I have no idea.

Recharts, I guess it was.

Okay, I went to all these classes, like, just Cursor does this all. Everyone check out this book, very good.

I wrote it.

So good. So nice. All that in about 2 hours, 2 and a half hours.

And let me review.

Actually, I wanted to spend as much time coding with Cursor as possible because I think that's like the most helpful. Uh, but I do have some notes I can go through in the last 16 minutes. Certain things that I've used AI for, I wanted to talk about legal finance and ops, but again, I think Coding with Cursor is the name of this thing.

So I thought it'd be more helpful to actually do that.

But yeah, in the last week, I used it to review a buyback contract. I used it to write our risk factors. If you imagine, imagine how long it would take, let's Shopify F1. Think about how many pages this is. Well, page 12 to like page 30, all this is risk factors, right? I think basically all of this. Think about how much lawyers charging $1,000 an hour do this, right? So I have to do this. So when you're doing a tender offer, you basically have to do the exact same thing.

Imagine you just go into here and be like, Generate 30 risk factors for Gumroad that are similar but also different to Shopify.

And then you just go through and I did this actually, and let me see if I can find it for y'all. So I made a bunch, uh, somewhere in here is my changes.

I don't want to show you guys too much, so I'm going to scroll fast, but you can see all the— actually, let me see if I can find just the specific risk factor doc. This one? Oh yeah, cool. I think this is my edits. Yeah, so you can see some, some stuff.

It's actually cool because then this is actually the markup that Cooley are— I'm not gonna go with it, a lawyer's still gonna review everything, but it's cool because you can see like basically what lawyers that make a bunch of money at the top legal firm in the world, what changes they would make. So all of a sudden I'm getting feedback on my writing. I added the rapid advancement of it. Oh, they like it. They didn't edit it. Isn't that cool? I basically am doing like Cooley-level legal work now. But they removed this. I guess you don't have to say that. They also added this, which is interesting.

I get to learn.

I added this Web3 clause. They added this bit. So they just took this part and moved it up. I noticed they do this thing where— this is actually why I tweeted about it. I had a tweet like, what's the significance of that period? I realized like basically a period, what it does is it basically in a legal context, it ends the legal sentence statement, logical thought. If you don't have a period, you have to keep reading until the period basically, because you never know at the end they may have, nah, just kidding. The period is like, you know, kind of locked in. So I noticed they actually do this like semicolon thing to do that and they uncapitalize it and they just have a single period.

So that's cool.

So yeah, you can learn a lot, but like in 20 minutes, I was able to like speed that up dramatically. I was going to like, here's the thread in Slack headed into bang out the risk factors for the buyback about 3 hours. And then it's funny actually, the template, because they, Kuli gives you a template in the beginning, the template.

Can I zoom in here?

The buyback template from Kuli assumes never making a profit. The default template they use is we have a history of operating loss, which is what you mostly see in any one. Companies go public because they're mostly never profitable. And I drag and dropped it into, into Claude. And the first thing is it figured out, update the section to reflect Gumroad's actual years in business. Confirm if Gumroad has.

So it's like pretty good.

I showed this example last time, but I use it for sales. We could have built a buyback simulator today, but that would be too easy.

And yeah, I mean, I think the one point that I would like to make really quickly is basically we're gonna move, change the way that we build shit in design, and I'm very excited about it. Ignore our fancy stuff.

Normally, like, when you do a— like, when you learn to draw, you often do like this general and then you go specific. So for example, if I'm like drawing my hand or something like that, right, I do a big motion and I get the overall shape and then I go in and carve out whatever the pieces are. There's a right way to draw because you want to get the right proportions. You keep going, right? And that's really great if you want consistency, if you want generalization. But actually what's happening nowadays is we're going from the inside out. And Tailwind is this, where you start with what problem you're trying to solve specifically for that thing. So you start really narrow and you say, okay, What really matters is like the focal area, which is like the ring on my finger. It has all this gradient to it. This part's dark and this part's light.

And from there's the finger that comes out and there's like a bone joint and then there's this line and there's like kind of this finger thing and then there's this other finger.

And that is where design is headed, I think, which is you basically want to solve the actual problem that you're facing, and then you expand outward into the wrapping of it. And I think that basically is a way better way to design. It's a way easier modular way to actually build like really high quality user experiences. And it's possible because things like Tailwind. Before you had this like top-down design system that would cascade all the way through your app. The problem is what it means is you're often not designing the best thing for that specific instance. You're having to think of everything systematically, which makes sense in some contexts. Like if you're sending a book, you want every page to be the same. But if you're building an experience like a web application, every UX should be the perfect for that specific problem you're solving. So I think it's a much better way to build software, bottoms up instead of top down, inside out, instead of outside in. Basically, we just pushed out using Tailwind on Flexile.

So now Tailwind, this is all like, is this live yet?

Ooh, yes, it's live. For example, like how trying to design a pricing table that would fit into our design system, but now you can just design like what's right. You can put this, for example, like this is new. You wanna compare to Stripe, you're gonna hit this and make, poke fun a little bit at Stripe's UI. You can see how much it would cost you if you have 100 contractors. With Stripe, it's going to cost you about $25,000 to process this many invoices, but with Plexile, it's only going to cost you $15,000. Still room to work on this. I think it's a bit hard to tell, to compare. You just go in, you just go into this, you check it out. Instead of having to think about the system, just focus on what problem you're actually trying to solve, that problem. And then over time, AI, I think, will actually be able to basically systematize it because it'll be like, oh, you use this over here and use this over here. We're gonna automatically open a PR to clean that up for you.

But that seems like a pretty deterministic thing that AI should be able to help with.

So yeah, I'm pretty excited for a lot of this stuff. It's so much easier to iterate. Ironically, this all used to be all Webflow and we moved it all to Tailwind. Because it's actually faster to build stuff and design stuff with Tailwind instead of Webflow. RIP Webflow. What are the other things that I wanna talk about?

Dude, talked about this.

We'll get to this maybe next time. I was gonna work on the homepage a little bit, but we'll do that maybe later. I'm a pretty big believer in this idea of, I've never been a huge fan of managers. I would prefer prompts. I think every manager, every department head, you can basically summarize all of the things that they repeat to their staff in a text file. And isn't that what Notion is anyway? Right? Like when you join Gumroad and you read a bunch of documentation, all it's doing is, or if you're reading all this stuff, right? You're just having to consume and memorize effectively all these things. And that's effectively, if you're feeding into every single prompt, then you don't have to teach the human because the human using the prompt will already know all these things. The example I gave last week was like the sales emails that Claude can do now is phenomenal. It's like better than any salesperson, right?

Hey, use Gumroad. I'm a big fan of X.com and it would be perfect.

This is addressed to a friend who got acquired by Twitter.

This is a terrible email, obviously, but Boom, it'll rewrite it. And boom, so pretty cool.

And all it does is every time I give feedback, I just put it into this thing. I just keep making it longer. And it'll be perfect in no time. What other things do people have?

Questions and questions.

I'll stop sharing my screen. And go to these things. The refactoring UI books recommend starting with a feature rather than a layout. Yeah, exactly. I think it's, you wanna, layouts are complicated and hard. Will our backend also be migrated to Next.js from Rails? Yes, almost definitely.

I don't know when.

Flexile almost definitely will because it's a small-ish project.

It's pretty young.

We started in 2022. So the tech debt is not that crazy.

It should be possible to do.

Gumroad's huge though. So I think, and super old, so I don't know. And frankly not growing that fast. So I think you have to weigh like the cost versus the benefits. So we'll see. And we'll do this again, 6:00 PM Eastern time next week. So hopefully everyone learned a lot, had a fun time and just enjoy coding with Cursor until next week.

See everybody.

Bye.