Discover Github Copilot with us!

Scrimba · Beginner ·💻 AI-Assisted Coding ·3y ago

Key Takeaways

Uses Github Copilot for coding assistance and autocomplete in VS Code

Full Transcript

hey where hey indeed it took longer than usual to go from loading to now live we were getting worried but it says we're live now yeah i hope we actually are in the meantime let's say hello to people in the chat hey we have darkmoon gaming oh yeah paulina webdav made easy skye duncan conan conan debbie two minutes left said conan right now we are live alas alana's here shout out to my newsletter buddy we write the newsletter together speaking of which the latest edition will be dropping uh soon you can get a sneak preview right here and there's also a link to join up so we can all uh yeah share what goes on in the scrimba community so if that's your cup of tea check it out yes hello also too alexander that's right yay very good and gina and ankit and denish wonderful to see you all here michael just asked what are we doing today and the answer is we're just checking out github co-pilots which is very exciting very nice what this will look like it will be part demo and part discovery yeah i used copilot for the first time only yesterday was amazed by it so i have to say very very nice yes excited to have a look at it i suppose and michael's been using it commercially you might say for a while now i believe uh yeah i actually got uh somehow i got an invite when it was in beta um so yeah like good i don't know maybe like six months or something nice so you will be the pro good to know i mean to be fair it's so good though i don't actually notice it anymore it's uh i just think that's what autocomplete and vs code looks like and that's it yes we'll find out what it's all about very shortly but first some music daydreaming that'll do for now and the plan i have is to you may remember from a few weeks ago our vacation planner uh we made this in scrimba without co-pilot it took us a while yeah fair enough yeah a lot of copy pasting and stuff yeah yeah my plan is to recreate this go go go pilot co-pilot bye um fine but first i have a couple of questions for you michael okay he is good in lighting question number one is what is co-pilot and why should i care aha so um so github copilot is i guess it's like a well it's a piece of software that is aiming to uh make coding a little bit easier so um just it's kind of assistive technology where it helps you instead of memorizing all the properties and what you need to type it's kind of trying to hint you with prompts but unlike uh nds code when you type a variable then press dot and then it gives you a list of things that you can pick from which is called intellisense so unlike intellisense uh github codecar is also trying to kind of approximate what you are going to type so sometimes uh like in the demo you can go like it's all across languages and stuff like that so yeah if you type for example web function then because it's like ai based they had a lot of they basically scan through public repositories in github uh i read like all the different code from like python javascript typescript whatnot and uh they're basically trying to assist you on the most likely thing you'll want to have based on all of those like heaps of code that co-pilot has read so for example here the user the human has typed in a comment get average runtime of successful rounds in seconds and co-pilot apparently have come up with this yeah exactly it's it's quite fascinating uh you can literally just type what you want a function to do i mean it's quite interesting that in this demo it says guess an average runtime and it already proposed you have to do that um how to extract that into a function um in my experience usually it kind of like proposes you blobs of code line by line yeah it kind of is doing that in the gif i guess it is yeah that's just for them yeah you do easily type out a function how you want your code to look like and stuff and then based on those inputs it will try to hit you towards so there are some ways of making co-pilot inputs a little bit more correct so usually you would comment your code a little bit you would write a name or a function uh with typescript it would be helpful if you define types beforehand as well and then the input would be pretty pretty good uh but sometimes for example if you if you work with a lot of json files and stuff it's sometimes it's really random um so yeah it's like some people start freaking out but it's to take away our jobs uh yeah well actually as it happens that was my next question oh right is co-pilot going to take our jobs yeah um no i don't think so it's uh it's definitely gonna make your job a little bit easier um because you're gonna spend a little bit less time on stack overflow uh yeah and also you know like if you type uh if you javascript it's like uh you want to know if a particular piece of text is inside of a sentence or something i could never remember is it dot includes or is it dot contains yeah uh so if you watch us regularly on a friday you'll know that we quite often know what we need to use but we can't remember how to type it so we go to stack overflow or go to google and we find it and we copy and paste it yeah so you can just write like a quick comment uh does this string uh contain this word and then it should hint you towards the right syntax straight away isn't it also from it takes answers from stack overflow or did i imagine um i'm not sure i i've read i've read the actual like how it works under the hood a long time ago so but yeah could be oh hello everyone who's just joined us great to have you here uh thank you for reminding me gina about our tradition which is if you are new to watching these streams please put a bunny rabbit into the chat if you've been before hit me with that tiger we're going to do anything with this info it's just for fun there is a question uh from mangaka do i need to have some background to understand what we're doing here i don't think so no no you're learning to code probably you're screaming student that's not a hard requirement they're basically that's pretty much it co-pilot can work with any language can't it so oh i read that as like is there any requirement for the stream oh but is there any regard for co-pilot uh oh no i think the question is do they need a background in anything to understand what we're about to do and i don't yeah no no no i don't think so everyone is welcome co-pilot is absolutely my life yeah it's quite fascinating i remember like i was really impressed when uh because at university i had to write some fortran uh and it's like it's in you know basically like ms-dos you type stuff there is no checking or anything i remember vs code bloom put my mind away it was fantastic yeah you press dot and all the functions just show up it was great uh so i think it was kind of i was equally impressed with cold pilot when i saw it there is a question can i get a link for the screaming discord are you sure i'm trying to put my mouse onto michael's screen which is why it's not working oh yeah right there we go come along say hello plenty of bunny rabbits and tigers hitting up that chat wow welcome back um so i want to know um how to get started with github co-pilot now i installed it yesterday but for the purposes of this screen stream i will head on over to pumpkin github here is pumpkin's github i've got that yep he hasn't been active for a while yeah he's a bit quiet he didn't have some contributions yeah it looks like he has 19 followers oh my god why when you go onto your github you will see here this github co-pilot little widget thing yeah click learn more and then start your free trial and you do have to put in your payment details on that but you get 60 days for free and you can cancel it in the unlikely event you don't like it no not affiliated but github if you want to affiliate just hit me up anyway yeah so it's very easy to set up and whatnot because i was a bit worried about that i thought it would be hard but it wasn't it was as easy as putting in your card details and adding the bs code extension and away you go yeah it's it's pretty it's pretty straightforward to install yeah it's pretty good and uh i think it's it works with it quite oh yeah they go so it works with vs code visual studio and you know them jetbrains so yeah and then when you've got it you'll see the pilot dude down here yeah yeah and joshua is asking how do you feel about the ml leveling off open source code in various repos what does that mean uh so basically the folders so basically uh the suppose the main problem is uh open source repos they were just kind of a little bit of a background of what the beef is about um yes enough yeah so open source basically means that people are free to use it and you know you just have some people wrote some of the code and now uh copilot like code has ingested all of that as usage and basically he's trying to sell it on uh to you as like hints and stuff it's kind of like you know facebook collects your data uh but then you know it's kind of like selling to advertisers what you are interested in but it's a little bit less direct than that because in case of facebook it's sending your data to advertisers to advertise to you um while you know with ms it's a little bit different because they just used it as generic you know uh kind of like pulling data you know before elections and stuff and now they're just making predictions based on it so yeah i don't don't quite have a very particularly strong opinion i guess if you know github car parlor is free for open source developers i'd say it's probably fine uh but equally you know they're not targeting you directly so it's not a little bit less nefarious and also um i mean mit like a lot of these open source repos are with mit licenses so it's a relatively good project i suppose well i think the reason people have checked it is because uh github is making money on it while the input was free they didn't pay for that input um so yeah there is i can see why people are a little bit uneasy about it um is it not for the grey so good though uh i mean yeah kind of but yeah i don't know the answer to that yeah exactly but also you should consider that just now you should also consider that there are a lot of really awful uh repositories on github like that brings a lot of my repositories at four four and i'm not sure goldberger has learned good things from it yes but my next question was does get her co-pilot right perfect code now i saw in the stats um that's only something like 26 of them of the suggestions are accepted right uh yes which seems kind of like uh this is the q a i will share on the screen now yeah so that is kind of q a one of the problems about github co-pilot if you want to check it out after this uh stream how has it been for you as a professional dev uh yeah i don't yeah i think it roughly about that's up yeah like i would accept the whole line sometimes uh but occasionally i would you see that that's the truth that's tricky because they say that completions they accept it but how many of those are accepted as is that will be more interesting uh because quite often i accept suggestion and then edit it straight away because some things are not quite right so it's not awesome in sailing but again it gets you kind of it gets you like 75 there in terms of what your function should look like i think it's pretty good it speeds speeds uh development quite quickly can co-pilot introduce insecure code in its suggestions yes thanks watch out uh yeah that's why it's important to test uh quite often well it kind of depends what you mean by insecure but yes i would say um i think the most common one is like for example if you're a back-end developer for express uh for express library and you are just writing your notes back and using express quite often the suggestions that you go straight away it goes like allow all headers you know it's very permissive in terms of your uh a bit of a niche example but it's quite permissive uh normally people are a little bit more restrictive around uh what headers and what methods they allow and stuff like that so like the best practices is a little bit more restricted but co-pilot just off the cuff suggests you you know line by line by line by light which is the most popular thing and the most popular thing is the most basic you know people tried express api how to do it upload it on github and it's kind of the most popular one but it's a very ramping up starting point just having to plug your laptop in michael [Music] [Music] [Applause] okay we're back i think we're back sorry about that short internet yeah anyway made a nice point i believe it's the worst thing that can happen to a newbie yeah because i guess it takes away a lot of the actual coding or knowing the details but is that really a bad thing won't this be how we're all coding in the future uh i don't know i honestly honestly don't know the answer honestly i don't know it's kind of like uh you know here are the new apps for language learning are they worse than just you know learning a language from like old school by the book and like with with the dictionary and stuff um then i i honestly can't really tell if it's going to be a better thing or not i mean intellisense didn't make it particularly worse yes but yeah you can accept a lot of suggestions that are not what you would accept if you had a little bit more experience but you know a lot of people just learned you know you write some code you make a mistake uh it bites you in the back a little bit later down the road you correct it and that's how you know not to do it so next time go ahead compilot is going to make that suggestion you're not well you're not going to leave it as is you're going to tweet a little bit interesting edward wants to know uh can it write complex algorithms or is it just good at smaller tasks like functions oh that's interesting um you know what i have actually did yeah i did try to uh like on some leak code and it was pretty good at it because there is a lot of uh like free repositories for like solutions for liquid problems so it could be pretty good at it um again like if it's a leak type of algorithm that we're talking about then i think you have co-pilot would be like excellent of that especially if uh you know like around the very similar problems there are comments that pre-sent predated so he has trained to recognize that comment and suggest you the whole solution in one go because so many people have done it already um so for that it would be pretty good so you know if you have like uh lead code style tests uh on the job i think github co-pilot might make it very obsolete although it would be super easy to just ask a couple of questions and know straight away that you haven't written it and you just copied it from copilot but then the question is well do you really need to know how to write it well which is coming back to what we were saying about dev jet's comment about yeah so this is the video it kind of depends it kind of depends a lot of us use algorithms every day that we don't know how they actually work like you know uh when you say javascript.sword you don't know quite often people don't know which exact sort used in the background so yeah sometimes useful sometimes it's not sometimes it can be quite um yeah there are caveats totally um quick question here and then we'll get on to the demo how's this different from tab nine or quacker so i have never used quark from type 9 it's not different i have used timeline uh this is another thing like this yeah yeah i have used type 9 before um before it was like you have to pay for that 9 but co-pilot was free so i would prefer co-pilot uh with tab nine well now you have to pay for both um again i don't think that i'm the most educated on the exact difference i would just say personally i prefer the output from copilot i find it a little bit more intuitive and a little bit easier to work with with tab 9 i noticed that most of suggestions are always dismissing unless it was like very basic dummy data fill it um but it might have changed since then as well so yeah thank you for another question william daniel asked the same thing eduardo wants to say pear howard borgen that's our ceo he's a breakthrough teacher since i've been enrolled in dozens of courses here and there he's on another level that on my 30s i've never seen before if you want to see it for yourself this breakthrough teaching check out our front and developer career path and you'll also find pair in some of our free courses as well like this one learn html and css to find eduardo is so pleased with that but now it's time for the demo i reckon um so yeah as mentioned we're going to make this but with github co-pilot out that does mean can't do it in scrim but but um never mind we will prevail so i have co-pilot up and running here so let's just yeah have a look at what it can do how do you zoom in on ps code okay like that yeah so i have in my html just the h1 which you can see over there and i knew with an id of all so the first thing i'll do is grab that oh okay i think i think you can do you know in a little bit i mean yeah let's try with that document query selector oh no fair enough that would grab all of them yeah so to see another option how do you do that that's a good question i never actually driver i think once you get home okay uh the other like explore the sharks getting started i think further down there are more dogs yeah then mostly to do a setup i don't know like how do you ask for another suggestion oh yeah that's just like apis for it okay hit okay pilots see other suggestions i definitely saw this in the docks the other day right yeah sure saved it didn't i was here huh yeah i know i actually tried it hello to you guys that sounds okay using a right this is it uh generating code suggestions from comments enabling or disabling ah so seeing alternative suggestions um you can hover over the suggestion to see the other suggestions okay well looks like okay well we'll go with it for now for the sake of this demo we only have one url um yeah so we've grabbed that and now let's make an array of emojis just for fun um equals suggesting one yeah okay have that one smiley laughing and crying in love happy cool first thing will it just keep all of them forever oh okay i wanted that one yeah so just to take or to accept the suggestion you hit tab and then yeah okay i think that's enough emojis yeah so now i want to create a list item for each one so i think if you just write the comments what you want to do it should probably be a little bit better created did you see that if you if you just create a function that will add a list item that sounds good yeah with emojis if you just type the rest of it so tab have the suggestion to the you with emojis so type out the rest with emojis so now hit enter on that function add emoji okay that sounds good so constantly document create elementally that's what we want lee in our html emojis math.floor math oh it's randomizing the order of the emojis and you'll attend child late huh yeah that's what i want and now we run that add emoji get ready so for some reason it says like uh well hover over under you i think it's like what's that oh that's envious code that's the suggestion well it's working but it's only adding one yeah so we want to add a for loop ah so create a function that will add the list a list item so adds so change time well let's leave that one there and then make another one okay okay it's a function that will add a list item to write so this is what we already had when you're saying instead of a list add all the emojis with all emojis uh yes or list icons i guess function add emoji add all emojis look at that oh yeah ah there's my full loop i think it kind of all right it's good yeah oh yeah okay wow this is amazing i love my brackets and i think i need another one yeah so now i add [Music] all the mages and then uh i'll put that below that okay let's give that a go pretty good well done k pilot brilliant yeah pretty good do you think it can do like more complex layouts i sure hope so because otherwise it's not very useful if that's the only thing it can do but we're going to find out in a second yeah by giving our vacation planner we go and then dark moon is wondering um is scrambler ever going to do a back end of course yes it is but no release date open angle bracket yes very good we're boomers apparently for not knowing that yeah as a newbie when you use co-pilot you reduce your errors which will come back to bite you later you're not doing enough research when you're using co-pilot yeah i can see that point but then maybe it would suggest things that you wouldn't otherwise have thought so it could go either way yeah it could go either way you know it you can say the same thing that you know if you if you google or use stack overflow instead of reading land pages in your cli then you know you're reducing the number of errors you're gonna make so there's always you know there's always a stack up that makes life a little bit easier but also kind of hides the learning opportunities from making a lot of mistakes so you always have to make this balance of productivity versus uh you know actually learning just enough to do your job yeah hey i'm fresh i don't i am fresh wow i suggest code completion just by the comment you're right yeah pretty good it's pretty amazing so now i'll hand the keyboard to you michael all right and we will try to recreate our vacation plan and say this is the code we had so far so let's see what we can do with this clean slate i reckon and nothing in our in our html so yeah you're going to do the html with this as well yeah i think you can do html leave it up to you i think you can do something like um was it so what we were actually having here uh a header with a palm tree emoji and a form input so let's do that uh header with uh 1 3 oh i didn't expect that okay okay i mean that's giving you a head attack which is not what you want yeah but actually you do want that this is what i mean it's suggesting things we wouldn't have thought of welcome to the palm tree yeah it was just like welcome to the palm tree but you know uh i just gonna crap can i actually grab what i want but then it says like yeah see like an image we say assume that you have an image and it gave you an alt tag which is pretty good but i think it's a little bit simpler we want so that did that do it that did it okay so now uh form to get user input look at that it's like wow i'm pretty sure you want that um yes i do yes i do actually and here is like where you can see where it's a little bit iffy because it just goes like oh yeah sure you want index php with it as well i don't think i do uh but what is it alph and welcome command oh thanks so yeah that's giving you some stuff yeah that gives me a lot of stuff like start date and date so i think what i want is i want to write probably a little bit more descriptive comment here form to get user input uh to add uh to do item yeah with checkbox maybe uh sure [Music] with check box [Music] yeah so it just says i mean why not i'll accept that and i'll close the form uh but then here a list of to-do items yes please ah now it says again php uh what if i just say not php here i don't want php right i'm not sure that would work has anyone ever written the comment of this is not php i mean maybe yeah a list of two items so [Music] oh yeah look at that it actually does cycle through it but um yeah it still just gives so i think you need to give it a little bit of a hint like i want the ul and i want i i mean to be honest i just want you all okay hold it i think i should do it okay so what do we have now over in our browser um [Music] okay we have a it does say check box on the on the form right that's not what you wanted though but never mind the rest of it is what we want compare it to our first one yeah the one on scrambler so what i want is i don't think i want an action on it um because i don't think we had an action in the original one yeah it just said like if you have really detailed with the comments i think it will pick it up so id form input [Music] okay so you can't you say common label and then it kind of suggests a label so but i don't want label for destination i just want a label for uh like the to-do item [Music] it's a great input you mean [Music] yeah something like that we need to give it an id yeah so here we said i know i mean like this part i think that's how oh right i think that's how we did it just say i had to do yeah but you still need uh the input um the input still needs an id to link them otherwise it won't make any sense to screen readers and stuff all right okay well there you go see um yeah you still have to you still have to double check but you know not having to type all this is pretty good that's true okay let's go to the css and do some styling and i don't think we want this i think like previously we did a button and yeah i can type something maybe yeah i wonder if it's gonna come on if i just do this there you go so you can close if you close the thing you kind of you will have to learn how to work around its own little quirks but yeah all right back to the browser that's what we have that yeah it's looking pretty good yeah but i don't think copilot is going to take our jobs just yet uh no i don't think so because it's like you still have to it well it just adds code on the page it doesn't know the context and stuff so it's like you're adding anything that's good i've just seen yes great learning session thank you thank you let's do some css let's see what it comes up with oh interesting okay so we want our blue background okay um if you write center everything let's see all that okay okay [Music] i wouldn't call that a zeal color i'd call that gray all right then okay [Music] okay yeah oh yeah it's blue maybe you should try a light blue background yeah but come on it got you there hey you did what we asked yeah all right get rid of yeah okay you think you need a space between the light and blue right let's see what it comes up with low five is that correct that looks like a now it has some issues with concerning colours we've ascertained well that's all right unless it's blue it knows blue it knows blue i'm pretty sure it knows simple colors yeah but they're good enough okay um center everything center everything horizontally and vertically [Music] oops [Music] okay well this id doesn't exist um center so yeah if you accept that what does it come up with next because if you oh that's that's that so if you add that container then would that work i think it um it's not the best way of doing it i think that's fair to say i mean why not let's uh but that's the thing is like what do i have a two body yeah for now so in that case i'll just say body [Music] ah yeah okay so i think coconut isn't great at centering things which makes sense because people aren't great at centering things either so well yes maybe just try horizontally [Music] i mean look that was a center form horizontally and vertically and well i mean it's not but it might be within its container yeah see so like with a simple enough tweak even even i could manage to do something like this yeah [Music] yeah okay anything else um yeah make the phone bigger make the phone bigger which one oh boy i wanted them make ones [Music] i think it might already be 2m i am going to say that no i think it might be tm by default [Music] okay good stuff i think with this non-light blue and we should change it to white and yeah think we can move the thingy in a bit so we can see more of it yeah yeah change font oops okay michael this is getting a bit out of hand yeah you still haven't touched up this you still have to know what you're doing [Music] okay i think that is yeah nice but the annoying thing is if you then want to change something else on the body like if i want to change [Music] okay michael what do you press to comment these things oh you didn't comment what do you mean come on shift no command and this i swear i was doing that anyway what was saying you forgot what button was supposed to be doing that anyway if you now want to change the change um body front family to aerial [Music] that's good and all but you don't really want it in another selector do you ideally you'd want it in [Music] is there any way around that then i think it might suggest you something if you just hit enter after font size it might give you like another prop that you might want so instead of driving it with comments comments are like more for like a piece of functionality that you're writing from new instead of updating the old one if you want to update the old one you probably want to add a little bit more so try this uh no so like it might oh so maybe yeah i'm writing it in the wrong place oh no that's interesting what does it come up with here trump wright belt sure why not but not a comment yeah okay [Music] text align center yeah that sounds good some reason it's like the only one suggested if you commented if you start like commenting it it seems like you know it picked up text shadow okay but i can't read i can't just tab it i i have to uncomment it which is a bit different but that's okay right what else no more suggestion okay well we oh we now have this uh neon effect i guess i am that's not bad i've seen worse from me anyway let's do some of the js crying cat yes conclusion uh co-pilot might be taking a job can you make says alana one line saying oh change font color to x interesting let's try that um so change font color to x and then make fun i think you could do that yeah let's say change um body font color bits change [Music] body font color to orange and um plant weight [Music] what is that apart from bulb uh italics that's not a weight i don't okay something else font size two six and okay it's it's look it's doing something it is an orange and uh it's not yeah what do we what do we write the font size to what the font color to orange and font size to 6x okay so it did do that it has done it's also done a load of other stuff but you know it is wanted yeah but it's kind of look like it's based based on what you have above it wow so you kind of copied it from what you already had so then you would just go and get rid of this okay oh no you wouldn't get yours because [Music] okay it yeah it hasn't taken this one across because it suggested the sixer interesting yeah it's pretty good it copied the other properties yeah so how does github co-pilot exactly work i have no clue well broadly speaking i don't think anyone knows exactly how it works it looks at all open source or maybe not all some at least open source code on github and i think stackoverflow but don't quote me on that and it looks at things that people have written and comments people have written and suggests those so when it sees a comment in an open source code that says change body font color to orange it suggests the code at some point it did say that it was learning like yes uh using comments as inputs and stuff but that's the thing is like the way these neural networks work is that it's very hard to sometimes predict what it uses as an input and i guess is it learning from when things get rejected when you're using it [Music] uh or not that's a bit creepy if it is not sure if i wanted to do that i wonder if that's the case i mean you probably should yeah yeah it probably should but it definitely looks through your code like and suggest things that suggest the patterns and like the naming convention that are already in your code yeah like just now it suggested these properties that we already had so yeah and quite often like uh for example if you're like i noticed when i was coding a couple of times it does suggest a very domain specific thing that is you can only find in your code base because there's a very particular naming thing for a particular thing and it goes oh you want you want this property named like that so it definitely hasn't pulled it out from um closed source so yeah it also learns on your code basis too see the patterns like system i'd say it's kind of like an autofill it's kind of like a co-pilot it's like pilots alongside with you he wasn't paid to say that yeah it's kind of like you know in vs code it suggests auto completing a tag and things like that it's like that but really beefed up and it can do much more things yeah and it can from just comments it can make suggestions so comments in human language yeah so or what's um i think like from here let's just well while we have a couple of minutes left i think it would be quite nice to see if shashank is asking does this work on python yes yeah it works across a lot of different languages all major languages yeah so i think what we can do is just comment out what we want is uh take input from the form uh you can expand that and it just says like and send it to the server but i don't want to do that because we don't have one and display it as a check box list item in the list okay [Music] pie it's like friday afternoon like you're gonna have to give me more than that maybe we should break it down take input from the form no yeah give me a comment but i do i think i don't think that's enough okay so in that case um take form from him okay that's promising take input from the html yeah sure why not see what it does [Music] front input document query section input yeah uh but like we wanted we want the input from the form there yeah but i think it would right i mean really you would use the id so all those people in open source out there doing this i don't know man no i think i think we just need the input right because whenever he types input because we're not really going to send it or anything so hit the button from html so it kind of already use alt set toggle lay the input in the html as a item yeah i'll display queries alexa okay creator need to do item fair enough create to do okay constantly document create element me dot text content equals to do but where's it gonna get to do from oh right i don't know what this is so uh so it's like you passed it to do you see it yeah so where does it get that from display how is it going to know that to do should be what's in your form is one thing how does it know i guess beforehand you should write um say whatever's in the input as uh as to do take input from html and use it to create to do take user input and add to the dom says okay thank you user oh look at that continue input or value that looks good create to do to do yeah i think and it resets the input okay so that is grabbing out to do so now we can use this with the part above it okay we already did it oh wait a minute why did you did it it's really it's really doing it oh okay yeah so that should work well lots of red squiggly lines which suggests it won't work uh what is actually i don't actually know why it one normally highlights why but not in this case i guess some some setting is missing but yeah let's just leave that yeah exactly so you want to uh have to do one click of add button but does it know where oh actually it wants to add an event listener to the submit that's what we want isn't it um kind of well not quite because we the way we're written in our html is that we have a button oh that says type submit so actually that should work well anyway try whoa look at that oh my god look at that [Music] more stuff [Music] we can find out what these errors are in the bottom left um error log what that x is it [Music] yes object is possibly not well that's true is possibly not [Music] okay so these errors from co-pilot then because i didn't have these sprinkles before i know that's uh for some reason that's the type script checker [Music] anyway there they're possibly no but you know don't worry about it we didn't express it by the identifier for our input uh no why not i know we did yeah it's here input [Music] so it works yes exactly ship it so there you go yeah it's kind of um you see the with copepod a lot of the time you have this feeling where it's like you're like well this might work this might work this might work and then it kind of works and then in the end you just end up with a piece of code that you don't quite understand what it does and you're like i guess that's the remaining yeah you're like you're really it's it's like as if someone has written this code and you have to re-read it once again to understand and get used to it again to make updates to it so yeah it has its drawbacks but if um if you have a really quite large code base it helps things and you know like once you have worked with something so instead of working from scratch you know you've been reading a lot of codes and you want to make an update it's a little bit easier to do that so you know like all that context is not as [Music] you you'll be a little bit less fearful or while you know instead of writing it from scratch but yeah like connecting html css and javascript it's a little bit wobbly but yeah how accurate says mubarak is it with javascript other stats on how many things get accepted per language i'll give you that and lightning exceptions raised oh hancock yeah that's one uh this article did yeah [Music] let's go down impact on developer activity yeah just give me the numbers okay uh average shown suggestion users found acceptable okay so this is across all of it yeah modest medium high huge reported productivity benefit would we really call it less than 30 percent huge like when we had 23 was a anyway it seems to be getting cleverer as you'd expect so yeah unless i think it needs a framework to make development easier and faster otherwise it seems not capable of stealing anyone's jobs well well isn't that a good thing it's all i can say to that oh that's interesting it's quite fascinating michael yes a wonderful world oh no i know what something i want to do before we leave what is it bob cyril did this the other day with pear okay oh boy const michael oh no because oh it looks like you're an object well no michael okay age 25 close enough location new york knowing it that's all unless i think you need a comma job okay well personally nothing light senior i'm a software engineer and i love to code okay well um well kind of hobbies programming reading listening to music watching movies isn't that for everyone add a method to the object oh no okay prince function i can't have another spread sure why not and then we have oh i need to how do i run this then oh i think it should be uh well no you should attach it to a window i suppose window dot michael equals michael oh it should be oh it does not yes [Music] well anyway let's not worry about it let's see what it says for me i can't i am i'm also an object named leanne there you go see it's cold you're eating that's what it's called okay what about pumpkin then uh just right pumpkin oh we needed to close uh yeah close the brace that's why it didn't work previously i thought i did do that well some reason didn't work wow michael. in the console should work huh okay okay so it's already attached to the windows away okay oh look up thank you oh god this is so corny oh i'm fine what if you say um comment create a cat create a cat called pumpkin pumpkin and it's gonna know i know [Music] that's pumpkin pumpkin let me get age 25 yes i'm a software engineer and i love okay so there you go well firstly he hates programming reading listening we don't know that he hates programming well he likes going for walks that's true and he likes crunching big things yes he does yes we'll be back together on wednesday because michael will be joining us to bust some tech jargon really yeah absolutely not fair enough a deep dive into the wonderful world of tech jogging so i hope you can all join us there uh a one-year-old feline software engineer how many years of experience the best type yeah and if you enjoyed this please hit like and or subscribe hey join us for some more amazing live streams wow they're amazing i can't promise and don't forget to sign up to the community roundup so you can get a nice email to read on your saturday mornings yeah uh keep up to date with everything that's going on in the community ah that was very interesting michael thank you for showing me around pleasure thank you to everyone for coming along with your thoughtful questions i hope you enjoyed this and we'll catch you on wednesday cool bye do you like everyone yes um wait try it i need to find the jingle oh no jingle

Original Description

🎓 View our courses: https://scrimba.com/links/all-courses This week, Leanne and Michael are trying out Github Copilot! 🧑✈️ We'll find out how to get started with this AI-powered tool, how accurate it is, and whether it really allows us to write code faster. Resources: 🧑✈️ Github Copilot: https://copilot.github.com/ 💻Check out Scrimba’s interactive learning platform: Scrimba: https://scrimba.com/ 🐦Say hi on Twitter: Scrimba: https://twitter.com/scrimba Leanne: https://twitter.com/RybaLeanne Michael: https://twitter.com/alanmynah
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Scrimba · Scrimba · 0 of 60

← Previous Next →
1 CSS Grid Course: Learn the Basics in 3 Minutes
CSS Grid Course: Learn the Basics in 3 Minutes
Scrimba
2 CSS Grid Course: Positioning Items
CSS Grid Course: Positioning Items
Scrimba
3 CSS Grid Course: Why Learn It And How It Compares To Bootstrap
CSS Grid Course: Why Learn It And How It Compares To Bootstrap
Scrimba
4 CSS Grid Course: auto-fit & minmax
CSS Grid Course: auto-fit & minmax
Scrimba
5 CSS Grid Course: Implicit Rows
CSS Grid Course: Implicit Rows
Scrimba
6 CSS Grid Course: Fraction Units And Repeat
CSS Grid Course: Fraction Units And Repeat
Scrimba
7 CSS Grid Course: Justify Items and Align Items
CSS Grid Course: Justify Items and Align Items
Scrimba
8 CSS Grid Course: An Awesome Image Grid
CSS Grid Course: An Awesome Image Grid
Scrimba
9 CSS Grid Course: Named Lines
CSS Grid Course: Named Lines
Scrimba
10 CSS Grid Course: auto-fit vs auto-fill
CSS Grid Course: auto-fit vs auto-fill
Scrimba
11 CSS Grid Course: Justify Content and Align Content
CSS Grid Course: Justify Content and Align Content
Scrimba
12 CSS Grid Course: Template areas
CSS Grid Course: Template areas
Scrimba
13 27. Setting up the structure - Responsive CSS Tutorial
27. Setting up the structure - Responsive CSS Tutorial
Scrimba
14 25. Making the navigation responsive - Responsive CSS Tutorial
25. Making the navigation responsive - Responsive CSS Tutorial
Scrimba
15 36. Playing with the title's position and negative margins - Responsive CSS Tutorial
36. Playing with the title's position and negative margins - Responsive CSS Tutorial
Scrimba
16 31. Starting the CSS for our page - Responsive CSS Tutorial
31. Starting the CSS for our page - Responsive CSS Tutorial
Scrimba
17 26. Taking a look at the rest of the project - Responsive CSS Tutorial
26. Taking a look at the rest of the project - Responsive CSS Tutorial
Scrimba
18 15. Spacing out the columns - Responsive CSS Tutorial
15. Spacing out the columns - Responsive CSS Tutorial
Scrimba
19 33. Starting to think mobile first - Responsive CSS Tutorial
33. Starting to think mobile first - Responsive CSS Tutorial
Scrimba
20 22. Making our navigation look good - Responsive CSS Tutorial
22. Making our navigation look good - Responsive CSS Tutorial
Scrimba
21 37. Changing image size with object-fit - Responsive CSS Tutorial
37. Changing image size with object-fit - Responsive CSS Tutorial
Scrimba
22 44. Module Wrap up - Responsive CSS Tutorial
44. Module Wrap up - Responsive CSS Tutorial
Scrimba
23 16. Controlling the vertical position of flex items - Responsive CSS Tutorial
16. Controlling the vertical position of flex items - Responsive CSS Tutorial
Scrimba
24 39. Setting up the widgets and talking breakpoints - Responsive CSS Tutorial
39. Setting up the widgets and talking breakpoints - Responsive CSS Tutorial
Scrimba
25 42. Setting up the About Me page - Responsive CSS Tutorial
42. Setting up the About Me page - Responsive CSS Tutorial
Scrimba
26 35. Changing the visual order with flexbox - Responsive CSS Tutorial
35. Changing the visual order with flexbox - Responsive CSS Tutorial
Scrimba
27 23. Adding the underline - Responsive CSS Tutorial
23. Adding the underline - Responsive CSS Tutorial
Scrimba
28 21. Using flexbox to start styling our navigation - Responsive CSS Tutorial
21. Using flexbox to start styling our navigation - Responsive CSS Tutorial
Scrimba
29 20. Creating a navigation - Responsive CSS Tutorial
20. Creating a navigation - Responsive CSS Tutorial
Scrimba
30 40. Using a new pseudo class to wrap up the homepage - Responsive CSS Tutorial
40. Using a new pseudo class to wrap up the homepage - Responsive CSS Tutorial
Scrimba
31 43. Fixing up some loose ends - Responsive CSS Tutorial
43. Fixing up some loose ends - Responsive CSS Tutorial
Scrimba
32 32. Starting the layout. Looking at the big picture - Responsive CSS Tutorial
32. Starting the layout. Looking at the big picture - Responsive CSS Tutorial
Scrimba
33 24. A more complicated navigation - Responsive CSS Tutorial
24. A more complicated navigation - Responsive CSS Tutorial
Scrimba
34 28. Feature article structure - Responsive CSS Tutorial
28. Feature article structure - Responsive CSS Tutorial
Scrimba
35 34. Styling the featured article - Responsive CSS Tutorial
34. Styling the featured article - Responsive CSS Tutorial
Scrimba
36 18. Making layout responsive with flex direction - Responsive CSS Tutorial
18. Making layout responsive with flex direction - Responsive CSS Tutorial
Scrimba
37 19. flex direction explained - Responsive CSS Tutorial
19. flex direction explained - Responsive CSS Tutorial
Scrimba
38 41. Creating the recent posts page - Responsive CSS Tutorial
41. Creating the recent posts page - Responsive CSS Tutorial
Scrimba
39 17. Media Query basics - Responsive CSS Tutorial
17. Media Query basics - Responsive CSS Tutorial
Scrimba
40 30. Home Page. HTML for the aside - Responsive CSS Tutorial
30. Home Page. HTML for the aside - Responsive CSS Tutorial
Scrimba
41 38. Styling recent articles for large screens - Responsive CSS Tutorial
38. Styling recent articles for large screens - Responsive CSS Tutorial
Scrimba
42 29. The home page.  HTML for the recent articles - Responsive CSS Tutorial
29. The home page. HTML for the recent articles - Responsive CSS Tutorial
Scrimba
43 10. ems and rems   an example - Responsive CSS Tutorial
10. ems and rems an example - Responsive CSS Tutorial
Scrimba
44 1. Starting to think responsively - Responsive CSS Tutorial
1. Starting to think responsively - Responsive CSS Tutorial
Scrimba
45 4. Controlling the width of images - Responsive CSS Tutorial
4. Controlling the width of images - Responsive CSS Tutorial
Scrimba
46 5. min width and max width - Responsive CSS Tutorial
5. min width and max width - Responsive CSS Tutorial
Scrimba
47 3  CSS Units.  Percentage - Responsive CSS Tutorial
3 CSS Units. Percentage - Responsive CSS Tutorial
Scrimba
48 11. Flexbox  refresher and setting up some HTML - Responsive CSS Tutorial
11. Flexbox refresher and setting up some HTML - Responsive CSS Tutorial
Scrimba
49 12. Basic Styles and setting up the columns - Responsive CSS Tutorial
12. Basic Styles and setting up the columns - Responsive CSS Tutorial
Scrimba
50 8. The Solution Rems - Responsive CSS Tutorial
8. The Solution Rems - Responsive CSS Tutorial
Scrimba
51 14. Setting the columns widths - Responsive CSS Tutorial
14. Setting the columns widths - Responsive CSS Tutorial
Scrimba
52 2  CSS Units - Responsive CSS Tutorial
2 CSS Units - Responsive CSS Tutorial
Scrimba
53 7. The problem with ems - Responsive CSS Tutorial
7. The problem with ems - Responsive CSS Tutorial
Scrimba
54 6. CSS Units. The em unit - Responsive CSS Tutorial
6. CSS Units. The em unit - Responsive CSS Tutorial
Scrimba
55 13. Adding the background color - Responsive CSS Tutorial
13. Adding the background color - Responsive CSS Tutorial
Scrimba
56 9. Picking which unit to use - Responsive CSS Tutorial
9. Picking which unit to use - Responsive CSS Tutorial
Scrimba
57 Tutorial to Learn Alpine JS - Full Course for Beginners
Tutorial to Learn Alpine JS - Full Course for Beginners
Scrimba
58 Guide To Algorithms in Javascript [Binary Search] - Full Course / Tutorial
Guide To Algorithms in Javascript [Binary Search] - Full Course / Tutorial
Scrimba
59 Learn UI Design [7 Fundamentals Tutorial] - Full Course for Beginners
Learn UI Design [7 Fundamentals Tutorial] - Full Course for Beginners
Scrimba
60 Javascript Tutorial for Beginners [From 0 to ES6+] - Full Course
Javascript Tutorial for Beginners [From 0 to ES6+] - Full Course
Scrimba

Related Reads

Up next
Copilot Cowork: Setup, Skills, Plugins & Pricing
Matt Tutorials
Watch →