AI Will Improve Your Web Development Workflow

Welcome to Syntax on this Monday Sanity treat. We're gonna be talking about AI.

And we're gonna be talking about how to use AI effectively while you're working.

It feels like every time we talk about AI, whether it's AI tools like Cursor or something, there's often comments like, LOL, does anybody write, you know, code anymore or things like that, where I think people look at these things as, you know, being these really divisive tools.

And I think this episode is going to be diving into what are the ways that you can actually use it to enhance your workflow as a tool instead of, like, replacing the hand that writes the Node? Right? And I think that's where AI fits in best. So my name is Scott Tolinski. I'm a developer from Denver. With me JS always is Wes Bos. What's up, Wes? Yes. I I think this is a good episode because

people are very aggressively on either side of the AI being like Yes. Node. It's garbage. I don't want it to write a single line of code. And then the other thing JS, like, I'll I'll use it to write everything.

And they're the way that I use it as, like, an everyday developer JS, like, I don't use it to absolutely write everything from scratch, but there are, like you said, 7 or 8 use cases that I I reach for all the time.

Yeah. And one of those is solving your errors, and Sanity has a built in tool to do that. It'll actually look at your error log and your error stack trace when you have an error, and you can click a, a button to have it help you find what the cause of that error is based on the error that's coming up. So if you want that type of feature, head on over to century.i0.

Sign up and get 2 months for free. That type of thing is exactly what we're gonna be talking about in this episode. Just the kind of stuff that saves you a little bit of time, not the stuff that, you know, takes over.

So I think the best place to start here might be just a little bit of a a preface and and talk about maybe, like, AI tools in general.

In my mind, they should be step 1 or, you know, step in the middle.

I would never publish any code that was completely written by AI that I did not understand. I think that's a bad place to be. So first and foremost, don't do that. Don't just have the the code generate, have no clue what it is, and push it up online. You could be introducing all kinds of things, whether that's security issues, usability issues, accessibility issues.

You still have to have the hand of the developer who understands what's going on, at least right now. You Node? There's always gonna be people being, like, well, soon. Yeah. Okay. But I'm talking about right Node. 2024, 2025, whatever. Where we at right Node? Yeah. Also Wes test your apps.

Use them. Right? Test integration, test those types of things. Make sure that your stuff's working. You know, one trick that I've been using every now and then is

when I want to generate AI to generate some code for something that is, like, a little bit complex or has many use cases, I will just write the test assertions and then pass that to AI and have it generate the code from it. Because then, like, you Scott if you're writing something that, like, I used to say, like, money formatter, but that's that's pretty easy now with the the INTL ones. But if you're writing, like, a function like that Wes you wanna format a bunch of money and you have all these different edge cases and you wanna pass in different currencies and you wanna pass in some options, it can be worth just quickly thinking, okay. What do I want this to do? Write them up quickly as a couple assertions in your in a test suite, and then pass that to the AI, and it will generate the function that will hopefully pass those Wes. And and you can tell really quickly if it works.

Yeah. Another thing I like to do too is, like, scaffolding comments. You scaffolding comments, but the comments are pseudo code. So it's not like, vague comments. It's, like, very close to Node, but with text.

And then it does a really good job if you have that in your step 1, do this step 2. If it does not do this, you know, it's a it's pseudo Node, and it is almost yeah. It is almost getting you there. You're just not writing this ESLint. So you're still having to understand the control flow, the logic, those types of things. At some point, that might be

the code. Program. Right? Like, that might be programming. It's just writing it in English.

Yeah. And and I know people get upset at that. But if you if you were to interview 20 year old Scott, I would say, that sounds awesome because I don't know I don't know the code very well. And if I could just write English and have it work although I'm not very good at English either. So well, that's you know? Who knows? It's just another abstraction. You know? Like, JavaScript is just an abstraction on, like, whatever the browser runs on, so it's another level higher. Yeah. Totally. I think one thing you should do is you can you should consider your AI tools as a potentially uninformed coworker.

You know? I pass this off to you, but you might not you might not give it back to me exactly what I'm asking, and I'm I'm now going to be the one who's going to code review this, tweak it, make it better, fix it, whatever. But you never know if what it's going to give you back is going to be usable, good, or any of that, So you do need to have that eye on it as a developer.

And you still need to know your fundamentals. You always need to know your fundamentals. Listen to syntax. We talk a lot about the fundamentals. We have a whole lot of fundamentals episodes, but you need to know that. Because, again, without that, you're gonna be shipping buggy inaccessible code that is not going to be great for your users.

So how do you use AI tools to be effective at your job? Yes. The first one we have here is stack trace and error finding. I use this one all the time because I like, for the other day, I was upgrading MongoDB versions from I had to go from 4 to 7, I think. And what you have to do is you have to upgrade from 4 to 5 and 5 to 6 and 6 to 7, etcetera, etcetera. Right? And it's a simple process, but you have to do every single step. And I didn't know that, and I was just trying to upgrade from 4 to 7. And then MongoDB just pukes a huge stack trace on there. And you look at it, and there's you could spend an hour reading that thing and not see it, but you just I just copy paste what's wrong, paste. Boom. And it it tells you it told me exactly what was wrong in there as well as how to possibly fix it, and it worked. And just being able to, like, throw that needle in a haystack, huge, huge benefit. I love that type of thing.

Yeah. And for for me, also, you know, I have reading challenges with dyslexia.

And when I look at a stack trace, sometimes my eyes just glaze Vercel. And you can go line by line and you can find it. But there is just something so nice about find that the error in this massive dump of loss. Which one matters? Yeah. What it yes. Because that is also a thing too. 1 begets another. Something's a warning. Something's red. Something's flashing, and not everything is relevant. And so it is very good at pulling out the relevant information, especially when you log a lot.

And if you log a lot, that means you have more context for it to find what potentially is wrong. So I use this all the time for error finding specifically.

Not necessarily always error fixing because it can just start me on that path to where I should even look and what potentially is going on here. And for instance, it it could also be, like, I'm not familiar with the topic. Like, I'm working on some ESLint stuff. Right? I'm I get this Wes. I ported, the in app purchases plug in for Tori from Tori v 1 to v 2.

2, also using mobile payments because it was only built for using desktop payments for macOS payments. And it's this Swift in app, StoreKit Apple StoreKit.

I have no experience with StoreKit.

I have little Rust skills. I have Rust knowledge, but I have little Rust skills. And I was able to do that by guessing and getting most of it right, by the way. I I, you know, I have Torrey experience. So I Wes able to to migrate some things and getting it right. But when I hit an error, I would ask Claude or whatever. I said, what's going on with this error? And it says, your manifest is malformed. Why is my manifest malformed? Well, the Tori process is creating the the manifest, and something in that process is, you know, messing up your manifest. When I look at your manifest, your manifest has Node syntax errors. So there's something happening in the build process that is messing up your manifest.

And sure enough, it ended up being a bug in Tori because that told me the code I wrote in my manifest was fine.

Yeah. But some somewhere in that line, it was getting messed up. Not my not my thing. And it turned out, yeah, found a bug for me. So yeah.

Hey, San Francisco. We're gonna be in town for GitHub Universe on October 28th, and we're doing a syntax meetup. You don't have to be going to the GitHub Universe conference to meet up with us. But if you are in San Francisco, come hang out from 5 to 7 PM, October 28th. We're gonna be at the Bare Bottle beer garden in Salesforce Park. Admission is free. We're not gonna charge you, but come hang out, and you need to grab a ticket via Eventbrite. So we put the link in our socials, in the newsletter. We'll put it in the show notes as well. Come check it out. Come hang out. Scott's gonna be there. I'm gonna be there. The whole team's gonna be there. It's gonna be exciting. See you then.

Another one is research and validation. I often ask a question like, is this something that people do? Just as like a general starter.

What is this technique called?

Explain this code to me. And, again, these are things you want to validate outside of a AI tool. If it tells me this is a technique and it's called this, I can then go Google that technique, learn more about it, read more about it, validate it, understand it better. But if I'm looking at something and I don't even know what it JS, like, for instance, with that ESLint thing, I said I have a package swift file. Is this considered a manifest? What is this file? What does this file do? And it told me all of those things. So that's so much better than having to Google and and sift through a bunch of, blog posts that are just trying to, you know, get your attention. Yeah. I find that as well. It's like, I don't even know what to Google with this type of thing, and I don't know what it's called, especially when it comes to, like, doing stuff with, like, math Wes I don't know what the name of that is. So I just looked on my my previous one. It says, I have a rectangle with a point at dead center. How do I calculate the distance from center to the edge of a rectangle given an angle? Right? Like, that is clearly some sort of math, and I don't know what to Google. Whatever. I just explained what it JS, and it says, here's how to calculate the distance from center to the edge of a rectangle given an angle, and then it it explained that I need to use cosine and sine with the thing. And I say, good. Now give me that in JavaScript, and then it spit out a a little JavaScript function to do that type of thing, which is I love that because I was I'm not a math guy, but I was I was doing something where I needed to adjust the speed of a CSS gradient given the angle. So there was a certain angle where it needed to be faster and a certain angle where it needed to be slower. And based on that, I needed to to speed it up. So I figured it out with the distance to edge function, and it it gave me all of that. And I thought that was amazing.

Yeah. That's a much better use case than, like, if you were to say, give me give me that math in CSS. What it's gonna do is it's gonna invent a bunch of CSS functions that don't exist. Right? Because I I had that recently where I said I I said I'm working on this this math. I need to calculate this distance with CSS calc. And it and invented, like, 3 different,

CSS functions that do not exist. I'm just like, okay. I can look at this at at in an instant and be like, this is not the this is not what I should be using this for. I actually did get it to give me, cubic bezier timing function at the end of the day. But I Cool. I I got it to give me the the English, and then I made it convert it to JavaScript.

And then I followed it up and with some more information and said, now convert this to using a actually But It wanted to give me a cubic bezier, but then I told it, give me a linear function. And I don't I think linear is too new, and it didn't understand what to do. So you just get the bezier points and apply that to linear. So, yeah, it you still have to know what what linear takes or any of this. Yeah. Yeah. It doesn't solve any of this for you. One thing I really love using these tools for is completing mundane tasks, like, specifically like cursor. It does a really good job of creating many variables at once. Let's say, you have data that's derived from other data or potentially you Vercel something that's very obvious and you're applying something to something else. And that information exists somewhere in your codebase.

It can look at that and and just show you, like, you know, copilot does the creation of many variables or the creation of each loops or wrapping something in a try catch. Like, cursor can do all that in an instant or even, like, writing out, like, a fancy autocomplete. Right? I need to dot map something.

And I can just do Scott m, and then it autocomplete the dot map. Now the stuff inside of there, I might just rip out immediately. Mhmm. But it saved me from having to write the the code, the syntax ESLint that little bit of time saving. Your variables for you. You know? JS a lot. Yeah. That is a good amount of time saving. And, again, it's it's not like I'm just saying, yes. Okay. This is the final code. It's like, no. You you set this up for me as a fancy autocomplete just like I use snippets for in the past. Yeah. I'm writing all these hand,

hand coded bespoke snippets, and now, you know, Copilot just takes that need away from where the cursor does. Yeah. It's it's a snippet. You know? Like, it's a context aware smart snippet where Yes. It will try to guess what you want or you can give it a little bit more context, and it will render it on out and, like, that type of stuff. Because, like, how long does it take to to type out a, map filter reduce and create all the variables and and reference the indexes? You know? Like, that could be a couple minutes versus

2 seconds. Yeah. And you're gonna get people saying, it takes me a couple seconds. Sure. But, like, you could also hit tab, and it's gonna take a fraction of a second. And, like, you don't ship your snippet Node, so I I do. I see these as, like, kind of, like, fancy snippets in my mind. I like that. Refactoring is a really big one where, like, I was going through my code base the other day, and I had

I was upgrading my version of Mongoose, and I had moved all of my queries over to a sync await, 4 or 5 years ago, except I had 6 or 7 of them related to auth where I was like, I'm just not gonna touch that. I don't wanna mess with I'm gonna leave it with callbacks.

And Mongoose has officially deprecated any callbacks in, in their ORM. So I was like, alright. Well, I got I gotta move these last 6 over to using a sync await. And I I did the first one by hand, and I was like, this is kinda kinda complicated because the error is not being returned at the same Vercel, so I have to handle the error at a different point. And there's just a lot going on in it and especially related to auth. I was like, I don't wanna screw this up. So I just flipped it over to AI and had them do it, and it did a much better job than I would have because I would I would have accidentally forgot something.

And, of course, I checked it over, but in that case, I think that the AI did a better job and was more safe than me going through manually and doing all 6 of them myself. I probably would've goofed something up at some point.

Yeah. I I I use these things a lot for that, and I think this is one area where cursor sign shines above Copilot because, like, let's say I need to modify a a CSS class in Node Scott, And maybe I spelled it wrong or whatever. You could do a find and replace. Sure. That is, you know, command ESLint f, and then you write it. You you find and replace it. Or I can just start typing the way I want it to be changed, And then cursor JS going to pick that up and have me tab to auto complete the other one. That's faster than a find and replace me. Now granted, you're doing that across multiple files, maybe not so much, depending on the tools that you have. Yeah. But if you're just in a single file, a single thing, man, and you have something referenced here and there and whatever, instead of doing a find and replace, I personally found it to be faster than just start typing, which is one of the reasons why I I like a tool like cursor over, something like Copilot right now. But, again, yeah, it it's just a personal preference at the end of the day. It to me, that just works a little bit faster. I found that refactoring to be a nice use case. You should be using rename symbol for that, though.

For a class name? Is that possible? Yeah. Yeah. A CSS class Node? It will find that.

I use it for, like, variable names. I use Oh, yeah. Rename symbol constantly for symbol names, but I didn't know that would work for something like a string in your code Bos.

Yep. I don't it's a good question if if it does it on multiple files. You know? Like, with with TypeScript, like a function, it's able to, like, follow the imports and replace it everywhere.

But with, like, a CSS variable, it will at least replace all of the instances in that scope.

Really? Let me try this. Let me I'm renaming drop down button to drop down, but it did not change it. Sorry, Wes. It it it changed it when I used it, but it did not change it in the CSS, in the same file. Let me see. I right click, rename symbol.

It suggests renaming highlight to a variable called color tint, and it replaced it in 4 places for me.

With a string? With a variable. I rename my variable. Oh, I'm talking about I'm talking about strings, Node, like, like CSS class names. Oh, yeah. Yeah.

Yeah. Okay. I thought it was a JavaScript classes. I thought it was CSS variable.

Yeah. Sorry. I'm talking about, like yeah. I'm talking about, like, strings.

That's that's where I would use that for. Like, typically, where you'd reach for a find and replace. Yeah. If it's any type of variable I'm reaching for, rename symbol. Absolutely.

Or, like, another good one example of that would be if you are using, like, a utility class. Like, for example, you have, like, a padding dash 4 or text dash large. You're like, you know what? I wanna make that text medium. So you rename 1 of them to text medium, and it'll a cursor will immediately be like, you wanna update the other 7 that are on this page? Like, absolutely, I do.

Yeah. Yeah. I I think that's such a a good use case for this. And, again, people will immediately say, well, just find and replace. Yeah. Sure. I find this to be faster personally. But, yeah, either either way.

And it's also like like flow as well. You know? Like, it's just that's just how you work. And as you're typing, it suggests what you want. Like, yeah. I I'm not I don't have to break out to this other function and and do this thing. It simply just knows what I'm I'm trying to do. It understands.

Yeah. Pop over to a dialogue or anything like that. Totally. Yeah. I also use a for quite a bit for, like, simple TypeScript stuff. You Node, sometimes it's not that I I can't do the TypeScript or find the right types or know the right types, but there's occasionally types that I just have to look up, you know, for things that are built in or even React specific or Svelte specific types. I just haven't had them memorized or Mhmm. You know, whatever. So I I use it to add types for things when I want to be lazy and have it, type an entire file for me or something like that. Or perhaps I have taken a file that's in JavaScript with JS DOM style typings or JS doc style typings and say, make this into TypeScript for me instead of JS doc. That's a perfect use case. That's refactoring the whole file. It has the types already. It has the context, and it's just switching how how they're being used in that file. So I actually do end up using that quite a bit. Yeah. Totally. Also with, like, complex things where like, one that I do a lot in

in React land is, like, you wanna extend a element.

You wanna make, like, a custom, like, a custom editor Bos, you know, and that extends a div.

And then you wanna destructure the class name, maybe ESLint styles, and then you want to destructure the children and the rest of the props to spread. You Node, that writing that sucks.

That's that's a lot to type. And, if you have done it once already in your code base, it will understand the pattern that you like to use, and then boom.

It that spits that thing out, and and is really nice.

Yep. I use it to summarize a lot of docs to help me read. Like I mentioned, I have some reading trouble. So, summarizing is great for me. That's a tool that I use all the time, or even being able to ask questions of docs and source code. If you have it in that context, the docs and source code, again, you can ask questions of it. Again, as step 1, validate, confirm, make sure those things are actually real.

But it's good at that because it has that context. And when you're asking it about something that it has sitting in front of it, it does a good job of being able to parse through that.

I, I actually got bit on cursor the other day. I made a video that was like, cursor is is actually better.

And I was, like, refactoring some rotation values into external CSS variables.

And I, like, I was like, look how good it did. And I I posted it, and I was like, this is really good. And then, people realized that the cursor forgot a negative value in one of the variables that had pushed out. I had not caught it. And that's, like, the perfect example of what everyone is afraid of, which JS, like this this is not like a the cursor thing. Like, all the AI will will have these issues where I look at it. I said, that's exactly what I want. It looks good.

But I literally forgot a negative value, which if that was billing code, you know, that would have been a bad day.

Simply negative 1.3 or or 1.3, that's that's a major difference. So Yeah. I'm I'm glad that it it got caught, and I'm glad that it was just some CSS rotation value, but it just goes to show that, yeah, you have to give it a good look over before you blindly or or even glancingly accept it.

Yeah. I Node. It it is you you, at the end of the day, are responsible for the code that you put out into the world whether or not the editor wrote it or not. So it reflects on you, but it also you know, you the what you're putting out there matters. And as Yeah. Artisans, we need to make sure that even if we're using these tools, the, the code that we're shipping at the end of the day meets our high standards.

You're responsible at the end of the day. Like, I saw I'm part of, a Tesla subreddits and a couple Facebook groups.

And pretty often, you see people saying, I was running full self driving, and I hit someone. Like, not per like, or, like, it trust that stuff at all. Scrape the side scrape the side of the garage or whatever. What will Tesla do? And it's like, or, like, I Scott a speeding ticket or whatever. It's like, you're still responsible for the stuff at the end of the day. Like, don't be an idiot. Like, you Oh, yeah. If you see it, maybe check to see if you're gonna hit another car Wes when you're sitting at it. You can't just blindly hope that the stuff works really well.

Yeah. And that might be a branding issue where they've called it full self driving. Like Yeah. Complete to auto self drive. Don't touch the wheel. You know? In Canada, like, it's supervised.

They Okay. Yeah. So that's brackets. Yeah. Yeah. I I I prefer when they call, like, you know, driver assistance because that's really what it's doing. An AI to me is coding assistance. It is not Little driver buddy.

Yeah. Yes. Yes. Please turn the wheel for me ever so slightly so I have to use less muscle to, turn the wheel while I'm driving. Because my car does all that stuff. You Node? It will back out of parking spots. It will, you know, do all those things, and, it works really well. But I sure as hell would not trust it without having a nice, firm supervision of everything. Yeah.

Yeah. You know what? One thing also too, last 1 here I have is quick hits, like insignificant quick scripts that you need for x, y, and z. We talked a little bit about I spoke at Denver TypeScript, and we did a whole thing where we pulled, you know, names from meetup.com.

I knew how many people had RSVP'd to this meetup. The meetup DOM structure was not very good JS in there was no direct identifier on the Node. But I knew that you could drill down with, like, children of a children of a children to get the exact one for everything. So I I I copied the DOM and I sent it to Claude, and I say, give me a quick script to pull everyone's name out. The name is in this element. And it wrote me that quick script. That script is insignificant.

You Node, when I run that script and it spits out, you know, x amount of, people, I know that those people that's how many people RSVP'd. So I I can validate that the results are correct, instantly.

And that's, like, insignificant.

And if I were to try to write that script and I was under pressure because we have a a talk to give in 5 minutes, then writing that script in that in that 5 minutes that I had would would have not worked out super well even though CJ did Node live. So props to CJ for that. Same thing with, like like, formatting, you know, going from one format to another. I

when I was putting my flights, information for GitHub Vercel into my calendar, it just like, they don't give you a calendar invite anymore. So I just, like, copy pasted the entire itinerary pnpm, like, just format this in a way that is easy to input into my calendar and to scan. You know? And, it it did a good job. I found it JS not good at stats, though, because I when we did the, syntax listener survey, I fed it, like, an, a CSV of stats. I was like, give me stats on x, y, and z, and give me some interesting things. And every time I went to, like, tally it manually to see if it was right, it was it was off. It didn't didn't line up at all. So you'd certainly have to be careful with math, but simply formatting text is is really good. Yeah.

Sick. Cool.

Well, that's all I have for this one. Again, remember, like we said, you are responsible for the code. It's there to be an assistant. It's there to assist you. It's not there to take over completely.

And if somebody JS shipping code without, you know, just AI only, I would be a little bit cautious of that. Personally, I know other people are different about that. I think it's good to have a level headed approach to this stuff personally because, yes, these tools are there. They're not going away. I think anybody who thinks that this stuff is all of a sudden gonna disappear at any given point is wrong. You Node, I think it's only gonna continue to to to improve whether or Node, you decide to utilize these tools in various ways JS up to you. But me personally, I do like to use these as an assistant, and I think they can be great as an assistant if you know what you're doing.

Beautiful. All right. Thanks, everybody, for tuning in, and we will catch you later.