Fullstack Web Developer Complete New Mac Setup - 2021

hey everyone i just got a new mac for work it's the m1 13-inch macbook pro and i figured i would record the way i set up a new mac for work uh this includes python javascript ruby whatever else golang i guess now is something i i do a lot of um and everything from vs code setup to git with 2fa which is a bit of a dance and i even end with setting up github co-pilot and i think there's some stuff to do with you know getting your terminal right which is a little bit hard and by no means is this going to be a professional presentation it's literally just me turning the mic on recording my setup for two hours and then posting it so hopefully this is useful to some newbies out there and if you have any other questions let me know i will probably try to do a few versions of this and just get better every time but this i've been honing this setup for the past three years four years and this is the state of things now and i wanted to record it so here you go hey folks usually i when i set up my new max i do it by myself but i just got a new mac for work and i figured i should record my thought process as well as the things that i use and thread on this youtube that i have in case it would help anyone out there and if you're interested in what i use so here's a completely new mac uh i have the 13-inch macbook pro i think and uh it is the m1 version of it as well so i don't think there's that much that you need to take care of for the m1 um just need to download different versions basically the only thing i've set up so far is i've downloaded chrome because chrome and then i've done and i've turned off uh a lot of the default crapware that then that they give you because apple is slowly becoming bloatware and then i've also logged into google on chrome and let me just delete this how come i can't delete this how come it doesn't let me delete chrome i have to eject it okay whatever um i've logged into google and twitter and github on to here as well as lastpass which is my password manager um and when you log in they automatically install the chrome extensions that you have for you so these are all the chrome extensions that i have i think i've listed it on this blog post so if you just prefer a blog post version uh be my guest but i'm just gonna talk through some of the preferences that i have and why i have them and hopefully you learn a thing or two about why i do stuff so first off this is a kind of a messy format especially if you are someone who does a lot of screen recordings so you're wasting like a whole bunch of the space down here so i definitely tend to turn hiding on and that at least gives you a bigger space here and also the other thing about the top bars is extra fluff and most of the time you don't need it and the only thing i really use it for is the dates it's the time and you don't want to record this when you're doing screen recordings because sometimes you want to be able to cut things together and not have it jump so again this one i would turn to high to hide ability um i'm not sure how you do that actually so we're gonna dive a little bit into the menu bar dog bar um there we go okay so now we have the ability to go full screen and you have no sense of the passage of time and that's really good for cutting and editing um which is which is what we're going to be doing a lot of in our tutorials i'm not sure about this one i'm probably cut a little bit um being logged into twitter and github and google i think those are the three main off authentication methods i use so here for example i'm on my dev2 account uh and i can just click login i think i just log in with twitter and that just works so great fantastic if i refresh it should be logged in alright this is kind of an ugly theme so uh i've fallen out of love with this ugly theme and uh customization i guess i'm not a 10x hacker anymore i guess it should be a minimal light theme and if i go here and refresh everything yeah it's a little bit better okay the next thing we're going to do so now we've freed up our screen real estate now next thing we're going to do is disable spotlight search so this is one of those annoying things where if you type in you get all these like really random suggestions which you don't use so it probably slows it down and also just like adds extra visual clunk so let's uh go into the settings and see how we can get rid of it um what the okay uh spotlight yep jesus christ um okay i want applications uh i guess i want calculator don't need conversion go into definition a lot of this is just so stupid um it's so stupid i don't need to search inside of pdfs uh yep that's it so i keep system preferences calculator and applications uh and now it's a lot cleaner i think so let's see and you see much cleaner i would like to get rid of related searches but i don't think they let me which is a little bit annoying but hey it's progress right um yeah i think um maybe there's a way but okay so let's talk about the develop developer option as well when you have a lot of source files um the develop the source code tends to show up in search as well uh and this this developer option is is a really stupid and weird section so oh i need a xcode installed so i don't want to install xcode and that just reminds me that i haven't even installed git on this machine so this video may need some recording anyway so let's go ahead and pull up the terminal um see the applications touch xcode.app and then reopen spotlight pane if i just close it i guess uh system preferences and then spotlight it's supposed to show me the developer checkbox but i don't think it works i need to quit it maybe system preferences spotlight i have xcode.app did i capitalize it right so this used to work in the previous versions of um of mac os x but now it doesn't seem to work yeah okay well i'm just gonna leave it there um but if if i see the developer suggestions again i'm gonna come back and figure out how to fix this one because uh yeah you want to optimize your spotlight search uh okay let's let's disable ask siri because it's really dumb and always gets in the way uh siri yep i've already disabled it in my setup big cursor okay this is another tip for presentations this is more for live presentations because when you record it it doesn't actually it records the normal size of cursor but when you're presenting on a big screen in person this starts to matter so uh that's what i do system preferences accessibility the is accessibility there we go okay uh display uh-huh cursor big cursor okay now i just got way bigger it's about the size of this like twice the size of this icon so if you can't see it in this recording that's just because uh apple quicktime doesn't record the size of the cursor okay so there's that uh having a big cursor is good trackpad all right let's go to trackpad uh scroll and zoom natural off so this is for me when i go up and down i want to track it with my fingers rather than with anything else point and click look up and data detectors off oh this one is super annoying so the reason the thing about this is whenever i'm clicking on the trackpad and i do this somehow it tends to accidentally it tends to accidentally try to show me the definition like that and i don't need i'm good in english i don't need to accidentally trigger this so ah force click so if i click if i just happen to click too hard it pulls up the dictionary which is really stupid so stupid um so to turn off force click you just click here and then it's off so that's really good um okay and then turn on airdrop airdrop is really useful for transferring files from my machine uh yeah that's good i'm using keyboard alt and yeah i think this is fine i don't have to take care of that all right so let's go to finder we're done with settings this is lame uh show me the file name extensions so preferences they basically treat you like an idiot which is really stupid i do not agree with that let us let's take care of this stuff let us take care of get rid of it yeah these are all okay i just don't like it okay this is fine okay and then uh show me the file name extensions very good uh yep now you show file name extensions that's really good and then show dot files command shift dot in the finder window window okay command shift dot so the reason for this one is so let's say uh let's see touch dot get ignore right and now in the ls it doesn't show the getting norfolk whenever but when i do ls slash l it does it's a yeah it shows the dot files there uh and those are hidden files so when i think we should have you know what this is really there we go stop hiding things from me so these are dot files uh but if i do control command shift dot it starts to show that get ignored that i just created and i want it to show all the files good very good show path bar okay how do i show the path bar view show path bar all right view show path bar and this is the thing at the bottom to show where you are uh it helps you jump back and forth to navigate that's super useful very good um should i show it in the title jesus really yeah screw it let's do it this one's new for me so yep all right let's see in the title fantastic okay keyboard rematch command key to anything else literally command q closes all windows uh that's never anything anyone wants so them system preferences keyboard shortcuts accessibility um invert colors and then remap this to command q and now when i do command q again accidentally let's say i'm trying to press command w and i want to close the window but i actually press command q it just inverts fantastic now it's harmless um copy picture oh select the arrow keyboard command e so i hope this works because it broke in my previous machine and i didn't couldn't figure out how to fix it so let's do shortcuts uh screenshots yeah there we go um copy a picture selected area command e so let's try this out fantastic i think that worked um i don't really have a place to put it in so let's just stick it in pages and see what happens you you very much paste it yep that works okay fantastic remove everything from the dock except finder system preferences i don't need app store you okay turn hiding on yeah download chrome set to default yep okay so here all my uh chrome extensions are on um this is a new one i haven't tried so this is bypass paywalls and i think i'm ready to try it basically um so you need to download this repo as a zip file unzip the file inside of downloads all right let's delete this one delete this one and let's go to chrome settings developer mode for the health developer developers developers developers developers developers developers developers developers uh extensions developer mode okay load unpacked bypass there we go all right oh look at all these sites i can now browse okay fantastic save fantastic all right so now i can go to like bloomberg.com whatever [Music] and it's not going to show me that um show me the paywall so that's really good all right that's it as chrome extensions the rest have gone in nothing really amazing uh definitely get this one video speed controller if you had don't have it it will save you literal hours of your life okay so let's do the harder ones terminal setup and still hyperterminal that's what i want to use i don't really know why i use this it just seems like it's well designed and it's by versailles terminal apps fine i used to use item 2 as well um i don't know i can't really articulate i mean the settings are good for hyper but it's not like i'm a settings queen or anything i need to install rosetta sure um do they not have an m1 version uh sure they have okay so they have it in one build jesus all right so it might be a little slower than normal but did that work okay all right progress all right sweet sure so i need to use z shell for for this uh hyper js file uh but i don't have z shell installed so uh this one may take a while i apologize in advance install git yeah this one may take a while i'm sorry all right we're back uh that only took about 15 minutes so it wasn't as long as feared i think it an estimation of these things are hard but oh goodness did that work um let's try this on my zsh thing okay all right that worked and it cloned it into wear into users 6 oh my csh okay so now we have my sh installed and now we're going to customize the hyper terminal because right now it looks like this with the little squigglies very minimalist to minimalist let's go uh let's go preferences oh i have to let's edit this thing vi users 6 dot hyper dot js okay fantastic i really need vi to have syntax highlighting so we'll show you how to set that up um delete this there's this thing uh nope where's this thing wait what what my instructions i was going off of the dev dev okay okay let's look at the font family um so we need to download these new fonts um all right settings shell all right let's put this one uh slash bin slash chh okay uh all right so let's close this tab and open up a new tab and hopefully zsh is going to load it now is this csh i have no clue i'm just going to assume that it is and then i need to download inconsolata for line essentially all right download this thing [Music] install font as every time i go through this i improve it a little bit more so for example this one i know that i'm i'm using this out of sequence so i better fix the sequence right uh why is the edge detection so bad okay uh it's so font um oh yeah there we go all right so let's move the hyperterminal stuff down and i think that's actually going to be it all right it takes 15 minutes okay so now now i'm making myself in the future install zsh first before i get to hyperterminal and that makes more sense okay so we have enconcellata where's the uh i think i just run this install font and we're good all right and then [Applause] the is that let's kill this start a new show okay i don't actually know how to check um letters um anyway so we have inconsolator downloaded now we want auto suggestions basically i wanted it to auto complete stuff so echo csh custom all right fantastic fantastic okay um and then let's do vi dots cshrc where's the plugins okay so i think i have my own zs hrc uh so this only has the git plugin so let's just go ahead and skip to my zshrc so dot files there we go so i probably need to move that up as well so more edits that i need to do um hyper settings okay where's my dot file start files let's put it right next to the zsh section then so i think i have vimarcy zshrc those are the main ones and git ignore global this is important too okay um so what do i want out of this okay so let's uh let's just install all the other dot files right now so here's my dot file uh getting on global basically helps to remove like helps you prevent globally uh from checking in those random ds store files that people always have so cd uh vi dot get ignore global all right and then i have to run the git config and hopefully that's it all right now for vimarcy where do you put vimarcy hmm i guess here touch dot vim rc so let's see if i if i say vi.hyper.js vmrc basically helps you customize vim so here's here's my vim right now just no syntax highlighting nothing so now let's set the vimrc vi.vimrc and punch this in and here now if i do vid.hyper.js uh it has syntax highlighting so that's the upgrade very nice it's got other things that i could possibly do uh like line numbers and stuff like that but this is just what i have for now um i've just copied from other people and that's why people share dot files okay now let's go on to zshrc so ei dot cshrc uh there's a lot of default ones here uh okay all right all right so this is about we're about to have the biggest change in our experience um so right now i have all these little dashes here and that's very convenient um but it's too minimalist i i want i prefer to have a bit more to it so let me just edit some stuff here actually you know what forget editing let's just just keep going okay uh so let's uh let's say vi dot zs hrc just note the visual change that we're about to make um okay do we editing any path i'm just gonna assume that all this is okay yeah because i'm not i'm not making much of a choice here um so let's see uh let's see 55 db okay all right delete and then uh let's copy this over uh paste and this will include some customization to the drive uh some custom functions like mixidir uh some language specific features like yarn react python git instructions that i have and so it's a nice little shortcut to reload and to pull up zs hrc itself so it edits itself this file which is pretty fun um and also the reason i got here in the first place that we want zsh auto suggestions and zsh syntax highlighting so we're going to install those things right now i only have zsh auto suggestions so we are gonna be in a weird state uh zsh auto suggestions and syntax highlighting there we go all right let's install this bad boy it's the same thing i just have to run the commands uh there we go all right wonderful uh okay so now when i do zs zs doesn't work but if i do source dot zs hrc now this works um and you see the the format's a little bit different uh this theme it has my has the name of my macbook pro which never changes and it takes up a lot of visual space so i'm going to try and fix that by customizing the theme so uh we're going to go into dot oh my zsh then you see this you see the autocompletes now um so we're going to go into ls themes and then we're going to open up agnostic enter eggnoster.csh.d wait am i in the wrong folder all right paste it right in okay there's a nvm it expects me to have nvm in it um so i'm gonna have to go install nvm now or maybe i should just comment out at vm because i no longer use nvm yeah i don't know what this is all right let's comment all these guys out because they don't use these things anymore so now when i type yes it's z sources so what we did is we got rid of this initial bit because i don't care about that i just care about what folder i'm in what branch i'm in and what my git uh get features are okay so we we did a lot of uh work there um but you can see now how like i have syntax highlighting in my commands here i have syntax highlighting and if autocomplete so if i type csh it helps to complete zs hrc if i type vi it remembers the stuff that i've typed and if i want to i can just press right and it completes so that's a really helpful tool okay i'm almost done with my zsh setup um i probably want to do the the fonts so let's go ahead and fix the font stuff um so cd squiggle let's say vi hyper js okay all right so now i do have the fonts i can just swap this out oh sorry sorry sorry ah vim sorry i'm screwing up in the vim commands all right okay all right we're in business okay there we go now we have been see all the now all the things work here uh these little get clone things so cd dot oh this little git chrome thing um i think if i just commit it uh yep you see so you can i can see the status very clearly i can see what folder i'm in and it doesn't show me anything else beyond that i i've got rid of all the i've given myself more info than here but i've gotten rid of all the miscellaneous crap that the default eggnoster theme gives you which is the way i like it i think one of the things i would like to change so uh let's actually show you how this thing works i may not have this uh done very well but essentially it's a way of composing all the segments so one thing i would like to do i've been meaning to do this but i haven't done it yet is to add a new line at the end um i'm not sure i know how to do it but if there is a way to add a new line then i can do copy and paste better than i did before so let's see what am i doing here um i think i just add new line so prompts end where's my prompt in prompt end is end here okay there we go all right okay so i'm gonna guess that i can just do something ridiculous like echo uh new line like that and maybe it works um that did not work that did not fail either so me typing zs is like is actually the same thing as source cshrc you know that's that's what's going on here um and that should have reloaded this thing but it didn't really work so the new line doesn't work let's just do one second of googling and if it doesn't come up i'm just going to drop it zoom line okay oh okay all right well that would do it hmm that did not do it okay well i'm gonna just drop it and this is not something i feel strongly about so all right um now we have we have a pretty decent setup already let's just keep going uh we this is a new one that i've that i've wanted to do use i've been using on my new machine but it's still relatively new for me and this is fig and oh how the hell do i download this thing can i just log in no dude i jesus i already have it just give me the thing um okay all right just give me a second i'm gonna look it up on my on my other device and see how to install fig because i already have it thanks for saying you're off the fig wait list download fig okay oh jesus um all right so there's a download button and i need to log into gmail i guess all right okay i might as well log into gmail might as well install superhuman so superhuman is the superhuman.com i guess what if i already have it give me all the marketing you download thank you mac app um superhuman is the email app that i use it's 30 a month this is a luxury but it gets me to enjoy my email experience and answer more email and read more email than i would without it uh it's pretty much the only reason i pay for this thing it gmail's pretty good so it's definitely a luxury i don't think i use as many of the features that i should but i'd still recommend it if you want to check it out just talk to me i'll refer you it's pretty good all right all right so uh fig wait list there we go i'm gonna stick my let's just stick my fake link in there just in case i need a new feature uh weightless now but my version is at is here uh i don't know if you can access my version i don't actually care because um it really doesn't have that much of proprietary data uh i'll show you what it does [Music] okay set up enable accessibility formation do do [Music] jesus yeah i already logged in on this device fantastic all right yeah i also jump between working uh personal email quite a bit all right let's go one one six 162 919 there's fig see the space yeah this is fake yeah there's a little nice autocomplete thing going on in here sweet okay awesome uh made the audio complete window all right git commit and hello nice work the fake cli oh i can't invite people oh fig report yeah if anyone wants to uh to try fig just let me know okay that's fake all right let's uh get the mv and cp commands done uh all right yeah i need i need to fix this so all right okay these are new commands um alias and the equals mv iv alias cp [Music] equals cp riv okay maybe maybe not the r and then what is make there vp uh all right good enough i know what these things are they make it more interactive so let's update my dot files um man all right people want me to use bat and she's bat bat cat no hahaha uh cat with wings fine i just have to install it just give me a nice install focus install mac oh i need homebrew all right i've been avoiding this homebrew thing uh jesus hold on so homebrew install homebrew there you go all right oh okay it's going to take a little bit we're back now we have um with a bunch of stuff that we need to install with homebrew but at least i can do cat cshrc brew install that and now when i do cat dshrc uh it's nicer it's very nice okay and uh doesn't let me okay wow all right so i'm gonna update my dot files and this is my new cshrc that i've uploaded okay fantastic all right um we have a lot more things to install with brew and so i think i'll just run them in parallel uh most importantly i want to install github cli uh python ruby deno gradle power line status pauline fonts and that's it fcf is really good yarn is really good and github cli especially if you use a lot of github uh highly recommend it especially for reviewing prs the main thing i'm not going to show you here is adding the ssh key which can be a security leak and then the the final thing that i'm really going to show i'm going to try and show you in the next segment is z but i'm gonna install all these things first and then we can talk so see you on the other side we are back we installed a bunch of crap um here's the list the new brew list that i'm working with um we installed some node is this node um go python uh ruby okay there's some concatenation here for some reason um gradle java sdk yeah lots of stuff and that's the way i would recommend it doing in future i ran all these commands one by one and it just you know it helps you look basically to choose these things consciously but you don't have to do it i just i did it because like i'm setting up this up for the first time in future you can just brew install and then just do all these uh so that that would be what i recommend the other tricky part is logging in to get with 2fa enabled you have to use a personal access token which you get from here and generate there and then you do the github login and add the ssh key where you can basically just do the 2fa thing with the github cli i don't really understand it i just follow instructions but this is this is the set of instructions that works best for me so i don't have to screw around with 2fa anymore i use a bunch of other little tool things here so i've also installed node and so now i use fnm which is uh the rust based version of the known package manager and it's pretty fast and i like it so that's where that's uh that's the thing that i just skipped some time doing and i just cranked through all doing all this so now we're going to go ahead and keep going with the npm install npm sequence you can see fig working there i think this is me i don't actually know what my so where i would store this is npm js.com um maybe a copy password does that work did that work all right maybe i have a dash of my name i got the dash and github yep there we go all right i'm logged in 10 pm um i want the net netlife cli then i want some other of these nice little commands in npm uh these are not necessary they're just uh cute so let me just show you what they do sign sign bunny uh hello world and it just gives you a little hello world in there um i think fortune node uh so i think if you just pipe fortune node into signed by this network i'm not sure what this base is huh is that new that's new anyway it's cow it's cute how's hi all right hmm um parrots say maybe oh i didn't install khalsa that's party hello gold yeah very cute all right awesome okay so uh let's do undollar this is a cute package basically it does this and then anything else that runs here gets gets run properly see if you can copy your so if you copy any instructions with a dollar sign you don't have to remove it it's pretty fun uh i'm gonna skip the amplify stuff because i don't need it anymore um yeah the indents here a little bit weird so i don't need all this stuff okay all right well that's it so we're done with the terminal stuff and now we're going to do the apps and here is just everything that i use um i need a window manager i need a emoji manager let's do emojis windows clipboard this one's really good um i mean it's not the best but it's good for for a free app which uh it's good enough for me where the hell is okay there we go open and start up okay let's look at rocket accessibility um okay where is clippy spectacle um spectacle clippy all right let's make sure this opens when i log in and let's make this a little bit darker a little quicker where is clippy there we go launching system startup you know i need to edit my snippets um i'm going to try and borrow my snippets from my other computer so just give me one second edit snippets export snippets sip desktop okay um i'm going to email them to myself clip clip clippy snippets and i can do this and do that it's xml there we go download them now head to clippy import i snippets there we go yeah nice all right see it's all just those shortcuts that i use for myself very handy to have i have loom i no longer use loom that much anymore but let's just do it i use clean shot i think that's really good i can log into clean shot i guess remember me though it's time to say goodbye remember me [Music] even be what [Music] [Music] how do i download this thing though okay you want me to search your subscription but the old thing was just fine license key how's that it's pretty sweet okay all right caffeine uh clean shot is for screenshots and annotations that's the other thing i really like nice and ski activate license key activate oh come on so trying to upsell me yeah yeah yeah okay disable shortcut system preferences keyboard shortcuts screenshots turn off the commercial three commission four shortcuts okay done done ugh no until later all right so the thing i like about clean shot is that you can do this like um encounter area [Music] all right catch your area and then it gives you a little hover thing come on please work thank you it gives you a little hover thing and then you can annotate it like that um you can do arrows you can say this is cool let's starting to the top all right and then save it to the keyboard yeah so that's pretty cool okay all right let's keep going caffeine i'd like for keeping your mac awake oh no microsoft is it this one that's the authoritative [Laughter] one why is there no build oh no it doesn't look maintained there we go all right let's update the caffeine link i hope this is legit all right looks legit okay that's caffeine this is on so no no it doesn't gonna it's not gonna turn itself off and then this is off it's uh pretty handy that's the only thing it does all right okay um used to be okay so and then i guess let's get slack and discord i don't need obs anymore i could use microsoft to do stretch these really good uh now it gives video culture okay symbol note notion motion alfred vs code i managed to avoid downloading vs code for so long okay download discord download slack download microsoft to do all done nicely done download stretchly download lights cap we okay so last time i tried light cap it didn't really work but i'm just downloading a bunch of right now so uh let's just calm down with the downloading okay very good um i think i downloaded everything i guess i'm downloading cap as well okay so let's talk about lights cap nice cap is a app that helps you record your screen as a mac as a gif so you can control things like fps so let's say i want 20 fps recording and i want to have like test dot gif um yeah you can set a bunch of settings but i don't think it's important you can move the screen around oh okay now you asked me for permission all right let's try again all right let's say 20 fps record test.give yep replace it and then three two one and then we go we can move it around we can move this around and record it and press stop and that would have generated a gif that i can tweet out so so yeah pretty useful feature i think let the finder window so test.give here's test.gif right we moved it around we moved here so uh it yeah it just makes gif creation very easy uh yeah i like that okay get a cap uh screen recording this is for video uh open sorry yep um [Music] uh there we go i like that they proactively offered to restart themselves that's pretty clever um cancel so i need to open it from here and this is cap uh it shows the recording and it's pretty simple and that's it how do we stop it yeah you can choose the size you can choose the format uh it just seems a bit more advanced than nice cap um but maybe it's a bit high your options so anyway that's that's cap um let's hop up notion we already installed the notion web clipper uh we should install alfred i have the power pack and then we can install the mac oh we should install this cord as well my favorite login experience is on discord because i can just take a qr code to log in which is fantastic amazing where's discord i open discord there we go okay all right let's log in oh brilliant i'm logged in i'm in the system that is the best login experience ever all right well good job this chord okay all right and then we have alfred i'll log in my login to alpha later i need to figure out how to use setting sync for vs code um okay so um let's see how to use setting sync sync vs code settings sync okay so i think i have setting sync enabled so settings sync turn on all right sign in turn on sign in with github i think this is going to work it's great it used to be a random feature from an extension that you'd have to install but now you see it just shifted my sidebar to the right and it's syncing over the extension it's adding me to github co-pilot initializing tab nine uh it wants my walka time settings time.com settings time.com settings that was amazing that was incredible yeah it will be it will be i'm going to take a big ass drink of water go to the bathroom hey folks this is me again uh we are basically done i set up a bunch of extensions and it was going to get into the nitty-gritty details of stuff that you don't have access to but you get a whole view of the kind of apps that i use why use them how i set them up especially with some of the nuances with brew and so on and so forth hopefully this was a helpful tutorial and if you have any other questions just leave them in the comments and i'll get back to you and hopefully do a better version next year this was a very slip shot just record what you do and go for it i want to do a better version next year with that's a little bit more produced so your feedback is welcome see ya

Channel: swyx

Views: 2,096

Keywords:

Id: qwflfsgU0eg

Length: 69min 48sec (4188 seconds)

Published: Mon Jul 05 2021