viewSource

## [00:00:00] Introduction

[00:00:00] **Aurooba Ahmed:** You are listening to viewSource a conversation around tech, web development, and WordPress with hosts Aurooba Ahmed, that's me, and Brian Coords.

[00:00:10] **Brian Coords:** Aurooba, are you experiencing deja vu right now?

## [00:00:13] A tangent on wearing a uniform everyday

[00:00:13] **Aurooba Ahmed:** Yes. It also helps that you have the same outfit on.

[00:00:19] **Brian Coords:** You know, a lot of people in tech, I think they think of like Steve Jobs and he wears the same outfit every day, but I think of like nineties Nickelodeon cartoons and like how they would wear this. Like Bart Simpson wore the same clothes every day, and I remember an episode of, I think it was Doug on Nickelodeon and he opened his closet and it was just the same outfit, like over and over.

[00:00:40] And I remember thinking as a kid, like, that's a genius idea cuz you never have to think about clothes again. And then I was sent to a school that made you wear uniforms and uh, that was it. So black hoodie every day, I never have to think about what I'm gonna wear.

[00:00:57] **Aurooba Ahmed:** I mean, I have a uniform too. It's just not restricted to color. It's, I wear a tunic and I wear like a pair of jeans or a pair of tights and that's what I wear, you know? Um, I also don't really think about what I wear. I just pick whatever is clean and in hung up in my closet, cuz they're all the same type of outfit for the most part.

[00:01:19] But yeah, I think that, There's times when I wonder, Hmm, maybe I should try like a full on proper uniform that's like all the same color and everything, but I'm too lazy to now go out and buy multiples of the same thing, just to try it out.

[00:01:36] **Brian Coords:** To be fair, this, this black hoodie is a little snug and my wife will not let me wear it out in public because it's, it's a little tight on me and I think it shrunk. I don't think it has anything to do with me. I'm a hundred percent it's, it's definitely the hoodie, but I've been bugging her to just order me like two more.

[00:01:54] I'm like, just keep buying more, cuz I actually have like three black hoodies. But my favorite one is getting too snug.

[00:02:01] **Aurooba Ahmed:** that's fair. That's fair. But yes, it is total deja vu, for sure.

## [00:02:05] Recapping v1 of this episode we had already recorded

[00:02:05] **Brian Coords:** Yeah, that is not, not even why I asked about Dejavu asked about deja vu because we have already recorded this episode, and here we are recording it again and it is a hundred percent my fault.

[00:02:19] **Aurooba Ahmed:** Well, I think I can take part of that blame. I didn't notice either.

[00:02:23] **Brian Coords:** Yeah, when we recorded it, I was using the microphone in my AirPods instead of the nice podcast microphone, and the minute I went to edit it, it was like, oh geez.

[00:02:34] **Aurooba Ahmed:** What am I hearing?

[00:02:37] I don't know how I didn't notice it. It was weird.

[00:02:39] **Brian Coords:** I am surprised that you didn't notice it. Yeah.

[00:02:42] **Aurooba Ahmed:** Yeah.

## [00:02:42] Getting into the topic: collaborating on GitHub

[00:02:42] **Brian Coords:** But I, I think it was a good thing. Yeah, because we, when we first recorded this episode, and we're gonna talk all about collaborating on GitHub, collaborating in the open, making a pull request in somebody else's project. Um, we recorded this before I had finished the pull request and you reviewed it for me, and we did that in real time on the call and we talked about some of the feedback.

[00:03:04] But now, I've, we've finished it, we've merged it. We deployed it, we posted about it. We got a ton of, uh, traffic on it. It was super cool. So, we'll, it'll be a different perspective.

[00:03:16] **Aurooba Ahmed:** Totally, and maybe a more complete perspective because now you can go and see, not only is it like how was it reviewed, but then after the review, because GitHub is like so good at showing the activity, we can see what happened afterwards and how that turned into the final like piece of the project that we can also show now.

[00:03:37] **Brian Coords:** Yeah, so why don't I share the website, um, that you started, and then we'll talk about what the idea was.

[00:03:44] **Aurooba Ahmed:** Yeah, let's do it.

## [00:03:46] Introducing wphelpers.dev and how it came to be

[00:03:46] **Brian Coords:** this is wphelpers.dev. Can you explain, cuz this is your project really, can you explain what it is and how it started?

[00:03:53] **Aurooba Ahmed:** So wphelpers.dev actually used to be called latestwp.is, which came out of a conversation in the post status slack last year where a lot of people were sharing these one pager websites that tell you the version of something or tell you what the day of the week is, and someone was like, wouldn't it be cool if you could go to a site and it would tell you what the latest WordPress version is?

[00:04:17] Because I mean, it's not that hard to find, but there is not one single URL that you could just go to. And so I decided to experiment a little bit with Netlify and Next.JS at the time, and create a serverless function that accesses the wordpress.org api, pulls out what that single you know, version number is and pops it on this big page.

[00:04:38] Then later I ended up adding one more little piece of functionality to it. And decided to rename the whole thing, WP Helpers, because I had this vision that it could be a collection or library of tools and interesting, helpful things for other WordPress developers or builders. But then I didn't have time to actually do anything about it.

[00:04:58] And then you had an idea based out of your own little frustration that I've also experienced, right?

## [00:05:04] How the searchable icon library guide came to be

[00:05:04] **Brian Coords:** Yeah, so. I was using, I've been doing a lot of custom block development and a lot of Gutenberg stuff, and when you're in Gutenberg, you don't really use the dashicons quite as much. You use the new Icon library, it's really great. It's a package. It's in Gutenberg, you can use it anywhere you want. Um, but they just don't have that classic, like when you.

[00:05:29] Every Icon library has like a good landing page where you can see all the icons, you can search, you can filter, you can click on them, you can click to copy them. Like it's just the normal like landing page for an icon library that like sells it. And it's kind of that classic Gutenberg thing of like, we built a really cool thing and we're just gonna try really hard to make sure no one ever finds it.

[00:05:53] And you know, I just thought man, It would not be that hard to just make this page. Um, and that's when you said do it on WP Helpers.

[00:06:03] **Aurooba Ahmed:** Yeah, because it already was there and that was the idea for it, and I figured it's already a project that's set up right, which I think was really helpful for you.

## [00:06:12] The portability of Gutenberg packages

[00:06:12] **Brian Coords:** Yeah. Cuz sometimes I'll get those like single page ideas, like, oh, it'd be cool to do this. And then I'm like, I'm not gonna, I'm not gonna sit here and do this. But it, it worked out really well because all the Gutenberg packages, like they're all kind of basically like react, like. You know, it's a @wordpress/element, but it's essentially they're just kind of, you could use with React anywhere and your site was built on React and next.js.

[00:06:34] So like once you said that and it was like I could build a single page, I could load the com, the package, the normal way, it's meant to be loaded and like looped through it like it was actually. It was honestly like easier than if I had like sat down and thought, how would I do this now? Like it all, just, the pieces fit together like so perfectly.

[00:06:58] **Aurooba Ahmed:** Yeah, and I don't think you spent a long time on it. Like you got the initial version of it whipped up in I think less than two, three hours.

[00:07:07] **Brian Coords:** Oh, easily. Yeah, it was very quick to make, the hardest part was really thinking through the UI, um, which was, I think where most of the feedback in the, the action is. Um, we should just show it

## [00:07:20] Walking through the searchable Icon Library

[00:07:20] **Aurooba Ahmed:** Yeah, let's look at it. Mm-hmm. Totally.

[00:07:23] **Brian Coords:** Yeah. So. I like that you added this. You have now you, you don't just have this, you have like these extra things.

[00:07:30] So let's click through.

[00:07:32] **Aurooba Ahmed:** Let's go to the Icon Library.

[00:07:33] **Brian Coords:** this is essentially the icon library. I mean, there's so many good icons on here. And what I

[00:07:41] **Aurooba Ahmed:** And there's more coming. They're constantly adding more icons to the WordPress Icon Library, so it'll be really nice to see an update and be able to see all of those as well.

[00:07:49] **Brian Coords:** yeah, cause I saw somebody had a pull request for, um, I think it was like the details block that there may be potentially can do. So then in their pull request they had a new icon for the block. Like it's kind of cool you get to see them add to it, let's, what should we search for?

[00:08:04] **Aurooba Ahmed:** Let's search for the custom post type icon.

[00:08:09] **Brian Coords:** I'll just type in post and we'll get everything related to a post.

[00:08:12] **Aurooba Ahmed:** Yes. Yeah.

[00:08:14] **Brian Coords:** The, the one downside is the icon library doesn't have any real meta data, so you really are only searching by the name. Um, versus on the dashicons, uh, font, the old way they used to do icons. Um, when you search that page, there's a little more metadata.

[00:08:32] So like you could search for like media and you would get images and, you know, you would get all of different things,

[00:08:37] What's cool about this is. You, you rebuild the whole project, whenever there's a new release, it just rebuilds it. So then if they release a new version, like it's just gonna pull all that in automatically and

[00:08:48] **Aurooba Ahmed:** yeah, that's true.

[00:08:49] **Brian Coords:** Compile it.

[00:08:50] **Aurooba Ahmed:** So these are all the icons for posts and a lot of these, I mean, they're all in use I think right now, and you can just see all of them. But what's really awesome is like the area at the top that you have, which lets you copy all the relevant pieces of code or the name or the import or the icon component with the name already filled in.

[00:09:11] **Brian Coords:** And I was actually, as we were talking, I was thinking maybe right here we should have like the NPM install, you know, cause that's

[00:09:18] **Aurooba Ahmed:** Ooh, that would be nice. Yes.

[00:09:21] **Brian Coords:** the what It's what you need to do to install it.

## [00:09:23] How wp-scripts interacts with @wordpress/icons

[00:09:23] **Aurooba Ahmed:** I mean, depending on how you set up your WordPress project, it might not need to be installed,

[00:09:28] **Brian Coords:** I mean, that's actually what's really cool is like we're using this on a, not WordPress, like a React app like website, but if you are in WordPress and you're using like WP Scripts and stuff, and you.

[00:09:39] **Aurooba Ahmed:** Mm-hmm.

[00:09:40] **Brian Coords:** Imported an icon. You know, if you used the import here to import an icon, and this was here, WP Scripts would like basically say like, yep, we know what that is.

[00:09:48] We'll make sure it's enqueued beforehand, like it's, you know, it would handle all that for you.

## [00:09:51] Our favourite uses for the searchable icon library

[00:09:51] **Aurooba Ahmed:** It just knows. Yeah. And what's really awesome about this, which is like one of my favorite parts is you can copy the SVG and post, like paste it in any vector program like Figma or XD or Sketch, and it'll just create the icon because all of those are SVG slash you know, vector-based programs. So this actually works not just for developers, but it also works for anyone who's wants to use these icons in their mockups and designs.

[00:10:19] **Brian Coords:** Yeah, which is awesome, because I like, I'm a huge fan of, I think we even talked about this in our last episode about the, the tag processor where we were modifying SVGs. Like, I love, I'm gonna, I'm always just gonna throw that SVG in the page. Like if I can, if I'm building, like if I'm building in JavaScript, I can definitely use these components and stuff.

[00:10:40] But if I'm in there, I'm like writing in php, I can just come in here and just steal this SVG and just stick it in there. Um, and then it just matches WordPress. Oh. So good.

[00:10:51] **Aurooba Ahmed:** Yeah. Beautiful. Yes. So this is the final result of what ended up getting merged and released into the project and then into the wild.

[00:11:01] **Brian Coords:** Mm-hmm.

## [00:11:02] Diving into the pull request

[00:11:02] **Aurooba Ahmed:** But let's now go through the actual pull request of when you act. Wanted to put it in the project.

[00:11:08] **Brian Coords:** Okay. So here is the, Main page of the repo that I cloned. Because you added me as a collaborator, I actually didn't have to like fork the whole repo and then submit my pull request that way. It's actually not a huge difference, um, in most cases. Um, but in this case,

[00:11:25] **Aurooba Ahmed:** pretty similar.

[00:11:26] **Brian Coords:** It made it a little easier cuz uh, you have some kind of cool things set up here that we'll talk about, like Netlify, um, which I, I thought was really great.

[00:11:33] So, um, and I think since we've done this, this is now open source or was it already open source.

[00:11:40] **Aurooba Ahmed:** It was always open source. Yep.

## [00:11:41] Creating work-in-progress PRs

[00:11:41] **Brian Coords:** Oh, okay. So let's go to my pull request.

[00:11:45] The first thing that I did was create a pull request very early in the process, I created a branch. I threw up the idea of like bare bones, what it would look like, and I added this very first comment here with, let's be honest, like not the most like verbose, good comment. But like, we had been chatting about it, so you kind of already knew it was coming.

[00:12:09] Um, but it threw at you like early, like initial commit, like before anything, and threw it at you.

[00:12:16] **Aurooba Ahmed:** And at the time you titled it WIP searchable Gutenberg Icon Library, because you noted that it was a work in progress. In GitHub, if you have a paid organization or if it's a open source personal repository, you also actually also have the ability to create. Work in, like work in progress, draft pull requests, which is a really nice way to let other people know when you're contributing to their project or to anything that, hey, this thing is coming, but it's not ready.

[00:12:43] But even if you don't do it that way, like the, you can set up just like a label, right? So WIP and then the other person know it's not ready, but you know, here you go. You can monitor the progress, give feedback. It's really nice.

## [00:12:56] Collaborating with the deploy preview feature in Netlify

[00:12:56] **Brian Coords:** Yeah, and like the minute you do that, Netlify jumps in because you're hosting this netlify, it's auto deploying and everything. They actually like create, they take my branch, they make a preview URL of it that you can click on and you can visit and we can immediately be looking at the same thing. You don't even have to pull it, you don't have to do anything.

## [00:13:14] Getting feedback early on in the process

[00:13:14] **Brian Coords:** And we can just both have like something in front of us to talk about to, uh, start collaborating on and like have that discussion way earlier in the process so that I didn't go so far down a, a weird path that I did something weird. Um, for example, I think you very early on were like, You should model this after the dashicons, like landing, like the old classic dashicons where the icons on one side and you click to copy up here and everything's in a grid.

[00:13:44] And like, you know, getting that feedback early made like really, like I think probably saved a lot of me banging my head against the wall, cuz I'm not like a UI design person.

[00:13:55] **Aurooba Ahmed:** Yeah. And that way you're not wasting your time or doubling your work by creating it in one way and then having to redo it because this other person wants it done or has feedback or ideas on it as well. And what I really liked as when I was reviewing it and giving you feedback was if you click on that deploy preview,

[00:14:15] **Brian Coords:** Mm-hmm.

## [00:14:16] The netlify collaboration drawer

[00:14:16] **Aurooba Ahmed:** It has this collaboration drawer, and if you're logged in, you're able to see the pull request in the little drawer, like click on and add screenshots from the page on there.

[00:14:29] **Brian Coords:** Mm-hmm.

[00:14:30] **Aurooba Ahmed:** Yeah, and then, you know, comment on things from there. So it gives you like a really nice way to be on the project, like be on the deploy preview, and also be adding feedback inside the pull request. So that's something I also really appreciate about how Netlify works. It's really cool.

[00:14:46] **Brian Coords:** Yeah, some of these things as we've been spending time in next.js particularly and netlify everything, where especially like. There's no database, there's no plugins. There's really no WordPress. It's like, you know, it's pretty nice.

[00:15:03] **Aurooba Ahmed:** Yeah, there's some pretty cool things about it for sure.

## [00:15:07] The ideal opening comment on a PR

[00:15:07] **Brian Coords:** One, uh, final thing I will say is if I didn't know you and wasn't already talking to you about this, I would much, much more, uh, have filled this out, put some screenshots, put some like objectives of what it's trying to accomplish. Um, you know, if your pull request, you're making a pull request on something that's like more public and, you know, maybe more formal.

[00:15:28] Like, you really do have to make a good case and, and kind of explain what you're trying to accomplish, uh, to get the best feedback for sure.

[00:15:36] **Aurooba Ahmed:** Definitely. Yeah. In this case, because we already were talking on Slack, and I think part of this conversation even happened on a Zoom right after recording a podcast episode. I think, uh, it was okay. But yeah, if you're contributing to a project or if you're working with a team and it's a client project and you're just working internally, even.

[00:15:54] You wanna add a really good initial comment so that not only are your teammates who are currently in the middle of this project with you able to understand what's going on, but your future self and other people in the future can come back to it and understand what was the initial goal of this? What were we trying to accomplish?

[00:16:11] Being a little more over communicative in your activity on GitHub in a pull request or an issue, all of that, there's never a bad outcome from that, it only just adds like value in the present and later as well.

## [00:16:27] Requesting a review in GitHub

[00:16:27] **Brian Coords:** And then I requested a review from you probably a little too early, like for an actual review. But I mean, that depends on your process. Like do you want reviews early? Do you wanna review it at the very end? I don't know that I really like requesting a review to me feels like, look at the code and make sure it's all good.

[00:16:42] And it probably wasn't at that point yet. It was more just like, look at the idea and just get a sense of it. But, um, you know

## [00:16:49] Determing the right time to request a review

[00:16:49] **Aurooba Ahmed:** mean, I think it depends, right? Because you and I both are very iterative in our process of creating things, and so you and I are constantly saying to each other, Hey, can you take a look at this? Hey, can you review this? And then. Adding more to it and both of us understanding that this doesn't mean it's a final thing, you know, this doesn't mean that it's perfectly done, it's in the process of it.

[00:17:09] So as long as you're clear with the people you're working with, what a review is for, it's you. You know, you can make it work for yourself, for you and your team.

[00:17:18] **Brian Coords:** And the nice thing is, so like if we go down, um, there's things like general comments, conversations that we had. So you had some ideas about different features to add. I had some ideas and some links of like, things I was trying to reference and you know, you even like include like notes from a call of like, okay, now that we've talked about it, what do we think?

[00:17:42] Um, and so all of that stuff is just a general thread of a conversation.

## [00:17:47] The features of an official review in GitHub

[00:17:47] **Brian Coords:** But then as we get into like reviews, you start seeing like, okay, here's actual requests, here's actual comments and stuff like that.

[00:17:54] **Aurooba Ahmed:** Yeah, and those are really, really nice because you can get really fine grained, very specific with those.

[00:18:01] **Brian Coords:** Yeah, like for example, you were literally commenting on here I used CSS grid and I made it five columns in this original version. And you wanted four columns. I wanted five columns, um, with a

[00:18:17] **Aurooba Ahmed:** And then we had a conversation about it. Yeah.

[00:18:19] **Brian Coords:** And then I looked at some of the icon names that are like 50 character long and it was like, okay, yeah, I'm not like, I'm not gonna win this one.

[00:18:27] Um, but it was great cuz we could talk about it right in the line of code, you know,

[00:18:32] **Aurooba Ahmed:** Yes.

[00:18:33] **Brian Coords:** right here. Um, and now GitHub even tells us this is outdated cuz uh, you ended up winning. Um, so I can actually resolve this right?

[00:18:41] **Aurooba Ahmed:** It's not a competition. Yes, you can resolve it.

[00:18:45] **Brian Coords:** You didn't win, but you, you were right.

[00:18:48] **Aurooba Ahmed:** I, I convinced you.

[00:18:50] **Brian Coords:** it was not, well, it just wasn't gonna happen with five columns. Some of those icon names were like coming out of the side of the box.

[00:18:57] **Aurooba Ahmed:** Yes. I think that that's really important. Sometimes when you have those very specific code related conversations, you, someone creates it and they were thinking something, and then someone comes into it with a piece of feedback and it's really, I think the important thing, important perspective to keep here is everyone is trying to achieve the best possible outcome.

[00:19:19] So it's more about, Understanding everyone's side of it so that you can come to a conclusion that we all think is the right move. Right? So in this case, I was able to convince you and make a good case for it, and you ended up agreeing with me. But it could have easily gone the other way where you had completely different solution that I hadn't thought of that would've meant that we could kept, have kept the five columns perhaps, and have it still be really readable and.

[00:19:44] Like, it could have gone in so many different ways, depending on what that code situation is. So as long as in a review process, both the reviewer and the reviewee are always remembering that we are all on the same side. We're all trying to achieve the same goal, then everything's gonna be okay. You know, it's not a punitive thing.

[00:20:04] It's not a, it's not a scary thing. It's a collaborative thing. Collaborative thing.

[00:20:09] **Brian Coords:** And then sometimes just you win and I lose, and that's just the way it is. I'm just kidding. No, it's true. And. The, another good example kind of along those lines is this one here, um, it's not showing the code cuz the code, I think we ended up deleting and moving stuff around. So fun

[00:20:27] **Aurooba Ahmed:** No, I think it's because I commented on the whole page.

[00:20:31] **Brian Coords:** okay. Okay. So. You had an idea, you commented it here, and then I was, I used the little dropdown where you basically make a new issue and that issue will always have a link back here to remind you of where the issue came from. Yeah. I was like, you, you were like, we need actually a real header for the site now that it has multiple pages, but we'll do that in a new issue.

## [00:20:53] Making new issues from incoming feedback

[00:20:53] **Brian Coords:** So I made a new issue, I made a little link here and I resolved it and it's like, just the like history of everything. It's like. It like these little moments come in handy later on when you least expect it, when you can find the the logic train.

[00:21:08] **Aurooba Ahmed:** Totally. And you know, in a project where you and I are not the only ones who are contributing, for example, and let's say that we weren't talking on Slack. Even better would have been, we created an issue first where we talked about what we're trying to achieve and then we linked that to a pull request.

## [00:21:27] Creating trackable history in GitHub

[00:21:27] **Aurooba Ahmed:** Because having that thread of history to follow back later for other people, especially in something that might be open source, is so key and it's so vital for other people to understand how you work and what you expect and what you want or would want, you know, when they're trying to contribute too, so.

[00:21:45] In this case it's really perfect. So now you've created this issue and you know we have other issues in there too as we've been like documenting ideas for what we wanna add here and then you can come back to it. Or if someone else were to come in and say, oh, I can help with that, now they know the context of where this came from and can probably like have a pretty like guess pretty well what that component might look like even without having to talk to us.

[00:22:08] **Brian Coords:** And one thing I get tripped up on because yeah, normally in most projects we would've opened an issue with the idea and then maybe assigned it and said, okay, I'll assign this to myself cuz I want to make the pull request for it first. And so that is, yeah. One thing that's kind of unusual about this, but then I do get tripped up sometimes where you have an issue for a topic.

[00:22:28] And you have a pull request for that same thing, and the conversation sort of starts to split because on the issue you're talking about the problem and maybe some potential solutions. But on the pull request, you're really talking about this particular approach and solution and this code like, like the issue becomes this sort of general idea.

[00:22:50] And the pull request really specific, but sometimes. You, you kind of forget, oh, where did we talk about that? Was that on the issue? Was that on here? Wasn't there a link to that? So that is one tricky thing, um, that you do have to keep in mind that if you are looking at a pull request, if it says at the top closes issue number, whatever, or if it says in the sidebar, um, over here, uh, usually there'll be like, related issues under this development tab.

[00:23:17] **Aurooba Ahmed:** Mm-hmm.

[00:23:18] **Brian Coords:** gotta go there too. And sometimes more of the conversation unfolds in the issue.

[00:23:22] **Aurooba Ahmed:** Yeah, I mean, you're right. Sometimes you have to jump around into multiple places in order to get context, and let's say you're looking at a much larger project. For example, the Gutenberg repo for WordPress. You might sometimes, in order to follow the thread of a conversation, I have to go through like eight or nine links because you might have a pull request that was linked to an issue, which might be part of a larger tracking issue, which might be part of a larger tracking issue that was actually stemming from a different, smaller issue, and there might be multiple comments to go through.

[00:23:53] So it can be overwhelming, but even when it is overwhelming, it's really, really nice that you have these amazing interlinks available in the history and the way GitHub tracks everything. So at least you can generally follow the thread, even if it might seem like a longer thread than necessary.

[00:24:15] **Brian Coords:** Yeah, I mean, Overcommunicating is always better than not having enough information. But I like the other day you sent me a thing of like, look in Gutenberg, they're doing this thing about patterns. And then it was like 10 issue links and I was like, am I gonna read all these? It's gonna take me a day just to parse through.

[00:24:35] **Aurooba Ahmed:** I know.

[00:24:36] **Brian Coords:** I needed to send that to like chatGPT, read all of these issues, summarize what are they trying to accomplish here. But it's true like that there's so much on a thing like Gutenberg like. It's, it's, it's big. It's complicated. There's one issue, I think that one was about patterns, right? But that affects everybody.

[00:24:54] That affects people who use different types of themes. It affects people who are editing. It affects whether you're in the site editor or like, so it becomes a part of all these different threads that they have to tie together. And it is nice that at least the links are there. You can follow it. I mean, it's, it's better than if it was just in Slack, you know, or in

[00:25:12] **Aurooba Ahmed:** Yes.

[00:25:13] **Brian Coords:** right?

## [00:25:13] Requesting changes through reviews in GitHub

[00:25:13] **Aurooba Ahmed:** Definitely. So I requested all these changes and then we, I, we resolved all of them in one way or another. And then you added more updates to basically resolve those right. And create that extra issue.

[00:25:27] **Brian Coords:** Yeah, so this was that pull request that when I made a new, or the new, when I made a new issue, it, there's another kind of link to it, another kind of cool connection.

[00:25:36] **Aurooba Ahmed:** Mm-hmm.

[00:25:36] **Brian Coords:** did a couple. Uh, commits. You can see here. Um, I didn't really ask for feedback, but I got it right here. Uh, I knew it, I knew it wasn't

[00:25:48] **Aurooba Ahmed:** I on it, it was.

[00:25:52] **Brian Coords:** Yeah, I knew, I knew it wasn't, so you can see kind of all the little like pieces, you can track. Bringing back documents, all these sorts of things. And then another review, which you get with this kind of green check mark, that lets you know like this was approved, it was reviewed.

[00:26:08] And so was there any, this just shows you Oh, this kind of cool

## [00:26:13] The code view in PRs and its features

[00:26:13] **Aurooba Ahmed:** Yeah, you can go into the code view, the file changes view, which I think you and I live in a lot when we're reviewing pull requests anyway, because on the side where you can see in this new code view that GitHub introduced this year. You can see easily with the icons when something is a new file or if something has been a modified file.

[00:26:33] So it's a green plus icon when it's a brand new file. And if something was modified, it's sort of like a orangey brown dot, right? And I find that really hand really handy because I wanna know, oh, okay, what are the new things that were added? But then, okay, where did you change something that was in my existing code base that I might need to take a closer look at?

[00:26:52] Because it affects existing stuff, right?

[00:26:55] **Brian Coords:** And there's also a, like a red one, it'll show you if a file was deleted,

[00:26:59] **Aurooba Ahmed:** Yeah. Yeah, yeah.

[00:27:00] **Brian Coords:** which is handy. I mean, I'm somebody who loves a tiny bunch of tiny little files, but like this whole page is really, Not a lot of files, a couple changes, a couple of components.

[00:27:11] Um, like the whole thing is actually pretty, pretty clear. And then, you know, there's all those spots where you added comments.

[00:27:18] **Aurooba Ahmed:** Yeah.

[00:27:18] **Brian Coords:** But yeah, like that, those sorts of like little conversations, having them here, um, and having, being able to see all of the conversations we had. Um, Being able to like come through, like when you review, you get this little dropdown, you get to put in like general comments.

[00:27:33] You get to click on a line and start a new comment. Like all this stuff just makes collaboration. Oh, so much easier.

## [00:27:40] GitHub reviews allow you to post your comments holistically

[00:27:40] **Aurooba Ahmed:** And the one thing to really remember about review is even if you're adding those separate comments and everything until you submit your review, the other person will not see it. So you can actually leave it open for a while and come back to it and. That's something that's not as easy if you were doing it without the review process, because then they'll see those cha uh, uh, comments coming in on a rolling basis.

[00:28:03] And that can sometimes be frustrating when you're getting reviewed because you may not have the whole context for what, how something was getting reviewed. So when it's in a proper GitHub review, everything goes out together in one little section with an overall general comment, which is a really important place for you to not only.

[00:28:22] You know, what is it called? A compliment sandwich. So always, yes, you are asking for changes. You're asking for updates, but also let's acknowledge the awesome work and the hard work that another person did, whether that's your teammate on a client project, or that's someone who's contributing to your project.

[00:28:38] That's really important to always do, so I like to use that general comment for that.

[00:28:42] **Brian Coords:** You know, I, cuz I've learned that one the hard way where I asked a developer like, how come you haven't addressed these comments? And I said it like that. I said, what's your problem? Address these comments. You know, I was really rude about it. I'm just kidding. Um, but I, I said like, oh, did you get my comments?

[00:28:56] And they didn't, and I didn't understand that you. You have to actually like submit it. And I thought that was really, I didn't really get it, but that actually makes a lot of sense. Like if I, if you're getting that one comment at a time, it's like when you're at a restaurant and like, you're like, can I get a soda?

[00:29:11] And then they come back and then you're like, oh, can I get uh, some more ranch? And then they come back and then you're like, oh, and I forgot I dropped my fork. And you're like running the waitress, like back and forth. It's so annoying. And you just, so like the fact that it submits the whole batch, um, super handy.

[00:29:25] **Aurooba Ahmed:** Definitely. Yeah. So it's a, it's, it's well thought out and it definitely makes collaboration a little smoother and a little less with crossed wires. I think when you use these features that are available to you in GitHub, and if you're using Netlify, you know, having that collaboration drawer with the deployment previews, now no one can say, oh, it's not working on my environment , no, we're all looking at the same deploy preview.

[00:29:52] **Brian Coords:** Yeah, I don't have to worry about your like weird issue that you messed up your command line last week when you updated Xcode and now like you're on PHP five on your local. Yeah, all of that goes away cuz we're all just looking at the same thing.

[00:30:07] **Aurooba Ahmed:** Yes, definitely.

[00:30:09] **Brian Coords:** So let's see what happened next. Approve. I gotta compliment sandwich right here, right?

[00:30:14] Like a little

[00:30:15] **Aurooba Ahmed:** Yeah.

[00:30:15] **Brian Coords:** nice thing. And then when I click the merge, that makes a nice little merge commit and you change the title and we're done. And that's everything.

## [00:30:23] Automatic deployment with Netlify

[00:30:23] **Aurooba Ahmed:** Yep. Yeah, and then it was live. And because it's netlify, it automatically deploys anything to production that gets pushed into main and within, I think a couple minutes, it was live for the whole world to see, and then you did this amazing tweet thread on it, which got so much attention. It was so fantastic.

[00:30:44] And then we ended up having to be like, oh, okay, maybe there's a couple extra things we should do, like. That we didn't do before, like add a, like a social media preview so it doesn't look terrible on Twitter and that kind of thing.

[00:30:57] **Brian Coords:** Yeah, there, there's a few things where you go, oh yeah, WordPress would've like handled that for me if this was a WordPress site that I wouldn't have to think about. But also the fact that I just clicked merge and then it was live, it's like,

[00:31:09] **Aurooba Ahmed:** Yeah. That was amazing.

[00:31:10] **Brian Coords:** so much better. Uh, you know, the. This, this was the, this honestly on a personal level like this, this one turned me on like next and that stuff, cuz for specific situations like this where you're like, I just wanna make one cool interactive-y thing, uh, with like minimal effort, um, it, it really, like, it couldn't have been easier, I don't think.

[00:31:33] Like I, it could not have been an easier process.

## [00:31:35] Using the right tool for the situation

[00:31:35] **Aurooba Ahmed:** Totally. And you know, I think this is that really important note of use the right tool for the right situation and project and use case. In this sit situation, WordPress actually didn't make sense, but in another situation where there's a lot of content heavy stuff happening or whatever, WordPress would make sense.

[00:31:54] So, We love WordPress, but I think, you know, you and I also both really enjoy next.js and I've been working with it a lot as well recently. And there's just some really cool things in it, like dynamic routing in next.Js is amazing, but we can, maybe we should do an episode on next.js, I think.

[00:32:12] **Brian Coords:** Ooh, that's a good idea. Like a, a walkthrough, just like. It's like one of those things where I was like, that just sounds too confusing. I don't even know what it's for. Um, and then you, I think you hear about it a lot in the context of like headless WordPress where, you know, if this was like headless WordPress, that's a whole separate thing.

[00:32:32] But when it's just its own little like starter template, um, because Netlify and next, like they have this little starter template that like, has all the stuff, it has the routes, it has everything ready, and you're just like making little pages that are just a handful of lines of code.

[00:32:49] **Aurooba Ahmed:** Yeah.

[00:32:49] **Brian Coords:** we should, yeah, we should do that. And next.js like,

[00:32:52] **Aurooba Ahmed:** So smooth.

[00:32:53] **Brian Coords:** yeah,

[00:32:54] **Aurooba Ahmed:** Yeah, we will. This was a really awesome, pull request and I'm so excited that you made it. It's so cool. And it's so fun to see people, you know, going to it and we can tell when someone copies an element, uh, like an icon or something. So there's definitely people clicking and copying and using it already, so that's really cool to see.

[00:33:13] And

[00:33:13] **Brian Coords:** Using, using your GDPR compliant Fathom Analytics, right?

[00:33:18] **Aurooba Ahmed:** yes,

[00:33:19] **Brian Coords:** there's no Google Analytics.

## [00:33:21] Discovering the existing icon library visual reference

[00:33:21] **Brian Coords:** And I think what was one last thing that came out that was really cool was in the middle of this, one of 'em was one of the icons wasn't loading and it just looks broken. And you found the bug in Gutenberg submitted a pull request in Gutenberg to fix their broken icon, and then a contributor actually pointed out that, oh, good, I checked it on storybook, which is their visual

[00:33:48] **Aurooba Ahmed:** It was Nick, Nick Diego.

[00:33:50] **Brian Coords:** for.

[00:33:50] Nick? Yeah. For all the icon, like kind of like, oh yeah, I checked that on the visual reference for all the icons that already exists in WordPress. Like we just built this whole thing and didn't know it already existed.

[00:34:05] **Aurooba Ahmed:** Yeah, we should have, but it is so hidden. Do you wanna pull that up? It, it's so hidden and it is so like, hard to find and you don't think that the storybook will have it, that we didn't realize it was there.

[00:34:20] **Brian Coords:** This is the icon package that we based it on, right? So, you know, this is what we're essentially doing, but nowhere in here is there any link to anything that tells you that you can actually look at all the icons, like nowhere here do you get a, an idea of what they look like visually.

[00:34:36] **Aurooba Ahmed:** Yeah,

[00:34:36] **Brian Coords:** did you, how did you get to it?

[00:34:38] **Aurooba Ahmed:** the visual reference

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

[00:34:41] **Aurooba Ahmed:** well,

[00:34:42] **Brian Coords:** from his comment.

[00:34:43] **Aurooba Ahmed:** Well, yeah, I got to it from this comment, but you know, I do go to the storybook quite a lot, but it is true, it is nearly impossible to find the storybook unless you know it already exists or if an existing like contributor links you to it. yeah,

[00:34:57] **Brian Coords:** Yeah.

[00:34:59] **Aurooba Ahmed:** so this is what the storybook looks like, and I mean, the storybook concept is really great.

[00:35:03] **Brian Coords:** Mm-hmm.

[00:35:04] **Aurooba Ahmed:** And it has all the components in some shape or form. If you scroll right to the very, very bottom of the whole components.

[00:35:12] **Brian Coords:** Past the experimental components.

[00:35:14] **Aurooba Ahmed:** Yes.

[00:35:16] **Brian Coords:** There it is down here.

[00:35:17] **Aurooba Ahmed:** And then you see the icon component and also all of the icons, which you can, there are searchable,

[00:35:23] **Brian Coords:** Oh, okay. So if I put in post, I get the same exact ones cuz that's all they're basing on, but they don't have that cool click to copy,

[00:35:30] **Aurooba Ahmed:** Yeah, it does exist, but it is very hard to find. But now I think we have an easier one, and it's an U, it's just an easy URL to remember too. Right. So that, like that would be wphelpers.dev/icons. Done.

[00:35:42] But yeah, so that is the process of creating a pull request and merging it into a project that another person might be maintaining that you wanna collaborate with. And then the final result, it goes live and it's, it's, it's a pretty good feeling.

[00:35:58] **Brian Coords:** Yeah. Well thank you for letting me collaborate. I think like now it's gonna be an even better resource, and if you have an idea, then reach out to us with your idea or open an issue of what you think

[00:36:08] **Aurooba Ahmed:** Hmm

[00:36:08] **Brian Coords:** wphelpers.dev needs for its next. Cool. Uh, like helper

[00:36:14] **Aurooba Ahmed:** idea. Totally. All right, well I guess I'll talk to you the next time we record.

[00:36:20] **Brian Coords:** All right. See you then.

[00:36:21] Visit viewsource.fm for the latest updates and links to the show notes. Review and subscribe to viewSource in iTunes, YouTube, or wherever you get your podcasts.