viewSource

## [00:00:00] Introduction

[00:00:00] **Brian Coords:** You are listening to viewSource, conversations around WordPress and adjacent tech with hosts, Aurooba Ahmed and me, Brian Coords.

[00:00:07] Aurooba, welcome back to our Next.js series. I'm very excited. Are you excited?

[00:00:15] **Aurooba Ahmed:** Yes, I feel like it's been a while.

## [00:00:18] Next.js' relationship with React

[00:00:18] **Brian Coords:** I feel like it's been a while for us. I, this is something I saw in the last few days or weeks. I feel like there's been all these conversations of like, maybe a little bit of React fatigue kind of setting in and a little bit of like a, you know, sense of like, ah, but I saw this, somebody's opinion, I honestly don't remember it was on Twitter or something. Somebody said that, you know, the reason React hit its popularity and why it's still kind of like the default framework is Next.js. That Next.js is like the thing that like put React into a place where it just like made things like easy, quick, easy to launch.

[00:00:53] What do you think? Do you think Next.js is like a big part of the reason we love React so much in the developer community?

[00:01:00] **Aurooba Ahmed:** But when I think of React, I think of it in two different places. You know, one is, let me use React for everything. And then there's the, let me use React to do certain things in my application. And for the people who want to use React for everything, Next.js is the reason they want to do that. Because Next.js really put React on the map in that way allowing you to really use JavaScript to do everything on the front end. And I know the back end.

[00:01:31] **Brian Coords:** backend. Yeah.

[00:01:32] **Aurooba Ahmed:** Yeah, but like, I think about WordPress, for example, you know, React is a small part of it. It's not the entire thing. It's getting to be a bigger part of it, admittedly.

[00:01:45] But if it was just that, and there was no Next.js framework, I don't think React would be as big. It would be handy, but I wouldn't say React is handier than, say, jQuery was back in the day. You know? Yeah.

[00:02:04] **Brian Coords:** Okay. Yeah. I, I feel like I didn't, I don't know enough about where Next.js, like, entered the picture in the React world because, like, I did come to it from, like, the WordPress side of it. Like, that's when I first started, like, having to care about it more than, like, I don't know, some other, Frameworks that we used to use back in the daily view and stuff.

[00:02:24] So it's kind of interesting to hear that Next.js is so popular, but it does make sense that it's like the really first, like, or not first, but like most popular off the shelf, here's your whole, you know, routing, uh, like integrations, hosting, all of these things that kind of get bundled in together. And it's a solid framework.

[00:02:43] So I think that that can make sense, uh, that Next.js is that kind of big other piece.

[00:02:50] **Aurooba Ahmed:** Yeah, so React was introduced, I believe, in 2013. And Next.js was introduced, its very first version came out in 2016. So it was very quickly after React became a thing, you know. Uh, just as it was starting to gain steam, that's when Next.js showed up because there was this need, people were like, this is amazing, but you know, with react, you can't do say caching, it doesn't handle navigation, it doesn't handle internationalization. It doesn't handle, it doesn't have like stuff to help you with images. It feels like trying to make a website with pure PHP without any help from anything else, you know, but If you like PHP, then you probably want to use something like WordPress or Statamic or something because, or Laravel, right?

[00:03:36] Because it's a framework that gives you all those helpers in the language that you enjoy. And if you started enjoying JavaScript for all kinds of different UI reasons, it's, we as developers have this natural tendency to say, let me just do everything in it. Uh, happens all the time. And there we go.

[00:03:54] That's how Next.js happened.

[00:03:56] **Brian Coords:** nice. So speaking of doing everything in a framework, where, where are you thinking we're going to go today? Because we set up user authentication and we set up like Supabase to handle use logging and users. We kind of looked at a repo. We kind of looked a little bit about, um, the, uh, CSS and that sort of stuff.

[00:04:17] Um, what's kind of the next big step in this application that we're building. And, and what are we, what are we actually going to see today?

## [00:04:25] Really exploring Next.js

[00:04:25] **Aurooba Ahmed:** Yeah, so I think the really important thing is, so far in this series, we've been using Next.js as our foundation, but we have not actually looked at Next.js per se, very deeply. How, I don't think in this episode we talked about, you know, how would I actually create multiple pages if I wanted to for a website?

[00:04:44] How would I actually fetch data? You know, I mean sure, I showed you how to use Supabase, but then how do you actually Get that to happen inside the application. How do we use vanilla extract in combination with the pages and the data to create the styles and make the site look like something, because so far we haven't actually seen a very good, very styled website yet.

[00:05:06] So today,

[00:05:07] **Brian Coords:** anything, but

[00:05:09] **Aurooba Ahmed:** well, yeah, we, we, we were just paying attention to those. pieces of functionality, right? And I think that's the thing about Next.js and a lot of JavaScript frameworks, in my opinion. There's so many decisions to be made that you have to figure out yourself, that sometimes you have to go and look at those decisions and how they're going to work before you even get to working.

[00:05:30] And the more you do it, of course, the smaller that time period becomes in the beginning. And I would say that's not a JavaScript thing. It's an anything thing,

[00:05:39] **Brian Coords:** yeah, I'm dealing with that. Not in JavaScript right now. That kind of like, I don't know the way to accomplish this yet. And I want to try three different things to make sure I'm confident in picking a route, a decision. Yeah. That's the.

[00:05:54] **Aurooba Ahmed:** Yeah. But you know, we are, can now actually look at how those decisions play with Next.js to build the website that we're doing. And as a reminder, the website that we're building is an interactive version of wpaudit.site, which is in very old project that I built, which currently is a single page little checklist that people can just go and check off.

[00:06:19] But. If you refresh the page or do anything, you know, all the things that you might've checked off, they all go away. So today we are going to look at Next.js, how to make the pages. We're going to look at a version of the WP audit checklist that is styled almost exactly, almost exactly as wpaudit.site is.

[00:06:42] However, it's all Next.js and React because the original one is just HTML and a little bit of SCSS.

[00:06:49] **Brian Coords:** hmm. Yeah. I'm curious to see, I'm just curious to see, I'm curious to see like the components and, uh, how you're putting together, because I remember looking at that original one and it was just literally just like a piece of HTML, which in some ways sounds really nice. And you're just like, ah, just like.

[00:07:07] Just some, like, let me write some HTML, but, um, I'm just curious to see, it feels like it's going to be a lot more manageable now that it's like broken down into components and routes and stuff like that. So I'm excited.

[00:07:19] **Aurooba Ahmed:** There's definitely some really interesting things here that I want to introduce as we walk through it. So, how about I go ahead and I share my screen and we'll take a look at what it looks like on the front end first.

## [00:07:34] The Next.js clone of WPAudit.site

[00:07:34] **Aurooba Ahmed:** We're taking a look at the Next.js React version of wpaudit.site. What is your first reaction when you look at this, Brian?

[00:07:42] **Brian Coords:** I mean, it literally looks like wpaudit.site as I remember it. Like, it It looks the same.

[00:07:50] **Aurooba Ahmed:** It's very close. It has a few different things that are not in here. For example, in the current wpaudit.site, each of the checklist areas are actually broken up into sections. And right now, in this version, they aren't here. Uh, because that's functionality we're not going to be focusing on today. But Aside from that, is there something here that isn't on wpaudit.Site?

[00:08:14] **Brian Coords:** Well, there's two things I will say. One is I actually forgot about the filters, like the kind of categories of things. And like, it actually sounds way more exciting now that you're building it in a react because you could get way like it more fluid and stuff without using a bunch of jQuery you show and hide.

[00:08:30] Um, but I think the thing that obviously sticks out the most to me is the button that says login in the top right corner, because there is no login button on the current site.

[00:08:39] **Aurooba Ahmed:** That's right. And actually, fun fact, on wpaudit.site, the hiding and showing of the different sections, it does not use any jQuery. There's no JavaScript. It's just using checkboxes and some CSS. So if you get curious, you can take a look at that. It's, you know, uh, just available. You can just go look at the page.

[00:08:58] It just uses some conditionals and pseudo classes and CSS and that's it. So it's really nice. Yeah. All right. So.

[00:09:07] **Brian Coords:** whatnot. Okay.

## [00:09:08] Styling the login page to match

[00:09:08] **Aurooba Ahmed:** Yeah, but very very basic ones. It's very very simple. Yes, so this is all styled and of course if I were to go to login Then we have our login page and there's like a little bit of a login form at the bottom and a register link as well Which if I go to register, then I can also register and all of this is basically using the same functionality that we used last time.

[00:09:32] So, if I do register it, then Supabase will send me an email, there'll be a confirmation link, and once I confirm it, then I will be able to log in with whatever credentials I created. So, in this case, I would say, let's walk through that process a little bit, because there's a few things I changed.

[00:09:52] **Brian Coords:** Okay. I'm just curious if you used like when you did these cards and stuff, like, are these a utility class? Are they a component? Um, how did you manage keeping that cohesive design across everything? Uh, the buttons and everything like, did you make components for these? Did you? Just make styles for them or, you know, that sort of thing.

[00:10:16] **Aurooba Ahmed:** Yeah, we'll take a look. So, while you were saying that, I went ahead and I registered, and then it refreshed, and it came back to the homepage, except now there's a little notification there that says, Check your email for a confirmation link to finish signing up. So, once I go ahead and click on the email, and grab the link from there, that goes away, and now I can go in and I can log in, and I'm just gonna do that.

[00:10:43] And once I do that, in the navigation now, there is a new item called your audit.

[00:10:50] **Brian Coords:** So you clicked the link in the email and it, I saw it in the URL that you confirmed. Are you going to have a UI that's like you've confirmed successfully now go click login or something like that to kind of like

[00:11:03] **Aurooba Ahmed:** Yes, I should

[00:11:04] **Brian Coords:** take you to that next step.

[00:11:06] **Aurooba Ahmed:** In this particular example, it's not there, but yes. In good UX, you would definitely want to have that and not just be a refresh, for sure. But again,

[00:11:15] **Brian Coords:** I'll open an issue for you.

[00:11:17] **Aurooba Ahmed:** Go for it, go for it. Um, but it would use the same feature that we use to show that initial, uh, little notification saying, oh, finish signing up by clicking your link.

[00:11:27] You can detect the parameters that might be in the URL and based on that do some behavior in the browser itself. So I clicked on your audit and here it's giving me just a very simple little heading and then the email address that I'm logged in with and then it has a button for me to create my audit.

[00:11:47] So, if I click on it, I get my own version of the audit, which then I could edit or well, track my to do list in as here. So, that's what we're looking at today.

[00:12:00] **Brian Coords:** and so you, at this point, if you start checking items as done, that will persist.

[00:12:07] **Aurooba Ahmed:** Yes, in this very moment it will not because I have that functionality commented out, but that is how it's, how it works. Yeah, so that, you know, if you click, then all of that starts to persist and you could log in, log out, go away, whatever, you come back and it's going to be able to detect that and recreate that for you.

[00:12:27] And we're going to look at how that works.

## [00:12:30] Creating Pages in Next.js

[00:12:30] **Aurooba Ahmed:** So you asked a question about how I made those styles all consistent. Obviously the, the short answer to that is components. So I'm just going to make the zoom this in a little bit more. We've looked at this before, but basically the in Next.js 14, you have the option of having an SRC, a source folder.

[00:12:49] So we have a source folder and I'm using the latest version of their routing set system, which is called the app router. So everything lives inside this folder called app and here you're gonna see that there's a bunch of folders and then there's a bunch of files in the root of the app. There is a main page which becomes the home page and then there's a style file associated with that page and something called an opengraph-image.

## [00:13:14] Generating opengraph images in Next.js

[00:13:14] **Aurooba Ahmed:** So there's a lot of really cool file based things in Next.js. So if I want to provide any particular page with a social media image, I can just call it open graph dash image, then give it a PNG, whatever, and that it will automatically detect that that is the case. Yes. And it also has like a really cool built in function for you to be able to automatically create it.

[00:13:37] So, you know, you see those funky social media images where people, it's basically a screenshot of that article where it creates this custom one

[00:13:44] **Brian Coords:** That's what I do.

[00:13:45] **Aurooba Ahmed:** That's, yeah, totally. So that's built into Next.js and you can just create a little file called opengraph

[00:13:51] **Brian Coords:** Ooh.

[00:13:52] **Aurooba Ahmed:** image. tsx and it will create it with whatever funginess you want to add in there.

[00:13:56] It's really nice.

[00:13:58] **Brian Coords:** People doing blogs on Next.js, like pulling markdown files from a repo or something like that, or connecting to like an API, like Contentful or something. Yeah. Okay.

[00:14:09] **Aurooba Ahmed:** Yeah, so in that, in those cases, they could either do that something in their CMS if they had one, or they could have a little function in here that just grabs some information from that Markdown file or whatever, and creates a custom thumbnail. So that's sort of a really nice feature that's just sort of built into Next.js and has been for a while, as far as I know. But outside of the homepage, everything else is in folders.

[00:14:34] **Brian Coords:** Okay. So that new folder is audit, the first folder, and is that, that's the route you were on when you were doing your audit, right? We were on that audit route. So that new folder follows all the conventions and we'll have basically what we need.

## [00:14:47] Folder based page routes

[00:14:47] **Aurooba Ahmed:** That's right. So, any folder, the folder is the URL path that you want to go to, so that was slash audit. And then if you want it to be an actual page, because not all routes have to have a page, a physical page, physical, visual page associated with it. But in this case we do. So then that has to be called page.js if you're using just JavaScript or TSX if you're using TypeScript like I am. So, let's take a look at what that looks like. So there's a bunch of stuff happening in this. The very first thing is there's a bunch of stuff that we're importing in. Some that is like Supabase related, some that is Next related. Tell me what you're seeing.

[00:15:29] **Brian Coords:** Um, so my, what I think I'm looking at on a, from a high level is react components because I see you have a function called checklist that gets some props. It returns an audit list kind of react component. So I'm guessing, and then you're passing like some props to that. Um, there's an audit component that again is the default export.

[00:15:51] So maybe that's like the page or something like that. And it has, uh, Yep, and you're in the markup for that one. It's returning like a header and the main like semantic element and stuff like that. Um, yeah, okay. I'm seeing some pretty familiar react right here, I think.

[00:16:11] **Aurooba Ahmed:** Yes. So if you are familiar with React, you know this is actually going to feel really familiar, and you're totally right. That default function is the one, and you can call it literally whatever you want. It just needs to be the default function. And that is gonna be the output of the main page. Now, in Next.js 14, the, there are server components and there are client components. So you can render a page on the server and then send it to the browser, or you can have it render on the client, which used to be the default way.

[00:16:44] Anything in React sort of worked in Next.js.

[00:16:48] **Brian Coords:** so what are you choosing and why

## [00:16:51] Next.js 14 Server components

[00:16:51] **Aurooba Ahmed:** So, in this case, because it doesn't say anything at the top, it means that this is going to default to a server component. So Next.js 14 is server-first, client 2nd.

[00:17:05] **Brian Coords:** Is, and why, why a server component, is it because you need like user authentication to happen or does that not really? Um,

[00:17:17] **Aurooba Ahmed:** with Supabase, as we talked about last episode, we're using a cookie to keep ourselves authenticated. So, technically that is information we're available to us. In Next.js anyway, on the server and on the, in the, on the client side, but in this case, you know. One of the things that I don't like is when you want to load a piece of data and you get to the page and then you have to wait more.

[00:17:41] And then the data comes. That's great if there's a lot of different pieces of data, and not all of them are relevant immediately. But if you have data or stuff that you want showing up, and without it, the page is useless. I don't want that to happen on the client side. I want that data to be there when you load the page.

[00:18:00] Does that make sense?

[00:18:01] **Brian Coords:** yeah, it obviously it opens like a million questions about caching, about performance when you have logged in users in an application like this versus when you're just trying to build like not static, but like essentially like kind of like more of a static experience that can be super heavily cached. I have to imagine.

[00:18:20] That the fact that this render does do a lot more on the server, maybe affects that. Um, I don't know, but I, I understand like what you're saying. And to me, like, that's what it feels like for people coming from WordPress, which is like, I just want the server to think and make a page and serve the page.

[00:18:37] And I don't, I can do the stuff later, but like, please just do this for me.

## [00:18:41] Caching in Next.js

[00:18:41] **Aurooba Ahmed:** Yeah, the other thing that's really cool about Next.js is it has a really interesting cache setup in it. So all this information that I am fetching from anywhere, it's all cached. So even if it's happening on the server, unless there's a reason to invalidate that cache and then get new information, you're not actually making those calls on the server all the time.

[00:19:02] So it's also, it's still very performant, even if you're just using the server. It's still going to be still fairly performant if you're using the client. What it enables you to do is decide if there's a certain piece of information you want to process before anything renders in the browser at all, which is something we're all used to doing.

[00:19:20] But then in the React paradigm before that was not a thing, right? You did all the processing right there in the client, on the person's computer.

## [00:19:29] Loading Experiences in React

[00:19:29] **Brian Coords:** That's the issue where, and I'm dealing with this right now on a thing where say I'm, it's a setting screen and for that first, like two seconds, all the settings are empty because we rendered the screen, but the API call that's getting the actual values takes an extra second. So you need to put in like some sort of loading stage or something, because there's just that flash.

[00:19:53] of, Uh, Oh, everything's empty. Oh wait, now it's filled out again. And that kind of like client side, like fetching sometimes. I mean, I think we've solved it with like loading states and stuff, but again, it's like, is it that, is that the best way, you know, sometimes it's nice to just have everything ready.

[00:20:10] **Aurooba Ahmed:** Yeah, exactly. So in this case, I decided that, you know, if there's a checklist, I just want this ready and then we can load the page. And because everything is cached, it's honestly going to be going to be really fast anyway. And so that's why I left this one as a server. So all this page does is it has, we have a custom React hook called is user logged in and I'm grabbing the user from that and then if there's no user I actually redirect them to the login page and there's a lot of different ways to do This is one of the simplest ways to do that and then I have a header component Which is how I'm keeping keeping those styles consistent for the header and then I have this main area that has a checklist component and Some styles as you can see

[00:20:56] **Brian Coords:** So that check for if the user's logged in doesn't happen like at a middleware level or, Oh, okay.

[00:21:04] **Aurooba Ahmed:** Yeah, it, I can totally do it with middleware as well. And I have a check in there for logging in, but I wanted to show it here because even if you didn't have middleware and you're not required to, you can do redirects right from the page component.

[00:21:19] **Brian Coords:** Okay.

## [00:21:20] Using Middleware in Next.js

[00:21:20] **Aurooba Ahmed:** And if you don't have a lot of complicated stuff, sometimes it's nice to just see what's going on inside the actual page.

[00:21:26] It depends, you know, it totally depends, uh, in every application. But I remember before I was introduced to the concept of middleware, this is what you saw everywhere. You know, everyone was doing these redirects in the page, which you can still do. Uh, and I also have a middleware file, which ha, which is checking for the login.

[00:21:48] Uh, and. Then based on that information, I can actually go and do stuff, stuff here as well. So, in the most ideal situation, if I didn't, if I was having other things that are going on here, and eventually there will be, I would just have the middleware handle that and clean, and clean that out of here completely.

[00:22:07] Because then you don't have to deal or think about routing when you're thinking about the page itself. Yes,

[00:22:13] **Brian Coords:** a thing where you feel like you're doing it every, you know, I think that if there's something you're doing on every page, you kind of search it, the developer and you says like, well, there's probably, there's probably a better way to do this if I'm having to do the same code on every page.

[00:22:26] **Aurooba Ahmed:** 100 percent and as you get into more complicated projects, you know, you probably want to always remove anything that is navigation related, especially from your components, because you want to be able to do isolated testing on your UX components. Right? And you don't want to have a reliance on, like, say, next inside there right now.

[00:22:47] There's a next navigation dependency here in this component and If this was something that I was going to be reusing a lot, or there's going to be other logic in here, that's not going to be an ideal situation.

[00:22:58] **Brian Coords:** So you are, so on this audit screen, you're also pulling in this checklist component. But the checklist component is just returning the audit list component. So can you

[00:23:12] **Aurooba Ahmed:** so.

[00:23:13] **Brian Coords:** explain to me what's happening there?

## [00:23:15] Fetching data in Next.js 14

[00:23:15] **Aurooba Ahmed:** Yeah, so there's this new pattern in the app router where if you want to fetch data, you don't do it in the main main element, you do it asynchronously in a different function, which you then pass or access through the main page. So here, that's a component that I'm accessing right here as checklist.

[00:23:33] But because this is something I already have a different, very isolated component for, I grab all the data, then format it the way I want, and then I pass it back. to that main page. I could technically do that actual audit list setup in the main page and just pass it pure data too, but to, in my head at the moment, at the time, it just felt much cleaner to just have one checklist like in there.

[00:23:59] And that does whatever I need in here in the actual main checklist function.

[00:24:04] **Brian Coords:** Yeah. And I'm never going to complain about a bunch of small functions then, then like, uh, a react component, that's like. 100s of lines before you get to the return. Um,

[00:24:15] **Aurooba Ahmed:** Yes. That always sucks.

[00:24:18] **Brian Coords:** it's, it's a tough balance though, too, because I was digging through some stuff, uh, looking at the block editor, looking at some of the blocks, right.

[00:24:25] And it was like, sometimes you don't realize like, Oh, I'm not even in the component, I'm in like the five components that it's using to build the component. So like, if you are digging through somebody else's react, you know. Just because a function opens at the top of the page, that's very often not the actual component that's being exported.

[00:24:46] That's like all the things that's going to go into it. Um, something to keep in mind.

## [00:24:51] Server Actions in Next.js 14

[00:24:51] **Aurooba Ahmed:** The other one interesting thing in here is this form action, which is also specific to Next.js 14. And you can see it basically for the button create an audit, there's an action. So now every single page route that you create in Next.js 14, you can create an associated actions.ts or actions. js file, which will only work inside forms. And we touched on this in the beginning just a little bit, but it allows you to do things based on some form data, and so when you have a form or you have like a single action that you want to do, you can just create a separate little function, in this case in actions, and do some fanciness there if you need

[00:25:37] **Brian Coords:** Okay. So this is like almost view and I don't want to say controller logic, but it is like a separation of concerns, which is like. The main page is really about just getting stuff in front of the user. And then if you want there to be like some more interactive things happening, logical things, you know, based on the user's input or something like that, you can make your own separate actions.

[00:26:04] I really like that.

[00:26:05] **Aurooba Ahmed:** Yeah, yeah, it's the more I use it, the more I like it. The caveat is it only works with forms. So it's only meant for forms. So you, if you want to use an action, it must be inside a form. So you can see that I have this button and it's wrapped inside a form.

[00:26:22] **Brian Coords:** So. Number one, I actually do like that because I do think sometimes we get to this place where like buttons are just these independent things used everywhere. So I'm not totally opposed to that. Why is the action though, not on like the form or could it be like if, I mean, in this case, the form is just a button.

[00:26:39] So it doesn't like, it's not really a good argument, but in say there was an input and a button,

[00:26:44] **Aurooba Ahmed:** Yeah, so you can

[00:26:45] **Brian Coords:** you put it on the form? Yeah.

[00:26:48] **Aurooba Ahmed:** Yeah, and then you could put it on the form, but you could also have a form that has more than one submit, more than one button in it, and no submit button, and then have every button be connected to a different form action.

[00:27:00] **Brian Coords:** Okay.

[00:27:01] **Aurooba Ahmed:** So, think about like a login form, but it's not just a login form.

[00:27:06] It's also a signup form. So, instead of one submit, there is a login and a signup button. It's a, it's a pattern I'm starting to see a lot more, and I'm not entirely sure what I think about it, but it is becoming more common. And in that case. You could have both of them in the same form.

[00:27:23] **Brian Coords:** I wonder also that works, um, with accessibility in terms of like, Submitting a form as you're like going through it. Like sometimes I, you ever have like a form where you just want to hit enter and submit the form, but you can't or something like that. So it's an interesting, an interesting like rabbit hole to go down.

[00:27:40] But the setup here is very cool. Can I ask about the styles dot button? I'm guessing are using like, that's, is that like CSS modules or is that, um. Like a different sort of abstraction on top of that.

## [00:27:55] Using Vanilla-Extract for styling

[00:27:55] **Aurooba Ahmed:** So this is using vanilla extract because that's the sort of CSS tool we decided to include in the beginning of this series. So I'm gonna open up this associated file called style, css, ts, and. In this case, in this place, you can see I'm importing a style function, which allows me to write CSS, and I'm importing some variables, my design tokens from a theme.css, and then I'm just creating classes in a funky little JSX style, where it's all this, all of them are camel cased, but it allows me to use a lot of JS tokens in it and makes it really JS happy.

[00:28:34] It's the best compromise I've found for doing CSS way without the dings of JS and runtimes because it has no runtime.

[00:28:51] **Brian Coords:** Okay, I have a couple of questions here. Um, number one, the writing CSS as actual JavaScript objects, where, like you said, everything has to go to camel case now, because You know, that's what happens when in JSX in general, just like we have to go CamelCase. Um, and to pull in WordPress a little bit, the idea of writing styles in a theme.json folder file is a similar thing. So clearly this is a pattern that we're seeing a lot more of, especially from the React influenced community, um, that we're seeing CSS being written like this. It's. It's a little hard to look at, I'm not gonna lie, but I guess my first question is, you have buttons, like this is in the audit thing, but you use a button in other places.

[00:29:41] So is the button styling written in multiple places, or how are you handling that? Because like, this is one place. Mm

[00:29:51] **Aurooba Ahmed:** So in this case, the reason it has its own is because I wanted to style it a little differently than I styled it in some other places, but I can pull in my styles from anywhere I want. So just like I'm grabbing my variables from this theme. css, I could have all of my really high level styles that I want shared across any component, put them in a file somewhere, and then be able to import them into this file, or directly into my actual page component and then just be able to apply that to any element I want.

[00:30:23] So the reason I like this better than say other CSS-in-JS frameworks is because it makes it easy to do that. You can just do that in a way that feels pretty intuitive, you know, import the CSS sort of quote unquote module and grab the class, uh, but then it's still more CSS heavy and it allows for dynamic CSS, which allows Basically ensures that you never have styles that conflict, names that conflict, ever.

[00:30:53] And that's what becomes a little more important, supposedly, when you're working in a large team.

[00:31:01] **Brian Coords:** Okay. Yeah. It's like the whole world of CSS. I just think CSS is just so weird in its like original form. Like the idea of these like cascading layers and stuff like that and the, just the craziness of how you do it. We did a project where I tried to use SCSS, like that kind of sassy CSS mixed with CSS modules, which is similar to this, where you, you get, the class name isn't, you're not passing a string as the class name. You're passing like an, like an actual variable that you've exported like and stuff, and then the, the layer of like SAS stuff on top of it made it really hard. Cause like the nesting didn't work, which is like the reason I wanted to use it and all this stuff.

[00:31:45] Have you gotten to any complicated CSS with this and how has that worked? Already? I see like the hover, like. All I'm thinking is, man, uh, you're gonna be doing a lot of Googling or trusting Copilot to, uh, just know how to do those sorts of things, you know?

[00:32:01] **Aurooba Ahmed:** So the first time I looked at a vanilla extract file, I had pretty much exactly the same reaction as you, as in, oh my god, this is horrible and ugly and what am I looking at? I don't want to look at it. This is hard on my eyes. Yeah. Yeah. It is one of the things that you get used to a lot like JSX, you know, you look at it, you look at it.

[00:32:19] It's like, all right, you know, um, you can, you can handle it. Your mind can get around to looking at this other thing, in that case, the HTML, but in a Javascripty format.

[00:32:31] **Brian Coords:** But how do you do, like, uh, like, CSS, like, sibling selectors, or any of that? Like, I mean, do they,

[00:32:38] **Aurooba Ahmed:** a look at that.

[00:32:39] **Brian Coords:** okay. So, like, that, those are things that, that are doable.

[00:32:43] **Aurooba Ahmed:** Yes. So, not this one. Let's see, audit item. That's a good one. The first rule of vanilla extract is if you have a parent and a child,

[00:32:56] **Brian Coords:** Mm hmm.

[00:32:56] **Aurooba Ahmed:** you don't target the child from the parent. You target the child using the parent. Sounds really weird at first.

[00:33:06] **Brian Coords:** hmm.

[00:33:07] **Aurooba Ahmed:** So, here is an example. We have a checkbox class, which applies to an input that is a checkbox.

[00:33:18] And then we have a label, right? And we have a label that's a, that is a sibling of that checkbox element. And what I want is when the, uh Input checkbox is checked. I want to do something to the sibling label. Normally, in say, SCSS, you would just nest it, right? You'd be just like, Oh, checkbox plus label. And you'd have that in the, in the quote unquote, the parent selector, which is the checkbox itself, because that's what it's stemming from.

[00:33:52] That's the behavior, that's the trigger. But in this, you don't affect it in the trigger, you affect it where you want the results to happen, which is very JavaScript y.

[00:34:02] **Brian Coords:** Yeah,

[00:34:03] **Aurooba Ahmed:** So,

[00:34:04] **Brian Coords:** Okay.

[00:34:05] **Aurooba Ahmed:** yeah, so in here, you can see there's a selector, and I'm grabbing that variable that is con that class that's selected to the checkbox, and I'm saying when that is checked, for the before pseudo element of this label, do something.

[00:34:20] **Brian Coords:** Okay. Okay.

[00:34:22] **Aurooba Ahmed:** Very weird at first. It's very weird because that's not how not how we think in CSS, but it is how we think in a One flow one way flow that react works in you can't pull a prop up You can only only ever pull a prop down.

[00:34:38] **Brian Coords:** Okay. And does you feel like the end result of this is, like, what is the, what, what, on the, for the front end user? Are they loading like a lot less CSS? Are they, you know, is it handling things like whatever tree shaking and stuff? Like, is it, is it worth the effort for that end result?

## [00:35:01] Why use CSS-in-JS?

[00:35:01] **Aurooba Ahmed:** I think one of the main things that people are trying to accomplish when they're using CSS-in-JS is Reduce The chance of duplicated conflicting CSS class names and to make each component testable in an isolated manner and also make it movable from project to project. Those are the few things that are the reasons for CSS-in-JS and if you can take that and combine it with no runtime impact.

[00:35:37] Which is what vanilla extract does. And that is, those are the things you're looking for, then it is absolutely worth it.

[00:35:44] **Brian Coords:** Okay. And the variables are those CSS variables? Are they more like, is it just like an object that you get to build? Like you have background color, vars dot color dot primary. Is that like an object somewhere that you're building up?

[00:35:58] **Aurooba Ahmed:** Yeah, it's an object that I have here in theme. css. Looks like this. But if you were to look at this page on the front end, it would just be CSS variables that are connected to the root.

[00:36:09] **Brian Coords:** Okay.

[00:36:10] **Aurooba Ahmed:** But I could actually connect it to any element I wanted. I just chose root because I want these to be globally available.

[00:36:16] **Brian Coords:** Yeah.

[00:36:17] **Aurooba Ahmed:** Yeah.

## [00:36:18] How CoPilot helps you do grunt dev work

[00:36:18] **Brian Coords:** Oh, that is, it's, you know, it's one of those things where I'm sure that two weeks of working only in this, it makes a lot of sense and it becomes easy. Um, and honestly, I genuinely think like with I Things like co pilot that are going to make code, like not that it's taking away coding, but it's definitely making the, the scaffold, like the physical act of writing things into your keyboard happens so much faster.

[00:36:49] I feel like that's the, that's literally the only thing I think it's doing so far is like, I know what I need the next 10 lines to be. And so does co pilot. So I don't have to literally type it. And for those sorts of things where it can just kind of like things can scaffold instantly in real time in front of you, the formats become a little less important, as long as you know your fundamentals, and you know, like, what you're trying to accomplish with it. Um, the fact that you have to remember background color is now camel case becomes a lot less, like, important, maybe?

[00:37:18] **Aurooba Ahmed:** Yeah. Which is a perfect segue into the componentization of WP Audit itself. So, WP Audit is a checklist. Now, I want to eventually make this checklist something that people can edit and customize. And also, I don't want it to be just this HTML page. So how do I separate the view from the data? And the way I did it is I used a JSON file.

[00:37:47] **Brian Coords:** That's what I was thinking. Okay.

[00:37:49] **Aurooba Ahmed:** Except here's the fun thing. I didn't write this JSON file. I gave Copilot the file and said, make me a JSON file with all of this information in this format. And then it did.

[00:38:03] **Brian Coords:** What, what form, what, you gave him the HTML?

[00:38:06] **Aurooba Ahmed:** I gave it the html wpaudit site

[00:38:10] **Brian Coords:** and

[00:38:10] **Aurooba Ahmed:** and I said,

[00:38:11] **Brian Coords:** this to JSON.

[00:38:12] **Aurooba Ahmed:** yeah, I said, take every article because all the sections, all the checklist items are article and give me a checklist title that's pulled from the label description that's pulled from the paragraph and a resources array that takes all the links in the list inside an article and give me a title and a link. it made this whole thing for me and it took like 30 seconds at most for me to think it and then give it the information and it spit it out and it was nice.

[00:38:39] **Brian Coords:** That's kind of incredible. I mean, that's like the dream is honestly those sorts of things. There's things where you're like, I could write a piece of, I could write a script that would do that, that would like parse my HTML and do it, but it would be a pain in the butt to like, and it would, and you would, you would end up just doing it manually because you would, it wouldn't be worth it.

[00:38:59] **Aurooba Ahmed:** And also I only need to do it once, right? Maybe if I was doing it more times and I would write a script and even in that case, I would just have co pilot scaffold the script for me and then, you know, edit it myself.

[00:39:10] **Brian Coords:** I was imagining a pre copilot world, but I, I was recording a video and it was like, you know, I turned off copilot for a video and it's like, even just imports at the top of your page, you're like, Oh, what? Like I have to write the whole import now, like so lazy already. It's just those little things.

[00:39:30] Okay. So this is a JSON file and you have like the title, the description, the links and whether they've checked it or not.

## [00:39:37] Saving the Checklist for each user

[00:39:37] **Aurooba Ahmed:** Yeah. So this is just a template, right? The seed to seed

[00:39:41] **Brian Coords:** To seed.

[00:39:42] **Aurooba Ahmed:** information.

[00:39:43] **Brian Coords:** And so you save a copy of this in, in the database. So if you change this template, somebody who's already started, doesn't, it doesn't affect theirs.

[00:39:53] **Aurooba Ahmed:** So what this does is I take this audit. json file and I feed it to a component called the audit list. And the audit list can just, it assumes that it's going to get a JSON file and then it basically creates a section. Uh, creates an area with all of those list items using a separate component that is for each checkbox component, uh, called an audit item.

[00:40:17] And the audit item is really the main, main meat and potatoes of the list, the styles and the information. So that's that. But even then, you know, it's actually not that complicated, but now I don't have to go and edit an HTML file and then make sure that I've done it exactly in the right place in the right order in order to make updates to WP Audit.

[00:40:38] I can just go update that JSON file, which is a lot more readable than an entire raw HTML page.

[00:40:45] **Brian Coords:** And so at this point in the development, you're just pulling in, but then the goal would be when someone creates a new audit, you would actually just throw that in their database row

[00:40:55] **Aurooba Ahmed:** That's right.

[00:40:56] **Brian Coords:** and pull it from there. Just right now, this is like an intermediary step where you're loading.

[00:41:01] **Aurooba Ahmed:** So, when we created that audit for my user, it's creating it using this audit dot json. But once that's done, it doesn't refer to this json file at all. It's actually referring to the database row for that person

[00:41:15] **Brian Coords:** Oh, it is.

## [00:41:16] Looking at the Audit table in Supabase

[00:41:16] **Aurooba Ahmed:** for. From there. Yeah. Yeah. This is just there for the homepage and for that, in that initial seed. So we never looked at, I think, the audits table last time, but essentially we have a table called audits here in Supabase, and it essentially has a row per audit. So technically the ability to show more than one audit per user, it already exists on a database level, because we just have an ID, a created at, a last modified checklist data, which is all the JSON that you saw.

[00:41:49] In the editor, and then which user is associated with

[00:41:53] **Brian Coords:** And so theoretically, there's nothing, there's nothing making it a unique, the user ID column is not unique. There's no reason that you couldn't have multiple checklists tied to the same user.

[00:42:03] **Aurooba Ahmed:** exactly and then you can just show them and then have the option to, you know, open, whichever you want in the U. I. and that wouldn't be particularly hard functionality to create.

## [00:42:14] Balancing current project needs with future needs

[00:42:14] **Brian Coords:** I think sometimes it's hard to choose when to prepare for a future, especially if you know, it's one thing if you know, okay, I'm going to do this feature later on. So like I will prepare for it. It's another thing to say, maybe I will, maybe I won't. And it's another thing to say, like, that's not honestly worth my energy to even worry about right now.

[00:42:35] I just need to get like a good MVP out the door that like this thing that I might want to one day do like kind of not worth the effort.

[00:42:43] **Aurooba Ahmed:** Honestly, I am the queen of scope creep. It's, it's, it's just true. You know, I want to make everything awesome and super perfect. And I am doing my best these days to not think that way and be, you know, it is very difficult to balance doing the right thing with efficiency, which is what we're saying here, what we're talking about and grappling with.

[00:43:05] And right now I would say that I want to do the right thing. And be efficient for now and maybe a very near future and not be thinking about the long term future because if I'm just thinking about now in the near future and still trying to do things in a good way, I'm preparing for, I'm setting myself up for pretty decent success in the long term as well and still getting things out the door and creating results right now, which sometimes is far more important than trying to do the perfect thing for eight years down the road.

[00:43:38] **Brian Coords:** Yeah, I think that's a big, like, lesson to most people, which is, like, to just ship faster. Like, that's a thing we all struggle with, I think. At least, I, you know, so it's like, yeah, not letting, like, perfect be the enemy of good.

[00:43:52] **Aurooba Ahmed:** Yeah, or done.

## [00:43:53] Conclusion

[00:43:53] **Brian Coords:** What, yeah, or just getting, yeah, just, like, being done. So what's, what's our next step?

[00:44:00] Cause this is part three. Technically part four, but we, we will call it three. What do you think? Do you think

[00:44:10] **Aurooba Ahmed:** Let's do multiple checklists. Yeah.

[00:44:13] **Brian Coords:** that's our next step. Multiple checklists. Okay. I do, and I also wanted see exactly how you sent that to supabase and back. I'm kind of curious to see the actual process of saving data and fetching data.

[00:44:28] **Aurooba Ahmed:** totally. And I think that will be perfect in the multiple checklist series. We can look at how are we actually manipulating the checklist to update it. And how can we create more than one and sort of use that JSON sort of setup that we've created and take advantage of it.

[00:44:48] **Brian Coords:** Ooh. Well, I am looking forward to it.

[00:44:51] **Aurooba Ahmed:** Alright. I guess I'll see you next time then.

[00:44:54] **Brian Coords:** See you then.

[00:44:55] **Aurooba Ahmed:** Visit viewSource.fm for the show notes and if you're enjoying the show, we would love a review on iTunes or a comment on YouTube.