Ask an Expert: The VSCode you need to be an effective developer

michael is slightly blurrily featuring in the background at the moment hey everyone yeah i'm okay with being blurred like i know this camera is really it's got a really interesting focus yeah like like here it's focused but i'm okay with being a little bit blurry blurry well you're going to have to come to the foreground at some point because today is all about you michael is it absolutely all about but first who is here yes as usual it's time this one two put your bunnies in the chat if you're new and you're tigers in the chat if you have been before which some of you are already doing wow michael our latest weekly web dev challenge winner really come on correct the one from the week before debjit jose oh oh dennis from florida nice huh from the philippines nice from kenya oh nice to be here so many people romania and india hello where is it who else is here why why why hello and michael tiger yes roddy is a bunny arena is a tiger and phoenix 7 is a quadruple bunny welcome welcome yeah dave welcome uh bunnies and tigers um yes let's share the old screen some moment uh i will just let you know where we are from not literally um well you can know that if you want but uh career-wise we're from scrimba this is grimba you can come here to learn how to code yeah i'm currently doing the responsive web design boot camp which will work yeah i've completed these you can learn many things about web development but today uh we're going to talk about vs code michael yeah yeah we are let us know in the chat uh what you want to know about vs code basically yeah if you have any questions absolutely and share your favorite tips too as we go along yeah yeah we'll share them uh yeah i thought michael we could start with a few shortcuts cool do you use shortcuts because not everybody does you know no i don't use that many actually i don't use that many i probably use um i mean let's let's just share the screen and open vs code and uh we'll see open vs code yeah i can do that um here is vs code yeah i think like for the most popular that's wise i think i just use like command the thing to comment stuff out come on forward slash yeah one forward slash to comment stuff out um i use command p to like type up you know the file names and stuff to find them to find a file yeah command shift p to access command palette to like update settings for example if i want to go like settings and then open them in json and open them in the ui and oh whoa probably that's probably oh command full stop to like uh you know sometimes there is like a light bubble on on the side a bubble yeah like a light bulb uh sometimes shows up when when you type the code and then the quick hint thing yeah and then like you can have like code actions to help you out and i think that's pretty much it i don't really use that uh that much more yeah command is control on pc yeah yes good good indeed because the lands are on mac so i kind of just say what it is yeah yeah i've come up with a few that i have discovered yeah um i mean command c command p control c control v i i yeah i use that not everyone does control control a i guess to select everything um oh and also yeah i actually do use uh control arrow so you like to jump between words yeah control uh well that goes to the end of the line yeah so basically control arrow goes to the next word yeah it depends like what system you're on if you're on pc or something it's ctrl arrow and then alt arrow um obviously try out whatever you have on your system so you can basically either jump to the beginning of a line end of a line or you can jump in between words and stuff yeah yeah i do use that very handy if you want to close the current folder you can do command k f okay well that was disappointing okay f yeah it does do that okay yeah all right bye close the whole thing oh yeah right um i noticed that a lot of these um shortcuts actually they're the same as in chrome anyway um like so like for example control v yeah and like for example control tab is to create a new control and you know uh control t not control tab um then for example control w is to close your current open tub um yeah that's true but those are mostly like they're not vs codes specific as such they're more like just general computer shortcuts nothing particularly special my first live stream says welcome lovely a few more um shortcuts coming in the chat control x i think that's delete um that's a cut no is it yeah because now you can paste it oh yeah i think it is but what's delete then i think that's control backspace shift command okay i mean control x is just fast isn't it well yeah it is really but then i guess if you've got something on your clipboard that you need you wouldn't want to paste over it that's true bit of a faff yeah interesting question from michael how did you transfer your nav on the right side um well i did this recently because mike i actually didn't notice that mike from html all the things tweeted about it the other day that he'd done it all right and he'd never looked back and i thought oh i don't know i'll give it a go you know and actually i'm liking it because most of what words see or use is on the left and okay some lines are long but generally the majority of them are the shorter ones you can just go come on b and close it you can but you can see stuff better here and if i'm dragging stuff from my other um i have two screens this is now nearer so yes anyway to answer your question how did i do it uh i can't honestly remember was it in view um editor layout probably appearance show sidebar i'm gonna have to google it yeah being s code move side bar to the right appearance move sidebar right okay yeah wait what view view reviews yeah all right move ah there you go that's the one move side by little panel yeah so well you have the option to move it left because you already have it right oh yeah yeah you can do this oh i don't like that now view appearance move sidebar right yeah it's definitely better wow good question oh louise grim yeah it doesn't mean yes command or control d select next occurrence of what you have selected oh yeah that's that's oh that's actually a really good one yeah yeah good uh says radu for when you want to edit all the lead tags let's give that a go come on d look at that yeah there is one that does all of them i think it might be command shift d command shift d oh no it's not that i think there is one that does all of them but if not command b look at that lots of fun ctrl l to select the entire line nice oh yeah oh must be something else ctrl l it could be some of them i noticed like yeah select line i want to delete copy move okay fine select current line come on hell no as you can see they may have changed them probably works on windows though oh there you go i know i never heard of that control ctrl this is one i like a lot alt to do multi-line typing yeah i do use that one yeah i use that one a lot so if i decide i want to add something at the end here well it wouldn't be at the end but anyway act alt and then click them and then you can go in here and type and yeah that is a very handy one indeed which has answers uh the next one which is that a weighted tab multiple lines yeah so that's what you do so like this alt and then oh like indenting i think they mean yeah you can just select multiple lines yeah and then tap sync and just tab yeah and it does it and shift tab is to and tab it that's right yeah if you tab too much you can shift tab actually i think uh i the one i use quite often is command g think about it and that is basically it's go to particular line so you if you type um oh yeah come on g oh is it not command g is it ctrl g on mac yeah it's control sorry it's ctrl g on both basically on mac and so when you type control g and then you can type 45 and it takes you to line 4.5 there you go so i use that one quite a lot basically like if you have uh like when you run javascript and it tells you oh you have an error online or like for example some error happens online then you can just go to that file uh command g sorry control g bang that's right yeah because someone on twitter was saying how useful it was the other day and i'm like but how do you know what line you want but that's answered that yeah basically uh usually it's in error error trace or something uh so you basically just something blew up on that line whoa what is it let me have a look yeah good one oh great tips thank you uh path says try this clear all the html and write exclamation mark and then click on tab what does that do oh right that's uh it might be like system reset or something no that's just the boilerplate uh let's just boil and play all right stuff it's coffee yeah so they're late yeah if you delete and then yeah exclamation mark that's uh an emmet abbreviation for uh boilerplate uh html so you can just how do i get it hit enter there you go nice yeah it just inserts the basic html layout yeah pretty good it's extremely nice yeah yeah we will actually cover some some pivots later in later on yes oh control uh forward slash that stuff coming very handy yeah oh someone else norwegian yes i tried my explorer on the right didn't like it very much yeah yeah i agree it's uh their left side yeah there's gonna be devices menu yeah it's gonna be divisive is there a way to hide the suggestions other than turning them off completely in the json file they make writing code as a newbie so hard sometimes because it's so distracting what suggestions i think the intellisense so you mean one by so if i were to do like this then you don't necessarily want to see all of them you don't want to turn them all off uh i suppose you can well it depends what you have installed it depends on the snippet library and stuff but i think you can disable some suggestions yeah it would be in settings i i would look up i would just google vs code disable um disable particular suggestion but i suppose it's more on a one-on-one well one-to-one basis like if basically if you've got this one how would you like disable picture for example no you just want to say no i don't want this one escape yeah yeah oh you mean like uh cancel out of intellisense yeah you just escape out of it yeah i don't know why you would cancel out of it you would you're like it's at the bottom well if you're finding it distracting and oh i see it or you need to see what's below to be honest it's like you know like fish getting used to it like i'm so used to intellisense being always in the way that it doesn't bother me anymore yeah i know what you mean anyway i hope that's helped yes what else do we got um oh alt plus up arrow moves the current oh yeah i do use this one a lot this is a good one oh i actually picked this habit from you yeah around them oh it's useful and yeah if i've decided uh what can i decide one of these needs to go up list gonna go up it's actually i think it is out yeah i think it's oh shift i know that's copying it yeah okay it is it is up yeah so just option make this easier to see option and then arrow you can move them yeah and um then option let's do the bottom one option shift arrow copies it down yeah yeah anyway let's get into like the me the the cool bits okay is this not cool michael i think it's just it's just the shortcuts in it control f2 selects all occurrences ah that's the one ah yeah but i guess that's on windows on mac it uh it's probably you need to function let's shift nope yeah anyway it exists somewhere okay that's awesome i think it might be command shift g really that might be something else come on shift g oh that kind of highlighted them but didn't oh that just brought up the search yes hello yes oh click to multiply cursor shift guy shift command l yes that's the one yeah selects uh everything of that type hold alt to set multiple cursors when you click yes oh didn't know about the old arrow keys okay so michael tell us what have you got for us planned today um so i have uh written like a quick little doc where is it because i don't remember ah awesome right cool there you go so i basically wrote uh you can you can probably just share that page so that's just for this one uh i was i was like um well when you basically proposed about making this go tips video i thought like the most useful ones that i kind of do all the time and i i probably enjoy that the most some of them there will be basically um the first one is kind of actually quite boring uh but reason release notes so really you learn a lot about vs code by occasionally it restarts every month usually somewhere in the middle or in the beginning i can't remember now but it pops out with this like little preview uh in a separate tab and these will be like release notes for you guys see august july june yeah pretty much every month yeah i see them and i instantly close them let us know in the chat if you read the video do you read if you do put an eye in the chat and if you don't put a copy in the chat coffee yeah okay i is if you actually read them and a coffee is if you just exit it like i do yeah so that one there so there you go i definitely beat the chat oh sorry i love the chat i definitely read um michael's or no yeah well uh basically yeah there you go you can read um read the release notes that's my vsco tip um because you can learn for example uh back colorization then there are some um additive highlighting notes bracket colorization oh that's just yeah isn't it now now it's built in um so then you can see all sorts of cool stuff and usually like i think somehow i found tom chan says sounds boring as hell will never do any work if i read all that rubbish it's not actually like and the thing is that release notes are pretty good because they also come up with like um they're basically like come up with gifts and basically they say yeah that's that's what you can now do um anyway so i think from august uh there is like different python like from the july one uh there was a cool uh drag and drop terminals that's a really good one and then live preview extension uh you can have a debugging support uh so for example there is now a new live reload extension that basically does it right inside of your browser so i don't know always that well not quite because for example um well here is this live extension here so here is an html file and we can just click uh go live and then it loads in a separate it loads in the browser right yes uh but there is this oh it's not on the other side yeah because why not cool uh [Music] clearly not happy about this but yeah no oh god uh i i don't think no yeah it's not live shades it's um from the release notes what do they call it live preview live preview that's right so live could be life changing actually preview uh i don't think it's microsoft it should be oh that's that's just yeah it's not called microsoft live preview it's just live preview made by them yeah there you go so and so that live preview um and also in in the release notes they say you can um live preview there are extension release notes as well i told you really really really nice as useful anyway in there they say that you can configure it running with debugger uh and that's for javascript but for now let's just i love the cricket sounds when you say debugger we're coming to that later what is your bugger yeah we're actually gonna come to that but for now can you show us what live preview actually does so um how do i minimize this because oh i think that's yeah there we go that's how anyway i'll just close it anyway commander with p as we already discussed and i can type live preview and now you can see this option that says live preview internal browser you click it and it opens the browser inside of vs code right next to it wow yeah that is amazing you basically can now you no longer like if you have one screen you no longer have to like uh basically fiddle around with windows settings and stuff it splits it for you and obviously your live reloads it as well so so let's just rename that there you go i've just called it web dev challenge and let's return that back weekly there you go it's really snappy it's really snappy that is amazing as michael says yeah yeah i know yeah i know how awesome is that and the only way you can find out about it is if you read a release notes yep oh someone will tweet about it eventually there was yeah i know but they will tweet about it in like two years and you can learn about it now yeah it's good info it takes a while to get through every month yeah not really it's like 10 minutes you literally what i do is i just scan through the main titles so like um how where is it hi yeah so uh what i basically do is when it comes out i just read through these and if it piques my interest how long will it take to read one paragraph like you know tops 30 seconds and then you just have a look at whatever interests you you are like oh actually that sounded quite quite interesting and then you click on it you watch the gif and then you play around with it so it's half an hour after that tops and you find something interesting hmm yeah there you go there is a vs code youtube channel apparently yeah yeah they well basically if you can't be bothered to read release notes you can watch them there is someone who actually walks through every single feature in the video but to be honest like if you say you don't have time to read release notes then you definitely don't have time to watch your youtube video about it yeah right what reads the release notes for the sims and that's what's important really i agree fair enough um where's this question yes triple v wants to know how do you get console log to work on vs code can you run us through that what does that mean console to work on vs code basically how do you see your console logs when you're in vs code i don't think i'll follow so like uh if you're coding in vs code and your console log something where can you see that so basically opening the console i guess is yeah oh can you show us how to do it so you can do is you can basically open your terminal here so he clicked and dragged up from the box yeah you basically just like around here on this blue line so if i just close this again so around here on the blue line you see it changes like here just like here up and then you can just drag it up and that will be it'll be there anyway so um any javascript um well let's just can i just uh for a little bit just exit this folder yeah what's going on uh i'll just make um stream make a stream folder and i'll just go there so i can talk about anyway so as you can see it's an empty folder yeah i'll just clear it up let me zoom in a little bit more so what i'm gonna do is you can say touch uh and then just like uh i actually call my javascript files like playground.js uh and think didn't one do that no i didn't want to open a comma file yeah i wanted to open it so from terminal you can open vs code uh folder inside regretting using code that i actually use for this now that's okay okay oh well i've i've left it but michael i'm not sure this is what they're asking well anyway so you create a new file and then you can uh basically you can run the javascript either in the browser or in the console node so if you have if you can't run the file in the browser you just need to run javascript pretty quickly because you have some script uh yeah so if you didn't have html or anything yeah you don't have actually you just have your app you can't open it in the browser basically and you can't open it in the browser so what you can do is because you have let me just drag this up one more time so there you go what you can do is you can actually invoke it with node and you say playground gs and oh you don't have node installed on your pc no i'm sorry on the other so anyway you can invoke uh you can invoke it with node and that should run your uh your script so i guess that's what people mean by running in vs code um gets the following error node is not recognized as an internal or external command yeah you need to install node.js on your laptop like leon doesn't have node installed because she doesn't do any server development or anything uh you need to install node um but yeah just google how to install node and that should get you there okay anyway so that has helped yeah that's just my question pressure hunter let me just close this uh there we are oh crikey that logo is a bit thick well they're always that big no it's just right sure i tested it on my oh okay it's gonna be awesome that's good uh hello says alex hey yeah um many comments which is brilliant um ooh yeah someone's asking about quokka vaguely heard of it that's all i've got to say i don't actually i never used it i don't quite remember the way it even does i just remember thinking yeah the name that sounds good yeah no i'm not using it i remember the name but i haven't used it so i can't recommend it and if you're wondering what a cooker actually is it's this little smiley animal which i didn't know this existed until last year yeah until i found a library called like that no it was before actually oh really i had a colleague who at the start of lockdown to cheer everyone up would send a daily quocker picture all right this is the first i'd heard of this animal anyway i digress back to vs code yeah so we have uh looked over read release notes and then basically uh then you can use the docs kids yeah then you can use the d bar so debugger is basically um let's look at this do you have any javascript in this um oh there you go you do have javascript here yeah all right this is going to pop up on the left again you can move it yeah i'm sorry i'm going to have to move it for now because it's it it's unbelievably painful that one oh yeah oh that's just relief anyway so uh there we go so there's basically some code and for example uh normally the way people debug is you just like for example you're like oh i want the can you hide these images this menu so it's easier to see yeah yes now it's a bit clearer there you go so there's index.js and we're inside of index.js and we are like uh okay so i wonder uh what is this so let's close this as well so for example the subs variable yeah you're like what is this subs so what people normally do is they go console.log and then you write subs and if you have a lot then you normally what you do is you write something like way oh yeah yeah or if you have a lot then you like start creating multiple lines like to attract your attention on to that so but what you can do is now uh you see you if you hover over here uh you will have this like little red dot and when you click on that little red dot you can then uh this is called breakpoint so when uh the browser will read until this line it will reach this breakpoint and you'll be able to then debug so let's let's hold that breakpoint and then again because we already read the release notes yeah this said uh that you can do live preview this extension does break points uh i think it said somewhere here ah sorry that was that was july actually that was last month like uh live preview there we go and it so here you can run uh live preview show debug preview okay let's try that why not so client of p show out that was like run debug focus on break points for you oh what's it called live preview whoops live pre oh we need to stop it first stop it live preview i don't know start server sorry that said also here that you need to uh basically you need to enable this setting so let's enable the setting and you go to settings preferences open settings ui and then i just i just copy the name of that setting and that should find it for me oh there we go and then i just tick that i hope that that's it um [Music] what do i need to restart i think i need to rest obvious code ah yeah boom boom [Applause] uh and you have how how did you keep oh the dog is on the side obviously oh i see okay now we've restarted vs code everything's on the wrong place yeah it's like like alice in wonderland i know anyway we've restarted that awesome cool so now uh loaded thinking maybe you have to start server oh i wonder does it not safe i didn't say i'm not saying those settings it says yes yeah um live preview debug on external preview okay maybe i need to stop all the service maybe you need to have it open there we go oh oh no it wasn't showing up anyway so show debug preview here we go show give a preview uh then they ask you for some permission yes and you just click yes without reading it yeah absolutely exactly and then you say yes to that too crikey and then it's gonna think about stuff uh you can click on that link and then some stuff is gonna were so why win the html again well because you need to load the javascript uh okay it's blurring it's blurring okay actually have we where have we placed this breakpoint we have priced it on line 12 of index.js yeah i mean if it's not gonna attach to it that's gonna be really funny uh but as you can see it's a you know it's a debug uh feature that's my novel not always work let me just uh console there you go you always have to come back to console logs yeah let me just only with the scrambler family could we make an hour of changing settings on an application fun says denny i know i mean to be like changing the settings is like literally the main point yeah it's okay you got this ah triple v says i think you're both the most adorable part of scrambler and then marika says and pokemon oh okay there you go ah it's me being silly i opened the wrong with them it should be in this window there you go anyway okay so it's on the window and they see the code stopped as soon as the code you see the browser static hanging like you're not showing anything so the browser basically waits for you to then tell where it's going uh so now we are on this breakpoint right and we say basically on this line and then you've got controls over here which is like you can jump over the point you can jump inside of this method so for example if you want to see what's get submissions you click this button that says step into so you can step into the thing but what's interesting is that before we run this method this is what we have like we can see that the variable images over here is now set to this and stuff so for example let's have a look at what the get submission does we can just step into that and it takes us into this function and it says okay so this is what i'm doing fetch you're like okay that's good so now let's go to the next one uh and like whoops i overshot accidentally so what i can do is i can say actually uh i want to replay this whole thing so i just clicked that green arrow and it replayed from the start it basically said okay i'll start from scratch uh so what i want to do is yeah i want to get into this get submission and then for example before we move too far i want to like stop before we return from this function get submissions i want to stop just before we move that so i say okay let's go damn it did it again sorry wrong button so basically it's a way of isolating out certain parts of your code to find out what the problem yeah like yeah kind of like that yeah i suppose i suppose you can say that yeah so you can say you can then break point on get submissions and for example after that we can actually uh let's repeat again cool okay so now we stop and get submission i'm not entirely sure why we don't stop on display submission count where it doesn't break point but it's kind of you know experimental feature on on this extension this is like the easiest debugging i've seen in vs code with like front end code and stuff uh but usually the breakpoints they like it basically stops it inspects the variable and it helps you tell what certain things are and then instead of console logging you can actually just stop and look at the code as it's been executed so you can step through the code as it goes so that kind of answers this bridgette how do you debug without the extension so without the extension you uh basically set up the debugger uh in the vs code has this thing um over here it's like a play button with a little bug on it so that's the default debug here depending on the language and the environment like if it's in react if it's in vanilla js if it's in view and so on you should probably just google separately like vs code debugging and then your environment because the settings do differ a little bit but all of them actually support breakpoints now um so you can break point without this extension it's just that with this extension in vanilla js and so on it's probably the easiest to do in vs code so yeah yeah it allows you to pause the code and examine the state of your app variables yeah exactly variables functions you know what steps where and so on and it takes you they breaks at certain aspects and so on so yeah it's pretty good so how do we get out of it now uh you click the stop button yes yeah there you go there you go and it stopped okay how's it yeah all right how do i get rid of this uh you just click off ah there you go all right let's move on very nice yeah okay oh the next one install and enable debug yeah coming up next uh the next one is setting sync so settings things is uh it used to be a separate extension but now it's actual uh call meltdown in five seconds no i just need to close there was that window open wasn't it browser window somewhere on the side yeah oh maybe it's on that screen let's just move halfway oh yeah um port stops over there you go it worries me slightly that that's orange at the bottom it's usually green but never mind uh that's because it's somewhere it's running there can you just close vs code uh no you just go uh what was it called preview live preview uh starts no i think it's you know a bit buggy so let's just quit i think i think it's useless buggy yeah anyway yeah back in business you need this oh dear yeah cool okay so now let's go let's get back to this back to normality yeah back to uh what was i talking about you were talking about this settings oh the settings thing yes that's right that's right so again uh i can't repeat it used to be a separate extension yeah i really said that set in sync but we can do now is uh if you type setting sync you can then say turn on and then over here you you can basically choose uh the main problem that you would want to use that is for example you know you have multiple laptops and between them you have different uh extensions different themes different fonts uh you know maybe you have set up different shortcuts and so on so basically whatever you want uh so what you want to do is really make sure that you don't have to start vs code every single time you get different laptop or something uh and it's all synced between your work laptop your home laptop whatever yeah that's true when you get a new laptop you have to add them all again yeah it's it's the right paint so what you're gonna do is you can just sign in to github um and the way i did that is again are you basically setting sync turn on you you select what you want to sync which settings you actually want to sync and then you click that sign in and turn on button and then you sign into your github you say yep that's the one and there you go it's turned on yeah so now settings sync now uh you can actually just open show settings should sync data or sync now so basically what you do is next time you're using vs code you just log into this uh you know and it will magically sync up all of your well you can open the help page so you after you've turned it on you can basically it's like it's like git for your uh of your settings like for your settings yeah and it basically syncs up all of these settings json files all of your extensions ignored extensions deleted and so on and it even does uh like if you have conflicts it helps you um resolve the conflicts between like extensions nice yeah pretty pretty man ah sorry um i'm getting a sound machine to follow my wife around yes yeah uh exactly that's called call to arms but that doesn't i know i pressed the wrong one okay never mind i'll press the one above it vs code says danny needs an extension that makes similar sound effects like leanne the sad horn would be funny every time we get an error yeah definitely oh well in my case that would get so annoying non-stop for eight hours you know yeah uh what if vs code is paid what would you choose for the next money huh honestly i probably would just pay for it yeah there is that i haven't well i have tried sublime i used to pay for it like i used to use um intellij editors uh no well they're not intelligent they're like uh jet brains champion said yeah i used the c-sharp one uh i used golang i used yeah i used a lot of the editors but kind of like i don't have to write c sharp for a living now so i kind of you made my subscription lapse uh and yeah i just used vs code you churned yeah i turned i churned anyway create your own snippets yeah so you saw that you can actually sync your snippets so um normally what people do is they kind of take snippets from other people so like uh you go to or if you're me you have no idea what a snippet is and don't use them oh okay well i mean like uh earlier in the thing right when you type up one [Music] that's a snippet so basically it tells you like you you make you type some text and it suggests you some more text that is a snippet uh so there are no it's very handy yeah there are plenty of snippet libraries oh wow oh that one's got a duck uh yeah there are html snippers javascript snippets reacts differences you know uh view snippets basically you know you install any extension and you'll have those snippets with you but what's really cool is that sometimes you can install in well create your own uh so how can we do that can you install one of those so we can check out like how it works kind of thing like javascript es6 snippets um let me close this so for example uh you see there is like trigger which is basically the shortcuts right so well let's say yeah we're not like let's install this and then when we go to index.js right we can just say uh there you go so these are the suggestions from if you want to import and stuff it basically auto populates the stuff for you that's cool yeah we'll send the html one uh and i actually don't know um oh look at that that kind of looks like emmett yeah uh so it's kind of already built in but anyway you can yeah it is built in so if you type dim oh you're not in h yeah oh for crying out loud yeah why didn't i know that oh man look at this look at this look at this you can type ul and then arrow li times five i have seen that oh no i think it's like things like this i think kind of five yeah nice there you go so it's basically ul child list item five tab boom wow amazing that is amazing yeah anyway it's already built in so you don't actually have to install anything it's it's already the envious code so show us how to snippetize a piece of code anyway yeah so let's see how to snippet eyes uh i know that a lot of people type console logs all the time and what you normally do is you go console.log a message and then you well let's just say variable a b c actually no variable what am i and this variable will be uh i don't know well i i might not have used it there you go console.log and then i want to cancel out where am i so basically you have to like type out if i were to type this out i would go console dot log uh open the brackets and all the rest yeah so read this here and then some description about what this is comma and then variable name okay cool right so that was a lot of time what i can do next is i can actually just create ctrl shift p again i think this is like snippet insert snippet uh no you can preference this configure user snippets you click on this you type javascript or whatever like oh actually well there you go it's like whatever language you want coffee script c sharp f sharp you know html anything anything where is that actually haskell high school is not there anything apart from high school anything apart from lots of other languages apparently uh elixir no elixirs also there anyway javascript javascript is that we can even do react there you go see anyway javascript cool javascript they opened uh there is some comment about how you're going to do it but basically it all boils down to this is a json file so you start with a string which is the name of your snippet so this is not functional it's just to make sure it's different from everything else and it's an object so it's the name of your snippet which is a console and then you can then see that for example it gives you here prefix so prefix uh is basically what's gonna right what's triggering what type of uh word that's gonna yeah basically remember when we type i am and so on that's that's gonna suggest uh like basically intellisense it for you so i can say console uh or if i want to have i think you can actually give it an array but uh again we did you share that link um earlier yeah yeah so this you can say prefix and then you can give it an array of different shortcuts that you want it to be as a suggestion so you can use more than one yes you can use more than one which is what i'm going to be over here so i'm just going to pick it so you can say cl for console log or let's just say log you know there you go so we'll have three suggestions then you have a body and then actually let's let's write it out uh you have a body which is an array i think yeah so i'll just copy this so i know the syntax because i don't use it very often but still uh so what we basically do uh let's just break this down so what you have is the body uh it accepts an array and it basically takes a string but we can take multiple strings and then this is basically what's going to be put out as a text so i want as a text we put our console.log right no console.log now i want uh remember i wanted let's just copy this into here as well we're going to delete this a little bit later so what i want is on console.log and then quotes cool let's insert quotes notice i put single quotes so it's not interfering with these double quotes you can guarantee it doesn't matter so i want single quotes comma and then a variable so inside of single quotes i want a piece of text um which you can just type up whatever you want and then here i want a variable so if i hit tab let's say i want the first thing i want to type what variable i want so i'll say the first thing i'm going to type is one variable and then this text is what's gonna show in the suggestion let's try this out so why is it number one so number one it's like the where your uh cursor this blinking thing where it's gonna land number one and i'm just gonna type here dollar two yeah just to show this let's just let's delete this to just have number one number two right cool and just very quickly because we're good citizens let's describe what this is console log snippet you don't actually need this description anyway remember number one number number one number two let's go to index.html and now we can just type cl and there we go look at this it's already suggesting us when you click on it you see the cursor is at number one so i can type what am i and then when i hit tab it's going to take it to number two inside of this text but notice that like right now when i say you know log or actually i can just say cl right it's like where am i typing what's what is this what's the first one what's the second one so what i want to do is to be a little bit more destructive so what i'm gonna do is number one column and actually i'm gonna type some text uh your variable uh and now when i type cl it now says your variable so it now tells you like okay you can now substitute me with whatever okay yeah and now the next one number two is obviously going like uh your debug debug text okay another one number two there you go and now when i type cl it autofills it for me i know before my next question is advised i don't know then basically this debug text can go read this there you go and uh that's the snippet that is really quite something awesome yeah wow michael yeah was it well not really i just it's just a snippet uh so now it's like literally if you find yourself typing something tediously all the time or you're like oh i wish i knew what this is yeah just create your own snippet yeah oh well yeah that sounds really good and that um [Music] yeah can you explain encock in three minutes oh boy uh angry in three minutes i think i can give it a go um anyway two minutes now oh boy maybe five let's try it uh the next my favorite tip is ngrok and if you go to this website ngrok uh it basically says public url for testing your chatbot uh testing whatever anyway you can say get started for free uh sign up with github very handy authorize and so basically ngrok is like a really handy utility that helps you uh channel your local host to public internet without deploying it anyway so for example you have a problem like yeah you're developing this website yeah i am okay well you're developing this website right yeah the submissions page developing is a stretcher how do you how do you test this html is mobile friendly well i just load it and then right so and and you load it and then what do you do with it then i think what you're getting at is i can't actually test it on my phone yeah i can test it in the browser and like change the browser when doing that but i can't get it on my phone without hosting it somewhere yeah so do you know to get it on your phone you need to like host it on netlife or something and then you go there and then if you if so if you found the park there then you're like you make the change and then you push it to netlife again and then you go on your phone and look at it yeah it's a bit of a fast exactly so what you can do is you can use anger yeah you can basically download for mac os also note this token over here please don't share it with anyone publicly especially in the youtube video but what you can do is then you can click auth token and you can reset it yeah there's button over there so yeah anyway we'll reset it after the stream uh and then there are instructions there you go there's like you can unzip angrock so this is scary let's open the terminal again uh so let's go to your downloads folder and unzip what was that called um angrock i mean tom chance just pointed out when it's on localhost you can access it by navigating to the ip address uh but not from your mobile phone right so you can't actually take your phone uh and go to that local host in the ap address he's saying you can can you you can you can make your browser to the side of of a phone but if you want to actually go on the phone to see if it works on mobile safari that's always saying um well let's try it well if you type localhost on your mobile phone it's a completely different laptop it's not gonna work well it's it's a different machine it's not gonna work because it's not connected to your laptop logo host oh they're saying yes you can look go to the browser and i will try it i think you can i think i remember doing it okay well there you go it's port 5501 you can do it no it's not yeah it is look 5501 no michael what crumbs no you have to type ip4 address yeah oh this this is that our p4 address okay so you want to go on your phone 5001 that's that isn't it yeah okay safari cannot load the page yeah that's because it didn't do it completely oh you need to go to slash index html yeah slash slash yeah okay okay it still didn't do it no because they they're not connected it's not going to work no that leanne doesn't have known on vs code so how can she run it on localhost uh well that's because um well presumably vs code runs at four lan on this because then it basically is code plugs it to the browser and browser has javascript there i think you're not running a server though are you i don't know oh there you go it's it's live so you just there you just click go live and it goes live yeah and it goes live and there you go click go light and i think it's you're watching us on youtube yeah but we're watching i've been watching us on youtube the whole time and not on stream yet no i don't think so because i saw some right yeah no okay so let's carry on with engraft yes let's carry over i'm the one getting distracted anyway so ngrok uh you'll have michael b anyway so anger will be like a utility over here in your there's a file called snake improvement don't ask it's all safe for work do you remember where it uh where's your finder it's is it in downloads oh no so you is oh it's in desktop local uh that's why i couldn't find it anyway maybe angork is better but i use localhost on my phone cover it all the time via iphone huh i'm sure i've done that before at work i think i have i've got no idea how it works but anyway oh no look if you go to browser go to localhost 3000. what i just type localhost 3000. not on your mobile phone i don't look i don't know yes carry on with them i will uh stop getting derailed i'm not getting too real anyway there we go so you then uh the second part uh you just configure the pancreat here there you go that's saved and then we do is we are running this on port 5501 so what we do is we just run this ngrok 5501 and then you expose this so then if you go to this url me yeah okay if you go to that url oh okay http yeah okay can you read it yeah seventy one three and then like anyone anyone who's watching this as well and you can go one it's not on easy wear jeans right 109. there's an easier way of doing it very good that you asked 180 180 you're not gonna traffic yeah right it has camera open there you go you can actually see it on the phone it's loading extremely yeah and now uh if i wanted to for example indexed i don't think there's a people looking at it yeah there is because you can see 80. no it's not 80 people no this is how many connections opened i think this 3133 26 24 these are open connections so about 20 people uh went to have a look really anyway so uh if i want to i can just do weekly refresh and now that just says on the top you see it now says whoops oh it's not i think that should they anyway i'll just remove this hole i don't have to refresh i'll just delete the logo yeah okay there you go logo is going oh yeah yeah simply up oops dated there you go anyway ngoc allows you to share the url outside of your local network that's right same thing yeah so basically that's quite a useful tool for debugging uh but obviously you know typing up this url every time is a bit of a pain so uh my tip is there is a utility called qr uncode you can install it with brew or apt or whatever you have on powershell i don't remember but basically what it does if you type this little nifty line qr png it will then generate and it will basically generate the png image for any piece of string that you want and then you will be able to qr code your own url if you want it wow um you know like okay so let's let's kill that connection now um probably take a while but you don't have brewing salt either just take [Applause] that's right yes yes well thank you for that michael i have learnt a lot good stuff totally we will be back on friday live coding a gradient generator i have seen that some of you have already sent in wonderful gradient generators i haven't put them up yet because i have been extremely busy this week but i will do asap in the meantime if you would like to make your own gradient generator here is the challenge yes very exciting to see all of the solutions so come along and see me and michael pumpkin and another pumpkin no sadly there's only one pumpkin there's only one pokemon was that another pumpkin yeah yes and you may like to check out my code with leanne youtube channel i have a new video in the works i've forgotten what it was about because i recorded it last week and i need to edit it i think it was good it will be something that will make you go hopefully yeah yeah wait wait oh yeah so join us um on friday for this live coding every knock screen birthdays no live coding extravaganza where we will be making this michael for your information yeah no i i'm already like this is more css and i have no idea yeah yeah he said ruin windows uh i think you've got chocolaty on windows so you can use that instead yep chocolatey oh no bru you don't have bruin windows bruise on mac kevin's saying if um if the server is connected to your home network you can use any device in your network but it's a security risk crumbs that sounds bad yeah yeah oh we're back that is good news yes thank you all yeah oh yeah oh yeah yeah we we always keep forgetting to do this well what do we always forget don't forget to we always forget to ask people to hit the like button and subscribe oh yeah yeah yeah moves the lecture is going to send actually dave i have realized i have a perfect noise for this that's right colchester famous for elephants apparently okay see you all on friday [Music] [Applause] [Music]

Channel: Scrimba

Views: 1,343

Rating: 4.951807 out of 5

Keywords: web development, coding, learning to code, coding tutorial, learn web development, web development 2021, web development tutorial, front end developer, frontend, learn coding, web dev, software development, JavaScript, javascript tutorial, learn javascript, javascript tutorials, vscode, vscode extensions, visual studio code, vscode tutorial, vscode setup, best vscode extensions, vs code, vscode c# debugging, vscode extensions 20201, vscode web dev

Id: H5eSet_cAxQ

Length: 70min 29sec (4229 seconds)

Published: Wed Sep 22 2021