Contribute to Open Source Projects

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: Hello, everyone, and welcome to another episode of "Learn with Jason". It's great to see you. Today on the show, we have Justin

JUSTIN SAMUELS: What's up

JASON: Great to see you. I wish we were talking under better circumstances. Things are a little rough out there right now, right? You've been doing some really amazing community work. I wanted to bring you on and talk about that today. Do you want to give background on yours

JUSTIN SAMUELS: Yeah, sure. Thanks again for having me, Jason. I absolutely always watch your show and everything. It's great to actually be on the show. But, yeah, I am the infamous thug debugger as everybody calls me on Twitter. I'm an engineer down here in ATL and the commerce organizer and founder for streaming color. A lot in the dev community to keep us binded together all the time. With that being said with the current protesting and the current, I want to say with the current state of everything involving police brutality and how things just aren't getting better, I started to notice that a whole lot of black owned businesses were getting hurt just by being a

JUSTIN SAMUELS: They are just in the wrong place at the wrong time. Honestly, you can't move your whole business like you can move a person out of the way. So I started to think, well, how do we help these black owned businesses get what they need so they can thrive and survive. The thing I thought about was what if we built a database that has all these black owned businesses that were hurt during the actual protests that just need a couple dollars here and there from the whole entire world to get back on their feet? That's where honestly, Rebuild Black Business came from. It was just I threw together a quick site using CMS. I built it in like an hour, threw it up there. I thought maybe a couple hundred people might go to it. We ended up g

JUSTIN SAMUELS: Yeah. Completely blew my mind. So then I was like, well, I'll put out a cry for help saying, hey, if you want to be involved come and join us on this discourse. I just started to use this. I used to be a hard core slac guy. My guy Dom showed me how much better discord is because you can create roles and everything. I could build out an org so if I put out a rallying cry, people would come join and we can get them into a get them into role

JUSTIN SAMUELS: And, like, literally overnight about 200 people joined. And then just kept getting bigger and bigger. I think we are about to pass the 500 mark now. So if I were to quantify that it's probably 300 and change engineers, about a hundred on the design team, and a

JASON: Yeah. Thanks for that rave fullstacklive. I appreciate it. Today, this is where I think the community comes in where everybody watching the stream can come in is the rallying cry that you sounded. You created the discord and that's all leading toward the GitHub project, Rebuild Black Business.

JASON: The project being built, there are so many volunteers in there, but so much work to be done, right? What we're seeing is, like, there are a ton of tickets, a lot of things that need to get picked up and created from UI work to data integration to design work to just thinking

JASON: That's what's excite about this. We have the ability to pitch in. We can leverage the skills that we

JASON: I know because, like, I have been donating and I would encourage everybody to donate. If you've got the means, throw in some money. It makes a difference. Contribute to bail funds, the black lives matter fund, to the ACLU, others out there fighting for civ

JASON: I felt like I want to do more but I'm nervous about the COVID 19 stuff, so I d

JASON: So I'm like

JUSTIN SAMUELS: Exactly. That's the thing. The other day I was on this media bit, right? The person that was interviewing me made a comment which I chuckled at because they had told me this is like a nerd's version of protesting. I'm like, yeah, this is a nerd's version of protesting. They were like, this is actually pretty genius because y'all aren't on the front lines per se visibly, but you can still see the potential impact that y'all are going to make. I started telling them about how we've got people from across the whole globe joining. There's this one young lady named Alexica leading a charge on the back end. She's from the UK. She just popped up. When I was telling them about this they were like, yeah, if a whole bunch of nerds got together and y'all are building a complete project out that's going to help impact

JUSTIN SAM

JASON: Yeah. It's a really cool thing to see. I would love to see the community get involved. So that's what we're going to do for the rest of the show. I k

J

JASON: What I'm going to do is let you get back to it. I know you have a million things going on. I'm going to spend the rest of the stream working on open source issues. So I'll walk through the GitHub process. We're going to pick up issues. We'll pull down the project, get it running locally and we're going to go hopefully all the way through opening a pull request and if I can I have the discord as well, so I can hopefully nudge the team and we can try to get request reviews on the stream to walk through what do you do when you get a pull request review on an open source project. I'm really excited about it. I would love to see anybody who has a chance if you've got spare time, you know, if you can, get out there and do something and get into the streets. Go protest. If you can't get in the streets, donate. If you can't donate, spend some time. Kick in on a project. There are a million things to do from docs to code to design to organization to I mean, everything. There are so many things you can do to get involved online. If you don't have the means to help out otherwise this is a great way to use your time. That's one of the most valuable resources when looking at a project of this magnitude. Justin, is there anything you wa

JUSTIN SAMUELS: No, man. I think you covered everything. Oh, my God, yeah. No. I just want to touch on what you said was a project of this magnitude, it kind of blew my mind when everybody was getting in. Honestly, it humbled me more. Usually when you're doing projects you're going to count on volunteers. Usually it's one or two people really dedicating their time. Everybody else is kind of in there, but they actually aren't. This is the very first project I can honestly say where everybody that's a volunteer has been like complete you know, going all out at all times. Now, that's not to say I haven't worked with great volunteers. I'm talking about at the scale of over 300 people just constantly in the discord. It's at a point where people ask me what do y'all need help with? I can't even tell you. That's why I appointed team leaders to be like, hey, you're in charge of this team, you're in charge of that team. All I have to do is just move all of the bigger pieces on the board for th

JUSTIN SAMUELS: It's been mind blowing working with these people. It honestly is a small company we have

JUSTIN SAMUELS: We built a small company in only six days. And people always ask me, why hasn't anybody else done this? It doesn't seem too difficult. It's just a database of black owned businesses, a database of resources to help these black owned businesses. It's a database of people that's going to help these black owned businesses. It's just a database with a view on it. Yes, that's true, but think about how much this costs. If I were to quantify everybody on the team's salary and actually break down how many hours they are putting in and the time and everything, we are easily past $100,000 worth of time if we were to quantify the whole thing. A lot of people don't have a hundred grand for the project. That's the honest reason why something like this hasn't been out there yet. I'm extremely grateful for the team that we have and everybody that's doing their part. Just to touch on what you said, if you want to join, you don't have to be a hard core programmer. You don't even have to really program. I mean, we have a role for every single person, even if that's like writing documentation, helping go over the actual media kit that's coming out. An

JUSTIN SAMUELS: This is my rally cry basically. Come join the discord, no task is too small. The whole entire leadership is great. We would all welcome you with open arms. We

JUSTIN SAMUELS: You saw, Jason, when you join you get to choose a job that you want to do. We give you the documentation. We give you everything that you need to do any kin

JUSTIN SAMUELS: It's extremely fluid. If you feel there isn't something that meets your needs or that you can do, just ask. We will find you something to do. So you

JASON: Absolutely. I'm so excited to do it. Thank you, by the way, for the subs. I really appreciate it. With this, I think I'm ready to get in. I want to start writing code. I'm going to let you get back to it. Thank you for coming on and telling us about the project. Really excited to get involved. I hope everybody

JASON: Dom, do you mind dropping a link for anyone who wants to get i

JUSTIN SAMUELS: And if anybody wants to hit the discord, go to join.rebuildblackbusine

JASON: Awesome. All right. Let me drop that link, too, in the

JASON: That's in the chat. Awesome. All right. Thank you so much. We'll see you soon. I'm going to switch to desk top view. Cool. A quick shoutout before we get started. Let me zoom out a little bit. A quick shoutout. We've got live captioning today at LWJ.dev/live. That's the amazing work of White Coat Captioning. We have Kelli on the call today. Thank you so much. You can see here the live captioning is happening. If you want to watch along and read along it's here. That is made possible by our sponsors. We've got netlify, FAUNA, sanity and AuthO which is new this week. Thank you to these companies for helping us out. They make live captioning possible and they help make the show more accessible to everybody. Really, really appreciate that.

With that being said, let's dive in to the code. So I want to go and look let me go to my GitHub page.

The first thing here is I'm going to do something that I don't usually do which is I'm going to pull over discord. So this is the Rebuild Black Business discord. You can see here this is a really active chat. So they've got back end, front end development. I'm in here as a developer. So my discord looks differently than yours will if you're a designer or anything like that. So, yeah, this is where a lot of the coordination is happening. As you can see, even as we are watching there's a lot of discussion happening right now. People are actively working on things, actively doing work. What's up, Chris? Yeah, so this is kind of where the coordination and the hub is starting.

So from here where we want to end up at is at the Rebuild Black Business see if I can type that. Nope. That's the wrong one. What is it? I have to look this up. It's in here somewhere. I'm going to search for GitHub. Where did it go? Somebody has the pull request. So this is the organization, right?

So you can go check that out. This is where we are going to work today is the RBB website. Let me full screen this. Is it big enough to read? Yeah. If I'm coming in fresh, I'm a developer. I have never contributed to open source before. Where should I start? What's the best thing to do? The first thing I'm going to do is look at the read me. On a lot of projects, especially those friendly to open source contributors you will see a contributing section like this. It says, hey, contributions are welcome. Then it says what to do. Go check the issues page.

So if we look at how we can get involved we can see now that we can go to the discord community. We've already got that open. The sorting hat channel is great. This is what Justin was talking about with role based community controls in discord. This really is a cool feature. You're going to look at a message and you'll react with an emote that says, oh, I'm a developer, a designer, whatever. It's going to pop you into a set of channels which is really, really cool.

Then it looks like here we are actually tracking things in Trello. So we can pop that open and take a look. Here's the Trello board. It's hopping. There is a lot to do in here. So then there is information about how we do things like branch names. This is really cool, right?

So for the discord to anybody asking, we are looking thank you so much, Justin, for sharing that. Join.rebuildblackbusiness.com.

So now we have branch name conventions, how to send pull requests, terminology, tech details, things like that. This is good news for me. The site is built in Gatsby. I know that. I don't know Chakra UI, but we'll figure it out. Airtable is cool. There are episodes on Gatsby and Airtable on "Learn with Jason" if you want to look at those. There is great content out there. I might need the airtable key. We'll figure out how that works.

Then we need to install the repo. Let's go into let's maybe not do that right now. I'm going to take this over here and let's get into this folder here. I'm in "Learn with Jason" and I'm going to fork the repo. I think I already forked the repo. Am I not signed in?

Okay. I'm going to sign in real quick. I'll do this offscreen. All right. Then I'm going to go to GitHub. Never easy for me. I always end up I mean, I love two factor authentication. Very, very important. However, it is a pain in the butt when you're trying to do something fast. Let's see. That changed on me, so we are going to go here, get in. All right. Now I'm logged in. So I'm going to fork this repo. I have already forked it. Let's open that over here. Then I'm going to go back down to the install.

I need to Gitclone my fork. You can just copy it like this. So I went to the clone download and it gives me what I need. I'll copy. So git clone. We can go right into it and all of the data I need is in it. I think I may need to update, too.

Let's see. I'm going to look at what I'm hooked up to. I'm hooked up to the RBB website. What I'm going to do though is add a new remote. I'm going to add upstream. I'm going to make that one git@GitHub.com and we'll make this one the Rebuild Black Business repo. I want to be able to pull the latest changes because this is important, right?

What I want to do is get pull upstream master to get everything that's been done since the last time I updated the code. You can see a lot just changed here, right? We have had so much activity in this website since the last time I made my fork. Then I can push the upstream whoops to origin master. Origin is my repo. This is a pretty standard workflow for open source. Megan, yeah, we'll definitely do that.

Now that I have pulled I'm going to run an NPM install and get everything set up here. Oh, yeah, the upstream command. So what I did let me wait a second here. To talk about what I'm doing, when you're doing git development especially when working on multiple projects, the idea is there is a central source of truth. That's going to be the Rebuild Black Business organization. I pulled a copy of the repository which now means that it is not getting the changes from the main repo. So what I want to do whenever I'm making changes is I want to make sure I've got all the latest stuff. An easy way to do that is to create an additional remote that is tied to what I consider upstream changes. Like I think of it as I've got my main repo and then there is the upstream repo which is where, like, the source of truth is.

Once this finishes here, I'll make that work. Almost done using cypress. Love cypress. We had Dr. Vlamatov on the show doing stuff with cypress a couple of weeks ago. If you're interested, there is a whole episode dedicated to that. All right. So got everything installed. So what I did to add this upstream is I'm adding a remote. The way git remotes work is that's another instance of the repository that lives somewhere else. I added a new one and I get to pick a name for it. I gave it the name upstream because that's my mental model. You can call it whatever you wanted.

Then I gave it the actual URL of the repo and this is the git URL. Any time I want to get changes, I can say git pull upstream master. If anything has happened, it will pull those changes for me. If I push and I'm going to set my upstream default to origin master. That dash U, that means I don't have to type the origin master anymore. I can just git push.

So now whenever I go to my fork, my fork now has all of the changes and we can see, like, 15 hours ago, one hour ago. Things are actually happening in here that weren't there before. We are lined up with the main repo. We can see here is the one hour ago, 13 hours ago.

So in doing that, I'm basically making sure I'm not working on outdated code and that's one of the biggest sources of frustration with open source. If I fork the repo and I don't get around to it today. Maybe I get to it in a week but I forget to pull the upstream changes, I might try to pull them and I get conflicts and it's really confusing. This is a way to make sure you avoid heartache. Pull from upstream before you make changes and make sure you've got the latest code.

So now I've got some code. Let's look at these issues in the website because that was what contributing said. It said check out the issues page. That is this tab up here. So I'm going to click on this. As you can see, because we knew I was going to do this on stream today we assigned a couple of issues to me to make sure I had something to work on.

So let's take a look at what we've got and then we'll pick one that we can do as fast as possible. Let's see. So this one, when someone visits the allies page they should be presented with a popup asking them to agree to the terms and conditions. The link is to be determined. Upon checking the checkbox the modal will be closed and the allyfeed will be rendered. We want to prevent easy scraping of user data. To help cut down on that we require folks to accept terms and conditions before they view the list to ensure no data is shown until terms and conditions have been clicked. Instead, behind this modal we'll show a grid of skeleton elements that makes sense. If you haven't seen a skeleton component that's like a placeholder. Facebook, I think, was one of the first websites to popularize this pattern. Linkedin uses it. It's now really popular where instead of content you see a rectangle in the shape of the content that will eventually load to look like that. So the UI doesn't look broken. It looks like it's loading which is a good thing.

We are going to use a skeleton component to show the cards and once the checkbox has been clicked local storage should be used to ensure the user does not have to accept the terms and conditions again. That's fine. The modal should close and the skeleton elements should be rendered with real data. So that makes sense. We can probably do that. Let's look at the other ones. A no results component. So when a user filters for businesses or allies and their filter yields no results they should be presented with a component that contains a heading, paragraph, and airtable form embed via iframe. Styling should be handled through the use of chakra UI components and theme variables should be used where possible for things like font styles, colors, and spacing. So it seems like let's take a look at this. We are using figma for design. I had Ryan warner codes on the show recently to teach us about it. It is really, really cool, really, really powerful. I would highly recommend if you are a developer getting used to using figma. It's really incredible. Okay. So now we know what this one looks like. It looks like I didn't look at the figma mock up for the other one. Here is the mobile view which is I love that this happened. That's so nice.

Here we go. We've got here's the allies. We have filtered and when we filter and get nothing, so this is the component we are building. The headline, the paragraph, and this form.

Then there is one more registered here. So let's add a loading component when switching between pages. Because the amount of data we are presenting to users we want to be sure that between perceived page loads any component that has to fetch data should present a "loading" component. We'll use a chakra spinner. There it is. All right.

Did somebody take this already? Doesn't look like it's been done. So I think the plan is for me to take this or wait. I don't know. That's all me. Okay. It's all me.

Let's start here. Well, let's boot the site, get the site running locally. I want to see this is the way I would work through the process. I'm going to think about, like, what's possible to be done. I looked at the issues. So we have three possible things we can tackle. Then I need to let's see. I already ran the install. Now we need environment variables. The way I would typically do this is I'm going to figure out what's possible, get the site running and then take a look at what things do. So I will look at the site itself and then start digging into the code to find out where this stuff happens and that will give me a good idea of how we can actually solve this problem.

So I'm going to get access. Here's the dummy database. Okay. I'm going to sign up for this Airtable link. I'm already an Airtable user. I think I can sign in with Google. Let's see. Oh, come on. Let's go to Google. One of these. There it is. All right. Yep.

All right. So then what do I do next? Let's see. We've got how do I make this stop making noise? Hush. We'll just deal with it. That's where we are today. Let's see. Upon clicking the above link I get read only access. That's good. That means I can't go in here and mess with stuff. Like I'm mashing buttons and nothing is happening.

Then go to the API docs. So this is a direct link. That's cool. And where that's going to take you is up here you get your API documentation. I'm going to click the link because that's awesome.

Here's a link. That takes us right in here. It's going to show me my API key. So the next thing is to grab the API key. Here it is. API documentation. Then I need to click show API key and it shows me that. So I will pull this off screen while I do this. Let me get my API key. I need to start actually doing stuff. So let's open this in a code editor. All right. There we go. Here is my.env.example. I'm going to copy paste and we'll rename it to .env. Now I have a plug in to hide this so I can copy/paste the Airtable API key and I need a base ID which I guess maybe is in here? Let's find out. Settings page. API key. Base ID.

Dummy API database is here. All right. Oops. Ooh, there was default text in there. Let me make sure that I actually all right. Let's save that. All right. So I've got those. And then what else? Cloud name, Rebuild Black Business. Let's add that.

Okay. And then I've got the netlify CLI which is just, you know, the netlify CLI. If you don't have that, you would install globally netlify CLI like this. Because I do have it I'm going to use the shorthand because I don't like letters. Let's run it and see if we can get this thing operating. Overriding the following variables with the env file. Awesome. Something went wrong. Let's look at what happened here. We used the .env file to override the variables which is what we wanted. It started running the server, started running Gatsby. But error table didn't like it. Cannot query all Airtable businesses hmm. Okay. So what do I need to do? Added a new data source Gatsby node js. What's happening here is that remove package lock, hey, I'm listening, y'all. Okay. So let me just do that. Let's remove package lock, remove node modules and try again. Here we go.

Well, the problem, Dom, isn't regular old Gatsby develop. The problem is that Gatsby develop was missing something in the Airtable set up. So using Gatsby develop versus netlify dev there is functionally no difference because netlify dev runs Gatsby develop but with serverless function support, right? So, yeah, I plugged my API key. I showed you. Look. It's up here. Dom.

So I think we are just going to start with the thing no. I put the base name so if I look in here, I've got my API key and I'm using the value from the Airtable API that I grabbed. And then my base. So there's a base ID in here. I'm going to use that instead because I think it might be that, like I'm not sure if the docs are out of synch or anything. I'm going to swap out to the actual base ID that the docs show me. So let's see. Thank you for the raid, resir014.

Let's see here. The extension hides API keys so when I'm streaming I don't accidentally show everybody my secrets. The chat loves to steal my secrets because they are a bunch of hackers.

This hack is called I'm sorry. This extension is called let me find it. It's called VS code hide env variables. Cloak.

So this is a good one if you want to make sure that you are not showing your environment variables. It's really nice for that purpose where it just kind of hides those values.

I do have the read only access. If I go and look, let me unshow my API key and bring this back across.

So here is my Airtable, right? I do have read only access. So if I go back to the base here or here actually. I do have test access. So what I think is happening is I think I put the wrong base ID in, but I believe now everything is set up properly. So we'll find out. Let's run netlify dev here. There it goes. I had the wrong base ID.

So if you are wondering what I did, I went to my API docs and so I checked this box and that showed my API key here. Then I used this as my base ID because this is actually what Airtable is giving me my API key for, for this data.

So now we are currently doing open source contributions. The intention here is what we want to do is we are contributing to Rebuild Black Business.com. We are walking through the process of getting set up. We reviewed some issues. We have a few ideas for what we can do. We have forked the repo, phoned it locally and are getting it set up. I think if everything worked we should be able to view it locally now. Things are a little bit out of synch here. When you use netlify dev use this one. Gatsby kind of swaps out the order of things. It is very aggressive about its terminal.

So, all right. Here we go. We've got the site running locally. We are at local host quadruple 8s and are able to look around. Here's the about page. Here's our businesses. Okay, all good. Good stuff. Let's look at all businesses. All right. Cool. So now we've got, I don't know, let's go to yeah, this is dope. This is really cool.

So from here, what we want to do is let's see if we can come up with a search that gives us nothing. There we go. Here is our no results. That means in here there is something that's like a placeholder component showing our no results. We need to style that up. That's what we found here.

So let's start by seeing if we can make that work. I'm going to see if I can find in the code here where that section is. So let's look at components and then we've got maybe card? Nope. Maybe filters? Nope. Let's look at hmm. Going to be one of these, right? Let's see what's down here. In urgent need. Where do our results show up? Okay. So let's just start with the pages then. We're going to look at our index. So what's this page called? It's called businesses. So let's look at how businesses gets created because it's not in our pages. So it must be getting created in here. All right. There it is. We have a template called businesses, good. Let's take a look at that. So these are the businesses, good. We've got some cloudinary assets. Dom hooked that up which is super cool. Thank you, Dom.

So now we've got let's see. Here's the page hero, good. Here's the business feed. Here's pagination. So business feed looks like where we need to go. Let's look at that.

Business feed came out of components. Business feed came out of feeds, business feed. Here's business feed. All right.

So then result card. I have a feeling that's what we are looking for is result card. So we do a filter and then if the business's length is greater than zero which means we have a default case. Ah ha. Here's the thing we need to build. Here is our actual component that we need to work on. And so if I wanted to do this as an open source developer, probably what I want to do is minimize the changes that I'm going to have to make throughout the site. The easiest way to get a PR accepted as to make the review easy. The way to make the review easy is to focus down on as few things as possible.

So if we want to do this, we can take a look at this component. So here we go. We've got this component. That means we are going to be using our box. We're going to have a heading, a paragraph tag, and then this, I'm pretty sure if we look at that issue again let's go back to our issue. Here's our no results component. That's what we have been looking at.

The Airtable form is embedded, so the placeholder use a placeholder. So that's going to just be I mean, yeah, whatever. We can look at this maybe here. I can't change anything. We don't have any forms, right? So I can't actually do that. I'll just put a to do tag in here.

So that means if we come back into our box we can start thinking about what this should say. So let's take this and we'll say we probably want like H2? Are there H1's on this page? Let's look. This looks like an H1. Because this is an H1 we can't use we don't want to do an additional one.

Instead, we are doing an H2. We'll say, just pulled the data right out. Let's say, sorry ooh. We're going to pull this out into its own component, I think. Let's scaffold it out. No businesses matched this search with a full stop.

Then we're going to grab a period and is it going to let me copy/paste? It's not. Let's do this so that I can read. I'm going to say, we'd love to have ooh. How's this part going to work? This is going to be interesting. What we need is we need to pull all the filters, right? And then show this. What this is saying is this person just searched for San Francisco, but you could also be searching for, like you know, there's options here. So this could be saying, like, we'd love to have health and wellness businesses in Denver. Hmm. That might be more complex than we know what to do right now. I might need to open a new issue specifically for, like, how do we pull language out of the existing filters?

Let's do this for now. I'm going to change this copy. It needs to be copy needs to be dynamically generated based on filters. Let's see. We don't have any businesses that match your search. Right? This is not perfect, but it is going to get the job done. Oh, it will allow you to copy/paste in the code tab? How do I get you to leave me alone though if I don't want to do that right now? Let's see. I don't have a code tab. How do I am I missing a thing?

Click the element. I can't click. I have no options. I'm view only. I wonder if this is because I'm not logged in. Let me try to log in.

There we go. Now I've got the ability. All right. Okay. That's way better. All right, Figma, you win this time.

So here we go. There's all the text if we wanted to just copy/paste it. So where I'm at is I want this to be I don't have a way right now of determining like we need to talk to a team lead about this. Like how should we build this text because if somebody doesn't put a zip code, but they put in "in urgent need" what's the right place to be?

So the project, if you are interested in getting involved is Rebuild Black Business.com. There is an onboarding doc in the read me. It is a great way to help especially if you are not in a position to get to protests or donate to causes. This is a way to spend some time and try to make a difference.

So, yeah. Let's start here. I'm going to start with just some generics. We don't have any businesses that match your search.

And then I'm going to add a pretag. Let's see. We'll say embed Airtable form here. Okay. So now let's figure out how chakra works because the thing that I just did clearly doesn't look right. Even though I made this into H2 and paragraph tag this is being rendered as a pre. Let's look at it and figure out how it is supposed to work.

So here's the chakra set up. Let's look at a box. The box component is useful because nice. We can just set variables here, do some padding and stuff. Okay. That's good.

Oh, magnificode says filter stuff is still in flight. So nondynamic text, that's what we'll do. I can even open an issue related to this one to show what's left.

So let's dig in here. So this box by default is exactly what you would expect just a box. But it looks like it is a pretty flexible thing. Let's take a look at okay. There is an image component, multiple boxes. So I think a box is just a div. Just renders a div. We can do what we want with it. So let's figure out let's see here. Write a PR that tests this behavior. Absolutely write a PR to test this behavior.

So let's do this here. We are going to say no businesses match this search. So I don't want this to be a pre anymore. I'm going to take that part out right now. And I will move it to the front so I know where it is. It's not a pre anymore. Our H2's, we have a pretty aggressive reset that took away the styles. That's all right.

Probably in here are some styles that we can use. So let's take a look at where everything is. We've got constants. That's probably not it. Gatsby plugin chakra. Okay.

So we've got fonts, heading slab, heading is Arvo, font sizes, okay. Breakpoints. Icons, borders, colors. All right. Now we need to figure out which one of these matches up to which thing. So let's look at the Figma again. Let's look at this. We are looking for whatever the equivalent of E8 is which we don't have. Let's see here. So if we don't have that color, maybe what I can do is something like hmm. What's theme color? Where does theme come from? Chakra UI core. I don't know what that is.

So E8 is pretty light. Maybe we just pick a color that's pretty light and stay on brand here. This gray will be too dark. Let's make sure we understand how it works.

What I think will happen is when I go into the business feed and I set bg equals what was it? Just just gray? I lost my place. RBB gray. And then if I go look at this, what happens?

Okay. That's not right. I'm going to just add a color. I don't know if that's the right naming. Somebody may catch it in PR review. We'll see how it goes. Here's the actual color we need. So I'm going to come in here and update that, light gray.

I need to get our no results page and I'm doing that by selecting something that doesn't have any results. So now we've got the right color. Let's figure out how to do our headings.

So if I look up here at our H1 which is maybe not in this component. Let's look at another page, see how headings get handled. Let's look at about. There's a flex. A heading component. All right. So we need to do this which means we've got heading coming in from the chakra UI core. So here's that. I'm just going to pull it in. Heading. All right. And then down here, we will say this is actually a heading. How did that get sized? Where did theme come from? That comes out of the use theme hook, okay.

So I set my size is XL. My guess is we don't want XL. Let's look at how big the about page is. All right. How big is this one? This is font size is like 40. So where is our theme? Where were the sizes? Font sizes, here we go. I don't know what that's supposed to be but let's use large. Large seems right. Let's try it out. We're going size, just this one. Size equals large oh, look at that. Wait. Is it reading our it's not reading. That's like built in because we've got a 3XL that didn't get picked up. That was almost awesome. Now it's probably more confusing than awesome, but that's okay.

I also I'm just going to copy/paste this part. The font family, heading slab. Let's do it. Let's look at what we built. Here's our businesses. Get a no result. Hey, that's better. That's closer. It looks like we need to make it even a little bit smaller. If I pull this over here and then hide the UI actually so we can side by side this a little bit.

We've got it looks like it needs to be heavier and it looks like it needs to be well, maybe that size is okay actually. That's probably fine. Yeah. We'll keep that size. That's okay. What I am confused oh, no. I thought I had added a color box to it, but I just had it selected.

All right. Cool. So let's dive in here and see what we can do with centering and stuff. Now, I think I feel like there is probably something that's just done this. This is where it starts to get tricky, right? The way that I have handled these in the past is I would just write in some style, make it work. Slack, you've got to go.

So I would just throw some inline styles here. But we want to use the system. So let's look and see if there are settings for, like, centered or all caps or things like that.

We've got line spacing, buttons I'm not going to lie. I started with businesses because I saw there was a no results thing and now I'm just kind of adding stuff in, right? So we have links, footers. I don't see anything about specific styling. Are there is there any, like, pre existing art on this? People are doing custom styles. Here's a result card. Food and beverage, all good. So what happens down here? How is stuff getting styled? Setting straight borders and stuff like that, okay.

So then maybe all I need to do is look up what chakra calls font centering. Line items, that's not it. Is it just like it looks like camel cased TSS. So let's start with that and see what happens. I'm going to business feed and I'm going so say we want this to be text aligned center and text transform upper case. You going to do what I want? There it is.

All right, cool. So then our box, we need some padding. Our padding is, what? This is a feature I love of Figma. I'm holding alt and it shows me how far away stuff is.

Looks like we've got a padding of 55ish on the left and right. And 40 at the top and bottom. So I believe see if the theme includes those types of spacings. Spacing. Font sizes. All right. Let's use the medium spacing. That's probably a good starting point. Let's go to business feed. I'm going to say padding, medium. Does that work? Apparently that doesn't work.

Hmm. Those aren't going to work for us. What about adding stuff? I would like to use the grid if I can, if one exists. If it doesn't, then I'm not going to worry about it. I don't see anything. But let's see here. I don't know. Let's just go in and pick a number. I'm going to say 1.5rem. That looks good. So 2rem on the side. All right. That looks closer. That looks pretty good. I'm happy with that. This is kind of responsive by default which I dig.

So let's also do the same thing for our paragraph. Figure out how that's being done in here. Let's look for another page that we can model off of. Here's an allies page, index page, just text. Is it just text? Here we go, text. All right, cool.

Now I'm going in here and I'm going to grab the text element out of chakra UI. Down here we're going to change this from a paragraph to text. I broke it. Then I'm going to say text align is center. Cool. I'm into it. This line height seems wrong. If we look at the mock up, see how that's a little bit tighter? I wonder if in our theme we've got any line heights. Line heights. Well, that's really not what I was looking for.

So I'm just going to fix it. This is going to be my mantra today, catch it in coder view. So I set the line height to 1.1. That looks a little closer to this maybe a little bit higher. 1.2. There we go. It's like 1.2 times the size of the text is what that means. So then how much spacing do we have between pretty decent spacing here. 32. Let's add a margin top of 1.5rem. Good. And then I don't know. Maybe this way. Do a 1.5rem zero and that way we've got no margins on this one and we don't have to put any margins on the form and this will handle the correct spacing between the form and the heading for us.

I'm going to leave this completely unstyled because we are not going to do anything with it. Like the styling will get completely blown away here. Let's get this in right? This looks good. I'm happy, I think. I'm happy with this. This seems good. So let's get this thing abstracted out.

So what I want to do now is I'm going to create we've got cards. I'm going to make this a card. No results card.

All right. So then I'm going to import react from react and no results card equals we're going to have to give it some props, but for now let's just get what we need in here. Cool. All right. And so we need to pull in now some of the stuff that we didn't have from chakra.

So let's get just going to copy this whole line, get that in here. We are not using simplegrid. Oh, we are going to use a theme actually. We're going to need that theme. So let's grab that theme. It's down here somewhere. I saw it. There it is.

So I'm going to grab this theme, drop that in here. Now we've got access to the theme which we are using to grab the heading fonts.

So then I want to am I missing anything else? We have the heading, text, theme. All right. Just double check that I don't need anything else here. Nope, nope, nope. We're all good.

All right. So then what I want to do is I want to grab out the type because what I want to do is actually show the type so that we can use this between the businesses and the allies and then we are probably going to need, like, a form input form embed ID component something.

Because what I'm thinking here is if the form is different for an ally versus the business, then we would need a way to pass that in. Actually, maybe the way we do that is we make this form into a child. Ooh. No, I'm overcomplicating things. Let's not do that. That's definitely an option. If the form ends up complex. But if it's just an I frame, just drop the I frame in. Thank you so much for the sub. I really appreciate it.

So let's then get businesses and allies. All right. Is that not going to wrap for me? That's super annoying. Let's just have this wrap a little bit so it's legible. Okay.

So I'm going to create some space so we can see what's going on here. But then we can add in this type. That means when I export this as my default component, no results card. What should be happening is now I have taken all of this complexity that I just added and now my feed up here isn't going to use this anymore. Right?

So what I'm doing is minimizing the number of things that are being loaded oh, wait. Where did this result card come from? Why isn't that in the cards? I'm confused.

I'm going to keep it in cards because that seems like something that should be in cards.

So then I'm going to call this no results card. Right? And then, now, instead of having to do all of this extra code up here, I can drop this whole thing out and say no results card and we'll say type equals businesses. Right?

So now I broke it. Oh, I forgot to close the component. Still going to break on me? I might have gotten a path wrong there. No, there it goes.

Okay. So now our businesses are set up like this. That means I can go into this ally feed and do the same thing. So let's go look at this, find our no results. All right. So we've got our no results card. Type is going to be allies. Okay. Then I just need to up here no results card.

Okay. So I want to point out something because it's really like I really want to fix it right now. I am not going to move that result card because it's not related to the work that I'm going right now. As easy as it would be for me to just put this in and go fix those paths, I would open that as a separate PR. The reason that I would do that is that if I start getting too many things in my pull request, here's a great example actually. There might be a really good reason that this isn't in the cards that I'm not aware of.

So I'm going to do this no results card and I make the result card move and, like, the maintainers want half of my PR but not the other half. If I just made these into two PRs they could accept the one they want. If I combine them into two things this is really complex, right? We have now complicated things and if part of my PR isn't desired, like one of the two things I fixed isn't desired I have to back out part of my code and we have to do all this additional review. So make your PR small. It should solve one problem. To solve two problems open two PRs. That will make it easier to get your reviews, get things merged. That's a lie. That's a lie. Oh, it's cards. Okay. Wait. Cards, no result wait, where? Components, feed. No results card. What are you trying to do to me right now? In businesses? Did I get that wrong? Cards. Wait. How on earth did that work before? Okay. Here's our businesses.

All right. So now we've got no businesses matched this search. I'm going to go to allies and let's do the same thing. I'm going to do a search oh, wait. Are these all whoa. Hmm. How do I get is this a no result? Hmm. What is causing all allies length is greater than zero. Otherwise show the no results card. Hard refresh. Hmm. Something is up.

Let's dump all allies. This is one of my favorite just JSON stringify, dump all allies. Then do null, 2 so it's easier to read and look at what just came out.

So it's still pulling information. Oh, do you know what it is? It's a simple bug. It's just allies. There we go.

So we need to figure out why pagination is showing up even though we don't have it. Cool. That's fine. All allies is the full list. Allies is the filtered list. That was a simple typo. We've got that fixed.

Now we are looking at our no results card and we can see the text is sort of dynamic. It shows at least the right group. We didn't have to write extra code, just embed the comment.

So at this point I think we are ready to rock, right? I think we can just show let's walk through the process of committing this. Let's open our first pull request.

I'm going to take a look. This is an alias I use that shows me that the git status and I think it is git status SB. Yeah. I just have that alias to S. That shows me that this has been modified, that's what the M is for. This is untracked. So this is the card that I created. This didn't even get it all. These are the files that I touched.

This is important because we can also, if we go to look let me run a git diff. Oh, boy, we don't want to look at the package log. Get that out of here. Geez, there's so much of it.

All right. So then we've got here we can see what we actually changed. Now we are into the ally feed. All we changed was this, bringing in the no results card. We fixed that typo. And we dropped in our no results card. Okay, great. Happy with that.

Then in the business feed, we import the no results card, drop in the no results card. Definitely happy with that. We had to create this light gray to match the design. Cool. We're happy. I'm happy.

So let's git add everything. Good. Oh, wait. I don't want to commit that package log. I don't think I feel like that's going to cause more problems than it should.

So let's git add source and now I can see I don't have this package lock is not updated. But these ones are. The A means I have added it and the green M means it is modified and now ready for committing.

So I'm going to commit whoa. I'm on the wrong branch. If we remember, I was that's not the right one.

Let's go back out here and let's look at the process for committing because there was a whole branching convention. So branch name conventions. I should call this feature and task description.

So let me git checkout. I want a new branch so dash B for a new branch. Feature and we'll see no results card. Cool. All right.

So now I'm ready to commit this. So let's git commit, dash M for actually, we are about to use VIN, everybody. Strap in. Here we go. All right. So I want to type feature and I'm going to say added a no results card for businesses and allies.

Then down in the body what I want to say is you know, we're not going to worry about that in a commit. We'll worry about it in the pull request. Good. So git push origin. This is my remote, not the upstream. Then I'm going to push the name of the branch.

Okay. So then that is now up on my own repo up here, right? And so I'm going to go to my repo which is over here, reload the page. Do you see how it shows up here and says I can compare & pull request? I'm going to click that button. Great.

So now it's saying the base repository is the rebuild black business organization. I want to send my change, this arrow. Let's see if I zoom out a little bit, does it help? It's not going to. Okay.

This is tricky because it's hard to visually describe what's happening. We are sending this repo into like through this arrow into this branch. So we are basically saying I would like to make these changes to your code. So let's see. This adds a no results card for the businesses and allies search.

It is not related to, but it does fix let's see if we get auto complete. There it is. So this is really exciting. What happens is I hit add no results component and then this means it's going to be referenced on the issue which is really, really nice.

So then, let's see. Pages, interfaces that will change. Let's do the work to make sure that shows up properly. So this is going to affect allies not that one. Here. Let me move this over.

So I'm just going to make a list. It's going to address allies. It's going to address businesses. Okay. And then I need to make screenshots which means I need to start running the let's run the server again. Netlify dev.

Screen recording? I don't really want to do a screen recording because this is not this isn't like a moving piece. There's no interactivity to it. Just the result. So let's get our no results. Okay. I'm using command shift 5 to screen shot the page. Let's do the same thing on the allies page.

Okay. And then you can just drop these right in from the screenshots folder. Business, search for something that doesn't exist. You'll see the no results card.

Okay. No additional notes. Preview this. There we go. All right. I'm ready. Let's do this. I'm going to submit this pull request. So now we have opened a pull request. It will show us what files were changed. Good, good. We can see everything happening here. This is all what we wanted. And then when we go out to the conversation, we can see that it's already requested review from magnificode, racedale and Dom who I think some of them are on did I include tests? I absolutely did not. I'm not sure how to include tests.

This is something I'm always curious about. If the dummy data is not going to change then we could potentially add a test for this and say, like that's not what I want. Let's add a cypress test. So the cypress test that I want to add, if I can find it here's our cypress test.

I'm going to say navigation yeah. Let's add one. Why not? Let's add a search or filtering.test.js and then inside of this I'm going to oh, currently tests are failing. Did you already do a test, Jake? Oh, dig that, awesome. Jake already added the test. I'm going to skip this part. My favorite kind of coding is coding I don't have to do myself.

All right. So this is ready, I think. Now the deploy is running. Looks like it's published. Let's look at this deploy preview. Good. All right. Let's go out here. Let's make what? Oh, this isn't my deploy preview though. Where am I? View. Oh, it's pending review. So it needs to be approved. That's okay. Awesome. Thank you, Jake.

Let's look at how we would have written this test. So we would have cypress visit the businesses page. Then it grabs the filter, fuses the first item, grabs the type, chooses the first item, grabs the location, and then types something location, San Francisco. And then presses enter.

Then it's going to check for a heading and it's going to find that it doesn't have any oh, do you need me to add this?

All right. I'm going to add these real quick. These are for cypress to make it easier for cypress to find things. We'll add that. Go into the no results card and I'm going to say that we want a data test ID of what was it? Heading and sub heading.

Heading and then we'll do another one down here of data test ID sub heading. All right. So then by adding these, what this means is cypress can just look for this. It doesn't matter what happens with the rest of the code. So we are not doing a test for a specific element. We are not doing a test for specific styling. We are not doing a test for the implementation details. We are just looking to see if it exists, right?

So I think the important thing I would personally probably not search for this so much as I would search for it to exist. But there are a million ways you can do it. Yeah, this test is actually going to fail because it's looking for a location, but we don't have that. But we'll get there.

For now, this will let us do quite a bit. So let me just git commit source component cards, no results card. Our message will be test: Add test IDs. Then I'm going to git push origin feature, no results card.

This is what's really nice. I made a change locally. I just pushed it to my own GitHub branch. Check this out.

So my change is going to show up right here on the pull request. Like it already hit. Let me see what happened here. Spacing variables. Let's fix these. Theme spacing base, theme spacing large. Oh, that's cool. All right. Let's fix that.

Let's go in and do that. So instead of using these, I'm going to use theme spacing base and theme spacing large, all right?

Then what did I want to do down here? Same spacing there and here. Wait. How would I do it I guess it would be like margin top. Does chakra have the idea of X and Y? Let's find out.

I want to look at style props, margin and padding, theme space two. So we've got margin top and margin bottom. We have margin X and Y. I knew. Yes. I'm going to use my.

Okay. Happy with that. All right. Let's see what else is in the review. Wait. Where did my PR go? Here we go. All right. Fix the bug. Excellent. All right. Let's fix it.

Now that we've got those, let me run this real quick and just make sure that I didn't break anything by doing that. Just the base variable for that margin, okay, cool. Yeah, yeah, yeah. Let's get this out of here then. Oh, I get it. Because what would have happened is the array is like at smaller sizes, whatever the break points are which I can probably find those in here. Let's look. Break points. So these are our break points. So when it gets wider when it's below 16 it will be whatever the first value in the array is. When it gets to 48 wide it will go to the second value. It just keeps whatever the last one is as it gets bigger and bigger.

So that's a way to do responsive design quickly which is what's happening here. We're saying when it is really small use base. When it gets big, use large. Cool. Happy.

So let's look and make sure that all worked as expected. Let's make a search. We'll get nothing. All right. There's our big amount. Let's make the window smaller. We should see I think it all just popped bigger. Yeah. Cool. All right. I'm happy.

So let's take that and we will do our code review. So I'm going to do git commit source components, yep, yep, yep. Message is fix, use theme variables or use theme spacing. Cool. Let's push.

And now if we look at this, we've got the test IDs, theme spacing. This thing is running. It is out of date with the base branch. So let's find out what happens when I update it. Show me a potato salad. I think that worked. I think that pulled the changes without any yeah, just did a merge.

Let's see what happened in the merge. What's been done since we were on the call today? Oh, it doesn't no changes to show. I don't know. Something happened. Wasn't involved with our code. But that's all good. I think this is it, right? We're there.

Right on time. We are at 90 minutes. So while we're waiting for this deploy preview to finish, magnificode is going to merge in once this is done. So while we're waiting let's look at what's on the rest of the schedule here. We are not going to do a stream on Thursday, or if we do it will be a solo stream of some sort.

Next week we're back with user generated content in sanity. I'm excited. Sanity is a powerful headless CMS option. It has a pretty generous free tier and works as a pretty powerful database, content management system. If you need to store data and you're doing that in a site, this is a great way to get started. I also have Nathaniel Okenwa back on the show. We did video calling stuff that was super fun. This time I want to do something I saw on a game show. I want to enable text to vote functionality and I want it to show up on the stream. If you have played any of the games on the stream we can do, hey, look at this little flappy Jason, right? Or you can grow my beard to long, long, long proportions until it goes rainbow. This is something Cassidy and I built. Something that I would love to do is I would love to incorporate a voting feature.

So we can do that through chat commands and that's fun, but why not do it through let's do it through Twilio so you can text a vote that will get counted. That's next week. We have all sorts of good stuff. Charlie and I had issues with the robots last time. But we are coming back to do some mind controlled app. Joel and I are doing secret sandwich. I have people I haven't had a chance to add to the show yet. Christian Nowamba, Trudy Capur. Please, if you haven't already, you can add the show to your calendar and this will let you know when upcoming episodes are there. It automatically updates so you can do it once and it always shows you when a show is coming, who's on, all the details.

You can also find details at schedule on the site. Drop those boops. And then we have all the past episodes on learnwithjason.dev. We have all sorts of fun stuff happening. Thanks so much for coming up. Shoutout to our sponsors and to White Coat Captioning.

We have netlify, FAUNA, sanity, AuthO all pitching in to make live captioning possible on the show. It is so helpful. It means a lot to me that people are willing to do that. Thank you so much to our sponsors and White Coat Captioning for doing the captioning today.

I believe are we ready? Good to go? Is it time?

Yes. Get those corgis going. We're almost there. All right. I really want to see this thing finish, but I don't know if we've got let's see. Where's the deploy app? Let's take a look. Post processing. Site is live. Site built, all good.

Magnificode, if you want to do the honors. Look at that. All right. So this is the whole lifecycle. We have done from going to the repo to getting it set up to reading the contribution guidelines. We picked up an issue, made the changes, pushed them up, did the code review process, and now the pull request is merged. I am officially a contributor to the website.

I would love to see so many more of you in the commits. Go out, fork the repo, get it checked out, do something small. There is a lot of great issues here. You know, there's a lot that can be done. Get into the discord, get involved. It's a great way to help out the community. You know, your time is very valuable and if you are willing to donate that, it does mean a lot.

With that, thank you all very much for hanging out. It's been a blast. We will see you next time.