Live-code a masked password input with us | JavaScript, CSS, HTML

hi everyone hello everyone yes indeed and several people are saying we should start yes we should start so we will start um welcome thank you for waiting yes i hope we will make it worth your while we are here today because we're going to be coding a masked password input yeah which if you don't know what that is it's when you put in your password and you can see dots instead of your actual password so if you're on the train people will not say that your password is cats34 or whatever your password may be what is cats one two four three yeah thank you all for coming it's extremely exciting that you're all here let me know in the chat where you're beaming in from today yes looking forward where are your costumes though i thought you said at first nice costumes and i was like this is my normal clothes yes all of my passwords are actually 10 dots says dave very good race car it's a palindrome yeah so if you type it in the mirror it will still work good evening from sweden hello from poland i was in poland last week last week week before yes lovely and very nice time co-chair star with seven eight yes i'm not sure if this person's saying they're in nice or it's nice or maybe both it could be in nice nice yeah from india the philippines so san diego wow hello yes okay let us begin screen yes so what i have done here is that's not terribly big maybe that's fine started off with uh an input inside a form and of course that somewhere you do but that's all we have and currently when you type it um yeah shows the letters it doesn't do any of the masking you want where's the link to the screen says jose here it is yes so you can click through and have a go should you wish well i've been at scrimba for a while since dry humor one of the first times following a live stream with live coding nice that's good news i hope you enjoy yourself well screen please what's up facebook screen though well it's as full as we can get it without deleting ourselves maybe that's what they meant hello from serbia and georgia i'm bolivia oh wow i'm here all over the world yeah someone else with it first live coding session oh yeah the the rabbits and tigers yes they're over sometimes if you have been here before please put a tiger into the chat if this is your first time viewing a scramble live coding session hit me with that rabbit yes we don't do anything with this information it's just for fun [Music] oh brother's not just from shanghai yes yes this is much fun i'm joining after always a couple of months good glad to see you back bunnies and tigers already coming into the chat so michael we need to make um as is uh as is our tradition we like to make a to do is not md now i wouldn't say that this is necessarily what you should do in production it's actually quite bad practice probably i think it's all right you know you have like some kind of note list that you could work through yeah yeah um no you probably don't have the two at home but no we don't have a jira board for our live stream i think it would be a bit of an overkill yeah to create a project for a one hour thing but anyway what we need is [Music] high password good stuff [Music] make it pretty very scoped defined item what i mean will become clear later toggle password visibility so you know when you get the little eye because half the time let's be honest you don't actually have someone looking over your shoulder obviously you don't think you do but you might have a problem typing your password and you don't know where you've made a mistake so you click that eye so you can see it yeah that's what you want to do and then it's going to say character limit but really it's a character minimum i think because a password well i guess there is a limit you wouldn't have like a million characters but um yeah well i think kind of lately it's been a bit of a there's been a you know like there are all these different password rules about like special characters minimum length maximum length that kind of stuff there's a little bit more movement to simplify those rules because sometimes on some websites they're just a bit over the top so most people just say yeah like you want you would want to set certain level of minimum characters so advisable minimum and then you probably want to set also something like uh you know advise users to type both numbers and letters but people are not as hung up on the special characters if the password is long enough so do you want a character max or not i don't know i wouldn't enforce the maximum um it's kind of usually the character the maximum length is enforced on you because of the back end requirements like for example the system is really old and the password is stored within a certain memory limit in sql then that's what determines how long that password can be because otherwise you would error when you're trying to add that value that is longer in the sql uh cell so i think it sounds like it is worth having a max no well nowadays uh it's not really a problem uh nowadays that you know you can have as much as you want so i would just say in mid but obviously you know you don't think that i i think it's an exercise you can set max i mean it's a very tiny change to make so i think that we can do it yes lots of bunnies and tigers look at them all and you even an elephant lovely great yes um be crypt says avi can handle up to 72 bytes there's not much point for longer passwords than that roughly how long is a 72 byte password i can't remember i think it's uh i think one character is a bite though is it it might be i mean have a question anyway um well it depends on the character oh yeah sorry zozo makes a great point i believe there's actually an input type password and then dave says babe says maybe he's deleted it there is but that's not much of a challenge yes um but it is what we're going to start off with after i have made the fonts slightly bigger i think here because making parcel masking is fairly straightforward but uh yeah adding everything that you're used to when you're uh adding your passport is a little bit more involved yeah that says person it's not the best contrast in the world is it really don't really anyway let's not get distracted yeah no well maybe it's a bit late but what i'll do is put in purple yeah your favorite so anyway yeah it is official it's green black colors um so yeah type equals outside yep that's where you get all those uh funny dots from okay no i don't do that so now you see if we have the dots so that's very good however these are not the best dots you can have fun fact no you can have better dots you can have better dots it's true and to do that i will put a class on here plus equals and well i'm just going to keep it to password for another sake of simplicity uh in the c ss i mean yeah i have just grabbed it on there i'm going to change it because i think it's better practice um yeah so different fonts they have different dots really which kind of makes sense because they have different all the other characters as well the one which is nice i suppose you could say is font family uh ghana i'm glad that auto filled so now it's like a screamer default where it says like they're down in geneva however [Music] um i don't think it's just scrimper i think this is actually taken from vs code in the back oh i see it right so it's like they're all too old a complete suggestion yeah so many people have these in order like that that it now also suggests you all this yeah exactly and then to make it even better we can add some letter spacing yeah so they're not so horribly bunched up letter spacing um let's try not point five okay not point 0.25 and what do you think too much probably is a bit too much one two five so you can now see how much better that looks when they're slightly spaced apart maybe you can't but i think it's nice no it's good yes i hope you're not storing pulses in a database michael what was that dave says he hopes you're not storing passwords in a database well passwords are always stored in someone's database just not in plain text yes i would have a higher font weight ah um is that for the label or for the dots and what would it actually do for the dots that's interesting but wait it was pretty ridiculous no that's nice hmm yeah thank you very much dry yeah wow i can have better dots happy coding yes indeed scrimmage stole something from fiasco i don't think it stole it i think it's all before i'd say if not this conversation never no is that our our editor is based on uh mono monaco uh editor that is the basis for vs code yeah is that yeah it's kind of it's basically where vs code and screamer editor are basically cousins yes cousin editors yes yes what part of the code is it that makes the letters not visible what part of the code um visibility heaven i know i think uh i think what makes the dots appear i think that's what dracuma is like i think it's tight password indeed yeah so we have let's do this so we can see slightly easier yeah we do this we have type equals text we now have text and put password in password is back yes yeah yeah good type password is basically what does the magic and username label i think you're right so really we can put it inside the form yep yeah basically you normally create a whole form you would um well you'll create the first input for username and that's not masked and then you create the other one maybe the letter spacing would be nice on this one tell me it's gone wrong here no the letter spacing is out of space out part of it isn't it i don't think it is it's not well it's fixed out of the word password yeah but it's not inheriting down into the input is what i mean and neither is the font way something override isn't it i think it just doesn't inherit so if i did this and then inside um the password class which is this input font-weight inherit i think that's going to do it sounds good it does um i'm not sure i'm in love with the letter spacing on the label though so i'm gonna just put that um oh come on in there right um hey vs code is okay i'm based off electron well the electron is like the framework that does the desktop application building but there is like a family of editors that it's working on right yeah happy family uh maybe i don't remember maybe marco maybe it's come on yeah here we go that's what i'm saying the input field doesn't inherit typography oh i don't think it inherits anything well at least some other stuff i think use font weight in her and font size in her etc yes um is there a more secure way to mask the real password with the dots with javascript with the default html input method uh you can later change it to text from the console and make it visible what is the question again is there a more secure way to mask a real person with dots with javascript with the default html input type method you can later change it to text from the console i think and make it visible nahu is saying that if you were in a coffee shop and typed like this and then went off to order a latte someone could come along open devtools and change the input type to text and find out what your password is so is there a more secure way of doing it i mean to prefer the whole point of this password masking is that you don't um well but then nobody can see it while it's time being typed on your screen so it's just visual but yeah like while you're typing the password pretty much if you have a keylogger installed on your computer it would get that password pretty much everything so uh i don't think the security element should be coming from the visual aspect of the html form so it's more like access to your device the physical security of access to your device so if someone has if someone can type on your laptop while you're ordering a coffee uh you know your password yeah your password pretty much well none of your password is secure especially if you're using password uh i thought management stuff so yeah uh you know was it windows l uh on windows oh basically lock yeah yes if you if you need that yes please one of the rules of security please don't leave a laptop unattended in a coffee shop or indeed anywhere yeah anyway although that laptop was closed so the data on the laptop was secure but the laptop itself didn't make a trip to bright hello it had a day out yeah alone and then it came back he didn't he had to go and collect it yeah the train the train attempt basically told me that oh yeah it's fine the train is coming back so you'll just go back and pick it up [Music] so i would think it's fair to say we have hidden do you have problems opening the emoji keyboard no i never use it uh we've hidden the password we've made it pretty um i think you can do like uh can you change the colors for the adults and stuff yeah pretty much the same principle obviously it's all basically input like the way you would cache text is the way you went i not font color it should be but it's not color color hot pink hot pink brushes that maybe will have violet is that cold pink there's no color pink because pink isn't inherently a hot color you can't have a pink with a cool background but i don't think you care anyway there we go nice pink buttons no not buttons thingies stars instead of circles i actually think you can do that if you use the right font um yeah so if you use something like wingdings i'm not sure how great of an idea this is if you used wingdings what's windings the winning thing like come on michael is this just me showing my age oh i think it is it's this font which it has basically a load of characters instead of the roman alphabet right usually when i was a kid we we called it printer doesn't work yeah but if you were going to do that um you would need to do it in the js because if you had it um [Music] no i think this shows land that you just spent much more time on css than i did um maybe yeah so as soon as there was anything to do with css and fonts my glass my eyes were glazing over like i never understood fonts [Music] i liked fonts but anyway i think we could actually do that that's a very interesting point we will come back to wingdings is the art font that's cheaply animated first i might want to study computers in computer science in secondary school yeah 2014. i heard a scrimba once i made it study that go for it totally google is moving towards passwordless well my response to that is definitely not though really yeah i don't know i don't know if i can log in with links all the way man i don't know i do like that until i have to do it in the rush from my mobile phone with a poor online connection and then you have to like update your email address to just wait and get this link and then that link has like hundreds of megabytes of javascript to load it's still better than resetting your password when you don't have much data or much well yeah but if you if you do remember your password uh well that's it it's a big it or you can or you can also fill it with password manager like dashlane or something uh on your phone then that works much nicer than these password list links and stuff but then it's overhead anyway yes um i think it's time for an eye icon and i can't oh yes yes good material icons basically what you mean is uh when you type your password and you want to see have i typed that correctly have i typed that 24 characters that jumble that mess correctly or when you inevitably realize you haven't because you type what you think it is and it's like computer says no that kind of thing um google fonts and here we are this is the one that i want material icons are nice if you know a few gotchas um which seem to cause huge problems with people using them which i will come to shortly i i panorama fisheye that looks awfully like a circle okay visibility um cracky this is new i think we just want this i hope so yeah copy basically you paste the cdn link yes into your html and that should load the icons that you want i always miss this thing yeah it should do and then you can copy the actual html just from the website that they have yeah it actually worked maybe they've sorted out that silly problem they had sometimes it doesn't render the icon you actually want and you have to um mess around with this oh yeah but it seems to have worked yeah i think they have because it used to be like you need to add outlined part yeah but i think they are now adding it to link about time is all i can say to that well it's kind of fair uh yes leona michael such good humor yeah do it yes yes a bit dry someone else has got dry q med today so we have an icon but it doesn't need to be to the left inside the dooley you know yeah thingies and dooleys english english is so hard inside of the field it needs to be inside of the form field instead of outside of it it is inside the form yes but it needs to be in inside the input yes we found the word that we were looking at i think left um which of the americans have invented html otherwise they would have been you know 1 m julie's thing is tags that didn't work and i don't know i would should be negative man [Music] hang on uh oh i think we need to do is go back to your html did you need to actually unwrap then yeah i think your fries i need a rebate yeah i think this is in a span but don't you need to wrap it in in like an icon or something um it doesn't actually matter it doesn't matter there's a big debate about whether you should use spams or icons it's a big semantic debate which i don't get involved in because someone's always going to say you're wrong but maybe it is actually because i had slightly different um css you know defaults yeah so you can try it i don't think you would wrap a span with an eye you would replace this band with an eye okay i see [Music] uh fair enough let's do that that's actually still okay okay fine okay that's the work i think all you need to do is now just you need to target that eye oh yeah [Music] where is it and left minus 20 pixels or something no it's not that i don't write um padding this is how i this is how i write css i basically write it until something worked i was originally intended for italics yes so this is the whole semantic debate people have oh is it yeah i think it means i can well it's got to the point now where so many people use it for that that people kind of accept that that's what it is um but then some people are saying well you shouldn't basically oh i think it's on uh dave says margin negative left margin so i think it's a panic level should say margin how do you think that oh hold on input class so it would be right no it would be on here i think hey there we go move martial so there we go however i'm not sure that's the the solution we want because um well because i think you then have this i don't know maybe it is okay but why is it going beneath it it wraps around this is so annoying okay one moment and then we have four oh man isn't it a block now instead of being in line hey so because i've replaced spam with an icon sorry italics whatever those targets i'm going to take it back to spencer because that's where it comes from in i mean the google overlords decided they issued the s plan exactly who a way to argue um that's that so we can just add another element style to it which yeah just write it in uh just add this style in devtools to see if it works a lot and then we'll just copy that what am i adding negative margin we tried that yeah we're trying with that uh we want to add it on the span you mean yes okay element style margin i don't do that margin left oh man i think we already did this friends maybe not okay getting closer yeah but it's like completely i think we got there and stuff you know like with the you know like when the banner runs across the web page like on on the tv that's my level of css the webpage anyway anyway it's there look perfect you just need to add it to css oh no because you only added yeah elements um oh crumbs please yeah boys [Music] [Music] you you confident no okay it just didn't okay good very good so now okay now we can close the default color violet why is it so wonky like where's the pathway and the field on that [Music] what are you doing sorry i think your death tools are overwriting you need to refresh it what they're told it's fine um i think you should do says reuse it ever again i think you should do password position relative um but this doesn't have position absolute on it and it's not actually inside the input although we have indented it like it is but um that's not because it's self-closing but generally if you want to put something on top of something else that is what you do indeed oh my god i'm so glad i'm watching this green mess frame it's so good i'm not sure if that's sarcastic but i'll take it and anyway i get cranky 36. oh someone said we should add a placeholder that's a good point we should we should let's add it whoa yeah i really really need to sort this out because it's a bit no i could not for um [Music] i'm not actually sure what's going on here why it's why is it good oh probably that wonky i can increase and now the fall maybe no i think i know that's that div are we targeting dibs in general no i'm not form display so that's putting that there flex direction column um height 100 vh justify content center is centering it a line item says aligning across the middle font sights i agree that the width is not long enough but i don't see where i've set the width on the phone where uh on the body no yeah if you go down to the phone there's the scroll scroll to the phone so there's no width here but this div is with bound you see like on the i don't know why though where's it coming from on the left and kind of not really on the right yeah i don't think that's the div i think it's um just because i've got justified content and a line item but i still don't know why it's okay so the it's just oh i see so maybe it's uh something to do with uh let's kind of justify it was normal there's margin that's doing it oh no it's not that margin don't need this is this margin it's this much [Music] yes i feel like this is really obvious yeah but i don't know what it is why is adding a negative margin to the to this pan it's also making this um ah i have an idea we have this then this margin [Music] that is spicy [Music] it's over isn't it it is oh it's probably because of this [Music] anyway i don't think we need to worry about it it is annoying it is annoying yeah maybe it just needs a refresh now there must be something to do with like the margin or something that you have to somehow specify something else what that is the spat can you just move that position somehow somehow maybe that position gets moved over in some different ways [Music] i'm laughing because cheaper animator says yes i mean we could do do i want that position absolutely why yeah usually goes horribly wrong when you do this um and then there's div which is actually the parent of the span didn't really target all this but you know it's only one here position relative right a margin top so that's what people were saying earlier you should add absolutely and then yeah but they were saying to put it on the input which isn't the parent of the span i do feel like there must be there probably is a way to do it properly but it's css so no one knows what it is uh yeah okay not quite yeah i mean really you should use m's i think for margins oh and rams for france one 1.25 sorry the zero 75 i mean maybe if your head would be better okay let's just leave that a lot make it 0.8 well that's obviously too much yes it's straight now god oh good it's straight now god would also be good only the parent is positioned relative when you use position absolute to put something on top of something else you have to set its parent to position relative don't ask me why to be honest with you i don't know why you just do otherwise as just demonstrated it goes wrong when you make something absolute something else has to be relative okay anyway um after that little fandango person yeah so now we're done that was not on our to-do list what wasn't the the this adding the icon yeah i don't think so well it kind of is because toggle password visibility is part of that isn't it i think it's time for a little more upbeat music this is too relaxing it actually reminds me that music reminds me of these like yoga sessions in like in some kind of dance pop is my favorite yes as i said you give it position relative very very straight to the point i don't think that's my typo but if it is let me know yes anyway we have now to put on here an id equals so that we can grab it in the js i think you can type how about metal music to be upbeat there's one called rock says yoga yeah like when you go to some kind of you know industrial estate on the outskirts and they run these yoga sessions can you you know outside of a shopping center somewhere document you gotta grab it uh what do i need to grab it oh yeah dave was saying we can style that font inside that um what are we doing right now grabbing the icon document don't get my id bye no i don't want to save it in cast because then i want i and then add event listener carrying on to it what i i yeah and then i've got a different listener oh i see right you're you're that lazy type not lazy okay it's super efficient saving lines click okay let me just the music for programming workouts and then presumably visibility it's actually an italian programming language i think really yeah is it called davinci js i mean that would have been a really good network i guess it probably wouldn't be a js but it would be in fact that would be called also if he was created in vinci i don't know what that is but it sounds good well vinci is like a talent actually like he is david oh we got all right core visibility uh so what do we do with visibility all right so it's like um but what we want to do is change the type from password to the other one text so presumably you want to grab oh that's the point that ibukun says we also need to add the crossed out one the other icon yes oh that's a good point we'll come to that shortly yes so basically we're well we'll show what we'll show what um so there you go add the pound sign to the eye yeah so we'll show what that will be uh right so we need to grab a input it has an id called password sorry i don't know i think maybe we should grab it at the top or not no at least grab my hand and then we would grab it every time we have a couple of visibility is that bad no i why know should we have sugar right right i'll save it into const okay okay uh so we grab a puffle and then password god type oh no password dot um set attribute yeah is it toggle logic that attribute type equals i'm not sure that's right okay type and then i think it's set attribute dot type equals text i believe [Music] oh no no it's not bad well of course it's not because you've poked all of that next to it no it's not i think it's the drink i think see element attribute class democrats i don't think that's how you sit tight attribute type from text to password not with jquery though okay wait is that it yeah i think it is attribute name and then value okay but it's already typed text but why is it type text yeah because there you go so it worked no but it's like that on uh no don't say that password it's why is it like that because we had type equals password yeah because we have just around that function yeah but it's on i'm on page load it's up it is type it oh that's the placeholder okay so it has work we just it's too silly to realize anyway visibility of has this it's pretty much the same yeah so now now is moving on to show we need to switch the icon to show that now we're actually showing the password yeah very much so what the thing that um actually dictates what icon is showing is the text inside the span that we've copied from material icons so if i change this to visibility whatever it was visibility underscore off hopefully we will have a crossed out eye yes so what we also want to do as well as toggling wherever it is is um you well nope oh yeah so we do need this maybe const i equals equals this so then i got um in a text i guess oh i see you you wanna do it like that oh interesting [Music] visibility is it visibility off and then remove [Music] okay let's get that okay whoa nice yeah okay so now you just need to switch it back but is that the right way around yeah you click on the eye yeah it's like i want to see what it is i know you're like okay now i don't want to see it to hide it yeah but that doesn't do it yet yeah so we just need to switch it back so you would do is is this attribute of a password what having a is hidden uh boolean uh well ide password [Music] hello don't think we need a separate brilliant we can okay so it says password yeah so we can just use this yeah so if password type eight balls password then change password to text but so now we can just use yep so i can just let's facebook here we can actually thanks else can you it's not going to work electric we should see uh otherwise it should be password dots and i don't intertext is just visibility let's go seems to have worked we don't need to attribute them uh no you can just override it there like so interesting go let's give it a go oh well huh we're really yes amazing done yes oh crikey character min and max i mean that's not hard that should be isn't that basically an html uh it should be something in html right i say it's not hard but actually now i've i don't know well no that's if um if you have a number input and you want you know the maximum can be 10 but i don't know about character limits do i oh max length so mean length equals three so what happens now then if you you keep i mean i think nothing changes in the input but it's happening html input then length i think there is some kind of warning or something you can set html input min length attribute specifies minimum number of characters yeah scroll up it doesn't actually do yeah click on try itself let's see what it does okay so if you have one oh right sorry yeah i did actually know that i think it sounds like it's a little so if you tab i mean i don't have a submit button which is why there's no way to really show the warning i'll just add the button on the phone type equals [Music] oh now you have three and that's allowed yes indeed uh-huh although your prize pass probably should be more than three it's probably probably should be they will say eight easy good well always but you can press return oh can i i can now dave was talking earlier about um i don't have a max but it's basically the same thing five six seven eight nine 10 11 12 13. ah see you can't yeah it doesn't allow you to type anyway um can you fix the function it says cashie i like to have a crosstalk ib password invisible and regular eye visible well this is what i was saying i'm not convinced they're the right way around i don't know are they i mean you can to answer your question you just have to swap line eight yeah but i think but i don't know what from a ux point of view which way it should be now um well actually just go to some login and have a look yeah something like tailwind css they are the right way around the stage yeah i think they are because usually the button that you click is the the intent what you're trying to do is the button that you show like the button says submit so when you click it it does it so you have an eye to show you this is what you want to do yeah show me the eye training you show me the phone but like there are um i see this one doesn't have an icon yeah oh nice gradient and then there's this actually a lot though uh i think you're right though it's the intent of what it would do [Music] it actually says oh yes it looks good to me right people are agreeing so let's move on um oh there you go show the show vlogging there you go well that's the other way around no it's it's the way we have it yeah i'm confusing myself now yeah um that's okay i think it would be nice sir if the um this was a bit bolder but that didn't work i forget i said that um i just feel that the icon could be a bit bolder actually i think the reason it's not working is because it's in here so if i change that to that yeah the thing exists at that you might not so let's leave it like maybe it's 600. anyway dave was saying earlier you can style the placeholder because that is a bit um pretty dark i think it doesn't look like a placeholder yes quickly do that she says style placeholder css ah one of these bad boys oh wow really see the selector that allows you to do that oh that's what dave was day was right wow night coral look at that grey yeah now it looks more like a placeholder but i think we should all say big one great friends because that's a good please please very nice oh crayons no zero where'd you make it like default initial that would be yeah let's get out the likes on this video hey very good hopefully you're talking about this video if not i have stolen it thank you oh we're coming i think we have achieved our objectives character disability mint and max yay [Music] very very nice i think so thank you all for coming it makes our evening when you come along and help us decade as you can see really do help us to coat there's a spacing on set cranky we're blurry we've been that blow it all along no sorry if we have letter spacing unset that's interesting so then css unset versus initial what's the difference between initial and unset in css unset is a css value that means the same as inherit if a property is inherited or initial if a property is not inherited okay but 147 people found that helpful i did not maybe because i don't know what initial is css um initial what is this initial keyword um the initial keyword is used to set css property to its default value okay um css on set w 3 that's what i thought it was still [Music] i think initial works we use the style sheet ah but what is it what is uncertain i would like to quote the official css mdn documentation for future reference okay yes okay go for it the initial keyword applies the initial value right it is allowed on every css property and causes the element for which oh it sells on every css property which is best way to use the initial value of the property um set is a combination of the initial and inherit like these two css keywords it can be applied to any css property the keyword resets the property to its inherited value you know at this point when i read it css dots i just i just stopped caring [Music] yeah initial sets it back to the default it seems whereas unset if it's inherited something it sets it to that otherwise it goes to initial i think is what that means can you keep sticking with us about this detail good stuff we're back again on wednesday oh wait oh yeah yeah we are it was going to be manuel from html help but he had something come up so you have to reschedule that instead it will be me we've all been talking about oh look that's beautiful that's me before my hair cut yeah yes and before your next haircut and before what it's two haircuts ago or it will be because we got one tomorrow oh yeah that's right um yes so michael will be talking to us generally about co-practices and how not to write bad code don't follow yeah i do think people are gonna watch this and be like we've seen you do all of this on the live stream on friday but we do make it clear that this is for entertainment purposes well look like genesis has a very good song you know done [Music] don't do what i ah do what i say no michael would probably mention not using ptn as a button name probably well i mean to be fair in in the grand scheme of things it doesn't matter um it's just when it comes to this live stream i feel very passionately that it should be a button yeah on this live stream i know he's asking can i see the giants again people can here it is sure uh can't you just paste the link link in the chat forget to hit subscribe so you don't miss out on future live streams yes including next week we will be coding something yes um next week hey we'll come up with something no i've already come up with it i'm thinking of a way to make it visible without breaking this here it is edit public i'm sure the suspense is killing you i mean i have no idea what is it gonna be [Music] here it is not making those pictures lana so that will be next week and michael will be wearing this shirt looking forward to it see you later but the shirt on the left is also mine the shirt you're wearing that's also mine this one is not this is my oh yeah this one okay see you later oh boy hey wonderful weekend okay [Applause] [Music]