💻✨ - Setting up a Mac for Web Development - 2020 - Homebrew / Terminal / git / Code Editor / Node.js

[Music] hello friends welcome to coding garden with CJ welcome to a special supporters only stream they're just a few of you watching and that's a good thing so today I'm going to be setting up my brand new MacBook from scratch the only thing I've done is wiped wiped it totally what do you call it it's totally fresh totally fresh MacBook and I'm gonna be setting everything up yeah so let's talk about the specs so this is a 2015 mid 2015 MacBook Pro that's got 16 gigs of RAM 2.5 gigahertz processor um it does have a 512 gigabyte hard drive and it has a dedicated AMD Radeon graphics card so this is this isn't upgrade so it's the same model technically is my current macbook but it is an upgrade it is it has a better graphics card a faster processor a bigger hard drive and it has way less battery cycle counts I can show that in here so my old my current MacBook has about like almost 800 battery cycle counts and if I look at the info know about this Mac why do they get a 5-year old one because it's still a really good neck book and it has a dedicated HDMI port I don't have to use any converters it has dedicated USB ports I don't have to use converters and this is one of the last Mac books of this kind that has a dedicated HDMI or dedicated USB I really don't like the USBC conversion stuff but let's look at power and we can see that this MacBook has 190 cycle counts that is way way less than this MacBook which has let's see 700 790 a battery cycle count yes so why Apple MacBooks hello bulldog welcome to the show so for one by default the terminal here is I can use it just like I would on a Linux system that's one of the things I really like about it I can use all the commands I know it at least cuz I'm still on Mojave I'm actually not going I'm out all the old stuff it's like I don't want to move on but I have I have I didn't actually install Catalina I'm gonna continue using a Mojave at least for a little bit but I like the fact that the terminal is UNIX based the Mac's are big are based off of FreeBSD so you can use all your Linux commands that you know I have had this MacBook for five years this one here and I have not had a single problem I've never had applicant like applications freeze it hardly ever has to spin up the fans it is just a really really solid machine and I can't say the same thing about Windows laptops that I've owned even if I've installed Linux on those Windows laptops the screen jitters and things get some things freeze but for whatever reason this fingers really good about not freezing up or anything like that the other thing is as a developer if you want to create I Oh s applications a Mac is pretty much the only place that you can do that there are services that provide like build systems where you can like build in the cloud but if you want to write iOS apps and you like want to debug them you can install Xcode on a Mac and that's that's all you need you don't need to really really go through any extra steps you've got that all the other thing about this being a UNIX based system is a lot of tools that are built for Linux will run on a Mac just fine so I like that about it and I generally like the user interface of a Mac and I will say all of that is my opinion and no way at all fact that's just what I prefer and I've been using a MacBook for like over five years now and I and I really really prefer it cool a UNIX machine I know this yeah that's from a drastic park code well how they rules 10.14 six here here - oh yeah and that's the other thing if you if you upgrade to Catalina with some of the older Mac apps that are 32-bit don't aren't supported so yeah that's the thing I really like just like about Apple that they lock everything into their ecosystem it's absolutely true but this is the world that we live in this this is the time line that we're on and I I have come to terms with it so that's why I use a macbook yeah I will say that like I mean Linux is cool and you can like if I had to choose between Windows and Mac Windows Mac and Linux and I didn't have actually if I did you should be creating windows in Linux I would choose Linux probably like an Ubuntu system because that's just what I'm used to but I like the fact that a Mac is kind of Linux see I will say that yeah and so and if you need Windows on a Mac you can use parallels you could use VirtualBox you could also dual boot it I think I think that's the thing and so it's because of this right here so because Apple has locked everything down to their ecosystem you use this system and then you can technically use every other system because I could dual boot Linux I mean I don't know if I can I used I used to when I was in in college actually try booted I had a one of the old black MacBook so if you ever saw one of those black MacBook let's see if we can find a picture I really really like this thing this they Mac Apple he literally used to make him a back book that was black but I had that thing and I do I try booted it I had I could boot into Windows I could boot into Mac and I could boot into Ubuntu Linux and so that was great and I use that as my school computer for a very long time black black book but for that for that very reason like Apple has locked things down so that it basically if you want to use a Mac you have to have a Mac but you can use all the other things too because those things are in lockdown so yeah that's the thing all right that was a great first question we can chop that into a little video because people always ask like why well and people often ask why do web developers use Mac books the other thing is like the creative apps like all of the Adobe suite and music production tools run really well on a Mac I used some music production tools and I use Photoshop and illustrator and sometimes Adobe Premiere Pro and that worked really well on a Mac I know that it runs on Windows too but it just runs on a Mac I don't think it ever used a Mac or Linux machine and nothing else gaming just isn't there yeah and I guess that's the thing I don't play many games so that's one thing that I don't have to worry about but you're absolutely right for those of you that like to play games you probably need a Windows because even the support really isn't on Linux either yeah okay let's get into this these are the steps we're going to go through we're gonna set up homebrew we're gonna set up my terminal and bash then and get into productivity tools all of my specific OS X settings that I prefer and install my preferred web browser which is Chrome the last time I think that you had me well people suggested that I install Firefox but I ended up running into issues and so I'm still back on Chrome yet our node environment set up get BS code set up and then any extra things like a break timer and flux for making sure the screen removes blue light at night and stuff like that here are some commands that we're gonna run and this is a list of all the vs code extensions that I use and there might be more but I can I can get a backup before we get into that I think we're gonna start by running this command so if you're on a MacBook there are a lot of developer tools that that you need or like developer build things that you need and that comes with the Mac by running this command Xcode select - - install I believe that's going to give you like the C++ compiler and all the things that build systems will need on behind the scenes so we can just run that and we're gonna let this run in the background we agree to their license agreement write it real fast click agree and so we'll just let that run cool so this finished Xcode select and that's really all we needed to do but now other things like npm installs will potentially work that required some of that the the behind things behind the scenes things to work so we got that going okay so this next command is brew so brew is a tool a package manager basically for mac OS so on something like ubuntu linux you have apt and you can install things with apt-get and you basically can install linux applications from a specific repository a mac or macs don't have an official repository like that so homebrew is kind of the replacement for that so we can install homebrew by running this command and then any packages that we need later on like if we want to upgrade our bash script or not our bash script our our bash shell because right now I'm using bash but typically the Mac's come with an older version of bash but we can use homebrew to update it we can use homebrew to install the latest version of get all of these like command line utilities that you typically need we can use homebrew to install the latest versions and what I'll show in a second is they're also these things called casks and so casks are actual applications for for Mac or you can run on your computer that you can get without going through the Apple App Store so things like I term 2 which is my preferred terminal for Mac things like spectacle which is my window manager alfrid which is my quick launch tool that I use instead of downloading those apps or having to go through the App Store I can just use brew to install those so we're gonna run this and that will set up homebrew so that way we can start installing all these other apps that I need can I make some type of script that runs all your installs yes and so basically it is this like technically I could just I could just run this and it should work because it's going to it's gonna run all these commands the thing is I would have probably had to click like YES on the Xcode install there probably some command-line arguments I could pass in to make these silent installs so I don't actually have to monitor them but this being a stream I kind of want to explain what each command does but for the most part yeah you could you could just run all these commands and get the get the thing up and going ok so we have a broom now that brew is installed we should be able to do brew update and that's going to update our sources and make sure that anything that we install is coming from the latest thing and we're already up to date great and so I think Dan just asked about I term yeah so that's our next step so what I was using right here is the terminal that's built into a Mac and you could use that but there is this awesome awesome tool called I term which is a Mac OS terminal replacement it has a lot of cool features like you can get notifications when your commands finished running there are a lot of features just built into the terminal itself like being able to click links like you can see here that this is a link but I can't really do anything to click it but in I turn you can actually click links that are in your terminal it has a nicer I don't know if it's nicer but a cooler looking interface it's like a solid solid window UI and so I prefer I term there's a lot of other benefits as well but I do prefer I term so we're gonna get that going and we're gonna use brew casks for that so now that I have brew installed I can do brew cask install I turned to and that is going to install I term to from homebrew so I mean if you look at I turn his website I technically could have clicked download I could have dragged it into my Applications folder but this should automatically install it and then we can start using I term instead of the built in terminal here cool so now we have I term too and I'm going to close this terminal and we're gonna bring up I term to instead we want to open this because we did download it ourselves and would you look at that so we can go in specify some settings and we're gonna do that next all right so I've just installed I term and I want to customize it so let's go into the I term settings I believe I can just do command comma and that will bring up the settings I can go into appearance and change it first for theme I like to use I believe let's see dark let's see what that does for us or minimal minimal might be I yeah I think this is the one so you'll see that now the window chrome has gone it's this like nice solid black stuff I really like that so we're gonna go with minimal let's see I like to set up my profile to have like a fairly large font size font size especially because I'm always presenting and showing my my terminal so in in the default profile we can go in and set up our our text so I'm gonna set this to be like probably 24 now we're gonna go even bigger 36 yeah 36 and I don't have a window manager installed yet so it's a little hard to resize windows so there's that we can look at colors they have different themes let's see it color presets though I like to leave just the default preset and then change my foreground color to be just this solid solid lime-green so well not blue zero red 0 green all green no blue look at that lime green that's great and so that's great just by default in a second I'll set up my my Bosch settings in my batch profile and I'll get even more customisation but that's pretty much it all I need for that the other thing is for I believe it's under editing so if we go under keys and then right here under presets we want to choose natural text editing because otherwise we'll weird things weapons so like a on a Mac you can use alt to jump over words so if you hold down alt or option in the arrow keys that will actually jump over the the items in the text itself you can use that keyboard shortcut anywhere but right now when I when I press alt arrow I'm getting that that weird input so if I change the preset to be natural text editing now when I do alt it jumps over words and I can do command to jump to the end and command to jump to the beginning so natural text editing is what we want and I believe that's it sometimes I like to set up a badge like I can put emojis in here so let's do like the seedling like that and now that always shows up in my terminal so that's nice and the last thing is reuse previous sessions directory so when you open a new tab if you don't choose that option it's always going to default to your home folder so if I print my working directory I'm currently in my home folder but let's say I go into like documents there's not really any anything in there but if I open a new tab most of the time I want my terminal to be in the exact same folder that it's in in this window so now that I've enabled reuse previous sessions directory it's going to do that as well so that's it for the basic I term settings I'm gonna set up my bash profile which is not specific to I term this is more specific to configuring your your shell on on a Mac okay so we have I term installed now we're gonna install the latest version of now if you're using the OS X Catalina so right now I'm actually still on Mojave which is what I prefer I'll prop I might upgrade to Catalina eventually but right now I prefer Mojave and on Mojave and every Mac OS before it bash which is the shell that we're using right now is the default terminal default shell but if you're on Catalina than dish which I don't know do we have by default yeah I'm actually have it by default so as this is another type of show but that is actually the default one instead of bash on the latest on the latest Mac's but I prefer bash I've always been I've always used bash bash is installed on all the servers that I manage so I just prefer to stick with bash and right now if we do bash version no not that - yeah so right now we're on version 3.2 but we can use brew to update to the most recent version so I'm gonna run brew install bash and that will get the most recent version and then I can set this installed version of bash to be my default shell how can I tell which show I'm running thanks what show am i running echo exclamation write shell bin bash okay so notice that the I mean the one that gets resolved this one that's installed here that's the one I want to use but I'm technically using the default one which is in bin bash yeah I'm on a Mac oh there we go Vincent had an echo show so what I need to do is I need to set it so that this is the default shell instead of the the built-in one okay ch SH - OH so this will allow us to change our default shell I'm just gonna go with that and say this is what I want so I'm gonna change shell to be user local bin and bash OH - s and then the version of bash that I want okay so this is going to change my default shell from the built-in one which is an older version to the version 5 which I installed keep this going there we go non-standard show and if I open a new tab it didn't work I know there's a photo there's a file that I can edit to change my shells as well there should be a better way Linux changed show I know there's like a shell file that you can update apple bsd there we go ET c / shells one thing I can do is yeah so this is the list of acceptable shells and I can just put what was it user local use your local bin bash I'll put that at the top what I just want - yes why won't it work there we go that worked okay so I think I think it's a two-step process so first it had to be in the EDC slash shells file so that we know that it is an accepted shell that we can use so we edited EGC slash shells here we put it at the top so it's an acceptable show and then we use the change shell command to tell it to use that and now it is our default shell so when I open a new tab if I echo exclamation mark shell we see that its user local bin bash very good very good why do I want cal sayin fortunes so I'll show you I'll show you what these commands do so fortune is an old Linux command is it Unix I don't know but it's a command that just provides random quotes and we can install it from brew and now we get this nice little fortune command which will just give us a random fortune this thing all things devours birds beasts trees flowers gnaws iron bites steel grinds hard Stone's to meal slays kings ruins town and beats high mountain down interesting it's just a random quote we can get these all day may your camel be a swift is the way and so if you've ever watched me use the terminal it's always fun when we open a new terminal tab and there's just like a random quote there so we have a fortunate install that's great the other thing I like to use is cows a so cows a is another linux command which will show a nice little ASCII character that says what you want it to say so I could say like cows a hello world and then we see a little cow that says the word hello world but in Linux we can actually link these commands together so if I say run the fortune command and then we're gonna pipe that output into the cows a command we can now make the cows a quotes like you never go anywhere without your soul sure people get rained on last that's true I like being short if you want to learn one useless thing every day in a single year you'll learn 365 useless things that was a pretty useless quote okay but now that we can do that my my personal bash profile that I already have pre-configured I you can also specify the cow file so if we look at the man pages for Cal say is there a man page for Cal say there is because I want to specify the cow file like as you can do - f cow file and there are a few different ones built-in I think let's say lysse cows a - I think it's called tux yeah and so that's the tux Linux penguin and that's the one that I like to use you can also install your own cow files but we have those I'm also gonna install the latest version of git I'm basically running all of these commands to prepare for my custom bash profile because I have a bash profile with all of my configurations of what should run whenever a new terminal starts up what are my alias is all of those things and then in all of these are prerequisites prerequisites for that bash profile so I'm gonna get those installed so we have the latest version of git we're now going to install VC prompt so you if you're using something like Oh mais ich and you're on a Mac you might have noticed that whenever you're in a folder that is a git repository you'll actually see what branch you're on so you'll see if we're on the master branch or anything else you'll see if you have committed changes and if you've ever seen my terminal you see that that happens right so this VC prompt that we just installed can be used for that so now that I'm gonna get my bash profile going and inside of my bash profile I have the settings for what should display on each each line so this is called your PS 1 in bash it's basically what gets outputted when you're ready to enter a command and you can customize this to be whatever you want it could be the current directory you could have a timestamp but I also have a VC prompt that is applied to that so if it detects if we're in a folder that is a git repository so if we're on the master branch or something like that so I'm going to CD into my home directory currently in home and then I'm gonna go get my bash profile it is on github if you go to github.com /w 3c j / dot files I have a few different configuration files here that I use and then the bash profile is one so we can see these are basically all the commands that run when I open a new a new new tab it's setting some paths is studying history some nice thing some nice commands for when I can press arrow up and like search through my history we've get a random emoji that gets to show up and then I get to specify my ps1 which is a well actually the the prompt that shows before the output is going to be this which displays like the current working directory and then also VC prompt which detects if we're in a git repository there's a few other things like it just outputs that fortune thing so every terminal I open will have a new quote in it I have some aliases set up general aliases and then I have some general get aliases set up as well so this is my bash profile we basically need to just take this and put it in literally a file called bash profile in my home directory so if you do LS dash 8 that's gonna show you hidden files you can see that I have bash history and bash session sessions but I want to create a new file called bash profile for now I'm just gonna use Nano and I'm smiling because everyone's like why don't you use them I'm not gonna use them I'm gonna put my bash profile into that and then we're ready to go now there are a few things that we're still missing like axe don't have nvm which is node version manager we'll get that going that might actually be it but now that I have that when I open a new tab would you look at that we've got that we've got the the CJ command line style so for one nvm doesn't exist oh and I need to set up my audio CD options we're gonna set that up but you can see that it automatically outputs a new quote it has the name of my machine so I can I in the bash profile there we have our host name as our current directory so if we go into like documents we see the directory output and we also see about random emoji there but if I open a new tab we should get a new random emoji and we get a new quote but there's some other things I need to set up but that's that's my the basics of my bash profile all right yeah let's get some other things that going I'm gonna install spectacled because right now you can see that I'm struggling to resize and position windows and so spectacled is a really cool tool for arranging windows you've probably seen me use it on streem it lets me put windows to the side to the right to the up to the bottom all that good stuff so let's start up spectacled we will have to give it permission to be accessibility features because it needs to actually move the windows around so let's do this we're gonna go into system preferences under accessibility we need to unlock this and then enable spectacle so that it can actually move the windows around and then we can check this box and now spectacle has all of these built in shortcuts so if we click here and I do that it works so I can go left I can go right I can go up I can go down I usually like to do like 3/4 there and then like my chat will be 1/4 over there and then we can do the same thing with Safari oh wait I want this window and yeah so now we have some nice nice window arrangement with spectacle and now we're gonna install Alfred so on a Mac when you press command space this launches spotlight search and this is OK like you can search for apps you have installed like I term or you can start search for things like System Preferences this basically allows you to search across of your Mac I like to use this tool called Alfred go ahead and find it yeah the productivity app for Mac OS and I use this as a replacement for spotlight search it has a lot of other cool things built-in like you can run automated tasks you might have seen me I mean you can type calculator expressions into it I wonder if you can do that in spotlight 4 + 4 oh yeah that'll tell you the results so that's good but I also like that you can theme it you can change what it looks like you can make it dark theme you can create your own workflows and write custom scripts it's really cool so we're gonna install Alfred and then we're gonna replace that as our default command space option there we go so let's launch Alfred mm-hmm I think we might have to give this accessibility permissions maybe not so the power pack does cost money I actually have a license I'm going to transfer that overlay Slater but you can use the basic features for free for now I won't set that up I'm not going to migrate anything because I'll show you all of my settings yeah so for snippet expansion it doesn't need accessibility I like to use it to search across folders because I can actually just press command space type a folder name and then Alfred will Lynch instantly watch it walk launch it you'll see here that like if I search for things spotlight is a little slow and it doesn't like choose like the most relevant thing whereas Alfred usually does so we can give this thing disk access permissions actually I don't even know if we need to do that we'll see let's go I don't have any contacts I'm not gonna allow that and we can see right now that the default command is control space or is it option space yeah it's option space and now we have this launching but I'm actually gonna replace it as my command space keyboard shortcut so it'll launch Alfred instead of the built-in spotlight and you can see that there are cool shortcuts right like this where if it can't find something that you've typed in it'll ask to search different places you can set up these default search engines another thing you can do which is nice for presenting is you can type something in press command L and the text just gets really big so that's cool but we can set up all sorts of things here in settings you can do file searching we can search across folders so now if I well if I to use option and search for like documents we can see that the documents directory shows up so that's cool let's see I like to set up shortcuts for shortcuts for system commands so here you can see that like sleep is sleep I set this up as the shortcut s and because I do this all the time so one of the things I do which is it's like a bit of an OCD at this point is every time I'm done using my computer I will actually turn off the Wi-Fi and put the computer to sleep and so if I searched for sleep tried to search for s and then find my shortcut it should choose that as the default one so if I choose this now I just have to do command space s put the computer to sleep and that's just like a security precaution I do because I don't like to leave my lap my MacBook like running in the background with the Wi-Fi on so yeah that's the thing any reason I use bash instead of zishe I don't know I feel like at this point I'm becoming like one of those Oh I mean not one of those but just like an old old programmer that's stuck in my ways because I'm using an old MacBook I'm using Bosch which I haven't switched from like I prefer Bosch every every Linux machine that I log into remotely or SSH into is using Bosch so I prefer Bosch and I have my bash profile I'll set up I could I could migrate it to dish I could but I do like bash alright so let's make it so that when I press command space it launches Alfred instead of spotlight so we're gonna go into system preferences we're gonna go into keyboard we will go into shortcuts and then we need to find the spotlight shortcut yeah so we can see right here show spotlight search is command space so I'm going to uncheck that so now when I do command space nothing happens and if I launch Alfred and go into the Alfred preferences I can set its keyboard shortcut to be command space and now I've overwritten it so if I do command space this launches Alfred and I can I can use that instead I'll show appearance you can choose like different themes I actually do like Alfred dark alfred mac OS dark like doesn't have the padding i think we're gonna go with that one wow wow so that's that's my preferred settings for alfred there's a lot of other things you can do with it you can install um custom workflows and different things like that but i just prefer it for the general launching applications experience alright now we need a web browser i don't want to use safari anymore I think I'm actually gonna install Chrome instead of Firefox like I just still can't get myself to switch so I'm gonna do brew cask install Chrome might have to do Google Chrome let's do this brew cast search Chrome mm-hmm or I think it's just brew search Chrome okay mm-hmm I'm gonna try I am gonna try I tried every time but I always find something that just breaks or doesn't work very well like in terms of the issues that I've come across Firefox in the past two years of trying to use it there were some flexbox issues where my site looked perfectly fine in google chrome but when you loaded it in Firefox there were like these weird margin and padding issues for flexbox I've ran into issues with CSS animations where the animations are very jittery and Firefox versus Chrome I ran into issues with maps not loading in Firefox like if you're using OpenStreetMaps mm-hmm or like leaflet for some reason sometimes that library doesn't actually load very well in Firefox I've come across all of those issues and probably some others that I don't remember but we're gonna give it a try brew install fire a brew cask install Firefox and that will install Firefox for us all right so here we are in Firefox I don't think I'm gonna sign-in I'm just gonna start browsing and I'm gonna go ahead and close Safari but we're gonna get all these links back over in in Firefox cool so we installed spectacle what else do we need we installed Firefox let's get actually we'll come back to this because this will install node and all that other stuff that we need but in the meantime let's let's get other things working so we have our quick launcher we have Alfred here so we can we can launch stuff that's great we have our window management so we can move things around that's awesome and then now I also like hyper switch so you can technically use command tab to switch between apps but it doesn't show a window preview and so I want to see the preview of the window whenever I'm switching between apps so there is an app called hyper switch which will do this mm-hmm so we're gonna save this cool and then we'll install it yeah windows has that too so on windows I know that's built-in by default but I'm okay with that this is a simple little app that I can install and so similar to spectacle because we're using it to like see what windows are or like take the screenshots of the windows so that they could be the thumbnails you have to give it accessibility privileges so hyper switch there and then it's a control tab shift alt tab let's open up hyper switch this is a beta release which may contain serious bugs okay alright so I actually want to use a command tab for switching windows and then you can use option tab for switching the apps current windows so we'll do that let's see app switcher show window previews when activating an app without windows try to open the default window sure thumbnails okay we'll see so now if I do command tab yeah you can see that we can see the application previews they do include the mmm the icon I don't know if I want that so let me disable that oh I could do small icons let's see how that looks that's a little better because it doesn't take up the actual application window so that's good I'm gonna show hyper switch up top here and I think that's about it Oh vibrant dark what does that look like let's restart it I like dark theme you can actually see so when I because I wiped this MacBook I got it off of ebay but I wiped it clean and I when I reinstalled it on Mojave I chose dark fame you can see because my menu bar and stuff like that okay I don't know if that even changed anything cool but we have a window switcher we have a command launcher and we have we can set up the locations of Windows so we're good on that now I'm just gonna set up my dock and finder settings um so I do not like this dock at all so the first step that I the first thing I do what I always get a MacBook is I remove all of these icons so I don't care about Launchpad gone I don't care about Safari I don't care about contacts or mail or anything else and also you'll notice like this dock takes up a good a good percentage of the screen and that's that's usable screen real estate so I do not like the dock at all I just remove it in its entirety hmm I do need to close notes so I just go through remove every single one and then I make it super super tiny I never really have to look at it again for the most part yeah free real estate like look how much of the screen this is taking up especially like if you're on a mac book with a smaller screen like technically this I mean this is a 15-inch MacBook so it has a bigger screen but it's really a waste of space to have this there all the time I don't like the Downloads being listed cool now so that's that's great we've gotten rid of a bunch of icons but the thing I'm gonna do now is make it super super tiny I'm gonna make it as small as possible we're gonna go super tiny I'm gonna put it on the right and then I'm going to automatically hide it and pretty much never look at it again so if you'll notice now it's over here on the right if I need it I can move my mouse over here other thing is I never really need it all of the all of the things I need I can do with the launcher or keyboard shortcuts so now look at look at all that extra screen real estate at the bottom cool how do I open stuff command space so you want to open finder command space you want to open vs code command space you want to open I term command space you want to empty the trash Alfred has that built in so I can just do empty trash you want to open your downloads folder command space so everything's a keyboard shortcut yeah so I don't need that every now and then I might click over here if there's like a minimized application but I mean I have my window switching here I can just do everything through keyboard shortcuts so I don't need the dock at all the other thing I like to set up is find your settings so by default the more recent Mac's come with this idea of like recent documents I actually don't like that at all so here's what I here's what I do for my finder settings first off if you press command H no that's not it command shift H maybe ya command shift H that will take you home so this is the same directory that you get dropped into in your terminal when you when you open up a new terminal and these are the things that I actually care about so like I want a quick link to wellactually desktop is there we have documents downloads I want to click quickly movies quick link to pictures if we go click go and then go to computer this goes to the root and I like to actually put my Mac Macintosh hard drive here because that way if I ever need to go to the root of the drive I can just click there the users folder has my home folder I like to put my home folder at the top I have airdrop disabled so I just remove it don't need it I really don't like recents cuz that's not useful to me I know what documents I want to use so I'll go there so you're rid of that and that should do it you can play around with this ordering but that's that's what I like I don't show iCloud Drive actually don't have an iCloud account so let's remove that I'm gonna get rid of hyper switch I don't even know what remote does this is talking about so we're going to remove that and I'm also going to remove the network locations or yeah just hide that and also hide these tags so there we go a nice clean Finder experience up here I can also edit my I believe I can edit my finder preferences yeah if you do command comma you can open up your preferences so I actually don't want to show CDs DVDs and iPods because I don't have any of that a new Finder window I actually want that to launch in my home folder so I'm just gonna choose a c.j folders open in tabs that's great tags I can think I just want to get rid of all of these can I do that yeah I really don't even know what tags are used for there are probably a lot of features here that are actually very useful but I don't use any of them so I'm just say I disable it so it just doesn't get in my way um what's an iPod yeah it's actually really funny that it says that it probably should say iPhones cuz I think those would show up separately but yeah who has an iPod anymore oh you can give folders and files a tag and then filter them wait is that it hello Andrew welcome I don't you say the thing is I use the terminal for most things right like I I really hardly ever even use the finder to be yeah I don't know do you use an external monitor or do I have a minimal minimal desk setup minimal so I mean the I mean even so my work MacBook is actually only a 13-inch and that's all I use I don't use an external monitor I mean I think I have gotten used to like window switching and window arrangement that if I really I don't really need an extra monitor I have enough space I think I actually don't even use the desktop features of a Mac because technically you can create totally separate desktops and do different things on each different desktop and on a Mac whenever you put applications into full-screen mode that's technically its own desktop I don't use that at all I actually really really dislike it when I'm like pairing with someone and they use full screen windows because every time they switch between things they have to like swipe like this instead of just like command tabbing so I'm a really weird Mac user I'll say that so we're here I want to view the status bar how can I get that going because the status bar shows you like how many files and folders show status bar there it is oh wow look at that that's so much hard drive compared to my current one but yeah this will tell you how many files are in the current folder you can increase the zoom level and it'll also tell you how much space you have left on your hard drive so that's nice is there anything else show the path bar I like this too this will show you what directory you're inside of and what else showed the tab bar yep and then you can open new tabs for a new Finder window so that's cool and what else that's about it now these are my finder preferences keep the useful things on the left-hand side in a second I'm gonna create my like dev or workspace directory for all of my coding projects and I'm gonna put a link to that here in the side as well because that's something I go to often but I really just like to clean this up and make it as minimal as possible only the things that I actually care about and not a lot of extra things so those are my finder preferences I need to set up Firefox because right now Google is the default search engine there's this very busy and distracting new Pat new tab page and Google is basically logging every single key I press whenever we're searching here and I don't want that I don't want Google tracking my keystrokes so we'll fix that I have 17 gigabytes free so I actually in preparing this laptop for the migration I removed all of the node modules folder on my machine and that was 12 gigabytes of files 12 gigabytes of node modules they got removed and the main reason I did that is because I'm going to backup my dev and workspace folder and if you try to back that up with 12 gigabytes of JavaScript files there's just so many thousands of individual files that it takes forever to backup I removed all the tags and finder but left the tags menu in the Finder sidebar alright let's see if I can find if I can hide it if we open up preferences sidebar oh yeah this is great thank you thank you Vincent for mentioning that so if you have a Finder window open you can press command , that's gonna bring up your settings sidebar you can disable what is actually shown so I don't want to show tags let's see don't want to show those yeah and technically it will show connected computers or two connected servers and stuff in the on this on the side awesome advanced show all fiyo this is another thing show all file name extensions I really don't like it when the OS hides file name extensions from me I feel like it's dishonest don't do that operating system so I'm definitely want to show all all file extensions when performing a search search the current folder cool all right that's a good setting to have yeah so pretty much any application if you do command-comma it's going to open up your preferences or settings yeah so look at that that opened up the fire facts fire fire fire facts Firefox settings all you operating systems why don't you do this by default I don't know I feel like it's it is a user more user friendly thing to not show file extensions but as a more technical person like I want to change the extension every now and then or if I'm renaming a file I want to know what type of extension is I don't want to just see in the right-hand side like what the what the what the kind is like PNG or something I want to actually see that file extension cool all right so that's that's good to go now let's get Firefox set up so command-comma will bring up our Firefox settings and let's just go through one by one and make sure we have all these things so when when my browser starts up I actually do like to restore the previous session and warn wind quitting so especially if I'm streaming and I have a bunch of tabs open I want to make sure that whenever I if I accidentally press the shortcut to close Firefox I want it to warn me so that's one and also whenever I open it up I want to see my previous tabs let's make a Firefox my default browser that's great ctrl tab cycles through all of the of my Firefox tabs so that's interesting good job Firefox open links in tabs instead of new windows that makes sense when I open a link in a new tab switch to it immediately I'll leave that off because every now and then I might be like I don't know in a place where there are links and I want to command click them and like open them up and I don't want to switch to them I want to open them and then switch to them manually does any Firefox user know if I can disable the control control tab window switching so control tab usually I just wanted to immediately switch but this is showing me a preview I guess I'll have to figure out where are the settings to disabled preview I don't want to see a preview I literally want to cycle through tabs like this control window plus comma doesn't work on Linux Oh interesting fire fax the fastest fax ever yeah Google should call them for interview who's always yeah the Google does do that if you search for certain terms they'll show you like a link to a apply for a job or something like that yeah about config let me look up the key okay we'll look at that in a second language and appearance that's good default zoom check your spelling as you type sure I actually like to have the browser always ask me where I want to save files this prevents me from having a really cluttered downloads folder so if I choose this always ask where to save files I can always be sure to put the download in the right place so that's good let's see automatically install updates that make sense use recommended performance settings that makes sense for me so it looks good here let's go into home settings so homepage and home page and new tab I typically just like to show a blank page and the new pad new new tabs should be a blank page so when I open a tab I don't want to see anything what was there before like news articles and links and stuff like that that's actually really distracting and there is an extension I like called tab bliss which shows the current time and I might install that but I really like my new tab to be very distraction free Firefox home content well I disabled Firefox home so I don't really even see any of these all right search preferences I like to have the combined search end URL bar so we'll leave that and I'm going to change my default search engine to DuckDuckGo and I actually don't want to see search suggestions because well leave it on for a second so if I'm searching for like JavaScript array sort as I'm typing it's making a request to DuckDuckGo to get auto completion to just say like what should we suggest that you that we show you and that's fine but it's kind of like a form of a keylogger because they can see every single thing you type into your url bar even if you start typing like HTTP colon slash slash like it it's it's it's it's it's logging your keystroke so I I disabled provide search suggestions and I just build up my suggestions over time so now you can see that it's only providing things that are in my history and not actually making a request to those to that search engine to give me suggestions it's just only my history of things that I've searched so I prefer that I'm actually going to disable all these other search engines and only have DuckDuckGo cool and all right now on to privacy and security settings so we'll keep the standard tracking protection I actually do not save any logins or passwords for any web site I don't like autofill everything and I'll just type manually this is just a really easy way to like leak your information accidentally especially as a streamer like using the browser I don't want it to auto fill my addresses or anything like that so I'm gonna disable that remember history is good what else yeah Firefox data collection and use allow Firefox to send technical and interaction data to Mozilla I actually disabled this it potentially could help the developers but it is a form of like tracking and analytics so I disable it you are no longer allowing Mozilla to capture technical and interaction data all pass data will be deleted within 30 days so yeah allow Firefox to install and run studies don't want to do that either I realize this could help the Firefox team but if there ever is a crash I'll send a crash report but I don't like to have the constant metrics and analytics and tracking and I believe I believe those are all of my settings yeah I think we're good to go let's install Tablas so after I've set up all those default settings now there are quite a few extensions that I prefer to have by default so we're going to install those and one of those is tab blitz I believe it is tab bliss uh-oh maybe not just search for tab lists list tab no Tablas extinction I thought it was oh I spelled it wrong tab tab lists lists that I owe I put I put two two two two two B's well this is really nice it's you can you can set it to show a random image and it's just nice and zin for for your new tab so I'm gonna install this so we're gonna add that and then this is now by default set to be my new tab page and it's nice a nice little image with the time but you can go into settings what I typically like to do is just set it to be a solid black color there you go all black and then we're gonna customize the greeting wait where is this there we go so good morning friends and that's a anytime I open a new tab you're gonna see that so I prefer that old TRADOC mode yeah all right let me try this other configuration that in features shared about config and we want browser dot control tab that recently used tab order so I set that to false hey that worked this is what I prefer I like to just be able to cycle through I don't want to see previews because I mean these are my previews and then if I if I want to use that tab I'll just stay there I don't I don't see a point in trying to decipher what's in the smaller image previews cool okay so let's get our extensions installed so some people will probably absolutely hate this because creators and I am a creator creators get money from ads for the most part and but but I don't know I like I like an ad blocker the web is a very noisy place there are also potentially ads that are malicious and I use an ad blocker because it stops those things you can set up an ad blocker to whitelist certain websites if you do want to provide them support but I like ads I don't actually don't mind if you use that blocker and also I have ads disabled and ad revenue disabled on my youtube channel so it doesn't matter if you use an ad blocker or not so reinstall an ad blocker and I like to use you block origin there are a few one a few of them out there but this is the one it has a github freak about repo and it is open source and we will install it for Firefox yeah there's also like adblock plus the thing about some of these other plaid block solutions is that they themselves are like tracking software and and they violate your privacy where as a tool like this does not or this tool in particular wait yeah so we're not adblock because the an ad blocking extension has access to everything so you want to make sure that you actually trust the adblock extension that you're installing so I this one invite and I've used it for a very long time host file for ad blocking so the way you block origin works is it I believe it actually just starts to learn over time there is no actual host file so it and I think there might be but it also works off of finding scripts that are trying to set cookies and then will potentially automatically block those scripts so actually actually if we go back to the github info yeah we can read the philosophy of philosophy of you block origin it's not an ad blocker it's a general-purpose blocker you block origin blocks ads through its support of the ad block plus filter syntax so ad block plus is the more popular one that a lot of people use and it can use that same ten syntax but it extends that syntax adds unintrusive or not are just the visible portions of privacy invading apparatus entering your browser when you visit most sites nowadays right so I believe there's a block list but it also can do other things that will just block automatically by default I also use privacy badger so a privacy badger does the more general blocking that I was talking about so maybe a privacy badger does that and you block origin doesn't but privacy badger doesn't actually have any sort of block list what it does is it detects if scripts are attempting to set cookies and it blocks them from setting those cookies unless you've whitelisted them and by default it just kind of blocks everything and this prevents for the most part trackers in general so let's just go to google.com and search for JavaScript so if we look at privacy badger we can see that actually no tracking scripts were detected all right let's go to w3schools comm all right five tracking scripts were detected it's pulling in these other JavaScript libraries from Google it absolutely blocks Google Analytics and it prevents those scripts from actually setting cookies which could could potentially track you so I use that extension as well and over time you can whitelist things if sites are broken but it kind of like blocks by default which I like yeah and the e FF the Electronic Frontier Foundation the FF if are really great they have a lot of cool extensions for maintaining your privacy online so there's that I also like one tab so the one tab extension it's supported in Chrome and Firefox pretty much all of these extensions I'm using are supported in both Chrome and Firefox so you can choose no matter what you use though they should still work all right we're gonna install it and this is very useful for when you have a lot of tabs open so you can see right now I have a ton of tabs I can just click this button it instantly closes all of those tabs and then gives me a breakdown of all the tabs that I had open and I can go in and click them and open those tabs back up if I need to I also can just remove an entire list of tabs altogether but one tab is really cool for just quickly cleaning up all of your tabs but still keeping track of what you had open so that way you don't lose things if that's the main reason you're keeping so many tabs open so one tab is great I also like JSON viewer so this is an extension well actually in Firefox I don't think I need this so in fact so typically JSON viewer for Chrome will format any sort of JSON response that you get back from an API but I think Firefox has it built in so let's go to Reddit slash are slash JavaScript dot JSON there we go so built-in to Firefox is JSON navigation and formatting so that's pretty cool yeah so it formats the response by default I'm wondering if I can enable dark mode here and maybe that's a developer tools setting let's see go in here settings dark theme cool and does that change the dark theme for ya and so that changed the dark theme for my JSON viewer here which is pretty nice so I actually don't need to install JSON viewer in Firefox but if you're on Chrome you can install that cool Oliver is mentioning that they tried privacy badger the thing is you can disable privacy badger altogether for a website and I've just gotten used to it like if a site is broken I'll double check that my extensions are enabled or disabled in the right way but yeah you're right it can break a lot of things so there's some other extensions to install but before we get there I want to customize this bar up here because these are some extra things that I don't really use I don't want that wait I didn't mean to do that remove it yeah I don't want that what is this Firefox account I don't have a Firefox account I don't care about one tab those are some options I think that's fine okay that's a little bit nicer a little bit a little bit cleaner not a bunch of extra stuff and now I'm going to install a stylus so stylus is a styling extension and this is not stylish so stylish invades your privacy you do not want to choose that one I think it might even still be available I think its style yeah custom themes but you don't want this one you absolutely want stylus this is an open-source one and this is for adding custom styles to websites so you may have seen that whenever I'm on like github I see like a nice dark theme and so I use stylus to install custom themes and even create my own custom themes for different websites okay so we have stylus and now I can go to user Styles board which is technically owned by the same stylish people but this is like the de-facto place to find user styles custom user styles Firefox has stopped a social network from tracking you here nice thank you Firefox usually privacy badger will do that for me but thank you thank you Firefox for being so protective yeah in tampermonkey is the the tool you can use for custom JavaScript and I actually I'm gonna get that installed and I'll show you one of my at least one of the the tampermonkey extensions user script that I like to use I'm gonna search for github dark alright so this sites broken I think it might actually be that work we have these blocking scripts I'm gonna just disable it for a second and see if that fixes in user styles org is down okay I have heard of HTTPS Everywhere but it is more and more like less needed because most web sites have to be HTTPS nowadays but yeah I have actually we can install it there's no harm in installing it but it's not really needed nowadays because everything is HTTP by default and has HS HT HSTs pinning meaning like you can't even access those web sites over HTTP but HTTPS Everywhere is was awesome because there were some web sites that would default to http even though they had an HTTPS version and there are some attacks where an attacker can redirect you to the HTTP version of a website so that your traffic is unencrypted but HTTP HTTPS Everywhere will make sure that every site you go to is using the HTTPS version and it's also from the Electronic Frontier Foundation the same people that make privacy badger better you know what let's just search github for github dark stylish themes ooh there's an entire organization sweet ok and I can actually just open that CSS file and then install it let's go let's go nice oh look at that we have a nice dark a github theme the other one I like is a wikipedia dark rounded let's see if we can find it let's see what stylish themes has Wikipedia dark let's install this one JavaScript on Wikipedia nice and there's that nice dark theme cool we'll install those later user styles is not down but basically user styles is the place where we can find all the styles that we want to install for different web sites you can also create your own styles all right while we're in this idea of like custom CSS let's talk about custom JavaScript so for that I use an extension called tampermonkey and what this lets you do is create JavaScript files that will automatically run on any website that you tell them to run on so we're gonna install tampermonkey and then just like there are user styles there's also user scripts that you can install which are scripts that people have created so we've got it installed we're ready to go here there's a greasy fork dot-com which is the like the user Styles website I think it's greasy Fork we'll find it oh you still use your custom one for NPM there's a pretty good dark theme that I use actually it may have disabled it okay maybe it's not green greasy forg there it is greasy forks org and so similar to user styles or this is a website where people can host us scripts now you want to be very careful about what scripts you do install because these scripts technically have access to that entire website they could steal your cookies and and impersonate you and stuff like that so be careful of what you install but there is one that I really like called better Google and it actually should be on github and it makes the what do you call it the the Google search page so if we search Google for JavaScript the latest version of Google I just really do not like the way it looks it actually doesn't show us the full URL all of these kind of look like ads to me it's very hard for my eyes to parse these search results on Google but better Google fixes that I think it's like better - Google here it is a user script - better let's look at it on greasy fork 2000 installs let me double check this is the one that I have installed over here yeah this is the one I've been using so I trust this one so we're gonna install it you can see you can actually see the JavaScript that it uses or it runs on a website you can see what websites are allowed where this scripts will be allowed to run and then you can actually look at the source code to see if it's doing anything malicious malicious let's do a quick scroll I mean for the most part in this quick pass it doesn't look like it's doing making any external external requests it's just do a lot of doing a lot of selecting of elements and such so I'm okay with that so we're gonna install that now see how Google looks right now we're gonna refresh the page and there we go it looks it looks like it used to so we can actually see the full URL we see a bit more of the description I think and I prefer this layout so that's one script that I have installed but you can create your own scripts and you can find other scripts that are useful like I have a scripts for YouTube that will give you a button for creating a screenshot from a video which I use often but there's a lot of different kinds of scripts that you can get a few a few other things are like the view dev tools so this is a browser or a dev tools extension which will is very useful when developing a few of you applications so let's install this one for Firefox and then I also do a lot of react development so we're gonna install the react dev tools as well reactive tools react developer tools here we are by react let's go use exclamation mark ammo for Firefox extension searches are there any other ones we need like read us Wow look at that very nice yeah then we get install the redux dev tools alright see you later okay have a good night you twit face one tab was removed from Chrome do you have two accounts like you twit face and injury Lane okay so we've got all those going alright last last part of the setup here is two getting getting nodejs getting my Visual Studio code editor all of that good stuff all of that going so let's do that we're going to install first we're to install node and so for that I use a tool called in VM this works on both Linux and Mac if you're using Windows there is nvm windows but this is a tool to manage your node via nodejs versions and so I to install nodejs this way rather than installing it from nodejs org because the issue there is look at that no js' has already been updated to 14.1 on this laptop I have version 14 and in the VM it makes it really easy to install versions and switch between those versions so we're gonna use it we can just copy this install script here and we'll go to our terminal I'll run that and that will install nvm so now we have well we don't have the in VM command but this part here setting the in VM home directory when I open a new tab that should be set and now I have the in VM command and I can do nvm list you see what versions of node I have installed I don't have any so I'm going to do nvm install 14 and that will install the latest major version of version 14 so it'll install version 14 point 1 and then now I have no js' version 4 to 14 point 1 and I can do console.log hello world just like that so we have no js' we also have NPM that's great and we're ready to go and in my bash profile at the top I actually have nvm use stable so that uses the latest stable version of nodejs and so when I open a new tab you should see an output using version 14 point 1 so whatever the latest stable version I have installed it's automatically gonna use that when I open a new tab okay so we have node we have our bash setup ready to go one thing I like to do is I create a directory for all of my projects and I call that directory dev de Vie so I'm gonna make a directory called dev here in my home directory so I'm in my home and I just made that directory so if we go in I now have a directory at user CJ dev you can call this whatever you like call it workspace call it projects I like dev it's nice and short for development but this is the go-to place for all of my code and projects so anything that I'm writing code with I put it in this folder it's not on my desktop it's not in documents it's in this folder and that's just to make sure that I stay mostly organized and that and that's where all of my code goes so we have this that's great and then I am going to install some things that I use pretty often so I'm gonna install this light server and also es link globally so because I installed in VM and I have no diversion 14.1 when I do npm install - g it's going to install these two things light server and es lint globally under that node version 14.1 and now with those commands I can lint files globally and run a static file servers globally cool alright and then now the moment you've all been waiting for I can install Visual Studio code so we'll do this in a separate tab while that's running and I mentioned earlier we can use brew casks to to different applications to install and we're gonna install Visual Studio code so we'll do that light server is not similar to Express I mean it might actually be built on top of Express but it's for static files only it's not for building back-end applications and hello would the real Python welcome okay so that installed Visual Studio code and so if I do command space and we search for code we have Visual Studio code and I can open it up I do want to open it nice look at that so we have a fresh a fresh new version of Visual Studio code now I need to get all of my settings added in and all of my extensions installed ok so here's what I'm gonna do I'm gonna create a directory called my first website and we're gonna create a basic website in here but we're gonna make sure that vs code is ready to go to work with this with this directory so and make sure I'm actually gonna close vs code and then if I type code period it actually works by default so would you look at that so on a Mac when you install vs code it's going to automatically install this into your into your shell so that you way you can use code to open it up however if we go to maybe it's under file edit yeah here we go so if that does not work for you if you're in your terminal and you type code space period or a code the name of a file or a directory and that doesn't work you can do this you can do command shift P or ctrl shift P to open up the command palette search for install and you want to look for she'll come and install the code command in path so if you click on that that will make sure that that actually exists and then you should be able to type code period to open things up now I need to get all of my my extensions installed if you go on just in just search for user bcj excuse me if you search for user w3c J you'll find all of my public gists but this one in particular if we sort by most recent recently updated I literally just created this one and this is a list of all the extensions that I have installed so these are the extensions that I want to install I will most likely do like a separate video where I can explain all of these extensions and why I have them but what I want to do right now is make a file with that list of extensions in it so we're going to nano BS code extensions dot txt paste in that list and now way now we can run a command that looks at every line in that file and automatically installs it you can see that there are a few people that have provided and this isn't my old extension list provided some terminal commands you can run to automatically run each each line in the file so we can do while read line code install extension that given line and then we tell them tell it the file we want so because we put all of those to each of those lines in this file describes the package name of a vs code extension we can run this command and then specify a BS code extensions text and then it's going to read it one at a time and install each individual extension so we should be ready to go after that so we're getting a bunch of extensions and the reason I'm doing this is I want to have all of those extensions ready to go for when I set up my my settings file so if you go to github.com slash coding garden /v s code - settings this is all of my latest and greatest settings oh for one we definitely need to install the anonymous pro font and I just install this as a system-level font so this is the font that I use in the terminal and in vs code so let's download it here it is save it I'm gonna put it in downloads that's fine with me let's extract it and then we will install it install actually I think can i right-click all these and say install there we go so we got all the different versions italic bold and bold italic great so now that we have anonymous Pro we should be able to set our vs code font to be anonymous Pro and then this github repo has a breakdown of all of some of those extensions that I installed not all of them and some of info about the themes and such but this right here are the vs code settings that actually will set your theme so you can see that here workbench color theme is set to just black that's what's gonna set my theme and then editor dot font family that sets it to anonymous Pro so what I need to do is just take all of these settings and throw it into my settings JSON file and so in vs code you can press command comma that does open your settings I'm just gonna search for settings because we want to open the settings JSON files so preferences open settings JSON we can see by default there's not a lot in here but if I replace it watch this instant transformation I'm gonna click Save it's going to it should at least oh I might need to restart because I installed all of those extensions from the terminal oh yeah now if we go into my first website open up code we should there we go we get my color theme we get my font we get all this stuff all this stuff is ready to go and it looks just like Olivia's code you see me use on stream great-great great-great-great-great- I guess that's a good reason to not use vs code live or like use the the sink extension just to sort of show people how could they can get the exact same setup by running those commands so there we go the other thing is keyboard shortcut bindings the main one that are the main ones that I care about are switching between tabs using the same shortcuts that I use to switch between tabs and like every other application so like in Firefox I can press command 1 and it goes to the first tab I can press command to command 3 command 4 and it goes to that specific tab and I like to have those same shortcuts inside of es code so I'm gonna open up my keyboard shortcuts JSON and I'm gonna replace it with all these keyboard shortcuts and now what that allows me to do is if I have multiple tabs I can use command one command 2 etc to open them up so let's create a new file we're gonna save it as index.html I will create like a basic HTML template here hello world I will create an h1 hello world and then we'll add some emojis you'll notice that I didn't have to install any anything to get these emojis it's built into a Mac if you press command control space that'll bring up the emoji menu and then I want to show the globe show that one hello world great and then let's let's create a new file let's call it Styles that's CSS and in here we're going to set the body to have a font family of let's just do sans-serif font size we'll set this to be like 3 Rim it's gonna be really really big and then we'll just do text-align:center so some basic styles but I have 2 tabs open so if I press command 1 it switches to the first one if I press command - it switches to the second one so that's great so we have this do we need anything else let's also add a JavaScript file so we'll call it f KS and this is just going to log hello world like that and we'll save that and then we need to link both the style file and the JavaScript file I'm gonna add a link here will say Styles dot CSS and then down at the bottom I'm gonna add a script tag that goes to FK s there we go my first website now to start it up I'm going to use that light server thing that I mentioned earlier I can just run light server that's going to start a static file server and it'll serve up those files so here we go my first website and if we open the dev tools we should see hello world very good why not use live server you could I've had issues with it before and as you've seen me I do actually I do prefer to use the terminal so I do prefer to use the terminal to navigate around and then start light server there technically you can you can open up the the terminal here nvs code as well and that would work just fine so I could kill this will close I term and then I can run light server in here that works fine too but yeah you're right there is that extension called live server and then you can right-click a file and say start but I've had some issues with it at least with this I know how to use it it's running in my terminal all that good stuff okay so that's it last thing we need our break timer so the app I use is called timeout by Dajjal it's for max only but people have mentioned before stretch Li is a cross-platform one but this is my preferred break timer app so let's go ahead and install it alright go to our downloads is it in there no we need to extract it and then we get this app I'm just gonna drag it to applications because that's how you install apps on a Mac and now we have a timeout here we'll open it up now let's set up our breaks so I like a normal break I want this break to last five minutes and I want it to show up every hour and then for micro break I want that micro break to last 10 seconds and it shows up every 15 minutes those are my preferences we could set up privacy settings for themes but you don't really need that like it's just going to should just work by default let's actually just try it like if we start a normal break let's see yeah I don't need to enable accessibility settings or anything like that it's just literally just an overlay and one thing I do like to do is show it in the the top bar up here general show it in the status bar because that way it'll tell it gives us a countdown until our next break and that's ready to go and then the other app I use is called flux and this that just get flux comm but it removes blue light from your screen automatically now I know there are some things built in to Mac OS now and a lot of other operating system that will do this by default but I like flux and I've been using it for a long time so we'll install that open it up and then the cool thing about it is you can set it for certain times of day so we can say during the day time it's great when you to search for Denver Denver Colorado because it'll automatically use the sunup and sundown to decide whenever - um yeah so at Sun say sunset my screen will look like that at bedtime it's even darker than that but in the daytime it's full light so that's great and you can always just go over here and disable it or quit it but I do prefer that all right just get flex oh yeah I had ISTAT menus I'll install the basic version but I need to figure out what version I have because that's the one I have the key for and the latest version I don't think I have the key for I sent menus about ISTAT menus I have version 5 so I'm gonna install version 5 of ISTAT mainly because that's the person that I paid for and I'll show you how I set that up yeah so there's six I want version five mainly because you have to buy a new license for the latest version and I'm okay with the old version so yeah paying for system stats not like this so go to my downloads oh that's the wrong thing not that I set menus we want to extract that and we'll bring that into the Applications folder and then we'll just should be able to just launch it launch it now this I do believe I'll have to setup accessibility settings and different things like that yeah use dark backgrounds I don't want to send diagnostic data and honestly this looks like the exact same setup that I have by default which is crazy because I'm pretty sure I customized it does it know who I am but that's it so you can see that we see Network info we can see the temperature of all my all my stuff the upload and download speed CPU usage memory usage we see battery information apps that have been using significant energy Firefox's on that list and there are different things you can add in here actually yeah no no okay what I like to do is set up the the calendar calendar to be displayed because by default when you click the calendar that's built into a Mac we're gonna click the time it doesn't show you a calendar view and I like to see like an instant calendar view so I actually disable the time that's built into a Mac so now we don't see the built in time but I can show the time here and let's see and then want one space right there nice but what I like about this is I can click it and it actually shows me my my calendar instant calendar view so that's nice and I believe we can set it to be dark mode drop-down theme dark menu bar theme let's go with green nice ok and we do the drop down nice we sent our calendar okay so that's ISTAT menus and then I could install my my license key and there's a few extra features that I get access to as well there's some other things I need to do like I mean copy over all of my files and login to all of my accounts and all that good stuff I'm not gonna do that on stream but for the most part this is this is how I set up a laptop but a shout out to everyone that could tune in all of my members YouTube members and patrons and twitch subs oh you're welcome Cheyenne and actually yeah this is the very first Members Only livestream so I'm glad that everyone that got to tune in did tune in alright that's it I'm done I need to go now thanks everyone for tuning in thanks for your questions and be on the lookout for when the edited version of all this gets released or don't cuz I guess you already watched it alright I'll see you all later wherever you are in the world have a wonderful morning afternoon evening or night and until next time here is this [Music] you you

Channel: Coding Garden

Views: 179,070

Rating: 4.9073987 out of 5

Keywords: web development, frontend, live streaming, javascript, full stack, backend, live coding, beginner, educational, full stack javascript, lesson, debugging, coding, live stream, learning, learn javascript, programming, full stack web development, tutorial, html, node.js, web, learn node.js, css, vscode, mechanical keyboard

Id: tMNOpaQrfAE

Length: 90min 22sec (5422 seconds)

Published: Thu May 14 2020