Optimizing Your Dev Environment for this Course

Setting up the project

Get the project source code below, and follow along with the lesson material.

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Lesson Transcript

[00:00 - 00:17] Let's quickly run through the tools I'll be using for this course. I'm completely aware that you may be following along with the built-in IDE, but in case you want to follow along with your own IDE locally or you're just curious about what I'm using, then this video is for you.
[00:18 - 00:33] As you can guess by the colour of my cursor, I'm on a Mac machine and I'm not going to go through all the specs, but I will say I'm running Sonoma, which is MacOS version 14.2.1. This is currently the latest version at the time of recording.
[00:34 - 00:47] I'm going to be using a code editor called VS Code or Visual Studio Code, and I 'm going to be using the default dark theme which is called default dark modern. It's similar to what you can see in this picture over here.
[00:48 - 00:58] I'll also be using a customised version of something called Zen mode which is going to remove all the distractions from my screen. Let's go ahead and see Zen mode in action.
[00:59 - 01:13] So this is VS Code and as you can see on the left hand side it's got icons and on the bottom it also has a bunch of text. If I open the command panel by pressing shift command P and typing in Zen, you can see it says view toggle Zen mode.
[01:14 - 01:24] If I hit enter then the icons on the left and the text at the bottom have all disappeared. This is going to help you focus on the code that I'm writing.
[01:25 - 01:35] For VS Code I'm going to be using a font called Fira or Firera code. This is the GitHub page for that font and you can see that it supports a lot of different colours and ligatures.
[01:36 - 01:46] Font ligatures are a way to combine multiple characters into a single character to make it easier to read, well arguably easier to read. Let me show you an example.
[01:47 - 01:59] With this code here you'll notice that there are three lines here which represent triple equals and also for this arrow function you'll see that there's an equal and a greater than sign. That have kind of emerged together.
[02:00 - 02:10] This is what ligatures are doing. We can toggle them on or off by going to the command panel and typing in settings, go into settings JSON and doing a search for ligatures.
[02:11 - 02:25] It's online 71 and we can change it from true to false. If I save this file and go back to my code you can see that online 1, the triple equals is more obvious and online 2, the equals and greater than sign is also a bit more obvious.
[02:26 - 02:42] For this course I'm going to have ligatures turned on but for your code in the built-in IDE or in your own code editor you may not have ligatures turned on which is completely fine. Let's go through some of the VS Code extensions that I'm going to be using for this course.
[02:43 - 02:55] I have a lot of extensions installed but for this course there are three that I 'd recommend. The first one is arrow lens and this is useful for showing errors in line instead of in the terminal.
[02:56 - 03:09] The second is prettier and this is one of the most popular extensions out there for formatting code. For this course I'm going to enable formatting on save so that my code is formatted automatically when I save a file.
[03:10 - 03:21] In the final extension that I'd recommend is called code spell checker. This is something that checks the spelling of your code and adds is quickly blue line under a word if it thinks the spelling is incorrect.
[03:22 - 03:31] This particular extension is actually more important than you may think. Of course I have a few other extensions installed but they're not needed for this course.
[03:32 - 03:43] Let's talk about the terminal that I'll be using for this course. This course I'll be using a terminal called warp which is a rust based terminal that's really fast and has a lot of features.
[03:44 - 03:50] Most of them around AI. I'll be using it with a theme called spaceship instead of the default warp theme.
[03:51 - 04:04] Spaceship is a very useful theme for many reasons. If we scroll down on the site you can see an example of what it looks like and right of the back you can see it shows the node version in green and the version of the package as well.
[04:05 - 04:12] One thing to mention is that for this course I'll be using bunn instead of npm. It's much faster and I personally prefer using it.
[04:13 - 04:19] But of course you can use whatever JS runtime or package manager that you want. Cool.
[04:20 - 04:28] Now that we've gone through all the tools that I'll be using for this course let's go ahead and actually start building a performance data fetching solution for React.

[00:00 - 00:17] Let's quickly run through the tools I'll be using for this course. I'm completely aware that you may be following along with the built-in IDE, but in case you want to follow along with your own IDE locally or you're just curious about what I'm using, then this video is for you.

[00:18 - 00:33] As you can guess by the colour of my cursor, I'm on a Mac machine and I'm not going to go through all the specs, but I will say I'm running Sonoma, which is MacOS version 14.2.1. This is currently the latest version at the time of recording.

[00:34 - 00:47] I'm going to be using a code editor called VS Code or Visual Studio Code, and I 'm going to be using the default dark theme which is called default dark modern. It's similar to what you can see in this picture over here.

[00:48 - 00:58] I'll also be using a customised version of something called Zen mode which is going to remove all the distractions from my screen. Let's go ahead and see Zen mode in action.

[00:59 - 01:13] So this is VS Code and as you can see on the left hand side it's got icons and on the bottom it also has a bunch of text. If I open the command panel by pressing shift command P and typing in Zen, you can see it says view toggle Zen mode.

[01:14 - 01:24] If I hit enter then the icons on the left and the text at the bottom have all disappeared. This is going to help you focus on the code that I'm writing.

[01:25 - 01:35] For VS Code I'm going to be using a font called Fira or Firera code. This is the GitHub page for that font and you can see that it supports a lot of different colours and ligatures.

[01:36 - 01:46] Font ligatures are a way to combine multiple characters into a single character to make it easier to read, well arguably easier to read. Let me show you an example.

[01:47 - 01:59] With this code here you'll notice that there are three lines here which represent triple equals and also for this arrow function you'll see that there's an equal and a greater than sign. That have kind of emerged together.

[02:00 - 02:10] This is what ligatures are doing. We can toggle them on or off by going to the command panel and typing in settings, go into settings JSON and doing a search for ligatures.

[02:11 - 02:25] It's online 71 and we can change it from true to false. If I save this file and go back to my code you can see that online 1, the triple equals is more obvious and online 2, the equals and greater than sign is also a bit more obvious.

[02:26 - 02:42] For this course I'm going to have ligatures turned on but for your code in the built-in IDE or in your own code editor you may not have ligatures turned on which is completely fine. Let's go through some of the VS Code extensions that I'm going to be using for this course.

[02:43 - 02:55] I have a lot of extensions installed but for this course there are three that I 'd recommend. The first one is arrow lens and this is useful for showing errors in line instead of in the terminal.

[02:56 - 03:09] The second is prettier and this is one of the most popular extensions out there for formatting code. For this course I'm going to enable formatting on save so that my code is formatted automatically when I save a file.

[03:10 - 03:21] In the final extension that I'd recommend is called code spell checker. This is something that checks the spelling of your code and adds is quickly blue line under a word if it thinks the spelling is incorrect.

[03:22 - 03:31] This particular extension is actually more important than you may think. Of course I have a few other extensions installed but they're not needed for this course.

[03:32 - 03:43] Let's talk about the terminal that I'll be using for this course. This course I'll be using a terminal called warp which is a rust based terminal that's really fast and has a lot of features.

[03:44 - 03:50] Most of them around AI. I'll be using it with a theme called spaceship instead of the default warp theme.

[03:51 - 04:04] Spaceship is a very useful theme for many reasons. If we scroll down on the site you can see an example of what it looks like and right of the back you can see it shows the node version in green and the version of the package as well.

[04:05 - 04:12] One thing to mention is that for this course I'll be using bunn instead of npm. It's much faster and I personally prefer using it.

[04:13 - 04:19] But of course you can use whatever JS runtime or package manager that you want. Cool.

[04:20 - 04:28] Now that we've gone through all the tools that I'll be using for this course let's go ahead and actually start building a performance data fetching solution for React.

LessonEditor