Optimize Your Development Workflow

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, everybody. Oh, my goodness. We ‑‑ I have been interviewing Jennifer for the last three minutes and didn't realize that I hadn't taken the stream live. So, hello, everyone, and welcome to another episode of Learn With Jason. Today on the show, we have Jennifer Wadella. How are you doing, Jennifer?

JENNIFER: I'm doing well. I'm really sorry y'all just missed out on the secrets of the universe. It's something we can never discuss again. It's something you're just gonna have to wonder.

JASON: I cannot believe I just did that. Boy, that was a special kind of silly. Yeah. All right. Well, if that's any sign for how today's gonna go, it's gonna be a great day. So, yeah, I guess for folx who are not familiar with you and your work, do you want to give us a little bit of a background on you?

JENNIFER: Yes, as soon as I stop getting phone calls. Let me disconnect my headphones real quick. Ahh! Make it stop. Make it stop. God. Okay. Sorry about that. We are both on top of our game today. It's gonna be a good stream.

JASON: Killing it. We're doing great here.

JENNIFER: Oh, man. But I'm Jennifer Wadella. I am the Director of Angular Development at a boutique JavaScript and UX consulting firm. I do a lot of conference talks. Used to do a lot of blogging. Trying to ramp back up on that. And kombucha brewing, just loaded up a new batch on Tuesday.

JASON: Ooh, okay. So are you, like, hardcore kombucha. No flavors. If it doesn't hurt, it's not kombucha. Or are you berries and coconut?

JENNIFER: I do flavoring, but I do a three F process for my flavoring.

JASON: Okay.

JENNIFER: Because I'm that person. Bleep. See, I caught myself. (Laughter) So, when I brew kombucha, I do what's called the continuous brew method. I've got, I don't know, probably a 5‑gallon brew char. It might be more than that. Whatever. It's huge. I had a friend build a custom stand for me. That's my base unflavored brew. That's pretty much going on all the time. And so then you just top off bottles and you had more to it. Because the way kombucha works, it's a misnomer. The Scobee is actually the kombucha itself, the symbiotic yeast and bacteria. That continues fermenting so you can tap off and put it into smaller bottles. I tap it off, put it into the smaller bottles that they're called that have, like, the flip stopper thing.

JASON: There's really a lot of terminology that goes into kombucha, isn't there?

JENNIFER: These are old school beer brewing bottles.

JASON: I got it.

JENNIFER: That's just the name for it that you didn't know until now. Anyway, distill in that, and that's where I flavor it. I'll put, like, red bell pepper. I did pumpkin spice one year and it overcarbonated. Sprayed me in the face. Sprayed the cat. I leave it for 3 to 7 days. It's going to draw the flavors from whatever you put in there. It can keep carbonating. It gets explosive. That's the second F, fermentation round. The flavor will be there. I'll rebottle it and let it sit for another seven days. Then you have a really good cash nation amount where you get the good fizziness from it where it's not going to explode, get everywhere. That's the process that I follow.

JASON: That is very exciting. I, you know, now you know what I can't wait for? I can't wait for when it's safe to, like, get people together again. Because I desperately want to do some, like, Learn With Jason not computer stuff.

JENNIFER: Yes!

JASON: It would be so much fun to do, like, my partner and I for a while were doing, like, baking and breakfast. We would cook together on stream.

JENNIFER: I was creeping on a lot of those photos, now that you mention it.

JASON: It was really fun. We got to do all this fun stuff. Kind of a pain, I don't know, setting your kitchen up into a studio is not the most fun thing to do. So, I really want to be able to like ‑‑

JENNIFER: You can't command Z that either.

JASON: Yeah, exactly. (Laughter) We definitely ruined a couple, like, mostly eggs. It was always we'd get the eggs wrong on the show. God, I overcooked those. Anyways, I could literally talk about this all day. The chat is dead silent waiting for us to do something relevant here. (Laughter) So, hello, chat. Welcome. We're gonna talk about computers now. So, today, what we were gonna talk about is something you proposed that I thought was brilliant. Which is, like, a lot of times when we're talking about code, we're thinking about, like, what framework is gonna make me the most efficient? What is the ‑‑ what is the thing that is gonna make me the most productive developer that I can be? And a lot of times, we put that down to, like, the programming language we choose. Or the, you know, should I use React or Angular or should I use, you know, JavaScript or Rust or whatever. A lot of us don't think about that the biggest part of our productivity is, like, the actual tools that we use. When you brought this up, I thought, dang, that's such a good idea. So, what do you think are, like, some of the biggest contributors to developer productivity? When you start looking at it wholistically like that?

JENNIFER: Well, I think, you know, taking control of your own tooling is the key shift here. And so, like, let's say you have maybe switched jobs or you got a new laptop or something like that, and then you go and you start trying to do what you normally to. Maybe you've customized things over time and you're like, oh, gosh, wait. I have to reset up everything. That's, like, a common experience for a lot of us that have been in the industry for a long time. For those new in the industry, I feel like we never talk about this stuff. Just setting up our desks or whatever, our dev environment. For me as a front‑end developer, my command line is my go‑to, especially on a Mac device. I have a lot of clients who are Windows users. Oh, God, I don't even know what command to type on your Windows machine. So, like, your basic command line and then customizing the way you like that, and then starting to build and use tooling on top of it is really crucial. Then from there, if we're talking a strict dev sense, you jump into your IDE. You might have that customized with a number of plug‑ins. Maybe per project. Maybe you're content switching a lot and need a lot of additional tooling. There is a lot in the landscape there. We could have a whole other episode on calendar management.

JASON: Oh, my goodness.

JENNIFER: And communication tooling. Those ash the two we could focus on today, like, your command line, you know, some things you may or may not know about and just how to have fun and start customizing, and then the same in your IDE. So...

JASON: Yeah. And something that I think is interesting about this is that, you know, what we're talking about today is not necessarily, like, use exactly this tool for exactly this purpose. It's more about understanding the impact that the tools you choose. So, what we use today isn't necessarily the thing you should use. It's more just, like, think about your tools and how they can extend and be customized to the way that you work. And also your level of familiarity. Like people who know Vim really well are incredibly productive in Vim. If I use Vim, I'm incredibly unproductive in Vim. That's not to say I couldn't become productive. So far in my career, you know, we're getting 20 years in, it's probably a sign that's, like, permanent. I have not been willing to suffer the learning curve, right? Because I feel like ‑‑

JENNIFER: Mm‑hmm.

JASON: ‑‑ there's probably a lot to gain, but there are also wonderful tools like VS Code. So for me the trade‑off is not worth it. For other people, the trade‑off is worth it. When they do stuff in Vim, they look like freaking wizards, but, you know, it's such a personal thing and it should be shaped around, like, what you feel comfortable with and what makes you feel productive and not what somebody else tells you, oh, you have to do it like this. Especially when they tack on crap like "or you're not a real developer." Get out of here with that. (Laughter)

JENNIFER: Oh, my gosh, you know what that reminds me of? I was reading ‑‑ I was prepping for a presentation and reading the 2021 Stack Overflow Survey. People are still listing Notepad++. We get it, you're so cool, you don't need an editor. It was not an insignificant number. At least three or four up from the bottom.

JASON: I think it's amazing. I love that I'll still see people using IDEs that I thought were, like, done for, you know? Like there's stuff that ‑‑ and I'm not gonna name names because I don't want to make it sound like any IDE is old or uncool, but it's cool to see that, like, you can be productive anywhere. And now there's even stuff like I just had a conversation with the GitHub team about code spaces and, like, code spaces, now you don't even need an IDE. You can just straight up, like, run your whole development environment in your browser. Which means that you can, like, have a tablet with a keyboard attachment and that can be your whole dev environment. And that's so cool. Like it's such a powerful thing to think about the fact that, like, you can be productive with any setup. It's more about customizing it to yourself than about picking the right thing, right?

JENNIFER: This episode not sponsored by Apple's new Macbook Pro.

JASON: Those are great. I don't have one of those yet. A couple of my co‑workers have gotten them and they're like, oh, my God, it's so fast. I'm like, do I really want to spend that much money on a computer, though?

JENNIFER: Yup. Yup. Oh, too funny. But, yeah, I feel like this idea I had was inspired by the last time we were collaborating. That's why I think Twitch is so fun and things like this are so fun because you get to see somebody else's environment. They may have used tools you've never heard of. All sorts of different things. There's a lot of stuff we've lost out on in a remote environment, seeing how other people operate and the tooling they've put together. That kind of led me down the path of you telling me about Starship and me kind of reading into that. Thinking about a problem that I run into daily that pisses me off that I was able to write a custom module in Starship for and solve my problem. That's the power of tooling that I think people should take away from this. Like, you know, those little things that annoy you or those extra keystrokes you find yourself making or things you don't want to deal with, these are all things if you spend five minutes out of your frantic, code‑pushing day, you can think, oh, I can do this. I can change the folder that Slack downloads into, like, by default. Maybe I don't want it to go here. Maybe I want it to go to Custom Folder. Any time I do rapid‑fire screenshots or things like that. There is a lot of utilization that we don't think about that I want to encourage people to think about.

JASON: You bring up so many good points. It honestly might be easier to just, like, dive in and start looking at this stuff. The abstract, I think we could go all day, but I love just kind of seeing it in action. So, let's switch over to pair programming.

JENNIFER: Cool.

JASON: And while we're doing that, I'm going to start by letting everybody know that we have live captioning on this episode like every episode. That is provided by White Coat Captioning. We've got Jordan hanging out with us today. You can find that on the homepage. That is made possible by our sponsors, Netlify, Fauna and Auth0. All of whom are kicking in to make this show more accessible to more people, which means a lot to me. And we are talking today with ‑‑ not that browser. Get over here. We are talking to Jennifer Wadella. So, if you want to follow somebody who is both funny and smart on Twitter, that is a good ‑‑ that's a good one. Go get that follow in. So, yeah, let's ‑‑ with that, why don't we just close this right on down and let's talk about, like, how we set up our environments. So, you mentioned one thing that I think is so worth mentioning. I take a lot of screenshots, and it makes me ‑‑ I hate a messy desktop. Like you can see here. Look at my empty desktop. There's nothing on it, right? That's because I changed my default screenshot location to be a hidden folder, and now all my screenshots go in here and I just put them in the doc. Oop, those are my screenshots. It's so nice. Like I love stuff like that.

JENNIFER: Well, and I feel like I saw one of those really click Beatty articles, 10 things you can do to optimize your developer workflow. They're really simple changes you might not know how to go and use your tooling, but it's really easy to do. It's one of those things you didn't think would make your life that much better and it does.

JASON: Yeah, absolutely. Yeah. It just, like, it's little stuff that when you do it, you're like, this feels like a lot of work to set this thing up, and then you have it and you're like, oh, it's amazing. Like it's so good. I'll show you one of my favorites. So, one of my favorites ‑‑

JENNIFER: Okay.

JASON: Right now, I have very few aliases because I never remember them. But one that I have is I have this "S", which is git status. It does a formatted git status. If I actually change, like, some of my code in here ‑‑

JENNIFER: Yup.

JASON: Instead of the big, messy git status ‑‑ did that actually save? Save. There you go. You get this really nice, like, this one was modified. And it's super clean. And it's super simple. And all I have to do is type "S" to make that work. And, like, that tiny little thing probably saves me 200 keystrokes a day.

JENNIFER: Absolutely.

JASON: And it's just little things like that that I don't have to think about anymore. I can't even remember the command that I'm typing to get this formatted thing. I'd have to pull up my .files, which I do have. I can share those. Do you do this public dot files thing?

JENNIFER: I don't, but I need to. One of the things I do ‑‑ I was in an environment a while ago and you always had to do get reset‑‑hard. I aliased on my computer as git unbleep. I would run that any time I wanted to do a hard reset. Or blow stuff away, aliasing a command that is going to automatically delete your Node modules folder if you can never remember that command and run NPM install. There is a lot of cool things we can do with aliasing.

JASON: Nice. The aliases are so powerful. We can look at a little bit of these, but I don't want to get on to my stuff. I want to talk about your ideas because I desperately want to steal them.

JENNIFER: I do want to make sure we go through and show people, okay, we're talking about aliases. Where do we start? Where is our home base for this? For most people, that's probably going to be their Bash profile.

JASON: Bash profile. Yes, absolutely. Where is mine? Bash RC ‑‑ I think I switched ‑‑

JENNIFER: I have both on my machine still. But, yeah.

JASON: I think this is it. Yeah, this is my git alias, right? This git status‑sb, and that gives you, like, a cleaner setup.

JENNIFER: Yup. So, if we look at that "S" whatever command you're going to type in the terminal and the quotes is gonna be the command that you want or the commands you want run. Yup.

JASON: Yeah. And then I have a couple other ones that I use. This one makes a shorten git link. Like the git.io. Do I have other things in here? There's not a lot. I don't do a lot in here. I have my ‑‑ oh, yeah, gu is, like, my get everything from Upstream. Clearly I don't use this one very often. I forgot it was there. Some to make me smile. Instead of cargo for rust, I use corgo, because that makes me happy.

JENNIFER: Okay.

JASON: This is easily the biggest thing I've ever added that has saved my entire life. Let me make it bigger so everyone can see what's happening here.

JENNIFER: It's too pixilated for me to read.

JASON: I've aliased the remove command and it immediately puts them in your recycling bin. The reason this is important, I've typo'd on a remove command and deleted an entire folder. Once when I first installed this, I started a rim raff from my home folder because I typo'd. I was trying to do remove everything in the home folder. I missed the slash and hit enter. I just started deleting my home folder, which is everything. So, I, you know, control‑C'd out of that really fast and only lost some data. Didn't brick anything, thank goodness. But it was one of those, like, holy crap. Okay. How do I make sure that never happens again? I think it was John at Egghead was like you should do this alias. I was like, oh, this is brilliant. That's such a good idea. Now if I accidentally delete my home folder, it goes into the recycle bin and I can just drag it back. (Laughter)

JENNIFER: Oh, I love it. I love it.

JASON: So, lots and lots of really cool things that you can do that are just so powerful. And, yeah, it all starts in these Z Shell RC or Bash RC. I'm pulling in environment variables that I use. I'm pulling in my Starship initialization. So, Starship is, like, what formats my terminal here with all this ‑‑ all these goodies. That's Starship.

JENNIFER: Mm‑hmm.

JASON: Okay. Anyways. So, that's my stuff. So, where should we go first if we want to start playing around here?

JENNIFER: Well, I was gonna say, so let's walk people through maybe, okay, they want to get what Jason has. How do they get started with Z Shell? How do they get that on their machine?

JASON: Isn't it installed by default in Mac now?

JENNIFER: Is it?

JASON: I thought it was. I could be wrong.

JENNIFER: It's been a while since I set up a new machine.

JASON: I feel like I didn't switch willingly. Like I switched under duress because the default changed.

JENNIFER: Oh, really? I think I've switched ‑‑ I've used it for so long. It's just my automatic, oh, okay, I need to go get this because I want my ‑‑ what does it come out of the box with? Like auto completion. So I think that's the first thing that gets me, when you start typing and tab to complete a folder.

JASON: That one is huge. If I go to my GitHub folder, for example.

JENNIFER: Yeah.

JASON: And then I go to, like, tab, and it completes, right?

JENNIFER: Yeah.

JASON: Yeah. This is ‑‑ that is kind of game‑changing for me.

JENNIFER: Yeah. It's like the first thing that, like, annoys the crap out of me when I start doing anything.

JASON: Chat is confirming that Z Shell is the Mac OS default now.

JENNIFER: Wow! Okay. Cool. And I'm learning something today, too. So, sweet. All right. So, in that case, if you're in your local machine, and let's say people are like, ooh, this aliasing is a really good idea, how are you gonna go and access that source file that they need to be putting their code in? Like on their environment? Like what would be their way to get there?

JASON: So, the way that I do it is I go here, and then I would hit, like, Bash RC or in this case, it's Z Shell CR. That will open it up in your code editor. This is assuming you've installed the code.

JENNIFER: Yeah, if you just do open, it'll just do it in the plain text. I don't even remember what it is on ‑‑

JASON: Notepad.

JENNIFER: Text edit. There we go. And honestly, like, this is typically what I do, because I am a consultant and I have, like, four different clients at any given times. Which means four different visual studio code. If I'm doing edits in here, I just need this little piece of my screen to see it in. Yeah. Okay. So, we start saving commands ‑‑ and somebody new to kind of editing their setup might save something, go and try and do something in the command line, and it doesn't work. So, one of the things you need to know is when you're making changes to your file, you need to source that, like, get it ‑‑ I don't know what's a good explanation for this. Get those changes picked up by your command line or open up a new window.

JASON: Right. Yes. So, once you make a change, like, if we just do a new alias ‑‑

JENNIFER: Yup.

JASON: And we'll call this alias "boop," and it will do, like, an echo ‑‑ escape this. Because that's the only way I know for sure it will work. We can say, "hi, chat"

JENNIFER: Yeah.

JASON: Then we save that. I come out here, and I run boop, and nothing happens. But if I source it, it works. So, we can very quickly kind of do all that. That's way nicer than the other thing that you would have to do. Which is we got to quit it and then reopen it and then it pulls it back in. Remembering to source whenever you make a change is really helpful.

JENNIFER: Yup. So, understanding that this is a file that your instance is running every time it boots up. So, when Jason is using Starship, it's able to find that because he's executing that in his Z Shell file. So ‑‑

JASON: Mm‑hmm.

JENNIFER: Yup. I feel those are nuances people who have never encountered this concept before, this is new to them. This might be a stumbling block to be aware of.

JASON: Absolutely, yeah.

JENNIFER: So, before we ‑‑ well, I guess ‑‑ so, the inspiration for this was me trying to solve a problem with Starship. So, I went and started looking at the documentation. In Starship, right out of the box, provides a lot of really nice utility that you are seeing for Jason. So, it's showing you, like, the repository you're in. It's showing you the branch you're in. Is it showing you the Node version by default, I think?

JASON: So, if it detects that it's a Node project, then yes.

JENNIFER: Okay.

JASON: So, if I go into, like, the Learn With Jason site, then it picks up the package JSON version.

JENNIFER: Yup.

JASON: And it picks up the Node version. So, like, I can change that if I do NVM use 14, it'll change out and say, "now we're in Node 14," right? And then if I change back, it goes back to, you know, 16.11. So, it shows the git branch, shows the package version, shows the Node version, and then I also have this alias set up. This is a really good idea from Chris Biscardi, which configure it so your repos show up as a link. I can hold command and click on it to open this repo in my browser.

JENNIFER: Nice! I love that!

JASON: This is hugely, hugely convenient when you're working on this stuff. If you look at, like, the path for this, it's a GitHub folder, and then I create a folder for each org, and the repo gets cloned into there. So, the folder structure matches my GitHub structure, and that way I can do this replacement, like, when I'm in the GitHub folder, map it to GitHub.com, and that does the whole ‑‑ that does everything I need.

JENNIFER: Very cool. I like that a lot. Yeah. So, the problem I kept running into is I work on a lot of enterprise clients, and they might be on their own internal NPM registries. Node Manager, that's a really great tool that I've been coaching people who maybe are developers and new to front end on, being able to hop Node versions between projects or as you upgrade or are testing things is really, really crucial, and I feel like maybe less people use it now because our tooling has gotten a lot better. So they don't even know it's out there. But having Node Version Manager on your machine is really, really helpful. But then the other one is NPM RC, which is the registry control. This allows you to switch Node registries. Instead of getting everything from npm.com, you might have to point to a different protected registry sometimes.

JASON: This is NVM and NPM RC is here.

JENNIFER: That's gonna pull up the docs for it. You want the ‑‑

JASON: The package?

JENNIFER: The next one down. The package. Yeah, there you go. I'm good at words today. There we go. Yup.

JASON: Switch between NPM RCs.

JENNIFER: This is really nice. Instead of having to go and update a file every time, you can just create your different profiles and then switch between them. And so they just take, you know, wherever you want that registry to be pointing to, and then you can just type, you know, NPM RC, and then whatever profile that you want to switch to, so, like, client "A", client "B", client "C", and switch between those really, really quickly. You can also list out your available ones just by typing in NPM RC. This is something I use a lot. That being said ‑‑

JASON: This makes sense for you because you're working with clients. Clients have private registries and private packages. When I was at IBM, I used to do this all the time. We had different registries set up for different things. Now in my job today, I am very blessed to never have to deal with private registries. So, I'm very happy that I don't need this feature, but, like, when especially working on, like, client work or, like, enterprise‑sized teams, that sort of thing, it's that little DevOps‑y trivia that eats up minutes of every day and breaks your context. Then you can't figure out why a inning thing that always works isn't work. Ah, crap, I'm using the wrong config file. Little stuff like that. It's so, so nice to automate.

JENNIFER: That's what leads me to the module I wrote for Starship. That would be my problem. I'd be contact switching between clients. Maybe I'd be working on a presentation. I'd, you know, spin up a new demo repo run install. What do you mean "package not found?" You know, when you're contexting that fast, you're like, wait, did I miss something? Oh, maybe I need to clear my Node Module. No, I'm on the wrong registry. I'm a dumbass. (Laughter) So, what I really wanted is just the ability to automatically in my command line see what registry I'm on so I have that nice visual indication.

JASON: Ooh!

JENNIFER: Yeah.

JASON: You just threw it right in here?

JENNIFER: Yeah, yeah, I did.

JASON: Ooh, that's cool.

JENNIFER: You bet I did. Luckily, one of my clients has a very recognizable icon that I was able to use. And then I ‑‑ with having Nerd Fonts installed, which we should look at. That's how you're getting a lot of these really nice symbols, like the branching symbols. I was able to get the NPM, their logo. That's what shows up in my terminal when I'm on the default registry. If you've ever seen people with cool ligatures in their editors or symbols you see see in command line, they're not there by default. These are special things you need to install for the tools to represent different things. When you start getting into start customizing, being aware what's out there can help you do some really, really cool stuff. So, I feel like this is some information that people sometimes don't realize, like, having a font available for this instead is really, really great. What do you use, Jason, for your machine?

JASON: So, I have a stack of Operator Mono, which is a font that I paid for, and then a Nerd Font that falls back for all the icons.

JENNIFER: Ooh, gotcha.

JASON: So I think if we look at ‑‑ here, I think. No, that's not it. It's in the ‑‑

JENNIFER: Go to text, right?

JASON: Text. And then I have Operator Mono and then a non‑ASCII Sauce Code Pro as the Fall back. So, that let's things kind of fall back properly and hit what I want. Which is for everything to be VS Code. Unless it doesn't have the icon.

JENNIFER: Mm‑hmm.

JASON: This Sauce Code, I liked this icon better, which is why I chose it. Like the branch icon. (Laughter)

JENNIFER: Yup. Yup.

JASON: Very important to me.

JENNIFER: It is commonly used. So, I feel you there. I feel you there.

JASON: Yeah, these Nerd Fonts are incredible. I love the fact that you can do this stack, right? Because there are, like, you can just install one of these and it will work. The one that I am using as my backup was ‑‑ what was it called? It was called Sauce Code. So, down here, if I can find ‑‑

JENNIFER: There it is.

JASON: Here. Sauce Code. This is the Fall back font that I use. You could just use this and it would look great. If I turned off Operator Mono. I paid for Operator Mono, I figured why not? I'll use it. These are so cool for just being able to come in here. You download it. You install it. Now you've got, like, a cool font with these icons available. Which is so dang cool.

JENNIFER: Mm‑hmm.

JASON: It is really nice that you can just, like, oh, look, look at all these cool icons that you can use for GitHub.

JENNIFER: Yeah. And, like, you know, all of the tooling that you're used to, you know, framework versions, all sorts of things. There is a lot of power and automation you can do. Give us good visual indicators of what's going on in our lives.

JASON: It's so slick. It's so nice. Also, what's up, Alex. Thank you for the raid. Welcome, everybody. We're learning about tuning a dev environment. Right now, we're talking about Nerd Fonts. We've been talking about configuring our CLI. Starship, all those sorts of fun things. Thank you for the sub, Ben. All right, y'all. So, we've got Nerd Fonts. We can see here that is what I'm using in my terminal. I've got Sauce Code and I'm stacking that underneath Operator Mono so I have a nice terminal setup here.

JENNIFER: Okay.

JASON: And then you can also see ‑‑ if you want to see exactly how I do my setup in my dot files, if I can ‑‑ where are my dot files? Here. I have my Starship config inside of config. And so this is where you can see exactly what I'm doing. Nicky, yeah, today ‑‑ this week is the most Learning week we've ever had. I have eight streams this week.

JENNIFER: Oof.

JASON: So, we did three yesterday, one today, two tomorrow, one Thursday, one Friday. It's gonna be happening. I hope y'all hang out. It's gonna be a lot of fun. But, yeah. Check this out. Look how quick this is to do this GitHub thing, right? Hey, if I'm in my GitHub directory, replace it with GitHub.com. That's pretty wonderful. Node, same thing. Here's the format. And then I, like, disabled Google Cloud Because I have that CLI installed. Same thing with AWS. It shows what version you're on and the CLI. That's too much info. I turned that info off. Git branch, I actually changed it because it pissed me off so much.

JENNIFER: Nice. Nice. So, real quick, as we're looking at this. So, like, when you install Starship, this is, like, the base file that it comes with, right? You don't have to create this from scratch. I don't remember that part.

JASON: I think you don't need anything. Like it defaults. So, I believe these are all customizations that I made.

JENNIFER: Right. Oh, so, this is all a customization.

JASON: Yeah, I think this toml is completely optional when you use it. It's only if you want to modify it that you have to create one.

JENNIFER: Okay. That's the part that I couldn't remember because you have to, like, kind of show ordering or change things around to know where to put them. If you're reading through the documentation, it took a little bit of understanding. These different packages, I think we're calling modules here. So, if you're trying to do something in Starship, your step number 1 is going to say, okay, let me troll the documentation, let me look at all the modules available, let me look at their configuration. There is one that will show your battery power, for instance.

JASON: What!?

JENNIFER: There you go. There are all these default modules you can start to customize the way you want them to look, color changes, all sorts of things.

JASON: This is incredible.

JENNIFER: That's the vocabulary going on there.

JASON: This is a warning. You're hacking away and your battery goes below 10%. It's like, yo, you should probably commit this. (Laughter)

JENNIFER: Actually, we should write that. We should do that customization. Well, I don't know if we could test it because, like, unless you really want your computer to get down to 10%. You could customize it, instead of showing a battery icon, yo, commit your code now!

JASON: I love it. I mean, it's so fun. Oh, it just has a threshold, too. So, you can set the threshold to be a different thing. So, actually, if I do this right now ‑‑

JENNIFER: Yup.

JASON: If I go into my Starship.toml. Actually, you know what we can do that'll be fun? I'm just gonna push the button.

JENNIFER: Uh‑oh.

JASON: Y'all ever use this? This is like the most magical thing. Oh, let me just pop this thing open.

JENNIFER: Nice.

JASON: Then I can go down here and I can save this. Then we'll commit it.

JENNIFER: Okay.

JASON: And I'm gonna say ‑‑ oh, wait, I want to make the threshold. Let's make it 100 because my computer is in and I just want it to show me the battery all the time. We'll say feature: show battery in prompt. And it commits, right? So, that's all committed. So, then down here, I can go back to my home directory and pull ‑‑ what are my on stage ‑‑ oh, is this because ‑‑

JENNIFER: We were putting those aliases in there.

JASON: Yeah. And then because we just made changes, we're gonna source it.

JENNIFER: And I think somebody in the comments spotted that, too. It was a little blurry on my screen. Did you have go brackets?

JASON: It looks like that's what they put in in the config. I wonder if it's ‑‑

JENNIFER: I know when I've done my custom commands it was one bracket. I don't know if that was a typo.

JASON: Interesting. I wonder if because it's in an array. Toml is my ‑‑ I'm not gonna lie, toml is very mysterious.

JENNIFER: What does it stand for?

JASON: It legitimately stands for Tom's obvious markup language, which is, like ‑‑ that Tom, by the way, naming and shaming, and Tom Preston Warner. How dare you! (Laughter) Oh, minimal language. Not markup language. Yeah, so, Tom's obvious minimal language. Here's the thing. Toml does so, so, so much. So, I'm not trashing its utility. I struggle a little bit with languages that are so flexible that, like, all of this is valid and you just have to try stuff until something works.

JENNIFER: I want more guardrails. I want some sort of syntax error, please.

JASON: There we go. We got it. We got a battery.

JENNIFER: Nice. Nice.

JASON: It seems to think my battery is 97%. Which is okay. Why, though? Whatever. It's fine. Like I love this. I love that it's showing this, like, battery percentage. That's so much fun. And, you know, that ‑‑ it's just cool that you can do this kind of stuff, right? That you can just be like, oh, yeah, I want my terminal to let me know if my battery's low on my computer.

JENNIFER: Mm‑hmm.

JASON: Unbelievable.

JENNIFER: Magic.

JASON: Chat's saying it's time to service my battery. You're probably right. This is a very old computer.

JENNIFER: Nice.

JASON: Okay. So, now that we know how to configure Starship, what do you want to look at next?

JENNIFER: Do we want to talk about doing custom stuff?

JASON: Yes.

JENNIFER: Because, like, if you want to start ‑‑ and that's where I was kind of going. Like, hey, here's all these cool modules that are available. What if what you want doesn't exist here? How do you go about building that?

JASON: Mm.

JENNIFER: Yep. So, what you can do is you can create a custom module. And so they do have ‑‑ it's in the docs somewhere where you can ‑‑ custom commands. There we go. Yep. And so this lets you know how to get started. And that way you can kind of take in whatever you want. You might have to run a different command. So, for instance, when I wanted to deal with my behavior where I wanted to show whatever registry I was on, I wanted to basically do some if logic and say, okay, if whatever registry, then show this symbol, show this symbol, and then the thing I had to think about is, like, all right, how do I figure that out? And so what you can do is you can have it take in a command. So, if I want to know what I'm on, I do NPM config get registry. I can take the output of that and do the comparison to show whatever symbol I want.

JASON: Oh, nice, nice.

JENNIFER: Instead of plugging and playing options, you can put logic into this and use that to display the things that you kind of care about.

JASON: Gotcha. That's very cool.

JENNIFER: Yes. I believe there is an entire thread on their GitHub repo as well about all sorts of custom modules people have written that you can pretty much copy and drop into your environment.

JASON: Nicely. That's very cool. Do I ‑‑ so, should I just do a ‑‑ like just build a thing? Wait, is this ‑‑ do you literally just put it right in?

JENNIFER: Yeah.

JASON: What?

JENNIFER: Yeah, you just slap it in that file and then ‑‑ order matters. So, let me pull up my file real quick. Because I don't remember how I did that. Because that's the thing I was trying to figure out is, one, actually, I don't know if I did ‑‑ but figuring out what order to get things to display in. Or if you want something not to display. You might just have to put it in your file and then turn it off, I think.

JASON: Okay.

JENNIFER: Like that was one of the things that was hard for me to figure out. Yeah, we can write something completely custom, if you want. You just name it whatever.

JASON: Okay. Yeah, let's do that. So, I'm gonna open ‑‑ nope, not that. I'm gonna open my Starship ‑‑ oh, because this didn't open the actual folder. This was ‑‑ nope. Config. Starship. There we go. And now we're just in here. This should be ‑‑ oh, I thought ‑‑

JENNIFER: Okay. So, scroll up, actually. I think ‑‑ oh, weird. Okay. Mine is different. I've got a lot of my default commands at the very ‑‑ all my modules at the very top. Oh, okay. So, here's how it goes. Is you can list out the modules and those are gonna alias whatever you name your new custom module. That's how it works.

JASON: Okay.

JENNIFER: Yeah.

JASON: And so if we wanted to do ‑‑ we can do something that we can fake like a command that just returns something different based on whatever and then show a different symbol?

JENNIFER: Mm‑hmm.

JASON: But ‑‑ so, if I want to start ‑‑ let's do this.

JENNIFER: Ooh, I have an idea.

JASON: Yeah, let's do it.

JENNIFER: Maybe we combine one of my completely useless favorite things to install on my CLI, ponysay, and we just put the alias of the basic ponysay commands.

JASON: Yes.

JENNIFER: So, I think you ‑‑ do you have ‑‑ you probably don't have it, but I think you can just do brew install ponysay. Is it brew install or just ponysay? I don't remember.

JASON: I don't know. Let's find out. Let's see if it's gonna install all of Brew. Ooh, boy. Lots of things failing. This is not a good sign. Code is outdated. Oh, so many problems. Oh, boy.

JENNIFER: This is also, like, how much better our lives have gotten as developers. Even in the last five years. I remember having to fight with, like, you know, uninstalling Node, uninstalling NPM, reinstalling Brew or reinstalling everything via Brew or all sort of weird errors would happen. I think Brew comes default with OSX now.

JASON: Does it come default now? I'm not sure if it comes default. It effectively is a default. I can't remember a time I didn't have Brew installed on a machine. You always need it for something. It's so much more pleasant to use Brew than, okay, I'm going to download this zip and I have to run a tar extract command. Then I have to execute that. It all just makes me like ‑‑

JENNIFER: Yeah, you have to, like, copy and paste things. Instead, you can just run Brew whatever. Maybe if it's not installable via Brew, you shouldn't be installing it anyway.

JASON: Yeah, except I think my Brew might be toast. I'm very worried that this is gonna get bad.

JENNIFER: Okay.

JASON: So, the joy of this show is that I touch all sorts of things, and a lot of times I don't really think about what I'm doing when I'm doing it. Because it's part of the episode. And then months later, I need to touch that same thing and I don't know what I changed about the config that broke it, but it's definitely broken.

JENNIFER: Ack! Ack! I mean, we could kill it and just try it the copy/paste way.

JASON: We could. Let's go look at what ponysay is while we let this go.

JENNIFER: If you're coming from Python, you might know what cowsay is. Which is literally just ASCII art of cows. Ponysay takes it up a notch and gives you peak "My Little Pony". Not only are all your favorite pony friends there. There's a pony for every pony. They have different ones. So, there's like ‑‑ I identify strongly with Twilight Sparkle, she's a neurotic control freak like I am. She's got good iterations that are available.

JASON: Okay. This says to clone the project. So, we can ‑‑ I love that it just does the CLI like that.

JENNIFER: Magic.

JASON: So, what I'm gonna do is I'm just gonna stop this because this is definitely not gonna work. I'm gonna move into GitHub and then I'm gonna do my normal thing that I do. I'm gonna make a new directory called erkin. And then inside of that, I'm gonna run this GitHub repo clone command. So, in we go to ponysay. Then we're gonna find out if I've broken my Python on this machine.

JENNIFER: Oh, God.

JASON: Which is very ‑‑ just so possible. Then we're gonna run the install command. Which was this one.

JENNIFER: And I feel like I have had trouble doing it manually this way before. So, we'll see what we run into. But it was a couple years ago. So, maybe we're fine now.

JASON: It's all ‑‑ permission error. No. Operation not permitted. What? Copying pony install to ponysay. Do I need to, like ‑‑ but is it there now? Uh‑oh, we beach balled. Well ‑‑

JENNIFER: Uh‑oh.

JASON: It was a good run, everyone. This is the final episode of Learn With Jason. We finally bricked it. Oh, look at this, it new it was Python and now it's showing me a snake.

JENNIFER: Oh, nice.

JASON: There it is. I pulled it wrong.

JENNIFER: Is it a snicky snake?

JASON: A snicky snake. That didn't work because ‑‑ is there a different thing I can try? Is there a different command? This one, maybe. Without private.

JENNIFER: Ooh.

JASON: No, operation not permitting. I don't have to run this with Pseudo, do I? That seems really dangerous.

JENNIFER: Yeah, that might be a little too risky for the show.

JASON: Okay. Well, I don't know why ‑‑ if installing only the completely free ponies ‑‑ what does that mean?

JENNIFER: I don't know. I've never paid for my ponies.

JASON: You pay for ponies?

JENNIFER: It's pay‑to‑play. It's a very effective model.

JASON: Operation not permitted. Okay. So I think this is some kind of permissions issue. I'm not 100% sure why.

JENNIFER: Yeah.

JASON: It should be installed to user local bin. But ‑‑

JENNIFER: Oh.

JASON: I really don't want to run this from Pseudo. I mean, I'm sure that I can. It just feels like eh. Well ‑‑

JENNIFER: That's okay. We can skip out. Can you just do cowsay?

JASON: Do I have cowsay? No. Do I have anything fun in my terminal at all? Geeze. How does cowsay get installed?

JENNIFER: Probably a similar way.

JASON: Cowsay is NPM installable. We're just gonna do that. I'm gonna NPM install global cowsay. And then ‑‑

JENNIFER: Oh, boo.

JASON: Then we can just cowsay ‑‑ (Laughter)

JENNIFER: Classic.

JASON: It's so silly. So silly. Okay. So, now we have cowsay and we can cowsay that.

JENNIFER: Okay.

JASON: Nyansay exists. Of course it does. Do I just throw this at the bottom?

JENNIFER: You can do [custom.cowsay]

JASON: Okay.

JENNIFER: Then we've got to pass in a couple options. So, one thing it can take is a command. So, in that case, we want to output something from that command, right? So, it's gonna be command ‑‑ just type it out because, again, it's toml. It's the wild, wild west. We don't know what's gonna happen. And then = ‑‑ and then I think you can just put the command in there. I don't remember syntax exactly off the top of my head. So, cowsay HI CHAT. Yeah.

JASON: Okay.

JENNIFER: And then ‑‑ ooh, actually, you know what? Do we need to echo that or not? I can't remember. I think it might just run as is.

JASON: I think it echos by default, but I guess we can ‑‑ if it doesn't work, we'll pipe it to echo or something.

JENNIFER: Okay. Cool. Then I would assume we would just do the output of that at the end of your ‑‑ I don't even know what you call that line. Is there a special word for it?

JASON: I think is it ‑‑ it's the prompt, right?

JENNIFER: Yeah, I guess, like, but the precursor to the prompt, like ‑‑

JASON: Yeah, I'm not 100% sure. Okay. So, does it need to match something for that to work? Like ‑‑ because I think it's ‑‑

JENNIFER: Um ‑‑ so, let's see here. So, um, how did I do mine? Sorry, let me find my file real quick. [ Humming ] use custom format. I don't ‑‑ it's been a while since I did this. Do you still have the docs pulled up? Is there any other step we're missing?

JASON: I do. It looks like files that will be searched in the working directory for the match. When shell command used as a condition to show the module.

JENNIFER: Yeah.

JASON: So, I can just say when = true, right?

JENNIFER: Yes, that's right.

JASON: Then that should just work every time.

JENNIFER: Yes. There we go. Nice! (Laughter)

JASON: It's so silly.

JENNIFER: But here's what I'm confused about is, like, how do you change the order? Look, your battery is still last, right? Well, actually, I can't quite tell.

JASON: I think if we do it like this ‑‑

JENNIFER: Yeah. Maybe that will put a break in for us and look nicer.

JASON: Nope. Definitely does not. That's probably because it needs something that I'm not doing and don't understand. Do I have to, like, double escape this? I bet I do. Bash scripting. Nope. I don't know.

JENNIFER: Sad face.

JASON: Doesn't matter. But the fun part is ‑‑ oh, I wonder if it strips it because it's trying to put it all in the prompt.

JENNIFER: Maybe. We can make it more fun. We can change the color.

JASON: Mm‑hmm.

JENNIFER: So, you can do style =.

JASON: Style =.

JENNIFER: Then I don't know, what do we want our cow to be?

JASON: Clearly, bold pink.

JENNIFER: Okay.

JASON: Nope, I got it wrong. That's not a color, apparently.

JENNIFER: Just pink?

JASON: Is pink not a ‑‑ is pink not an allowed color?

JENNIFER: I don't know.

JASON: I don't think it's an allowed color.

JENNIFER: Sad face.

JASON: Let's try this. We'll do bold red. Okay.

JENNIFER: Red cow. Murder cow!

JASON: Murder cow! So, I mean, but this is ‑‑ what I love about this is, like, we can do something, like, for example, we could do ‑‑ if I could remember how this stuff works ‑‑ how do we ‑‑ we want to match in Bash or the directory name. It would be, like, pwd. And then you pipe that into sed. No, this is wrong. Crap. Anybody remember this stuff off the top of their heads?

JENNIFER: I was in Google what I need in a moment land when it comes to this stuff.

JASON: Ponysay, extra characters. Yeah, I screwed this up. I don't remember exactly how that happens. Ooh, there are config for the prompt. So, let's see what that looks like. Starship config prompt. For some reason, I could not click that link. So, we can ‑‑ we can set the position.

JENNIFER: Oh!

JASON: Right format. Inserts blank line. Oh, okay, I get it. Inserts blank line. Custom format. And then you can kind of throw all the pieces together. Oh, wait, I think I ‑‑ I think I did this at one point and it let me ‑‑ because then you would, like, put in cowsay here.

JENNIFER: Yes. And, I mean, that's ‑‑ okay, so, that's what I have in my file, too. Is, like, I list out all the modules that I care about. So, some of the pre‑existing ones, and then I add in my custom one at the end.

JASON: Yeah. Yeah.

JENNIFER: I think.

JASON: Like that.

JENNIFER: Yup. Yup.

JASON: Cool. Okay.

JENNIFER: Yeah, and then ‑‑

JASON: So, lots of fun stuff in there that we can do. So, yeah, what I was gonna do is I was gonna ‑‑ I was just gonna check if we were in a certain folder and then only add it then, but rather than ‑‑ rather than everybody watching me Google how sed works, we're just gonna move on. So, I mean, I guess all of that to say this is pretty bottomless. You can do anything you want in here. Like because once you get to this stage here, this is any command. So, you could run, like, a custom Bash script and, like, one that I'm thinking of that would be kind of fun is, like, I could ‑‑ I could hit my API to find out when my next meeting is. And, like, put a reminder that when the next meeting is 5 minutes away, it's, like, finish up, you know? Because this is my ‑‑ I get my 10‑minute reminder. 10 minutes is too far away, so I'll just do this one click thing and then I'm 10 minutes late to the meeting. (Laughter)

JENNIFER: I wonder if you could also build a cool, like, pomadorro timer.

JASON: That would be fun. Clearly the sky's the limit. We could go deep. It could be absurd but fun. Yeah, I love this. I love, first of all, we were able to do the custom module that quickly, and I love that, like, the conditional, we could check whatever it was. We could check whether or not I'm live right now. Like, you know, I've already got the script written that decides whether or not we're live. So, we could just throw that in and say, hey, let's show that you're live so you remember not to show any environment variables. Lots of options there.

JENNIFER: Nice.

JASON: But so that's the command line. There's lots that we can do there. I'm gonna ‑‑ I'm gonna disable this one because I think it's gonna be very disruptive otherwise.

JENNIFER: Mm‑hmm.

JASON: Does that work? Can you ‑‑

JENNIFER: I don't remember what the commented out is.

JASON: I think that works for toml.

JENNIFER: Is there a VS Code for toml?

JASON: There is. We should definitely find out. Disabled because the current workspace is not trusted.

JENNIFER: Oh. Mm‑hmm.

JASON: Oh, this is ‑‑ okay. I get this.

JENNIFER: Yup.

JASON: All right. So, now that this is trusted, this should be actually enabled, which means I get my ‑‑

JENNIFER: Oh, look at that. It's so pretty.

JASON: Hey, that's much easier to read. Okay. So, I do ‑‑ I appreciate the security by default, and then I get so confused when things don't work and I'm like, but it's my code. (Laughter)

JENNIFER: I'm 99% sure I'm not accidentally mining Bitcoin.

JASON: Yeah, I'm reasonably sure I didn't do anything to hurt myself here. All right. So, looking at this and knowing that we have, what, like, 25 minutes left ish ‑‑

JENNIFER: Yup.

JASON: What else should we look at? We've got the CLI. We can customize our prompts. We've got our aliases. Tools like NVM, NPM RC.

JENNIFER: Let's stick with our theme of writing our own power ups and jump into VS Code and do some stuff that will save us some keystrokes. Back before the ‑‑ did you use atom in one of your editors.

JASON: Atom was its own editor, wasn't it?

JENNIFER: It was. Was that GitHub's. I sublime ‑‑ and then I went to VS Code, I think.

JASON: Yeah. Then there were a few other ones in there at the same time. Like Panic had transmit client ‑‑ was it called code? Can't remember. There were lots of things. Yeah. Not was, is. Like they still exist. They are good. They work. You can use them if you like them. Continue to use them. This is no shade on any IDE. Use what works for you.

JENNIFER: But I'm a complete spaz. I met Emmet, not atom. Wow, it is a Tuesday, y'all. Okay. So, now that we've established the baselines, you know what I'm talking about with Emmet?

JASON: Yes, I know what you're talking about. If I change to HTML and do this little buddy, then it will auto expand into a full document.

JENNIFER: Who ever memorized this? I sure as hell never did.

JASON: Absolutely not. I have no memory of any of this stuff. I always get the little things wrong. This one, I always forget this. I get a Lighthouse score ding. Wait, what did I do? I got to go add that attribute. Little things like that that save you a bunch of time. Doesn't it do other ones, too?

JENNIFER: It'll do divs. If you do div. And you can type in a style name.

JASON: You can do math. I need three list items. I think you can get really fancy with it, too. It's like UL. Inside of that, I want a list item. I want three of those. Inside of each of those, I want a paragraph with a class of label.

JENNIFER: Bam.

JASON: Tada!

JENNIFER: Magical.

JASON: This is, like ‑‑ oh, that's cool. Like it's so handy.

JENNIFER: Yeah.

JASON: Just really, really powerful stuff.

JENNIFER: Yeah, so, these are really cool.

JASON: Fancy for shorter, too? Ooh. We're not even gonna get to the custom stuff. I'm just gonna learn how Emmet works. Oh, that's super handy. That's wonderful.

JENNIFER: Nice. Yeah. So, you know, a lot of keystrokes that we're saving here by kind of memorizing some basic commands. The other thing, will you do another list item real quick?

JASON: Yes.

JENNIFER: Like another three lists or three items? Yes, I can talk. So, a thing, like, I feel is good to point out, does everybody use multi‑curser for stuff? Especially bulk refactoring?

JASON: You should. Do you, chat? Can we get a "W" in the chat if you're using multi‑curser.

JENNIFER: Are we gonna blow some minds? Okay. Okay.

JASON: So good. So good.

JENNIFER: Just making sure. That's, like, the magic that is easy to miss if you're a new developer that you're like, how are you doing that? Doesn't support it. Losers.

JASON: Ben said imagine I type that "W" on multiple lines as once. Absolutely, yes. Love it.

JENNIFER: Do you ever do this, like, when you're in the code base and command D ‑‑ what, where is my multi‑curser? It's the worst.

JASON: I know. Actually, that's a good point. Once you're in here, now if I hit command D, command D, I can say, you know, we can swap out every instance. And I think you can also ‑‑ there's another shortcut that I forget which is, like, select every instance. Where is it?

JENNIFER: Hmm.

JASON: Next. Select all. So, command, shift, L will give you all of them at once. What? Okay. Clearly that didn't ‑‑ I must have ‑‑ I probably overrode that shortcut because I don't use it very much.

JENNIFER: Nice.

JASON: For me, I just tap command D. That's faster. Because I don't remember it.

JENNIFER: Nice.

JASON: I love this. This is a very handy tip.

JENNIFER: Mm‑hmm.

JASON: Okay. So, we've got our Emmet. We've got our multi‑curser. We are in business here. You're saying we can take this further.

JENNIFER: We can take this so much further. This is a really good base level because you know what you're trying to do. They're repeated patterns over and over and over again. You might be copy/pasting around something like this. Or what you can do is start to build your own custom code snippets to help you repeat code. And a really great use case for this is maybe you're on a team and, you know, there's a web component library that you guys are using, like, you could build custom snippets to implement these different elements in your code. And there's not only that, but then you can manipulate the curser. And so if somebody runs a command to put a snippet of code in, you can manipulate where their curser is to save them even more time to start automatically filling out those dynamic pieces of data that you care about.

JASON: Absolutely.

JENNIFER: So there's, you know, just the code you want to do, but then that speed of giving somebody the ability to edit that snippet they've dealt with that can give you a lot of power and boost for anything that your team is working on. So...

JASON: Yeah, okay. So, let's make one. What should my first move be?

JENNIFER: I think we have to create a preferences file. It's been a while. And then we can kind of look through things. So I think in VS Code, it's go to preference ‑‑

JASON: Okay, so, I'm gonna show everybody my favorite VS Code, which is command, shift, P. And this let's you open up, like, a general search box. So, snippets. Configure User Snippets. That seems right. How about that?

JENNIFER: That's what we want, yes.

JASON: I'm going to Configure User Snippets. And then I'm going to do a New Snippets. What should this one do?

JENNIFER: Awesome this. Awesome things.

JASON: We'll do awesomeness.

JENNIFER: Cool.

JASON: And so now ‑‑

JENNIFER: Yeah. So, let's kind of look through this because you're going to be creating an object that's got all these, you know, different items ‑‑ wow, I can't even speak. Attributes. And so this is gonna kind of define what's going on. So, if we look at this example starting on line 9, what you're seeing there, the print to console is kind of the text of what this snippet is gonna do. Then inside those brackets, we've got different things. So, the first one is scope. So, the scope is gonna apply based on the kind of file that you care about. So, if you've got a code snippet that is an HTML, you only want that to be available in HTML files. So, you can give ‑‑ whatever language you're dealing with, that's gonna be the scope of that code snippet. Next up, you've got prefix. So, that's just gonna be a ‑‑ I can't remember if it's a ‑‑ the prefix of, like, what goes in front of it or if it's for better organizing your code snippets. It's that part I'm completely blanking on.

JASON: I think prefix, that's what will expand, right?

JENNIFER: Yes, that's right.

JASON: A shortcut of four Vs. A thing about snippet I have found out the hard way is if that if your snippets are just words, it gets very confusing. So, typically, your snippets should be, like, truncated words.

JENNIFER: Yup.

JASON: Or, like, do this thing. Something like that. As opposed to just like this. Because if you do this ‑‑

JENNIFER: Yeah.

JASON: ‑‑ you will write this sentence somewhere and it'll explode and you'll be like what just happened?

JENNIFER: Let's call our prefix fake WC, like, fake web component library.

JASON: Okay.

JENNIFER: So, I know, I want to create a custom snippet that maybe is gonna represent a date picker and it's automatically gonna populate everything that I care about. So, that's what we've got there. So, when you go to start using this, you type fake WC, and you get presented with your list of snippet options.

JASON: Okay.

JENNIFER: Cool. All right. So, the body is what is actually going to be rendered by that custom snippet. And so I don't know if we want to, like, copy and paste some code from, like, a custom web component library or something or just make our own. Maybe it's a div with an input and a label in it or something. I don't know.

JASON: Maybe I can find whatever the basic example is. Custom elements.

JENNIFER: Sure. I'm coming from Angular land. I'm thinking of Angular material where I might copy something over and it has different attributes that I need to fill out or something like that.

JASON: Ooh, there's a lot here. How about ‑‑ how about we just grab one of these?

JENNIFER: Yeah, that looks like a great example.

JASON: This is a great example. So, we're gonna throw this in here. But I want to break it across lines.

JENNIFER: Yup.

JASON: So, we're going to ‑‑

JENNIFER: So, these differ from editor to editor. Yeah, so, you're gonna have to do the string quotes for VS Code and then a comma in between. Yup.

JASON: Yeah. And so what I'm doing here is ‑‑ I don't like ‑‑ okay. Let's do ‑‑ let's do one of these. I'm gonna use this multi‑curser and escape those. And then I can do this here. And then take that down. And there we go. We've got a thingy. But I kind of feel like ‑‑ so, this is ‑‑ I don't want to have to go in and, like, delete all this stuff.

JENNIFER: Well, so, here's where we're gonna get exciting. You remember that tab completion that we care about?

JASON: Mm‑hmm.

JENNIFER: So, what we can do is we can create ‑‑ they're called tab spots. So, what that means is we can plug in a variable there. So, if I activate this code snippet, my curser after that code snippet is created is gonna go to that first tab spot. And then I hit tab and it will go to the next tab spot, if there is one. Two pieces, reusing this pop‑up component over and over and over again. We know we're going to update the image and we know we're going to update the data text. That's where we want to put our tab spots. The input is dollar sign 1 and dollar sign 2.

JASON: Oh, okay.

JENNIFER: Right. You feeling the power?

JASON: I'm feeling the power. I'm feeling very powerful here.

JENNIFER: Yeah, exactly.

JASON: If we save that ‑‑ it does not like it.

JENNIFER: Unexpected comma.

JASON: Expected comma? You have a comma. Oh, I didn't put my closing ‑‑

JENNIFER: Oh, end quote.

JASON: There we go.

JENNIFER: Sweet.

JASON: Now we've got quotes in the right places. Tab stops in the right places. And this is ‑‑ this is useable now?

JENNIFER: Mm‑hmm.

JASON: Okay. So, if I go back in here ‑‑

JENNIFER: Yup.

JASON: And I just go fake WC. Look, look, look, it did it.

JENNIFER: Magic.

JASON: Pa‑dow.

JENNIFER: Look at your curser.

JASON: .jpeg, and I tabbed, and now it's like wowowowow. That's pretty dang powerful that it works. So, as an example, when I work on my own site, I have, like, a React component. I use MDX to run my blog posts. I have a React component that has the support for image attribution, alt text, captions, a few controls whether there is an image around the border or right aligned. It's kind of a pain to remember all that stuff, but I have a snippet that will do all that. Another really good example is every time I do an episode of Learn With Jason ‑‑ usually ‑‑ I don't think this one is gonna have a repo, but usually I have a repo. So, I am able to, like, I need to create a ReadMe. I have a ReadMe template ‑‑ whoops. If I set up a new file and we make this into MarkDown and I do a snippet, I have a ReadMe. And it just goes in and let's me, like, fill out my episode slug. Then it let's me fill out the demo on Netlify. The repo on GitHub. And the descriptions. There is also a cool thing here, the demo and the episode and GitHub slug, I use those in multiple places. So, if you use the same tab stop, it fills out all of the tab stops as once. So, you get, like, multi‑curser in your snippets. So, this is really, really helpful stuff.

JENNIFER: So, kind of a hidden benefit that I really like, especially if you're working in a team approach. So, let's keep go with this web component instance. Maybe I'm a new developer and I don't know if something is a web component coming in from someplace else or something built by someone in my team. You can have this built‑in documentation just through creating code snippets. If I know, okay, here's the prefix for my web component library, but maybe we have a prefix for our app name that is internally known at the company, I can use those prefixes and see everything that is available to me. Instead of having to pop open a ReadMe file, we start dumping more code snippets in here and commit this for the code base for everybody to use. I start type Mike prefix and I see everything that is available to me.

JASON: And this is, like, one of those ‑‑ so, I saw somebody put up a poll on Twitter the other day that was like, what's the biggest benefit of Typescript? Right? The benefit that came back was auto complete. There are lots of benefits to Typescript, but I think one of the biggest ones is auto complete. If we think about how this goes even further than that. So, I'm imagining now we have our component library, and that component library is, you know, it's web components. It's React components. It's Vue components. Whatever you want. But you have that component library and you set it up as code snippets. Each of those code snippets is Typescript so that when you use ‑‑ you can figure out which component you want by starting to type a snippet. And then once you've injected it, you have auto complete, but all of that auto complete has ‑‑ all of the tab stops have auto complete because it's Typescript code. So, you basically get to the point where when you're using the component library, it's more like fill in the blank than it is having to remember or Google or anything. You just kind of like, oh, yeah, snippet. Here's the image. Images always have one of these three options. That's what's in the Typescript, so I choose one of those. It's so dang cool. It's so powerful.

JENNIFER: Yeah, so, that's how you can boost your team's productivity with code snippets.

JASON: Mm‑hmm.

JENNIFER: This is, you know, a very reasonable approach. You definitely have to make sure you're maintaining, like, as new attributes get added, that kind of thing, that those are kept in sync. But, again, this is a really great way to, you know, get your teammates to love you because you're saving them keystrokes, but also make that information that much more easy and accessible for everybody to know what's available for your code base. So...

JASON: Yes. It's so dang cool. Where is this ‑‑ I wonder where this went.

JENNIFER: I think ‑‑

JASON: Because I ‑‑

JENNIFER: Where does that get saved? Is it under, like, the VS Code folder?

JASON: I'm not sure.

JENNIFER: In your project.

JASON: That's a great question.

JENNIFER: I think you can do it at a global level or I think you can do it at a project level.

JASON: It saved in ‑‑ snippets, user ‑‑

JENNIFER: Okay. So that was a global level. I'm 99% sure we can do this at a project level, too.

JASON: Yeah, I think you are right. So, if we do, like, configure user snippets, right? And I think we can also do, like, project ‑‑

JENNIFER: Well, I think there was another option under user snippets.

JASON: There was?

JENNIFER: I thought you could either do global or ‑‑

JASON: Oh, global snippets file.

JENNIFER: Or whatever this folder is. Was that available at the very top? I don't even know where we are.

JASON: It only wants global, but that's probably because I don't have a snippets folder in here.

JENNIFER: Mm.

JASON: Let's find out. VS Code project snippets. Project snippets. That's a plug‑in.

JENNIFER: I really thought it just got saved under the VS Code folder.

JASON: Only relevant snippets are suggested. So, you can ‑‑ you can ‑‑ project snippet. Global snippet. Scope to your project. Configure user snippets dropdown menu located at the VS Code. Hmm. Yeah, I'm not 100% sure. There's probably a way to do it. I feel like there's a lot of extensions and things in VS Code to make this stuff really easy.

JENNIFER: Yeah.

JASON: You know, if you want to solve a problem in VS Code, you can. And if you can't, there is absolutely a way that you can just customize VS Code to do that thing for you. But I think in ‑‑ you know what I think it is? Here's why I think VS Code has taken such a, like, a strong grip on the developer community. I feel like it has all of the ‑‑ well, not all of. It has much of the kind of customizability and extensibility that people love about Vim but the onramp is shallower. You can enable Vim Mode in VS Code. You can build custom extensions. You can manipulate code to change the way the thing works. It's such a versatile tool and I think that's one of the reasons we've seen VS Code rise to the popularity that it has.

JENNIFER: Yup. That being said, if you're in Atom Or Sublime, you can write snippets in other IDEs. I do have a blog post on how to do that. Depending the different thing you're working in. Sorry. None for Vim. You don't get any cool snippets.

JASON: I think with Vim, there is a way to do it. I feel like I've seen somebody do ‑‑ definitely Emmet. And I'm almost positive Custom Vim. But, yeah, that's an episode for another day. I think at some point I should have somebody come on and teach me Vim. I got the book once and I spent, like, a week trying to use only Vim, and I think I managed to write, like, 50 lines of code. I was like, this is not gonna be sustainable.

JENNIFER: Oof. Brutal.

JASON: Oh, this is cool. Nicky just linked in the chat to something called "snippet generator," which I think will do this for us.

JENNIFER: Um yes. But I think sometimes it can be finicky. But it's helpful if you're dealing with, like, trying to figure out line breaks properly.

JASON: Dang. That's pretty dang cool, though. Oh, it does it for all of them.

JENNIFER: Mm‑hmm.

JASON: That is powerful stuff.

JENNIFER: I feel like I've used this before and there was something buggy with it. It was a couple of years ago. I don't remember what.

JASON: Even as just a starting point, I'm pretty happy with that. It helps with the line breaks, right? That's nice to ‑‑ yeah, it gets the annoying, oh, this is an array part out of it. I agree with that. That's probably my least favorite things about snippets is you can't just put whatever in there.

JENNIFER: Mm‑hmm.

JASON: As much as I hate to admit it, I think this is one place toml would be a better fit. You can do multi‑line responses. All right, Tom, I take it all back. I never thought I was gonna suggest toml ever. (Laughter) Okay. So, I mean, yeah, this is a great tool. Make sure this shows up in the show notes.

JENNIFER: Cool.

JASON: Okay. We've got, like, oh, what's up, Ali? Welcome, everybody. We're actually just kind of winding down here. So, we'll be ‑‑ we'll be finding somebody to raid in 8 minutes. So, everybody, you know, strap in. We're gonna do kind of a recap. So, first, what we did was we went through all of, like, how to configure your terminal. So, we looked at Z Shell. We looked at aliases like this one that I have that does a git log with some better formatting so it's more compact. We looked at editing our interface through Starship to get a better prompt so that I get this really nice, like, when I go into my folders and I look at a project, it shows me, like, the GitHub repo link. It shows me the branch that I'm on. What version of the package it is. What Node version I'm using. That's all through Starship. We did some customization. Like this is the battery level. We did some customization that I turned off where we were able to use cowsay.

JENNIFER: No ponysay for Jason.

JASON: Because I broke Brew on my computer. Tragedy. Jennifer, what else did we do? What else am I not covering here?

JENNIFER: We talked about Nerd Fonts. Some of those nice iconography in our command lines.

JASON: All working here. And then we jumped into VS Code and we looked at, like, Emmet, which allows you to do things like this. And it just works. Like pretty amazing stuff.

JENNIFER: We talked about multi‑curser.

JASON: We talked about multi‑curser so that we can do things like editing all of these all at once. And then we also built some custom snippets by getting into VS Code's custom snippets syntax and put one together that's got, here, tab stops. So, that if we want to use this, we can start typing ‑‑ I'll go down here and do another one. Fake WC. It auto completes for us. We can hit enter and then we can just start typing things and say, you know, let me go to image yay. Did you see that I was also ‑‑ I'm also able to, like, tab back and forth. It's very cool stuff. I keep trying to save this file that I'm not gonna keep. (Laughter)

JENNIFER: Rude.

JASON: But so this is a, like, I feel like these are the little things that we just accumulate, right? And I think that for a lot of developers, I spent a huge portion of my career not really knowing that this stuff was possible because I didn't even know it was a think you could Google or go after, right? I just kind of thought, well, you just get faster by using the tools more and not by optimizing the tools. So, this has been really, really interesting. I feel like we barely scratched the surface. So, what else ‑‑ I know we don't have time to get into it, but what else do you find yourself optimizing or recommending that your team optimizes to help them speed up?

JENNIFER: I mean, it really depends on their problems. I do one‑on‑ones with my teams. They're kind of telling me about their daily workflow and things you go into. Sometimes you're just so in the rut of it you don't even realize, oh, I could save myself some work by doing this. It really depends what your day‑to‑day struggle is. My example was being trolled on an internal client registry and trying to run NPM Install on something else. I had the idea to jump into Starship and write a custom module that would output in my command line whatever NPM registry I was on, whatever profile I would set. So, you know, just looking at the problems that you're having or the doh moments you have throughout your work day and figuring out, okay, how can I use my tooling to make sure I have less time dohing and more time productive, writing code, having good conversations with people.

JASON: Absolutely. I'm trying to figure out what else I've used. I feel like the big ones are what are the things I truly waste a lot of time doing by having to type them out or Google them. Then making and remembering the aliases for them.

JENNIFER: Mm‑hmm.

JASON: And also just, like, look around and see if the thing that you use every day has tools to make it easier. Like the GitHub CLI is unbelievably helpful. If you remember the few commands that you need. So, like, this is one that I use every single day. It's so good. I live in this tool because I'm always creating new repos. I always need to check out somebody's PR. I always need to look at an issue. And this lets you do all of that right from the command line. There's also, like, I work with Netlify sites all day. So, the Netlify CLI, like, it's gonna sort the ‑‑ it pulls down environment variables. It runs local development. It lets me set up an Ngrok tunnel so I can share my local instance with you for live debugging. All these things you gotta do, got to sync environments. You can do it manually, but it's so much faster if you find a tool that takes care of it for you.

JENNIFER: The other thing about CLIs. I coach a lot of new developers new to the Angular System. If you're using NX for mono repos, which will wrap other things.

JASON: NS is so good.

JENNIFER: Do you know they have VS Code plug‑ins? So, if people are new to it and they don't remember the commands, they've got a really great VS Code plug‑in, oh, you want to generate a module. You want to generate a library. Where should that go?

JASON: I love it.

JENNIFER: Yeah, CLI. If you haven't gotten comfortable. You don't know all the commands. There are often plug‑in routes you can go as well.

JASON: That's so good. All right. With that, we are out of time. So, let me send everybody back to your Twitter. Make sure you go and get into that. Give Jennifer a follow. Also, the show had live captions all day. This show and every show does that. It's on the homepage of the site. That's provided by White Coat Captioning. We've had Jordan hanging out with us today. So, thank you very much. That's made possible by the support of our sponsors, Netlify, Fauna and Auth0, all kicking in to make this show more accessible to more people. And while you're checking out the site, make sure you go and check out the schedule because we have just ridiculous stuff coming up this week. We've got tomorrow two episodes. We've got Nathaniel Okenwa and Ben Vinegar coming on to help us build out the app we've been building for Jamstack Conf. If you ever want to send an order confirmation or any other kind of email, we're gonna show how you to do that. Ben is going to show us how to do error tracking to service any client‑side errors when they happen so we don't have to recreate. We've got Todd libby coming to talk about color contrast and accessible. Aisha to talk about Jamstack sites on New Relic. That's just this week. It's a marathon, y'all. Hit this add on Google calendar to get all the times added to your calendar to make sure you don't miss an episode. Make sure to follow on Twitch. You can subscribe, helps me pay for captioning. Jennifer, thanks so much for hanging out today. Any parting words for everyone?

JENNIFER: This was super fun. I want to steal someone's tweet. Be the senior developer you needed when you were a junior developer.

JASON: I love it so much. All right, y'all, that's it for this week. Jennifer, thank you again. Chat, stay tuned, we're gonna go find somebody to raid. We will see you tomorrow.