Set up a Mac in 2024 for Power Users and Developers

what's up CJ here I just got started over at Sentry on the syntax team and they sent me a Macbook that needs to be set up so in this video I'm going to do just that and I've been using MacBooks for over 15 years at this point and in that time I've tweaked a lot of settings I've tried a lot of different apps and I've arrived at what I believe to be the most simple and minimal setup that allows me to get things done so the beginning of this video I'm going to cover basic OS settings apps I use every day and that'll be useful for people that are new to a Mac or even just power us users and I am also a software developer so I've been writing code for over 20 years and I use a MacBook to do that so in this video I'm also going to cover all of my terminal and shell settings and configurations and also how I set up vs code and all of my preferred extensions so whether you're brand new to a Mac a beginner Dev a more advanced Dev just a power user this video should have something for you be sure to check the description so you can skip ahead to a part that interests you and without further Ado let's jump in so the Mac that I got is a lightly used 2020 MacBook Pro it has the M1 processor and 16 gigs of RAM I just updated it to somoma 14.3.1 and most of what I'll show is still relevant to like monor and Ventura but there are a couple settings that are specific to somoma and one of the first is what they've done to the desktop so if you're on somoma and you click on the desktop any Windows you have open fly away and it reveals the desktop now you might like this feature I don't so I'm going to disable it so that's the first thing we'll do if we open up system settings scroll down to desktop and Dock and there's this setting right here that says click wallpaper to reveal desktop I'm going to turn this to only in stage manager now one of the things I like on my computer is to keep my desktop completely clean I don't save any files there all I ever want to see is the wallpaper and so they have this feature uh show items on desktop I'm actually going to disable that so now I'll never see anything on the desktop uh in a second I'll show you my finder settings and everything I save or download to my computer I don't put it on the desktop I put it in specific folders so regardless of that I still don't want to see anything on the desktop so I'm going to uncheck those and then also I I not only use Mac I've also used Windows a lot in my life and also Linux and they have released various types of widgets and I never used those either so widgets are new in somoma but I'm don't plan on using them so I'm going to disable widgets as well now the next settings we'll update are for the dock and one of the ways to be really efficient when using your computer is to use your keyboard as much as possible and the dock makes you use your mouse so to use the dock you have to move your mouse down here hover over the app you want to launch and click on it and uh that's not very efficient we can do that purely with the keyboard so if you press command space that'll launch Spotlight we're going to use an alternative to Spotlight I'll show you in a second but for now we have Spotlight and let's say I want to launch a finder window I can just search for finder and it instantly launches it so using the keyboard will make you a lot quicker at navigating your machine and that means the dock is just in the way so one of the things I I do is I completely disable the dock well it's not disabled but I get rid of all the apps that are on it I make it as small as possible and then I hide it and ideally never look at it again cuz I'll use my keyboard for absolutely everything so I'm going to go through remove all these apps from the dock I will then make it as Tiny as possible and then check automatically hide and show the dock so that way it disappears and then I never see it unless I actually need it now under settings I also like to put the dock to either the left or the right it's it's up to you if you're going to do this but I put mine on the left and then I check automatically hide and show the dock so now the dock is hidden unless I move my mouse over to the left which I shouldn't need to do I'm going to disable animated open applications you can keep that enabled but it also reduces the amount of work your computer has to do and it like minimizes apps if you disable that and then I'm also going to uncheck show suggested and recent apps in the doc because otherwise Mac is going to start adding new icons to that Doc and I want to keep it as empty as possible next we're going to customize finder which is the built-in app we use to manage our files and folders so if you press command space search for finder that will launch a finder window now if you press command comma that will launch the finder settings and command comma is actually a very common shortcut inside of any Mac app if you if you try pressing command comma it very likely will launch a settings window for finder I'm going to disable showing anything on the desktop like we talked about earlier and for new finder Windows I'm going to set this to my home folder now I actually don't use the recents feature on a Mac which shows you like recently used or opened files I specifically just want to see my home folder because when I launch a finder window very often I just going to dial into where the things are that I'm looking for so I set that to my home folder and then I like to use tabed browsing so I'm going to check this option here and now if you press command T that will open up a new finder window Tab and you'll see that it defaults to the home folder or whatever folder you specified now if I open up finder again it's always going to default to my home folder the other thing I like to do in my home folder is just show it as a list again this is just a preference um but now anytime I open a new tab it's always going to show my home folder with the list display next up in finder settings I'm going to customize the sidebar so if we press command comma to go back into the settings here under tags I am just going to disable all of these so I don't use the tags feature again there's a lot of things in the OS that I don't actually use but I don't use this so I don't want to see it in the sidebar I'm going to uncheck all of these now under sidebar you can pick and choose what you want to see here so this is totally up to you you can choose what you want uh like I said I don't use recents so I'm actually just going to disable it and not show it in the favorites similarly if there's folders that you don't go too often just uncheck them here because otherwise they're kind of like crowding up the sidebar from there I like to rearrange these icons so things that I visit most often I want at the top so home folder I want to be able to jump to that as quick as possible so I move that to the top from there it's probably like downloads then probably like pictures and movies and then from there it's kind of like up in the air maybe applications might go like right here but again order is up to you but I like to order it in how frequent I access and use those things next we're going to customize the advanced settings so command comma to bring those settings up again click on Advanced and I'm going to uncheck show warning before for changing and extension so if you're a a beginner user I probably wouldn't check this but if you're more of a power user and you know what you're doing when it comes to file extensions it can get annoying when you're trying to change file extension so I uncheck that the other thing I do is I change the default search location so by default when you use the search feature of finder it's going to search your entire computer but pretty often I just want to search the folder that is currently selected or that I'm inside of so I'm going to change this to search current folder next up we're going to customize the finder window so I typically like to see exactly where I am on my computer and by default you don't see that so let's say I dial into the downloads folder you'll notice that it just says downloads it doesn't give me any context for where I'm at if you go to view and then say show path bar that will show the full path of the current folder and you can even click backwards so I can go back to like the root of the drive where I can dial in and so this gives me some context for where I'm at the other thing I enable is the status bar so if I go to view show status bar this shows me how many items are in the folder and also how much uh space I have left on my computer so I can always see that at a glance so that's it for OS settings and finder settings let's jump into apps I use on a daily basis so the first app I'm going to install is a replacement for spotlight now I used to use an app called Alfred and I I use that for years but re very recently I switched to an app called raycast and I'm still learning it but so far it does everything I needed to do in Alfred and there's a lot of cool extensions and plugins you can install as well so to install it I'm going to pull up Safari we're going to search for rcast rc.com and then I'm going to download and install it now that it's installed let's launch it this will be one of the last times we use Spotlight so command space search for raycast launch the app and now you can begin setup now they're going to take you through a tutorial I recommend if you're new to to raycast definitely go through their their steps and their tutorial to get used to how the app works uh I'm just going to flow through this really quick enable all of my settings and then we'll move on from there I will mention one thing is I'm actually going to disable window management so I am really used to using a separate app for window management which I'll show you next and rcast has that built in but I just I haven't used it yet because I'm so used to the other app that I'll show you so I'm going to disable window management for now I also disable clipboard history just because I do a lot of screencasting and I don't want my my recently copied passwords and stuff like that to be displayed so I'm going to disable that everything else I'll leave it uh enabled and then I'll just run through the setup now I want to replace Spotlight with raycast so I'm actually going to change the keyboard shortcut here to be command space so if I press command space uh it actually launches spotlight so I can't I can't actually replace it just yet to replace it we're going to need to disable that keyboard shortcut for for uh Spotlight so if I press command space and search for keyboard this will bring up keyboard settings and then we can change the keyboard shortcut so click on keyboard shortcuts go down here to Spotlight and then uncheck show Spotlight search for command space this now disables uh Spotlight for that keyboard shortcut but that means we can assign it to raycast so here in raycast I'm going to do command space and now we've assigned that uh keyboard shortcut to raycast and so now anytime I press command space it will launch raycast instead so now that we have raycast installed and set up whenever we press command space that will launch raycast and it works very similar to Spotlight so if I want to launch a finder window I can just search for finder one of the co one of the cool things about raycast is if you launch something so let's say I just type the letter F if I find our finder it's way down here and I launch that now that will move to the top of the list whenever I type f so now it's almost as easy as command space F and then I can launch finder so raycast will kind of learn as you launch apps and the it'll remember what you typed in to launch those specific apps and and keep track of that so now it'll it'll be much easier and quicker to launch the apps that you would like now raycast has a ton of other features and I encourage you to explore it so when you open raycast for the first time you're going to see this start supercharging supercharging your productivity if you launch that that is basically just like a tutorial of all the things you can do in rcast so I definitely recommend going through that I'm going to show you some useful things things that I like to do so there's a built-in calculator so I can just do maths what's nice is if I hit enter now that result of the maths is on my clipboard so I can use it somewhere the other thing is you can instantly jump out to search engines so I can for instance jump out to duck. goo right now I I made it so that if I type D like ducka go is one of the first results so I can type D Tab and then search for something and that instantly launches whatever your default web browser is for that specific search term so raycast super cool there's so much more than you can do and one of the first things we'll do is install an extension that's going to allow us to install other apps as well now to install other applications we're going to use a thing called Homebrew which is also known as the missing package manager for Mac OS so if you're used to like Linux and package managers on whatever distribution you're used to this is very similar but it's not built into the Mac so we have to install it separately now if you are someone who's non-technical and who's like never used a terminal before use caution when some random stranger on the internet tells you to run a command in the terminal um you can trust me though and specifically if you visit brew. sh it's a well-known website a lot of people use it and there's a command here that we need to run to install home RW so I I'm saying even if you're non-technical you can at least do this step and then it'll make it really easy to install other apps after this so to install home brw we're going to copy this install Command right here and we're going to launch terminal so terminal is built into the mac and it's a way of running system level commands on our machine and you don't have to be technical to be able to do this you can actually just right here command V and paste in that install command for this part of the video this is as technical as we're going to get later in the video if you're interested in this kind of thing I'm going to show you how I set up my terminal and customize it and everything else so paste that command in hit enter it's going to ask for your password for pseudo access this is another thing if random people on the internet are telling you to run commands on your machine and it's asking for pseudo access you better better trust uh that person that's telling you to run those commands in this case Homebrew needs to modify the the system files and actually create some folders on our machine so we do have to give it our computer password this is okay to do if you don't trust me ask a friend um but I'm going to type my password in here and it's going to install Homebrew now when you start typing your password you're not going to see anything but it is working so if you hit enter and if you typed your password correctly you're going to get this prompt you can hit enter again and it will start installing Homebrew the other thing that it's going to do is it will install the xcode CLI tools and so those are useful not only for Homebrew but also if you're developing anything else on your app if you're using nodejs or or python or go all of those uh ecosystems need a way to compile things natively on the Mac and so they use the commandline tools for xcode so this is going to install that and Homebrew and then from there we can start installing other applications so this is going to take a little bit in the meantime I would suggest check out syntax. FM listen to some podcast episodes and uh yeah we'll be back when this is ready to go all right now that that is finished you'll notice that it is asking us to run two more commands so I'm going to copy copy this first one command C command V run that command and then copy this second one command C command V and run that as well this basically just makes it so that we can now use the Brew command so after running those two commands if you type Brew you should see some output like this and if you do that means that Brew is set up and ready to go now that we have Brew installed we can install a plugin inside of raycast that allows us to install things via Brew it's worth it I promise uh so one of the coolest things about raycast is the really big plug-in ecosystem so they have plugins for all kinds of things you can look at their site and store and kind of just see what plugins they have specifically we're going to install the one for brew now you can install it directly through the website but you can also use raycast so if I pull up raycast press command comma to bring up the settings click here on ADD or command in and then choose install from store this is going to let you search across the extension store we're going to search for brew hit enter here and then hit enter again to install that extension now that it's installed we can laun launch it so if you pull up Break cast and search for brew you want to choose Brew search and this is going to let us search across all of the available formula and cast now formula are typically like CLI tools and cast or or like desktop applications but we can install it all through here the first app we're going to install is for window management now I mentioned earlier that raycast includes utilities for window management I just am really used to an app called rectangle I have all of the keyboard shortcuts memorized so that's what we're going to install so if you pull up raycast search for brew now we can search for the app we want to install I specifically I'm going to search for rectangle and then I want the first option here I'm going to hit enter hit enter again to install now that rectangle is installed you should see a little green check mark if you don't just try installing it again and from there press Escape twice that'll take you back to the main rcast menu and you can launch it so if I search for rectangle that will launch it and you'll now see a little icon in the menu bar up here and if you click on it you can see what your possible keyboard shortcuts are to manage the windows on your machine so let's just launch a few Windows I'll grab finder let's grab terminal let's grab Safari and now I can use these keyboard shortcuts to move things around so for instance command option left we'll move a window to the left half if you press it again it'll do 2/3 if you press it again it'll go back to 1/3 uh if you press command option right it'll be on the right side command option up takes it to the top command option down takes it to the bottom uh control command left takes top left corner control Command right shift control command left bottom left shift command man you get the idea and uh I highly recommend memorizing all of these keyboard shortcuts because uh it's super useful to be able to navigate super quickly with your windows so I can like grab that uh put make it left half command option Center will Center a window on your screen so I I I basically know these keyboard truck Cuts uh like the back of my hand is that a saying yeah I know them really well so I use them all the time so I can very easily like navigate between Windows and kind of like make my own uh layout of of Windows like so so rectangle highly recommend it and like I said memorize these keyboard shortcuts because you're going to be using them all the time the next app we're going to install is for switching between running applications and so by default on a Mac when you press command tab that'll switch your running application but you'll notice that it only shows the icon of the window I like to see like a full window preview before switching and this app called alt tab will give us that so we're going to install it using Brew so command space to launch raycast do Brew search search for alt-tab and then hit enter and enter again to install it now once alt tab starts up you're going to need to give it accessibility and screen recording permissions this is because it's actually taking screen caps of the windows so that it can show you them whenever you're switching between them and by default option tab will now show you the window previews and you can leave it like that so command tab is just the built-in one and then option tab is alt Tab and you can see those full window previews I like to completely replace command tab so if we pull up the settings for alt tab under controls we can change this to be command tab so just click right here press command and Now command tab has been taken over by Alt Tab and that will be our default way of switching apps I leave all of the default settings you can kind of like dial in here to alt tab to figure out if you want to customize it any but I like all of the default settings and from there I now have a nice and easy way to switch between between apps and actually show the window previews when doing so next up is an app for all of your apps so you'll notice as you start to install these Mac apps that are always running in the background a lot of them will create these menu bar icons and they're always up here and if you get a lot of them it can get really out of hand and it's starting to as you can see here in my menu bar so we're going to install an app called hidden bar that lets you automatically hide things that you don't need to see all the time so we'll launch raycast do a brew search for hidden bar all one word and then hit enter to install the app now that it is installed we'll launch it so search for hidden bar and when it launches you'll see this little icon here in your menu bar and essentially there's a timeout and after that timeout it'll hide anything to the left of that vertical line so what we're going to do is drag all of the icons we don't want to see all the time to the left of that line so if you hold down command and drag the icons you don't want to see those will be automatically hidden now after you've moved everything you don't want to see all the time you can see that your menu bar is nice and clean and anytime you want to access those other menu bar icons you can always press this and then choose the one you want and again if if there's something that you want access to all the time just drag it to the right of that arrow and it will will show up in the minu bar all of the time so another app I like to use lets me see the stats of my laptop at a glance so I always like to see the network traffic that is happening how much free Ram I have how much hard drive space I have and I want to see all of that in the menu bar so I can like quickly glance at it and this app is called stats so if we launch raycast do a brew search for stats there's a cask here it's called stats and the description is system monitor for the menu bar we're going to install this one from here we can launch it so if we run stats so from here stats is going to ask for some permissions and then we can start to configure which things we want to see at a glance in the menu bar so with stats installed and set up now if you click the menu bar hidden items you can see that we have some stats running in here and I'm going to go ahead and just drag all of these to the right of the arrow so that they don't automatically collapse and then we can start to configure which ones we actually want to see and all of their settings inside of stats so now that I have all my widgets configured to my liking I also will show you how I configure the battery icon so by default the battery icon just shows uh a graphic it doesn't show the percentage but here under battery settings you can drag in the percentage now the percentage is just going to show up as a separate icon here and that's not very useful because now you have two different things but if you go into widgets and then merge widgets now those two things are combined into one and so when you click them you're going to get your battery info the other thing I like to do is I like to use the clock built into stats because this actually lets me add multiple times so if I turn this on and then drag this over now I can see this clock here and I'll show you how to disable the system clock in a second um but I like to see a 24-hour time I like to see the seconds there and you can change the format string so I'm in a second I'm going to show you a different plugin for showing the date uh and uh and calendar but for now I'm just going to remove the date and so we just have the default time right there now what's nice about this is you can add other time zones and so when you click on the clock you can instantly see other time zones so I have co-workers in San Francisco and in New York well Eastern Eastern Time Zone so I'm actually going to go ahead and add UTC minus5 and UTC minus 8 Now by default you can see all of the time zones in your menu bar I don't want that you might but uh I don't so in the settings here you can actually uncheck the ones that you don't want to see all the time and now they'll they'll be hidden but when you click on the time it'll actually show the other time zones as well so to disable the built-in time now that we have this time widget from stats uh open up uh system settings and from there just search for clock and down here under control center there's some options uh display the Tim with seconds in the menu Mar if you click on that that's going to give us the rest of the settings that we need so here under show date I'm going to say never I am going to disable AM PM and I'm going to change it to an analog clock so this is kind of the best we can do for now just change it to an analog clock that way this is kind of like our default clock here and next up I'll show you an extension that gives you a nice little calendar in the menu bar this next app is called it's Cal and it runs in the menu bar as well so it's going to display the current date and we're going to put that right next to our time widget so if you open up raycast do a brew search for itsy cow let's install that and from there we can launch it you'll see by default it just has this icon here but you can jump into settings and customize it so I like to launch it at login and then under appearance I like the outline look I'm going to show the month and the day of the week uh also we can specify a date time pattern so if you don't like the default like Tuesday February 27th you can click here and that will show you some format options if you want to change how the date and day of the week are displayed that's pretty much it for itsy Cal I like to just have a nice little calendar at a glance um so yeah next I'm going to install an app that reminds me to take breaks now micro breakes are tiny little breaks you can take to prevent repetitive strain injuries that's issues like with your wrists and your tendons and basically every 10 minutes you take a 10 to 20 second break to take your hands off the keyboard take your hands off the mouse to prevent those repetitive strain injuries and so an app I use for this is called time out so if we search through for time- out we can install it now I have timeout set up for a 10minute break every hour and a 10-second micro bre every 10 minutes so it's going to pop up once every 10 minutes for 10 seconds and once every hour for 10 minutes uh you can give it permissions so that way it can detect if you're actually using your computer or not and then intelligently pause or start the timer the break timer and uh you're good to go from there so you'll see that it's that's running here in the menu bar and it shows us how much time until our next micro break now there are a lot more settings that you can specify in here and timeout is free to use uh but there are some features that you can get if you decide to support the developers I I use the the free version I have supported them before but the free version works completely fine so when a break kicks in it looks like this basically it just takes over the screen and reminds you in this case to take your hands off the keyboard if it's a micro break if it's a longer break I don't know go get some coffee walk away from your computer uh but have this running all the time and it's extremely important because I am working on my computer all day every day and uh I have to be reminded to take breaks and so this app is great for that next up I'm going to install my preferred web browser which is Firefox Developer Edition now we could talk for hours why that's my favorite and you probably have your own favorite too but I'm going to set it up and I'm going to show you all the extensions that I use so if we search for Firefox inside of Homebrew the only option we have is the default Mozilla Firefox we browser I want to install the Developer Edition so I'm going to have to tap a specific Cask to get access to that there's this Cask called Homebrew Cask versions and if you tap it that will now give you more options to install things so this also has like beta versions Canary versions of a lot of other types of software and once we tap this we'll have access to it inside of home brw so I'm going to copy this tap command and open up my terminal run this command and from here we'll have access to install extra things that aren't listed by default inside of home brew now that we've tapped the cast we have access to other versions of Firefox but for some reason we don't get access here inside of Brew inside of raycast I would recommend if if you're not super technical just go with the basic Mozilla Firefox or search for Microsoft Edge or Google Chrome or Brave or opera or any any browser you prefer you should be able to find it here in the Brew search but because I want to install a non-standard version I'm going to have to do that through the terminal so here in the terminal if I do Brew search Firefox this is the same kind of search that's happening in the raycast uh UI but it's not happening in the terminal now and we can see these extra options that I have so I specifically want this Developer Edition so I'm going to copy that and then do brw install that so now I'm going to configure my preferred settings inside of Firefox and then I'll show you some extensions that I like to use now the extensions a lot of them are available for other web browsers as well so if you don't care about my settings in Firefox you can just skip ahead to the extensions that I show you so to modify our settings press command comma that'll take us here first setting open previous windows and tabs I always want to see the same windows and tabs that were opened the last time I was in Firefox I'm going to make Firefox my default web browser and then I am going to check always ask where to save files so every time you download a file if you don't check this it's just going to automatically put it in downloads and I like to keep things nice and organized so you check that box now every time you download a file you have to make a decision about where it will live on your computer next up in home I like to disable all of the built-in settings so I don't want to see any of those recommended stories or shortcuts or web search and for now we're just going to set it to be a blank page and now when I open a new tab it's nice and clean there's not any extra stuff the other thing is I actually disable the bookmarks toolbar here so if I go under View and then toolbars bookmarks toolbar never show now we get a nice and clean new tab page next up under search I like to set deck. go as my default search engine so I'm going to change that to duck ducko and I actually like to disable search engine suggestions so if you start searching the web for a thing uh in a way this is kind of like a key logger it's literally sending every keystroke to their API to get back some search suggestions and I don't like that basically whenever I start typing I only want to see websites that I've visited before or things that I've searched for for before I don't want it to make an API request to try and suggest uh what to search for so I'm going to disable that and you can see by default it's still going going to suggest my browsing history my bookmarks any other tabs that I have open those kinds of things now I'm also going to disable these suggestions and then down here I'm going to remove all of the search engines except for Duck Duck Go one of the nice things about duck ducko is they have a bang shortcuts so if I do for instance want to search like uh Wikipedia let's say I can do exclamation mark W do the thing and it will jump over to Wikipedia uh you can even jump to Google from duck. go if you want to exclamation mark G and followed by your search term and that will actually jump you out to Google so I like to keep ducto as my default search engine and then I can jump around to other search engines if I would like to next under privacy and security I'm going to leave all the enhanced tracking protection as is but I actually don't use the password manager inside of Firefox I use one password so I don't want Firefox to try to uh save the passwords itself so I'm going to disable all of those settings so also because I present a lot and I'm showing my screen I do not like the save and fill payment methods I don't I don't want it to accidentally suggest things when I'm presenting my screen for other people and along those lines if I go into these history settings I'm going to disable search and form history and so that way if I ever type into any input box on a website Firefox doesn't memorize that so it's not like suggesting things when I'm presenting my screen for for people to see I'll also disable all of the data collection so that's it for settings next up I'm going to install some extensions and the first one I like is called tab list and so this is an extension that uh is our new tab page so once we install it it will automatically show the time and a greeting and a random image if you'd like once you have it enabled so we're going to install it and then you'll see when I open a new tab now we see T list and I can keep changes here because I want tabl list to run in every new tab under settings you can change the background Source I like to leave it on unsplash it's a it's a nice uh random image that changes and you can change the frequency of how often you see a new image you can also set it to like a a solid background color and then change whether or not you see the time it's very customizable but this is nice and Zen so when I open a new tab there's not a bunch of distracting stuff the next extension that's really useful is called one tab so are you the kind of person that has 100 tabs open and you don't want to close them because you know somewhere in there there's something you don't want to forget one tab is for you so once you install it let's say you have a bunch of tabs open let me just open a bunch of tabs okay let's say I have all these tabs open um and I don't want to lose them one tab is awesome so just click one Tab and it will instantly take all of the tabs you had open and throw them into this page and now if you want to open that thing back up you can just click on it and it actually removes it from the list also if you had a bunch of links open that you want to share with someone you can click share as web page and this will generate a unique URL with all of those links inside of it so this is super useful especially if you do like a lot of research and you constantly have hundreds of tabs open this lets you keep track of those without having to actually close all of them another extension I use all the time is dark reader so you'll notice that Wikipedia is kind of blinding right now because it's it's has a it doesn't have a dark theme and so dark reader is really nice because it will automatically show a dark theme on websites that don't have one so once we add it we can choose which websites it will appear on and so by default if you go into the dark reader settings it's going to be on a not inverted list meaning it's kind of enabled for all Sites by default uh I like to choose inverted list only and that makes it so that as I browse the web I can pick and choose which websites dark reader will kick in on and so if I wanted to kick in on Wikipedia now that I have it on inverted list only I can click on Wikipedia and now any page I visit on Wikipedia is going to use that dark theme and so I have like a running list of sites I have it enabled for like HTM X hint hint there's there's no Dark theme for HTM X though I thought about pring one I just haven't yet but like HDMX doesn't have a dark theme so I go and enable dark dark reader for it and now I have a nice uh Dark theme when I'm on the HTM X website so yeah dark reader is awesome it will save your eyes for sure next up are some extensions for Firefox that help maintain my privacy when I am browsing the web the first is U block origin and this is the best ad blocker out there so you may or may not use an ad blocker I like to use one because it makes the web usable in a lot of places where it's not uh so yeah ublock origin is awesome uh the next one is called privacy badger and this is from the Electronic Frontier Foundation and it automatically blocks tracking scripts now Firefox actually has some built-in ways of blocking tracking scripts but privacy Badger is really nice because like if you click a link in an email and it's potentially a tracking link privacy Badger will kick in first and be like hey are you sure you want to go there because this is detected as a tracking link it'll also prevent certain tracking scripts from loading on websites you can always like enable it or disable it if it breaks certain websites but yeah privacy Badger is awesome and then the last one is a an extension called decentral eyes and basically all this does is it caches libraries that are loaded from a CDN so CDN are actually a way for uh companies to track you around the web because if two different we websites load the same library from that CDN now the CDN actually knows that you visited those two websites um but decentralized is nice because it kind of just runs in the background here anytime a request to a CDN is made it will cach that and then subsequent requests get served from the cache so it's not always ping the CDN server kind of revealing what websites you're visiting from here I like to customize the Firefox layout so this is a newer feature in Firefox uh this uh recent tab here I don't really use it so I'm actually just going to remove it you may get some use out of it but I don't use it so I remove that and then I like to arrange things here in the bar so if I right click and go to customize there's this Flex space here that I really don't even know what it's for but it typically just takes up a lot of space so I pull those off I also don't use the pocket button and then from here I can add icons so I want to see uh one Tab and dark reader all the time because I want those Within Reach so I'm going to right click those and do pin and then same thing for dark reader now if we go back into customize we can kind of arrange these in the order that we like now I like to keep ublock origin and privacy Badger visible because sometimes websites will break because of the ad blocker or the tracker blocking so I like to keep these enabled so that I can very quickly and easily go up and turn them on or off if if it breaks a certain website now from here there are a bunch of other apps I use as well but I'm not going to dial into every single one of them but I will show you a list and I'll show you how to quickly install a bunch of apps using Brew so if you pull up the terminal and then we're going to edit a file so I'm going to create a file here called apps. txt and then on each line I'm going to put the name of a brew Cask that I want to install so beforehand you're going to need to search and find the names of all the Brew TKS you want to install and then throw them into this uh file now I'll give you a quick run down I use slack and Discord for messaging figma for editing images Spotify to listen to music I use an Android phone so Android platform tools gives me the ADB debugger Android file transfer lets me transfer files from my phone I use VLC for watching videos uh K is a replacement for the archive tool so it lets me un unzip and unarchive uh seven zip files and raar files cap lets me quickly and easily create uh screen recordings key Caster will show my the keys pressed on the screen whenever I'm presenting iterm 2 is the terminal that we're going to set up and customize next Visual Studio code is what I use to code and we're going to set that up after iterm and then Sublime Text I just use as a a quick and easy text editor so save this file by pressing control X press y to save and now we want to run Brew install for every line in that file and for that we're going to use xargs so if I type xargs Brew install and then left Arrow apps. txt now it's going to run Brew install for every single line in that file so I don't have to manually install all of those things after this is done installing I'll have iterm 2 and we're going to jump into configuring my shell and settings and everything inside of itm too I forgot about Docker let's see if brew has Docker uh that's a lot of options so I am going to search brew. sh for Docker now there are two things listed there's Docker the docker formula and the docker Cask we want The Cask because specifically want Docker desktop so if we do Brew install D- Cask Docker I think it should pick The Cask version yeah there we go and it's going to install Docker desktop next up I am going to configure iterm which is my preferred terminal terminal emulator now you can use the built-in terminal on a Mac I like iterm for a variety of reasons which I'll show you as we configure it so I installed it with Brew but now we can launch it and uh get into it so first thing I'm going to do is I'm going to bump up the font size uh because I'm I'm a nice presenter I like you to be able to see uh what I'm doing here uh we're going to dive back into these settings in a little bit but first of all I just want you to be able to see what I'm doing okay so from here I'm actually going to set up oh my zish this has nothing to do with iterm it's just a nicer way of using zish that has a bunch of built-in settings and plugins and things like that so zish is the actual shell that we're using here if you type Echo dollar sign Capital shell that will tell you uh what your current shell is set to now Mac OS uh a few versions ago switched to zish being the default shell bash is another shell I used to use bash I used to switch from switch the Mac from zish to bash but these days I'm just going to stick with zish and we're going to use a thing called oh my zish so if we pull up Firefox and search the web for oh my zish we can visit oh my zish now uh because zish is my shell my current shell I should be good to go to just run this command if you see a different output from Shell like if you see bin bash then you don't want to use om my zish instead you potentially want to change your shell to zish or if you want to keep using bash there's another thing called oh my bash and this works very similar to oh my zish but it's specifically for bash so if you're using bash you can use this one I'm going to stick with zish so I'm going to copy this command and then run it in my terminal here and now we're good to go and instantly you can see a nice little upgrade here uh we can see that it has some some fun little colors and actually if I start to type a command so earlier um we were doing things like Brew install so if I type brew and then press the up Arrow key you'll see that it actually searches through my history and that is enabled by default when you install om myish now obviously you could enable that setting yourself with just Standalone zish but there's a lot of nice default settings that omai zish enables that that makes working in the terminal really nice the other thing is themes now I'm going to just leave the default theme which I believe is Robbie Russell but if you take a look at the zish RC which is in your home directory that will show you all of the settings that have been set up for zish now you can see here the zish theme is Robbie Russell if you want to dial into other themes you can check out that page and change the value here mess around with the different themes I'm just going to leave it to Robbie Robbie Russell I like it nice and simple and there is our micro break timer just just just in time just in time so if you've been watching the video this long it's probably time for you to take your hands off the keyboard the mouse maybe stand up for a second before we dive into uh specifically our iterm settings so command comma will bring up the iterm preferences and we're going to go into appearance and I'm going to choose the minimal theme now I like this because it gets rid of that that the way the bar looks at the top now it's nice and and integrated now we're going to jump into the default profile and specify all of our terminal settings now one of the things you should do even if you don't set any of these other settings is go into Keys key mappings and then choose natural text editing and the reason we want that is because by default let's say I have a long command like this uh a universal shortcut is to press option and the arrow keys to like jump over words or like command left Command right you'll notice that by default those keys don't actually work here in iterm so in our settings I want to set this to Natural text editing and we'll just remove all of the preexisting keymaps and now I can use option to jump over or command to jump to the beginning and the end so that's a tiny little feature that's actually super useful so make sure that you enable that from there I'm going to check reuse previous sessions directory so if I am in a specific folder let's say I'm in downloads if I open up well we're going to have to allow it first but if I open up another tab I want that tab to use the same folder that I was in in the previous tab that I had open so that setting is key key next under colors I'm going to set the foreground color to be all green so uh no red no uh all green no no blue and so this gives us like this lime color I just like a really high contrast between the the text foreground and background so I like to set the foreground to lime green next I like to change the default font to be a font called Anonymous Pro so Anonymous Pro isn't built into a Mac you're going to need to install it but let's go grab it so I grab it here from Mark Simonson I'm just going to download and install it all right now that we've installed the font I should be able to select it I'll be honest I actually had to restart my machine because it wasn't even showing up but now we have Anonymous Pro so I'm going to set that as my default font that looks great I'm actually even going to bump up the the default font size here to 32 obviously you're probably not going to do this but again I I present my my code and my machine a lot so I like the font size to be nice and readable so that's it for my settings inside of iterm next up I am going to conf configure my zish RC to give me a few more aliases and kind of customize how the terminal works but I have some things to do so I will catch you tomorrow it'll be the same video but I'll probably be wearing something different uh to do the rest of the setup so I'll see you then new day new Beanie so to configure om myish you can check out their Wiki they have all you need to know about the various settings you can enable or disable and then the various plugins that you can enable for me I have a repo on GitHub with my preferred settings so if you go to github.com W3 cj. files you can take a look at them there's this zrc file and this is the file that you want to modify in your home directory to enable your settings and plugins so if you look at mine it's fairly simple I just kind of have the default setup default theme I do enable case sensitivity so this is if it is autoc completing a command I'm typing in it takes into account the case that I've already typed I also have correction enabled so if I make a typo it will suggest a correction to that command and then I only have the git plug-in enabled and so this will show you what branch you're on in any given repo and also gives you some aliases now there are a bunch of other plugins that I've just never really looked into but uh you can enable those here as well and then I also have my default editor set to Nano because I I don't use bi or vim and then I have a bunch of custom aliases these are just shortcuts to various commands that I run pretty often now the git plug-in includes aliases but these are just some custom aliases that are slightly different than the built-in ones now I need to bring this dish RC down locally to my machine and I just copy paste it but I actually want to clone the repo and link to the file so that it it stays up to date with all of my preferences um but you can just go in and modify your zrc you don't have to do what I'm about to do but in order to get these dot files onto my machine I need to set up my GitHub SSH key and also all of my git settings so that's what I'm going to do in the next section of the video so next we need to set up our SSH keys and this is going to allow us to clone and push two repos that we have right access to on GitHub so there's an article that you can follow that has all of these steps I'm about to do but first we need to generate that key using uh your email that you have set on GitHub so I'm going to open up iterm run this command with my GitHub email save it to the default location inter a passphrase and you're good to go next we need to enable the SSH agent so that's running next we need to update our SSH config so this will autoload the key that we generated and also make it so that whenever you type in your password it saves it to Mac OS keychain so you don't have to type in your password every time so because this is a brand new Mac this SSH config file does not exist so I'm just going to edit it with Nano so I'm going to do Nano and then the file path and then inside of there I'm going to put this here now because I saved it in the default location this is exactly what I need but if you change that location or change the file name in this previous step then you will need to update the config so I'm just going to paste this in and then contr X X and Y will save that file next we'll add it to the keychain so I'll just run this command now we need to add this key to GitHub so I'll just pull up their docs for that they're going to give us all the commands we need to run first thing is we need to copy our public key so PB copy is a command built into a Mac and it's actually going to take the contents of that public key file and copy it to the clipboard so we'll run that command now it's copied now we need to go into our GitHub settings and actually paste that key in so from here you'll give it a name you just want to identify like what computer this belongs to I'm just going to mention that this is my MacBook Pro for century and then command V will paste that public key that got copied now it's okay for me to show this because this is my public key however you do not want to show the actual contents of this file here that is your private key and if someone had that information they could push to your GitHub repos that that you have right access to so we'll add this H SSH key and then we should be good to go next I'm going to clone down my DOT files repo now I want to make sure that we're on the SSH tab here so it uses the the key that we just set up and I'm going to clone this this folder into my home folder so I'll do a get clone and then now I'll go into that folder and I need to run a script that I have in there so I have this config script which will automatically copy all the dot files in here into my home directory so we'll do that so if I CD into my home directory now and then just do an LS with hidden files I should see my git config my default G ignore and then my newly updated zish RC so from here I should be good to go now we can make sure this worked just by opening up a new tab so if I open up a new tab zish still looks all right then that means our at least our zish RC is set up correctly and we can also take a look at what git is configured to so if I do a git config Global user.name as long as I see the setting that I specified in my git config we know that that is working as well there are a couple of terminal commands that I use frequently so I'm going to install those with Brew I'm going to put the name of all of them inside of a text file and from there we can just run the install command on all of them the first one is FFM Peg I use this to convert video to chop out sections of videos there's also image magic uh this lets you convert uh image types from the command line uh also wget and telnet are not buil built into a Mac so I'm going to install those and then tldr is a super useful tool that gives you common examples of how to use many different CLI tools so I'm going to put all of these in this file and then from here I can run xargs Brew install and then pull in that file and this is going to run Brew install for every line in that file now I'm going to install nodejs so nodejs is a runtime for running JavaScript on the back end I use this for most of my backend apps and you can install it directly from Brew but I actually like to use a tool called NVM or node version manager and this lets me have multiple versions of node on my machine that I can switch to depending on what project I'm in so if you go to the NVM GitHub repo they have an install script that you can cop Cy so I'm just going to run this command here and this will install NVM now after the install you'll notice that it automatically updates your zrc or your bash profile or whatever shell you're using to automatically use NVM for any new terminal session that you start up so if I open up a new tab and type NVM if we see some output that means that I now have NVM and I want to install the latest LTS version of node which right now is version 20 so with NVM I can type NVM install 20 and that will automatically grab the latest uh minor version and install it from here if I do node DV we should see that we're running version 20 and now I I'm going to install a couple of global commands from npm that I use frequently so I'm going to do an npm install DG one of those is a tool called light server this is an autore refreshing just static file server there's also HTTP server this is not autor refreshing but it's just a really quick and easy way to start up an HTTP server I also use this command called license which automatically generates open source licenses in my repos and also I use a command called git config and this autog generates git configs based on the project type that you pass in so I'm going to install these globally so I have access to all of these tools whenever I'm working on various projects all right we're good to go it looks like mpm actually needs to be updated here so I'm just going to go ahead and run the command that it tells me to run so mpm install DG npm that should give me the latest version of npm awesome so from this point I'm good to go I've got node on my machine um I've got all my commonly used CLI commands now I'm going to set up visual studio code which is my preferred editor now I've used a lot of editors and also there are a lot of editor options so if you don't like vs code then just skip this part of the video but uh it is my preferred editor I'm going to show you how I set it up now I already installed it with Brew which you can do as well you can also download it from their site now I have a repo that lists all of my settings extensions and everything else on how I set up vs code so I'll link that down in the description one of the first things is as I set the font to Anonymous Pro which you saw me set up earlier when I was setting up the terminal so I already have that font installed and then for the theme I like this theme called just black it's a very high contrast theme with a very dark background so I really like that and uh then have a bunch of extensions so what I'm going to do is I'm going to install all of these extensions load in all of my settings and then kind of walk you through what I think are some of the the the more interesting parts of my setup that you might like now to install all of these extensions in one go I'm going to copy them and then run a command which is going to install the extension for vs code now I would highly recommend that you craft your own list of extensions these are things that I use because it's the spe specific type of development that I'm doing you may not be doing that kind of development so I would look through these extensions see which ones are useful to you and then kind of craft your own list of things that you want to install so to install these I'm going to open up iterm and I'm going to create a text file that has the name of all of these extensions inside of it so we're going to create a thing called VSS extensions. text I'm going to paste that in here contrl x and then y to save the file now I want to run code-- install extension for every line in the file so I'm going to do a little command line Fu first I'm going to cat that file then I'm going to pipe that into the xar command I'll tell it to run one line at a time and for each line we're going to do code-- install extension so it's going to run this for every line in the file and install all of my preferred extensions now that those are installed I'm going to create a directory on my computer where I put all of my code projects so I like to put it in my home directory and I like to make a directory called Dev which is short for development now you can call this whatever you want so some people call IT projects some people call it workspace I like Dev it's nice and short but basically this is one of the ways that I stay organized every single project I create or every repo I clone I put it inside of this folder so let's go in there and then I'm going to create a directory where we're going to do some work to kind of show off a vs code so I'm going to create a directory called my first website and then CD into there now I'm going to press code period and that's going to open up code inside of this directory and then we can load in our settings and start working on some files now this is what VSS code will look like on first launch uh but I want to plug my settings in which will set my theme and everything else so it can start to look like how I prefer now I'm going to copy the settings Json that I have right here and just load all of that in I would highly recommend that you don't do this because these are my preferred settings and you should probably pick and choose the ones that you want to get your preferred editor experience and I'm going to talk about some of the main ones so you can decide if you want to enable or change those those settings uh as we go so I'm going to copy this then inside of Visual Studio code press command shift p and search for open user settings Json so by default this will be a completely empty file I am going to paste my settings in press save and then boom all of my settings kick in including my theme and layout and everything else and we can go from there now you'll notice by default my setup is very minimal it's almost like Zen mode where I'm not showing a bunch of extra stuff because I really want to just focus on the code that I'm writing so let's take a look at my settings Json file and I'm going to kind of point to the settings that create this layout the first setting here is disabling the status bar visibility so when the status bar is enabled it looks like this it's down here at the bottom there's a bunch of extra info that I don't really want to see all of the time so that's why I disable it now um You can toggle it on whenever you need it but I don't want to see it all of the time next up I put the sidebar on the right hand side so you press control uh command B that will open and close the sidebar and I like mine on the right so just to show you why let me create a new file so command in for a new file I'm going to save it so I can get some syntax highlighting and then I'll just do a little console log here but now when I toggle that sidebar my code doesn't shift to the right so if your sidebar is on the left every time you open and close it your code just shifts so that's one of the main reasons I like it on the right hand side now I've been using it this way for uh a few months now and I like it I so far I haven't run into any issues so yeah I definitely prefer it on the right uh next up you'll notice that my tab bar is not visible but if you press control tab that will show you all of your open files so that's why I don't have it visible so right here I have editor show tabs none that way it's not taking up a bunch of extra space in the vertical as well and if I need to switch to a file I'll just press control Tab and then pick the file that I want the next really useful setting is snippet suggestions and I have that set to top so if I'm in a Javascript file and for instance I want to do a console log I can just type log and then tab and that inserts the console log snippet and you'll notice that that snippet option is right at the top of that that suggestions list but if we disable this now if you go to do a snippet expansion it's not at the top and so you have to like arrow down to get to it so that's a really useful setting so that way you don't have to arrow down to get to those Snippets that you're using very often another setting I have is I disable the mini map so the mini map is this here that kind of like shows you your code Overview at a glance I I don't find it very useful every now and then I might need it if I'm in in like a really big file but by default I disable it so it's not taking up any extra space now another useful setting is linked editing and you'll see this in an HTML file so let me create one really quick and let's say we have a tag so I'm going to create a little H1 that says hello world like this now notice as I navigate around whenever my cursor is on an opening tag the closing tag also highlights so that's one key benefit another thing is if I start to edit the opening tag the closing tag automatically updates so that's super useful especially like you know if you're renaming tags or kind of like moving things around um and it's just built into vs code so you don't need an extra extension for this you can just set this to True next up I'm going to run through some of my most used extensions here in vs code now I use a lot of extensions if you visit this git repo you can see the full list I'm just going to highlight some of the ones that I use most often and the first one is font size shortcuts so I present my code a lot and I want to be able to increase and decrease the size of my font without increasing and decreasing the size of the editor so by default in vs code if you don't have this extension whenever you press command plus or command minus it zooms in and out the entire user interface and a lot of times you don't want that because then it'll just like make your sign your uh sidebar really huge so with this extension now whenever your code is highlighted the command plus and command minus shortcuts only affect your code next up is vs code icons this just makes it so you have nice and pretty icons here in the sidebar so there's cool like JS icons HTML 5 icons and really any other type of file that you create it has a nice little icon that it displays there next up is prettier now if I'm working in an established project it probably already has a prettier RC but sometimes I'm working on just like oneoff files and I want to be able to format them so the pretty a extension is great for that so for instance this project doesn't have a pretty PR RC but I can press option shift F and that will just run prettier on this file so this is really great if like you paste some Json data and you need to format it or some XML data or something like that another extension I really like is code spell checker so this is great if you make a lot of typos like me and if you have a misspelling uh right inside of your editor you can press command period and that will bring up all of the suggestions to fix it so super useful another good extension to grab is this post CSS intellisense and highlighting now there are several of these and you might be thinking well it's just a CSS extension make sure you get this one the other ones are broken for me this is the only one that seems to work and actually give good autocomplete and and uh suggestions inside of CSS this next extension is a must if you work with typescript and it's called pretty typescript errors so if you're in a typescript file and you come across some type error usually it's just a whole lot to parse and a whole lot to figure out but pretty typescript errors makes it much more readable and kind of allows you to pinpoint the exact error more us easily so once we enable this extension now when I hover over you'll notice that instead of just this blob of text we have a nice readable and also syntax highlighted uh error message that gives me a much better idea of how to fix this type error this next extension is for making HTTP requests inside of vs code now you might be used to using a separate tool like insomnia or Postman but it's really nice to have this built right in in the sidebar here so I can press command shift r that opens up thunder client and then I can create new you can also see your history of requests so if I click on these then that'll automatically load up the body and the headers or anything else that I had set it's right there in my history and it works just like those other tools so you can send these requests you can change the HTTP method all that good stuff um and then another extension that works really well in conjunction with this especially if you're in a typescript project is paste Json as code so let's say I made this API request which gives me back some Pokemon data and I want to create a typescript type from this data I can just copy that data and then over here in my typescript codes we can generate a type so if you press command shift p search for paste Json as code give it a top level name in this case it's a Pokemon this will then generate a typescript type using that Json data so this is super useful especially if you're just like using fetch in your codes and you want to get some good type completion you can generate the type and then just import it in that's it for the extensions I use the most uh the rest of these extensions are specific to languages and Frameworks so depending on what you do in your day-to-day job you may or may not get some use out of these but XML tools is really great if you work with XML and you need to format it or if you're working like with configuration files that are XML Tailwind is essential their their extension is if you work with Tailwind daily it gives you really good editor support you can hover over the Tailwind classes and it'll show you exactly the CSS that's being applied also if you're working in react there is an extension that gives you a bunch of Snippets and depending on the type of styling solution you're using in your react projects there are a set of extensions that will give you much better editor support if you're working in view volar is the way to go there's the spelt extension if you're working in spelt or spelt kit the Prisma extension is great for giving you Auto formatting syntax highlighting and autocomplete and then the H HTM X extension is great to also give you some autocomplete on those HTM X tabs so these are all these extensions if you have any suggestions for things that I missed and that I might like to use definitely let us know down in the comments and if you found any use out of the ones that I mentioned let us know as well that's it for this setup video hopefully you found something interesting or useful by watching me set up my machine and if you're brand new to a Mac hopefully you got up and going if you have any issues let us know down in the comments I'll be sure to try and help you out also every single thing I talked about every app every setting every command I ran is going to be in a git repo that I'm going to link in the description also I'll link every single app and everything in the description as well so if if I missed anything let me know in the comments I'll definitely get you a link to the stuff that I talked about now I realized that my setup is very unique to me and maybe it's not for you and that's completely fine if you uh know of anything or you saw anything that maybe I could be doing better I'd love to know about that and also if you saw anything that is useful and that you're going to incorporate into your own setup I'd love to know as well so just just keep in touch I want to know how you doing how did this work out for you was it useful was it not um so yeah that's it for this video and uh I'll see you in the next [Music] one y

Channel: Syntax

Views: 78,450

Keywords: tutorials, cms, html, css, html5, css3, education, free, lessons, tuts, tutorial, learn, software, web development, web developer, developer, web, website, macbook, setup, productivity, new macbook, how to setup macbook, alt-tab, iterm, rectangle, raycast, how to, beginner friendly, raycast plugins, firefox setup, firefox extensions, oh my zsh, ssh setup, github ssh, vs code, code, vs code extensions

Id: GK7zLYAXdDs

Length: 60min 33sec (3633 seconds)

Published: Thu Feb 29 2024