Transcript for:

hey everyone welcome to the front end boot camp  2022 singular youtube video where we will discuss   about everything that should be relevant as  a front-end developer in 2022 and beyond that   includes starting from absolutely scratch with no  prior knowledge to actual front-end developer and   this boot camp will be discussing about html css  javascript react tailwind react query and github   ci and cd now these topics are extremely important  as a front-end developer because they form   the complete backbone of your application from  developing to building to deploying everything   is covered in this video if you like this make  sure you check out the full stack learning path   on code dam to learn more about how to become a  great full stack developer by building practicing   and doing stuff right inside your browser let's  go if you're new here make sure you leave a like   subscribe to the channel and hit the bell icon  this is free of course and helps the channel grow hello everyone and welcome to the very first  video and the very first course of full stack   web development html and css fundamentals course  now this course this video you might see in and   when i'm navigation the website that the content  already exists sometimes but this is a recreation   a reshoot of the content to make it more embedded  with the hands-on exercises which you will be   doing along the way so if you are watching this  updated content congrats you're seeing probably   the best course you can ever find on html and  css on the internet and it's completely free so   just to give you a brief idea of what this  learning path what this course will be about   we will be starting with html and css from  bare bones from xero you need not have any   programming experience any programming knowledge  beforehand and make sure you're coming from   the internet fundamentals or whatever courses  whatever small courses are before this inside   of our full stack web development learning  path or front-end web development learning   path or as a matter of fact any learning  path which you have picked on code down   so this is a codem.com exclusive course hopefully  you will learn a lot of new things and will have a   lot of fun practicing in the in browser exercises  along the way and building projects as you go   i'm super excited to start this course  with you and hopefully you are too hello everyone and welcome back to another video  in which i want to quickly go through how you   should use codedam.com the website in order to  actually learn effectively so we're going to be   exploring that how we can start with coding  and stuff very soon but before that i would   just quickly like to point you towards one thing  first of all create an account if you already   haven't and once you do that from a computer what  you can do is go ahead and go to your dashboard   and right here you're going to see something  known as playgrounds click on the playgrounds   part and start an html on css playground when you  start a playground like this you will get a url   which will actually set up a development  environment within your browser window   now this is something which we will not just be  using exclusively obviously you will be using your   local editor as well but this is something  which will be super helpful for you when   you are learning this course why because i would  recommend keeping a playground tab open in one tab   and the second tab should consist of these  videos or these learning paths or whatever   why because although we will have embedded  exercises along the way where you can experiment   this is just a free flow where you can do  whatever you want right and i'll be using   this as a place where we can also learn about  html and experiment with them without actually   just firing up all the things although  we will see that how that works as well   so when you create a playground like this you  will get a url which automatically updates and   if you refresh this page your code stays that  means you can just practice here whatever you   want and come back at any later time and this  url will still work and this is a private url   so it's only with you therefore you are free  feel free to just just use it however you want   so that is all for this video from the next video  onwards let's get into the programming parts   a little bit setting up your text editor what  does that mean and yeah super excited to start hey everyone welcome back and in this  video i'm gonna show you how to set up   vs code on your system and why this is required in  the first place because vs code visual studio code   is the name of an editor which you can use offline  to do the same thing which you will do here   but on your local system right so first  things first we are learning about web   development right that means creating web pages  that means visiting urls like these and writing   the source code which you probably see you  know something like this for example so you'll   be writing this html don't be afraid of the  minified syntax but you will be writing this   sort of code and you need some text editor to do  that which provides you with all these colors and   auto completions and stuff like this because  as programmers we want to automate our job as   much as we can that's why we develop  all this nice colors and syntax and   things which tells us if there are any errors  and so on so what you need to do first of all   is go to google and write vs code and once you  write vs code you're going to see that you get to   visual studio code website which you can download  and pick up any vs code version according to your   system right in my case i will go with mac os  but if you are running windows you will select   this if you are running linux you probably have  vs code already or some sort of text editor but   once you do that once you have vs code or any any  sort of text editor you can launch it and the way   you launch it is first one is either you just  go ahead for example on mac you can write code   and it will appear like this on windows you can go  to start and search for code or from the terminal   as well so once you have installed for example  on linux and mac at least that's what i know   go to your command line whatever it is for your  terminal whether you call it terminal your shell   and write code and hit a space and a dot now  what does this mean that means that open the   current directory inside of vs code and  you should know a little bit about this   from if you don't know you can check out the  linux clr fundamental scores which is again   a course which will be there but don't really  worry about the syntax right now once you do that   something like this should open and obviously  not in your case this folder would be blank   so once you open this you'll see that this looks  very similar to what we have right here in our in   our you know in our online editor so you have the  vs code which gives you an editor all these tabs   and stuff and you get similar things right here  inside your code damage data as well the benefit   of this is you have these temporary playgrounds  which you don't necessarily need to care about   and you can create all these files and folders  and just go ahead and use them and when you do   you actually just get the updated output so you  can write your your name is xyz and this will   automatically reflect we handle the heavy lifting  for you plus these urls automatically update so   you don't necessarily need to worry about you know  your work getting lost for example so it's your   wish you can choose to continue this course on vs  code which is also fine or you can choose to stick   to a code damn editor which will allow you to  just focus on the important parts that is setting   up your html document correctly but if you wish  to do your code if you wish to your course like   this what you have to do is let me just go ahead  and actually don't worry about this command which   i wrote right here but let me just go ahead  and actually tell you how you can set up a   development server here as well so what you have  to do you have to create an index.html file here   you have to write whatever we will be writing for  example let's just write hello world for example   and what you have to do is go to this extensions  tab here and search for live server right   hit that click on the first result this should be  the icon install this live server in your vs code   and once you do that what you'll see is that okay  it's ready right the next thing you need to do   is right click on this file and  click on open with live server   right and that's it once you do that you will see  that you have a browser window opened and now if   you do hello worlds like this you will see well it  does not it does not automatically reload because   you can see a small notice library load is not  possible without body or hit tag so we'll learn   about body and head don't worry about that yet but  just make sure you write all your code inside body   for example so once you do that and now if i hit  anything you'll see it automatically refreshes but   i mean you know just to start i would say rather  stick to this because this is much more simple   in terms of the changes which are reflected  you don't necessarily need to set up anything   right here but that's how you can and you should  set up vs code on your systems it will be super   important as a developer when you're working on  your own projects and make sure you have that hey everyone welcome back and in this video  let's just go ahead and actually write our first   ever html document now first things  first well we already have written one   but let me just go ahead and walk you real quick  what exactly is happening here because this   whatever happening whatever is happening here  this is very close to how real world things   actually work as well there is no abstraction here  there is no magic work going on so let me tell you   so the first thing is you see right here we have  a terminal environment with us and it gives you   something something where you can actually write  stuff so what is the difference between this and   this file well you see this computer right here  this is this is an actual computer which is   connected to a computer running in the cloud now  you know from your internet fundamentals course   that you need a server to deliver a web page to  a client right whenever you write google.com for   example there is a server owned by google.com  which sends you the html so whenever you go   to google.com this html this nice page which you  are seeing is actually this html code which your   which your browser is getting and how does this  html code arrives at your browser that is because   some computer some server somewhere in the world  somehow figured out that hey this guy or this girl   needs uh needs to see google.com and i need to  send him or her this page right so that's how   it works but what is that computer where is that  computer i mean as a user you don't care but when   you're creating a website when you're creating  something you need to care because that computer   is the one which will deliver the content so what  is happening here is that we have a computer here   which is a remote computer and that is connected  to this file system so what that what do i mean   by that for example let's say i create a new file  this is so cool dot txt hit enter and go ahead and   write ls here which is list files you see i get  this is so cool.txt file here if i write hello   world in this file for example what is happening  here is that we have actually modified this file   on the server so we can see that from this is  so cool.txt right so you see we get hello world   so that's fine this file system is synchronized  to this remote computer and this is our window   of actually running any command on that computer  but how do we serve this file then how does that   appear here the reason we do that is because we  run a server now you don't necessarily need to   worry about this command but whenever you refresh  this page whenever you do anything this command   automatically runs and what this means is that  we are serving this file at this page for you   so whatever you write here if you open this in a  new tab and if i go to index.html and write hello   whatever you write here that will automatically  be fetched right here just like your vs code live   server extension right so you don't necessarily  need to worry about any of these details   don't necessarily need to go any in any of these  details i just wanted to give you a picture   of just just telling you what exactly is going  on so that you don't necessarily feel lost when   you're into this interface but you will be using  this interface in your exercises as well which you   will see along the way and this will be super fun  because this is a real environment when you are   working on a local system that's exactly what you  will be doing as well the live server which you   use runs exactly this this thing somehow more or  less but abstracts away this terminal thing so you   can just you know for here as well you can just  minimize that if that bothers you just keep on   working here so technically a hello world document  in html is just a hello world and your browser   will be able to actually show you hello world  here so you have written hello world technically   speaking right and we don't necessarily need  anything else i'm also going to delete this file   so that's it once you write an index.html file  once you create that and if you're on codem.com   that's how you're going to write it if you are  on vs code for example if i go back to vs code   and if i write hello world hello world  like this hits hit save and if i click   on open with live server you can see i get the  same output right pretty much the same thing   which you get here now i have shown you on both  the places but i'm going to be continuing working   with the code down playground you can copy all  of the things which you do right here run it run   it with a live server and it will be exactly the  same thing so you can continue wherever you want   so yeah that's pretty much it for this video  hopefully you were able to write your first   hello world into web development this is the seed  of something big this is the seed of your web   development tree which will form i'm pretty sure  all the best for your journey and this journey   will take time it's not easy it's not something  you can learn overnight but it will surely   and definitely happen if you keep on working  on these practice exercises these labs which   you see on code dam these videos which you  complete and you will definitely get there hey everyone welcome back and in this video let's  just go ahead and discuss about comments in html   and quickly go over through why you would ever  need them as well so you see although we don't   have a perfect html structure html document here  because if you go to sites like google for example   and view page source for them you will  see they actually include some cryptic   you know doctype html and then i don't know  exactly what that is but you see that there   there is actually code here but we haven't written  any sort of code right it's just hello world as   an english word so that's fine we'll get into  that but before that you could see whatever   i'm writing here that's actually appearing on the  page and as developers what we do a lot of times   is we just leave comments at different places  commence is just a fancy word of saying that hey   i want to write some english sentence or something  but that necessarily is not a code right and i   don't want it to be parsed as a code so what we  can do is we can go ahead and use this syntax   which is if you look close enough is a angular  bracket an exclamation mark and two dashes   and you need these two dashes and everything  in order because syntax highlighting here   would also help you you see that syntax  highlighting is not necessarily working here   and sometimes you know you will see that it is you  know it's still working kind of because html is a   really bad programming language if you say like  that because it is very forgiving but the way   comments start is like this where you have an  angular bracket exclamation mark and two dashes   and whatever you write inside of this whatever  i mean you can write anything and everything   it will just be not rendered by browser at  all right and the way you close the comment   is two dashes again and a square bra and an  angular bracket so you see if i write something   outside this that appears just fine but nothing  inside this comment block so that is pretty cool   also if you go ahead and take a look inside this  pages source code you will see google chrome   actually turns this into green and the screen  block is usually means that this is a comment   so that's it that's how you write a comment  so what you can do now is just under hello   world you can write something like hey i did my  first html program error you know and you can   include any sort of emoji any anything you want  basically like i said nothing escapes the comment   block it's like a black hole for html whatever  you write here it does not get out on the page hey everyone and welcome back to another  video in which we'll be learning about   tags in html and tags is super important the  fundamental building block of an html document   and my document i just mean this html file so  i'm gonna remove this and we're gonna head over   to google again and if you take a look at google's  source code which i did by right clicking here and   clicking on this view page source what we see is  that this document let's just ignore the doctype   html for now this document consists of these  purple things these purple stuff right html   is purple script is purple if we go a little down  and i believe let's just enable line wrap as well   so if you go a little more down you  will see i mean this is google is   basically garbage let's not take example of  google let's go to example.com instead oops   and not the inspect but right click and view  source ra this is this is good so you can see   example.com consists of multiple purple tags and  what these things are these things are actually   called html tags now what does that mean well  you see that the only information your browser   is getting from that remote server that remote  computer is a text document right it's a text file   but it has to construct a ui a user interface  a beautiful user interface out of it   which might have a favicon here like this fancy  icon which might have text here in the browser   which might have animations which might have  layouts which might have colors and all that   stuff so we need to deliver a lot of information  like what is animation what are the colors what is   the content what's the font size what's the font  family that means what's the font type which thing   is a link which link should point where and all  this stuff we have so much information to tell the   browser that it's simply not possible if you're if  you start writing it in english or something right   i mean it's possible but you don't get the idea  that you you know the browser will be confused   what to do so what we developed is actually called  html which is hypertext markup language and this   language consists of a lot of tags these tags tell  the browser how to behave on a certain feature   for example this title tag right here which you  see example domain is responsible for showing this   example domain in the title if i for example go  ahead and use the same thing in my playground here   example domain one two three four five like this  and open this in a new tab you can see we get an   example domain one two three four five like this  in the browser right so this title tag is one of   the many examples one of the many tags which  we will use but that's how the thing works and   you can see that we although we are writing only  title it still works in our case right so why the   hell has this person whatever the developer was  doing here has written all of this stuff what's   the point and we'll get to that we'll get to that  in the next video but to understand what our tags   tags are simple well fundamental building blocks  of html documents which tell the web page somehow   how the content should appear or how the content  should work or even how the page should behave   in this case just setting up the title so  we have a lot of tags for example a p tag   which stands for paragraph can display just  a paragraph a div tag for division and so on   we'll discuss that won't want to rush into that  right now but don't worry we'll discuss that   so yeah that's pretty much it for how the tags  work tags 101 we'll get into more information   about an html document tags attributes  and so on really soon from the next video hey everyone and welcome back to another video  on tags in html and css we're going to stick   with this for a long time and we're going to  be discovering a lot of tags along the way but   i want what i want to go ahead inside of tags is  is styling with simple html tags now although we   discussed like what could be the behavior the  behavior could be colors the behavior could   be ui the behavior could be style sheets which  will eventually get into but the simplest one   is headings right h1 h2 h3 h4 h5 h6 this goes  up to h6 and you can say i am h1 tag like this   so what's happening here let's take a look inside  of html the first thing you have to realize there   are two kinds of tags the first kind of tag is  where you open something you open a tag like   this and then you close a tag so if you look close  enough you will see that i'm closing it with the   forward slash like this right and then i'm writing  the same tag name basically so that means whenever   you open a tag you have to close a tag not  necessarily with some tags which you will get into   but it is necessary in this case right so let's  say you know we have already seen title tag how   it works so a title lag is also a opening and  a closing tag so it's not a self closing tag   p tag is a paragraph tag you can see it's also  opening and closing tag so all these stacks of   heading you will see i am h2 tag you also have  to close them right that is the concept in html   you open a tag you write whatever you want and  then you close something if you nest tags for   example let's just go ahead and see what nesting  means so i opened and closed a div tag this is   a this is a block tag which just means that hey  you're trying to create some division on the page   this does not necessarily do anything on its own  that means if you just write content inside it   it'll just appear plain just like p tag but it's  just for you know web developers love to use div   tags everywhere so what do i mean by that let's  say if i open an h1 tag now i have to close this   h1 tag in order that means you can see what's the  hierarchy div opens h1 opens h1 closes and then   div closes so it's not like div opens h1 opens  div closes and then h1 closes you will see that it   still works in the html but let me tell you html  is a bad programming language don't consider html   to be a good programming language because html is  super forgiving right html will allow this code   html allows any sort of code i mean you can never  really crash an html document as such because the   browser will try to make sense of anything and  everything you throw at it that's why our just   our hello world also works whatever we write also  works without any tags but technically you need   tags your browser needs stacks to understand so  the one important thing is always try to make sure   that your tags are closing in order that means  div h1 h1 div it should always happen in this way   if it does not then your html will be considered  as broken your browser still might be able to   make sense of it somehow but it could lead  to problems so that is one important thing   which you should definitely keep in mind the  next thing is super simple i mean if you just   keep on doing this you will soon realize  that let's say if i duplicate this for h4   and h5 you would see that after h6 i mean  you will see a couple of things first of all   you see this is the h6 although you know the  text is wrong but you can see it by the size   so it's 6 h5 h4 h3h2 h1 but there is no h7 so you  see h7 also does not get the syntax highlighting   so that's a little bit of hint from our  code damn website as well as the editor   that hey this stack probably does not exist right  so you can see whatever you write an unknown tag   in html it still is not gonna complain to you but  you can see that you lose that syntax highlighting   and it also appears just like regular text  right so you don't necessarily need to use this   so yeah i mean this is a very basic tutorial  about tags again you need to spend a little bit   more time with tags we'll be working a lot with  a lot more tags eventually but this is a start hey everyone and welcome back to another video and  in this one we'll be reviewing a super important   thing a super important concept which is around  attributes in html now let's just go ahead and   first of all see what i'm talking about so i want  to create i want to create a link which takes me   to codedam.com fair enough i have written that in  english but it does not work there is no link here   so how do you create a link well you guessed  it right you have to create another html tag   right but a link is a very generic thing right so  you cannot really just have a tag for example for   go to google right that wouldn't make a lot of  sense because now let's say if i want to go to   google.com a what would i do there is no way for  me to just create those many infinite tags so   what html allows you to do is that for these  generic purposes where you can supply more   information to your tag this is by the way this  stands for anchor tag a tag and it's used to link   pages different pages that's like you know  the og tag of the internet because internet   literally the web literally means a web  of interlinked pages so a tag allows you   to link one page one page to another and so  on so what this a tag allows you to do and a   lot of other tags as well is it allows you  to set a certain attribute an attribute is   just some additional information to that tag  which may or may not be required for that   tag to work properly so what do i mean by  that in this case in the a case the anchor tag   the important attribute is to tell where do  you want to go otherwise it cannot work right   so what we use for that is an attribute called  href and the way we give an attribute is a space   after the tag name and that attribute name and  an equal to sign with the value inside quotes now   you would see some people just writing quotes  without value wins without code and it works but   this is not recommended this is not recommended  because if your value has spaces then this will   break so always always try to put your values  inside double quotes single quotes also work but   i prefer double quotes so yeah that's it so now we  can go ahead and do give it a link https codem.com   and you can see it turns it into a different color  because this is like the default browser style   now if i open this in new tab because  it won't allow me to just go into   i mean we'll talk about iframes later but  it will not work if i click it right here   if i go here and if i click on this you can see  my browser window got redirected to codedam.com   right so if i click on this again you can see it  works just fine and you can see by default when   i'm clicking on this you also see that turns into  red and all of this behavior is browser's default   things which are customizable you have that power  to customize them how we'll look into that but   just know that you can customize all this behavior  so this tutorial was meant to do two things first   thing is introduce you to anchor tag and second  thing is to introduce you to attributes and   href is just one of many many attributes which  are there doesn't mean you need to learn them   all but that does mean that hey you need to be  aware about what attributes fundamentally mean   they mean that you can supply additional  information to the tags on the page right hey everyone welcome back and let's just go ahead  and quickly discuss about paragraph tag and also   an important concept in this video so first of  all if you can observe what's exactly happening   here is that you will see that everything in  in is in its new line right so h1 imh1 tag is   newline h2 is newline s3's newline and so on so  what is happening here exactly so what i want to   discuss in this is paragraph tag and a couple  of other tags but i also want to discuss the   concept which is so important that you should  be just just make sure that you understand this   because this will be a very important thing which  you will also discuss in the css tutorials there   are two kinds of tags in html roughly speaking  and majorly speaking actually the first kind of   tag is a tag which is called a block tag now what  this block tag means these are the tags which take   up a complete block of row on your html document  so you can think of these tags as you know just   just completely taking up the space so this h1 tag  does not take the tag where the content ends it   actually takes the full tag right and i can help  you with that if you just excuse me for using css   here right just excuse me for using css this is  just for demonstration purposes don't worry about   the syntax we'll discuss this when we start css  but if i go ahead and give an h1 of background   oops background red you will see oops what the  hell am i even doing h1 of background red you   will see that this tag right here you can see it  takes up the full full space it does not end here   so h1 is a block tag similarly h2 is a  block tag similarly h3 is a block tag   h4 is a block tag h5 is a block tag and so on how  do we how do you know that h1286 is a block tag   well you don't this is just this is just  something which is there right you have to   you will eventually know which tags are  blocked which tags are inline the second tag   but yeah right now whenever you come across a  certain tag just try to put it a background if it   is trying to span the whole row then it's probably  a block tag now second kind of tag is called an   inline tag let's just change the selector from h6  to a and you can see now the anchor tag which you   have at the bottom is slightly different you  see it does not take the full width so what's   happening well the thing which is happening here  is that a or the anchor tag is actually an inline   tag so what's the difference the difference is  that if you have a sentence let's say if i have   a div tag for example right and if i am if i  am writing a sentence and if suddenly a block   tag comes in then it gets its new line wait  block tag says hey dude i'm not gonna continue   in your own line i'm gonna get my own new one  and that's it and that happens again and again   but if i am writing a sentence like this and  then an inline tag appears you can see it just   continues in that right so this means i can just  link to something in a paragraph and if you think   about it it makes sense i mean the creators of  html people who actually designed these block   and inline tags they thought about this that most  of the people when they will be writing content   on the web they would probably be putting links  inside paragraphs right so the paragraphs need   to just continue as if nothing happened they don't  necessarily want everything on a single new line   but for heading i mean it makes sense you would  not necessarily just be writing something in a   paragraph and then suddenly the text become  bold and four times larger and you know just   continued working like that so what we came across  is the notion of these two things the first thing   is an inline tag an inline tag is nothing but  something which just takes as much width as it   wants and does not spawn a new line basically  and the block tag which is something which   takes the complete width of the screen of the  container i should rather say not the screen   and yeah just does not let anyone  else occupy any any sort of space   so paragraph tag again here is an example of  a block tag so if i do this is a paragraph   and this is some text so you see by default if you  are writing this text this is just inline right   because you don't have necessarily any text so of  course you wouldn't expect every single character   to get its own line right so that means everything  is in line here so this is in line but if i switch   to a new tag called span you would see that this  is actually inline right paragraph tag is block   because it gets its own new line and does not  allow entering this line above but if you switch   it to span again you get you know it's it's fine  spam says hey it's fine just share a line with me   so yeah this was an introduction to paragraph  tags span tag block tags and inline tags and don't   worry about them like i said you will eventually  learn about a lot of these tags and what their   behavior is if you would have guessed div tags  if you would have guessed by now diff tags are   actually block tags right so div tags just create  a division that means if you're writing this thing   it will not be just continuing with the div itself  right div says that hey this whole block is mine   go ahead and continue from the bottom right and  it makes sense it does not make sense for your   inline tag to contain a block tag right because  the point of an inline tag is to actually be just   limited in width and if your inline tag  has a nested block tag that does not make   a lot of sense but don't worry about that  yet just understand that paragraph tag is   nothing but a block tag which just creates a  full container with area for your content inside   right that's it this is all a paragraph tag is  similarly div is also all that else right they've   also just you know just creates a space the only  difference subtle difference you can say that   browser actually styles the paragraph tag a little  bit different you can see browser by default gives   us a little bit of margin at the bottom which  is this white space which you see if i switch   to div for example here instead of paragraph  what you will see is that that white space is   gone right so although it still is a paragraph tag  uh although still it's a block tag but that white   space is gone basically so you don't have to worry  about that but yeah i won't necessarily say worry   about these details yet but just understand that's  how the things more or less work in the html space hey everyone welcome back and in this video let's  just quickly review and in a couple of further   videos as well just quickly review some common  html tags right so i'm going to get rid of the   style tag which we'll get to when we start css but  the next tag which i have in mind is a button tag   so a button tag basically like the name says  it creates a button i am a button on the screen   now you can go ahead and click on this you know  and pretty much that's it that's that's all this   button do but what i want to touch into this video  is that why do we have i mean like i said we can   pretty much customize almost every single aspect  of these stacks through css when we start css   i can make the h6 tag as big as h1 and h1  tag as small as x6 so i can reverse this   behavior right away when we start with  css right when we are working with css   i could create a div as a button i could  create a button as a div and you might have   just guessed that button is also a inline element  at this moment right because the text continues   now the reason then why do we have these  names all over why don't we just have divs   and you know title for example some  certain tags which have special meaning   and then all of the tags should be div why don't  we have that that is because html as a programming   language as a markup language was built to have a  semantic some sort of semantics why because okay   it's fine i mean visually i can tell that this is  the largest heading this is the smallest heading   but your code should also be able to tell that  without actually being parsed into the web page   why is that important that is important because  of accessibility reasons for example if you have   an h1 on the page that usually means that hey this  thing is important this heading is important why   because your browser knows your accessibility  readers on people who are disabled know that hey   this is an important heading that's why it is h1  similarly if you have a button your accessibility   reader knows that this is a button which could be  clicked most likely your browser would be able to   tell that to your reader right whatever it is  so the reason for you know first of all if we   just used divs all along it will become super  boring real quick so that's one of the reasons   and the second reasons is to actually give your  code meaning that's why we have all these names   to these stacks right but yeah just to discuss  a button that's how you create a button that's   pretty much it we can customize this behavior  and we can add a lot of interactivity with it   once we learn javascript then we can attach  event handlers that when i click on this let's   say this h1 tag should turn red or this h2 tag  should disappear or this h3 tag should change to   you know a bigger text font size whatever  so we can do all that fun stuff once we   learn about javascript but let's not get our  you know expectations real high right away   there's a there's a bunch of work that still needs  to be done um so yeah that's pretty much it for   this video i hope you understood about button  tag but more importantly why button tag is right hey everyone welcome back and in this video  let's just go ahead and take a look at   image tag in html now image tag is of course  really important because images are an integral   part of our communication and how we perceive the  world so html allows us to embed images directly   with the ease of a single html tag so what i'm  going to do is i'm going to create a new tag   right here after creating some space for me and  i'm going to say img and one thing you should   note here is that i hope you remember our talk  about the block not exactly the block sorry the   self-closing tags and the tags where you have to  close it again right so so far whatever tags we   have seen they have to be closed for image tag  that's not the case that means if an image tag   is there then it need not to be closed right  you would not write an img like this this is not   valid html and you can see your editor is also  reflecting that because it does not have a syntax   highlighting so image tag is a tag which is an  inline number one inline tag and number two it's   a self-closing tag that means you do not need to  close the stack and it seems like a fine decision   to me why because once you have an image i  mean you could technically think that hey   i will specify the url or something here but  that's not how it works you just specify a url   as an attribute and that's it you're done then the  image appears and then you customize the width and   height of the image also through the attributes  so that means it does not need any content that   should go in between right so that means it does  not need a closing tag so therefore therefore you   don't need to include a closing tag and as a rule  you should not include a closing tag so i just   have an image tag but i cannot see anything  so what the hell is happening well nothing   is happening the reason for that is because you  haven't specified all the relevant bits and pieces   the first bit which is the most important thing  is that you have to specify src the source of   the image and this should be a url right just like  every single page on the internet has a url your   images also have a url so if i go to google for  example and if i let's see if i right click oops   i think google has some game or something so let's  just go to images section and right here you would   be able to see i have this image for example if  i right click on this and open image in new tab   you will see this is a url which i have right and  if i copy this and if i go to my web page again   and paste this right here you will see i have an  image with me so this image is embedded directly   from this url you can see into my web page now  whenever somebody visits my website like this they   could see a nice big image right so that's cool  but let's say i want to customize the width and   height for this now you could technically go ahead  and specify a width and a height attribute here   so 200 and height is 400 300 but don't do this  trust me don't do this there are better ways   to do this with css and this is also deprecated  that means it will work for legacy reasons because   you know the older web used to use the syntax  but the way we do it now is we do it with css   right so what does that mean that means we will  be using the css programming language to customize   the dimensions of this image for now it's fine i  mean for testing purposes it's fine but whenever   you're writing applications make sure you  customize the images with css and not with   these width and height attributes with html let me  just quickly tell you one more thing the thing is   you might find some tags which work right but are  deprecated so what are these tags these tags are   usually some tags which have been upgraded to  some modern alternatives either in html itself   or with some css rules for example a deprecated  tag i can think of is a center i mean it's so   deprecated that the highlighting has also stopped  working um this is some text in center right   so you can see although our text got in center  because browsers apparently still support it   but this tag is deprecated right this stack  should not be working you should not be using this   instead again you should be using css for  this which we'll see eventually but these   are some of the examples of deprecated tags and  deprecated information and you should be very   careful whenever you are learning from outside  resources i mean at goddamn i can guarantee you   that as long as you are on code damn you will  we will not be teaching you any deprecated or   older practices but just just keep that in  mind because with web development with html   html has been around for 20 years right and a  lot of modern syntax has just been developed   in the last four five years so you don't  necessarily want to learn bad practices so   that's one of the examples plus again like i  said there are better ways to do this on image   tag again which we'll take a look at when  we start css but that does the job for now hey everyone welcome back and in this  video what i want to do is actually go   ahead and explore a new tag in html5 which  although has been there since 10 years but   still it's a new standard in html and that is  how you can embed videos so if you go a little   back in time just to share a quick story with you  the support of videos was actually very very bad   in terms of how the browsers could play i mean  images were fine text was fine but videos had to   you just have to install adobe flash player  download codecs do all sorts of fun stuff to   actually get something working and this is i'm  talking about 2005 2006 time since then a lot   has improved since then what has happened is that  of course there have been new standards of video   that allows us to transfer videos more efficiently  but the support of the browsers have also majorly   improved and that means browsers now allow you  to embed videos natively that means just like   an image an image can you can just have a raw  jpeg image for example this imagenzin.jpg so i'm   assuming this is jpeg you have this raw image with  you and you can embed this on your page similarly   you can do the same thing with videos right and  if i go ahead and copy this example video with me   what i can do is make some space for myself first  of all and write a video tag like this and unlike   image tag although you might think that video  tags should technically be also self closing   because well it sounds like you know fun because  you cannot really have anything inside of video   as well but video tags are actually not self  closing right so you have to close a video tag   so what this video tag does is that it takes up a  source as another tag and this source would only   work and sources like you see you can see source  is not a uh you know a tag which needs a closing   tag so a source what it does it it embeds or it  tells this parent video tag that hey what is the   place where you should be embedding or where  we should be looking for the embedded video   and we tell that hey the source is this video  right here and you can see it it kind of gets   embedded right but you can see i'm not able to  do anything it almost seems like this is an image   and that is because we do not have controls over  this video right i cannot see a play pause button   anything like that so how do you add controls  you just write an attribute and that's it you   don't necessarily need to give it a value as  long as this attribute in itself is present   that is also fine i mean this syntax is also fine  you can just leave attributes like this if you   did not know this before so now you can see once i  add this we have controls now right here and now i   can play this video and this video plays which is  pretty cool now one important thing which you have   to notice here is that i'm using a raw src video  link you know this video is ending in dot mp4   dot mp4 actual mp4 this is an actual video which  you can just download and play into your vlc media   player a lot of people might confuse this with a  youtube video for example so if you go ahead on   youtube the youtube video starts playing and you  might just copy that youtube link and paste it   here that will not work because what you're trying  to do is you're trying to paste a video you're   trying to give this source a video but you're  actually giving it a web page right it's just like   saying that hey i'm just going ahead and pasting  it like this this will not work because this is   not a video it cannot play it right this is a web  page so what you need to do instead of this is   actually make sure that you have a valid legit  video from somewhere and you can just use this   w3schools example if you want but this will not  be useful in case of youtube youtube for example   how you would actually be able to embed a youtube  video is when you click on the share you will get   this url but this is not what you want you want  to click on this embed somewhere and you see   this you get this weird html string right you can  copy this and you can go ahead inside your editor   and you can paste this iframe thing the whole  thing and if you go down you can now see it's   it's pretty cool right that you're able to embed a  video directly right here and that's me by the way   so um you're able to do that but what is this  iframe thing and why this is not a video well   first things first we'll discuss about iframe  later the thing iframe does is it actually   allows you to embed full web pages inside and  that is required because youtube is clever   youtube does not give you the raw video and why  do they not give you raw video because then they   will lose this player this awesome controls and  the branding that the fact that this video is   actually on youtube because you  know youtube wants to say that hey   whenever you are embedding this video on somewhere  we want to advertise ourselves as well that you   are embedding this from youtube so that is  why instead of giving you a raw video link   youtube actually gives you an iframe  that is it gives you a web page to embed   so that's that but there are multiple use cases  of iframe which we'll discuss but other than   that what you need to realize is that video tag is  only meant for videos which are raw right they are   not web pages these are actual videos which are  present right so you have to be careful on that hey everyone welcome back and in this video  let's just learn about tables and why do you   need them well tables is something which i  believe everyone would be able to relate to   it's just the organization of data in a proper  way and you would be surprised to know that   a lot of html layouts the complete layouts of  the website were actually done with table tags   so i'm gonna just start a real quick with table  because it's just gonna make so much sense to you   in terms of how the html tag names are so of  course table has an open and a closing tag   which defines a table it does nothing on its own  it needs more data so the first thing you have   is a t head which is a table heading right  again has an opening and a closing tag   and what you can do is you can start a table row  like this so what does this mean this means just a   single row of information and a table row needs  a table data right so i can have a column one   i can have a column two i can have  a column three right that's it now   the next thing is well i have the table head  with me and you can also i think make this th   to give it a feeling of table heading right  so it just bolts your text nothing fancy   then what you can do is use a t  body which is the table body text   and again the body will consist of multiple rows  so i can say this is you know call one value and this should not be th it should be td which is  stable data and call to value table data and so on   call 3 value for example right and you can see  even though i'm not organizing it explicitly   in any sort of layouts or anything it just falls  into layout properly automatically right and you   can see i can just create multiple such things  and although there is no borders on anything   which we can also add but you can see it still  we still get a nice table look right with this   actually let me just go ahead and quickly  give it a s a border so that we are able to   see what the actual table is and again i'm gonna  cheat here by using css so i'm gonna say trth   td basically giving everything a  border of one pixel solid black   right so you don't necessarily need to worry about  anything right now don't worry about this thing   we'll discuss that but now it just looks a little  bit nicer right in terms of what the boundaries   are now the fun part in table is that you can  actually spawn certain cells to have multiple rows   or columns right so what you can do is you can say  this this element right here this call one value   should have a call span of two that means it  takes two columns instead of one and then we   can just throw away the third value right so  you see now it looks kind of like you know   just having two values i mean depending on your  data it might make sense sometimes it might not   similarly you can give this table data a row span  of two right so now what you can say is you can   remove the third value from the next row because  you don't need that so you can see now you have a   table data with a call span of 2 which looks like  this with a row span of 2 which looks like this   so you can have all sorts of fun stuff and you can  imagine if you scale it up to the whole page size   you can create some pretty awesome  layouts right with a sidebar with a   um you know a sidebar and a content area  header and everything but the problem here   with this this sort of designing a web page is  that it is ridiculously hard to make it responsive   what do i mean by responsive a responsive  is a web page which just adjusts its layout   automatically with the screen size right so it  works properly on desktops and it works properly   on the mobile phones that is something which  is extremely hard to achieve with table based   layouts right so therefore we will only use you  should only use stable for actual tape tabular   data representation never for layouts right that  those days are gone those days are long gone   but yeah you should be aware about tables and  how to create simple data visualization because   sometimes you know if you're connecting  a back end and you're getting some data   which you want to display in a table that's  that's something you should know out of the   box right you don't necessarily need to  just reinvent tables in css all the time hey everyone welcome back and in this video let's  just quickly go ahead and take a look at what   forms are in html and forms basically allow you  to take input from user to your backend servers   or to your web application and what does that mean  that means if let's say you have seen sites like   facebook or google which allow you to log in sign  in create accounts and do all sorts of stuff but   when you sign into these websites what happens is  that you have to enter your username and password   right so these are input fields where you have to  enter this enter the stuff now you accept those   input fields data with certain html tags again  which are special tags they are not like p or diff   um but form is a parent container of those stacks  which just holds all these tags together which are   required to take the input from the user without  any more talking let's just actually create a form   tag right so what this form tag does on its own  is nothing you have to specify some input tag   inside this so let's say i specify just just this  input and again like i said for image and video   tags input tag is also self closing that means you  do not need to have an input tag like this right   because all it does is that that is just creates a  space on the page for the user to type some stuff   now you can actually type some stuff right here  now this input tag however is super interesting   because you can give it multiple types what  kind of input do you expect from the user   so what you can say is input type and now you  can see there are so many types right here which   you can i actually encourage you to play around  with but i'll just stick with some common ones   so i'm going to start with the text one  which is something which the browsers   use by default if you don't specify or what  the browsers fall back to if you just enter any   gibberish value right so that does not exist  you can see input type text is something   which pretty much accepts well text right  so it accepts every and any sort of text   that's it nothing multi-line nothing as  such but just you know single line text   well let's just take a look at something like  input type password for example so the password   field you can see immediately my password manager  also kicked in i used lastpass but you can see my   password manager kicked in and what i can see is  my text which was i was able to enter earlier is   now all dotted right so you cannot really see  what i'm writing that is important again if   you are trying to create a login form you want to  have a password field but that's how you do it the   only difference between password and text fields  apart from the accessibility and all this cool   stuff which happens that your password manager is  able to stick to it is that it hides the password   it hides the text which is entering all  right moving on to the next tag let us see um   we have number right so the number field only  allows you to enter numbers and it also gives   you a small slider if you have to use that if you  try to enter text it will not work right it will   just not take your input now this in no me no way  means that the user cannot technically input text   on the back end so you should not ever rely on the  front end input of the user always but it's just   a nice validation where you can just restrict  a person to only enter number on the front end   then there are things like input type file for  example which give you this button where you can   prompt the user to upload something right then we  have some special things like input type email for   example right and what i can say right here is  that well it still looks like pretty much what a   regular text field would look like right so what's  the difference why does this type email exist   well you see what we also have is an input  type of summit right and what i can say is   that this email field is required so now if  i try to write something and click on summit   you can see that the browser actually gives  you an error message by default it says please   include and add the rate in the email address this  email address is missing and add the rate right so   browser till certain extent is able to figure  out that an email address needs an ad symbol   and you know still not not right because  browser says that hey you're still missing some   information and if you write something complete  and then submit it then it kind of works and the   reason it refreshes is because when you click an  input type summit something interesting happens   which is now we are discussing which is with  forms so what a form tag does is it majorly takes   two inputs the first one is a method where you  specify a get and a post so let's say if i write   get here and an action an action is a url where  the input of this form should be redirected so   just just stick with me here so let's say i have  an action of summit right and let me just go ahead   and open this in a new tab so pay close attention  to the url the url right here is whatever this is   and nothing after that right so now if i go ahead  and it hit like mayhole at the rate codedown.com   go damn.com because that's that's what it'll  accept as an email and click on summit you can   see well we get summit and basically a question  mark and nothing so where did that form data   go well technically speaking when you have a  method of get it should actually write all that   information in the url itself but the reason that  did not happen here is because we are missing a   couple of attributes the first attribute which you  are missing is a name so a name is like my user   user's email for example if this is something  i give and this is required and let's just go   ahead and try this again what will happen is if  i write maehol at the rate codedown.com and hit   summit you will see inside this url if i copy this  url and paste it here you can see this is where i   got redirected summit question mark then my user's  email is equal to maywell at the redcoatdom.com   so this is pretty much something which we probably  are getting ahead of ourselves right now we'll   discuss this more when we start with javascript  but what's happening here is that we are sending   the details of this form inside of the url so  whenever you use a get it redirects the form   with the wherever the route you have specified  and all of the data is combined inside of the   url right now you can have multiple such things  now you are now we are talking right now you can   say something like register and have an input  type text name username for example and then   required for example right so now you have  a couple of fields which you have to enter   and if i go ahead and refresh oops if i go  back and refresh this you can say mahul mohan and if i hit summit you will see i have a username  of mihul mohan and my users of this thing right so   this information is something which appears right  so this is one way right where we are actually   the con of this is we are actually exposing  this data inside of the url which sometimes   is fine sometimes it's not fine so that's one  way another way is we actually change this to   post but now that's something different that's  that's something we would actually take a look at   when we are learning about servers and javascript  maybe or something how to extract that information   out but forget i think it's pretty simple and  it's pretty visual as well how it works so that   is how you actually communicate your data from  front-end to back-end as well so maybe this   url is running a back-end script which just takes  out these parameters and extract out these values   with the key names as well right so that's how you  communicate your data from front-end to back-end   in a very simple way but yeah in general that's  how a form works mostly and that's how you create   these things as well now you can pretty much if  you want to you can just throw them inside a div   and say like your name and throw  this inside a div as well and say   like your email and you might have guessed like  from the earlier uh version of this that the   input fields are actually in line in line  elements that means they just stack against   each other that's why i just threw them into  a div tag so that they appear differently   and that's it you have a simple small form  with you but yeah we're going to be discussing   more about forms when we start javascript because  that's where the fun really happens where you just   stop the form from submitting and use javascript  to submit the form in the background why do we   do that because we don't want this weird page  reload right or maybe you just want some custom   validation logic as well so you see this page  reload or whatever happens that would not happen   if you are using just a regular um javascript  thing but yeah that's that's something different   but overall i believe this video helped  you understand how to work with forms hey everyone welcome back and in this video i want  to only focus on a valid html structure which you   need to follow whenever you are creating an html  page so far we have been doing some ridiculous   work with html just throwing tags anywhere and  everywhere we like but that is not how you have   to create your html documents what do i mean  by that first of all let's just go and look at   any decent website like goddamn for example and  if you go to the view source you will see that   there is a certain structure which is followed and  even for code dam i think it's pretty compressed   so let's just go to example.com and go to this  page source and you can see that it does not just   start with example domain as h1 and p tags and  all that stuff there's a proper structure to that   and why is that well this is because  browsers need certain parts of the website   in certain place certain tags sure if you start  with just this diff tag i mean if that is all   we had on the page it would not be a problem it  will still display the content but this is not   the complete html markup right like i said html  is very forgiving in the sense it will not tell   you that you are doing it wrong but you are doing  it wrong so what's the catch what you have to do   well the minimum you have to create in order  to be actually a valid html document as follows   so you have to write a doctype html the stock  type html you can see it's not technically a tag   because just like comments it also starts with  a tag and then an exclamation mark but this   just tells that hey your website is using html5  html5 syntax is the recent the most latest   supported browser supported syntax this is not  exactly you know a make or break thing for your   website but you should have this right then once  you have that then you need to have an html tag   this html tag by itself does nothing right  it's just a root container for everything then   inside of head tag this is where our styles and  javascript would ideally go the javascript can   also go in the body tag and so could styles  i mean that there's no exactly fixed rule for   anything here but technically all your meta tags  for search engines your scripts your style sheets   should technically go inside of the head of the  document and by convention your title tag also   goes inside head document so my title so head is  like something which does not which is not content   which does not appear in the ui but modifies your  ui somehow in one way or another or modifies your   meta tags or searching and stuff like this now  the body tag is the actual tag which actually   consists of the real content on your website  right so whatever you're writing h1 hello world   stuff like this this is what appears on the page  for the user right so all of your stuff all of the   good stuff actually goes inside the body tag and  yep that's pretty much it i mean you need to throw   a couple of metacare set utf-8 things this is  mandatory because otherwise your page would   actually break and let me show you a fun way of  actually breaking a page like that i'll tell you   why this meta cards at udf8 is important and we  actually have a lab on this i believe in in the   other code in the other course but let's say i  copied this emoji and if i pasted it right here   you can see it does not parse properly why why is  that because the browser does not know that what   these characters are because technically speaking  every single thing is a character right in memory   this is a string this is some sort of string but  your browser does not know what the hell is this   this is not a custom font this is just an emoji  right and your browser although can represent   this but it still needs a character set of  what this page is right and the most popular   character set is utf-8 right the only thing you  need to know about this at this point is that udf8   supports emojis right so what you say is that  hey the character set of this page is going to   be utf-8 and the moment you do this ta-da it  turns into you know regular emojis and we have   this in as a lab as well in the further courses  i know but you can see that the udf8 udf-8 and   capitalization doesn't really matter however it  could not be just you know udf and stuff it has to   be utf-8 it's a character set name but yeah anyway  that's it once you have this simple structure   now this is a valid document right now this is a  valid html complete valid html document so yeah   you should always write complete code whenever  you are shipping it to your users just don't you   know just don't write like this because it it will  just create all sorts of problems right so do this hey everyone welcome back and in this video real  quick i'm just gonna go ahead and complete a small   challenge for you which you should also see most  likely until and unless we haven't just replaced   it or replaced it with something different inside  your exercises as well so you would be attempting   this right but if you want to identify you can  just mark this video as complete or done and   just move to that challenge otherwise i'll just  quickly go ahead and tell you how to complete this   challenge so first things first what i'm going  to do is i'm going to start by creating our html   document structure like we discussed i'm going to  create a head tag just for the clarity i'm going   to create a body tag just for the clarity and then  i'm going to finally start working on this so the   first challenge says that my tribute page should  have an element with the corresponding id as   main now although i know that we haven't  discussed idn classes that much because that   makes a lot of sense when we start with css  but just understand that id and classes are   just two attributes which you can use with pretty  much all the html tags right and also let's just   go ahead and throw a doctype html while we are  added so let's just say i have a div id main right   here and a closing div right all right so that is  done now let's just move ahead and see i should   see an element with the corresponding id title  which contains a string okay so i need to have   an h1 you know pretty much you can have anything  but i'm just making my best choice here h1id title   which is let's say i'm creating an attribute page  on my own right which is which is dedicated on me   but you can write elon mask let's let's do it  for garyvee why not right and let's move ahead   i should see either a figure or a div element with  the corresponding id img div let's go with a div   tag there we go within the img div i should see an  img element with the corresponding id image img id   image right within the img diff tag i should  see either a fake caption or a div element with   the corresponding id img caption that contains  textual content describing the image shown in img   okay so i can say img caption and i  can say a photo of gary wayne or chuck and inside of this image let's search for  gary vaynerchuk let's just take his photo   and this one this one's good   and just copy this and stick it right not as an  id but as an src right here right and although i   do know that this is not something i recommended  but for now until unless we start with css we can   just stick with the width and height attribute  but we should have better ways of doing that   okay i should see an element with  corresponding id attribute info which   contains textual content describing the subject  of the tribute page all right so we have a div   and then we have an id of tribute info right at  this point we can also use some of the more uh   html tags instead of just keeping on using div  you can also use section for example section is   another html tag these tags these are something  which we discuss in further courses but yeah you   can explore a little bit on that but okay let's  find this is the let's stick with the html thing   so we have the tribute info with us which contains  the textual represent describing the subject of   the tribute page so this is a tribute page to  gary wayner chuck who is an awesome guy right   okay i should see an anchor tag  anchor element with a corresponding id   tribute link which links to an outside site that  contains additional information about this page   yeah i mean you can choose to follow that or you  can just probably link it back to goddamn.com   right and i'm just gonna give it an id as  well of tribute link like said go to gary's   favorite website why not right and it also  says you must give your element an attribute   of target and set it to blank so the only  thing this target blank is actually doing   if you even google it you will see that whenever  you open this in a new page when you click on this   it opens it in a new tab instead of just you know  replacing the original tab so whenever you want   to open a link in a new tab you just give it a  target of blank that's it the img element should   responsibly resize relative to the width of its  parent element without exceeding exceeding its   original size now this is something i which will  involve a little bit of css so excuse me if this   exercise actually includes a little bit of css  you can just skip these two tests if you want or   what you can do is just go to the css file right  here and make sure you link the css file as well   but don't worry if you don't understand about  this yet we will discuss this what we can do is   right here i can say the image the image id should  have a maximum width of 100 percent don't worry   about this if you don't understand it it's fine  we can discuss that later an image element should   be centered within its parent element so if i  go to image div and say text align center you   can see our image is now centered awesome so now  if i click on run test let's see how many we pass okay looks like we just failed this one  the image element should responsibly resize   relative to the width of its parent element  without excusing exceeding its original size   okay and one last thing is that we can just get  rid of the width and height attribute right here   and the final change which we will also make is  a height of auto and what this height of auto   means is that just adjust your height according  to the width of the image right so like you can   see if i resize this now the height is fine if  i give it a height of a fixed height for example   then at some point your image would look fine but  otherwise it will just stretch right we don't want   that we want it to replace we want the height  to automatically work hence we can just specify   a height of auto so the moment we do that and  run the test this should hopefully pass it now   and and also through a display block in here  let's see and now you can see that we completely   pass the challenge which is fine i mean we can  definitely work on this challenge it should not   have required a display block or anything but  yeah it's fine so yeah that's pretty much it   a very small tribute page to garyvee a  very very small tribute page rather but   i recommend you adding more information more  images more text more links for your tribute page   and eventually styling it with css as well  as and when we learn in the next section hello everyone and welcome back to another  video in which i just want to say you that you   have successfully completed the first section of  this course which is on html basics and you have   completed the basics of html well does that mean  you are just good to go and start earning from   millions of dollars by freelancing and getting  placed in google well not yet but you are getting   there you have completed some of the fundamental  concepts of html tags attributes how to work   with most common html tags and understand how web  pages work now like i always say programming and   web development is not a single pass thing it's  a multi-pass learning where you would be learning   about these things more and more again and again  when you are working with them again and again   that means you cannot learn about html 100 once  and then move on to css and then learn css 100   and move on to javascript that does not happen in  programming world especially in web development   you will be now mixing your knowledge of html with  css then playing with both of these technologies   together then you will be introducing javascript  to the mix playing with them all of these three   together and then moving on to different different  technologies and whenever you mix a new technology   you would actually realize you understand  a lot more things about the previous one   because the previous one only made sense to  discuss whenever that new technology is introduced   right so for example one of the things is a class  attribute so all the ht most of the html tags   support a class attribute but this class attribute  makes no sense until and unless we introduce   at least css in the mix right so yeah it's time  to start with css because we have done html basics   that does not mean we are stopping with html  that only means we are introducing a new player   which should unlock more of the html things while  we are learning about that as well so yeah that's   pretty much it for this video hopefully you had  an exciting and practical learning of html basics   and if you did make sure you rate this course um  through the rating button somewhere you could see hey everyone welcome back and in this video i  would go ahead and show you how you can start   working with css and before we actually get into  that let's just actually understand what css is   and why that is needed so if you take a look  on any other regular website on any website   basically in today's time you will see you  have all sorts of layouts you have all sorts   of colors you have all sorts of effects going on  and even sometimes a little bit of animation and   that is all because of css or at least some part  of css css stands for cascading style sheet that's   probably the first and the last time you  need to know the full form of css because   the only thing you need to know is how  to work with it as an effective developer   now whatever you create with html you see you can  provide some sort of structure to your document   that this should be a heading this should  be a paragraph this should be a section   and so on and so forth but the problem here  is that you can only provide that structure   which you know the tags give we don't have a tag  which says um a container where the header is   200 pixels in the height right or 200 some unit  in the height because that will be just too much   tags right if you have a header 200 tag for  example which creates a 200 pixel length of header   then let's say i want to have a background  tag then maybe we have a bg black   something like this and then a color white red  or color blue or yellow so you see it will be   it will quickly go into tag hill now to avoid this  what we came up with was that we said okay let's   just go ahead and separate the html that will  be the actual structure the actual document of   the page and create another programming language  called css which the only responsibility of css is   to style the layout to style the elements to make  sure we are able to customize a lot of parts of   the website and so far it has played out very well  css is a very awesome language if you are able to   understand it properly and that is what we're  gonna do in this section in this course make   sure you're attempting all the exercises because  we'll be doing a lot of layout stuff a lot of   amazing stuff with css and it's super important  that you are practicing as well as you're doing   and that is the the most important part of  learning on code damn that you're able to practice   as you go ahead so make sure you're completing the  exercises the small projects in between as well   and we will have a lot of big  projects as well later down the line hey everyone welcome back and in this video let  us just go ahead and take a look at what are all   the ways you can include css in your document  now first things first let's take a look at the   easiest way now the easiest way is you actually  go to the element which you want to style for   example in our case is this element let's say and  add an attribute called style right now the style   attribute exists pretty much on all these stacks  body h1p is valid on all these tags on html as   well um because these this attribute right here  allows you to write css right inside of the html   document as a value so it's basically you know it  looks like just another attribute but by browser   it will be parsed as a css string so if i did  something like background yellow don't worry about   this we'll discuss what this means but you can see  that it turns the background to yellow so that is   how you can do it in one way but you if you think  about it you will soon realize that let's say if   i have another tag hello world again and if i want  to use background yellow again then i have to copy   paste this and let's say i have a thousand such  tags and i wanted to change the color from yellow   to blue i would manually have to go ahead and do  for every single one of them so this does not seem   very friendly right this is why we have the second  approach the second approach is where we do not   give these tags a style name but actually we point  it with the help of the selector which we have so   what do i mean by that first things first we'll  create another tag called style and don't worry   about them again because we will be discussing  all of them in detail so the style tag whatever   you write between the style tag would be  passed as css right and in css the first   thing is that you have to select a selector  and what do i mean by selecting a selector   just like we wrote style right here and it made  sense for the browser to understand that hey   this style attribute is for this element right  because that's that's the property which is   written inside the stack similarly the moment  you do a selector in css your browser knows that   hey this selector the styles which you will  be writing in the selector are targeted for   these these elements which are matching them  right in this case it's just h1 it will not   match for p because this is not the selector so  let's say i give the same background as yellow   and you can see now instead of me going to both of  these style tags and you know h1 tags and giving   them a style attribute i can just pretty much  change it from here right and that's that's easy   but this method also has a problem where let's say  my website has multiple pages multiple html pages   i still have to copy paste all these styles  to different different html documents   right so the third way which is the best way  out of all these three is to actually maintain   css in a complete completely different file itself  right so what you can do is you can create a file   any file which ends with a dot css extension and  copy paste these styles directly here and you   need not have to just wrap that into style tag  because this is not an html document this is a   css document so it's understood that browser  will automatically understand what this is   now well that's fine but how do you link this file  to this right because now you might have multiple   html pages but you also need to make sure your  browser understands that this html page is linked   with all of these html pages are linked with the  style sheet well you do it from the html document   obviously because your browser only receives the  html document at this point right it does not   know about the existence of this file so what  you do is you use something known as link link   rel style sheet which just means that we have got  a link the relationship of this link to this page   is that it's a style sheet and we give it an href  of style.css in our case because you know it's in   the same directory we can just give it like this  so uh not exactly in the same directory but you   know because if you open this in the url you'll  see that your stylesheet is actually present at   the root right it's basically the same file so  that's why you can see it gets applied as well   and if you change it to yellow for example you'll  see it just works fine so that is how you're gonna   start working with css this is also kind of like  a hello world for you for css we will also discuss   in depth what these selectors are what these  properties are so don't worry about them yet hey everyone welcome back and in this  video we're going to be taking a look at   css tag based selector now what does that mean so  first of all let's just realize that css needs a   selector in any case in order to style an element  a selector is a fancy word of saying which element   do you want to pick on the page the last time we  saw you can just inject a style tag inside the   tag itself which works fine but the other way is  you actually write a css file or you know inside   the style tag and use a selector we have multiple  types of selectors in css one of the selectors is   the tag selector now a tag selector is pretty much  a selector which is the name of the tag itself   right so let's say we use another let's say in  any html5 like tag for example i know a side   is a tag in html which is pretty much like div  but it's just it just is semantically equal into   a sidebar kind of thing right so let's say i  just wrote hello world inside a side right and   if i have for example the same thing but for a  div right so what i can do now is go back to my   style sheet and just directly target aside and i  can say as color as green and background as black   right so you can see this turns  green and black but nothing else   right so this means what i can do is i can take  any tag on the page and target its selector   right away so for example if i take body for  example and i give it a background of let's say   pink you're gonna see that it just turns pink  right so that's that's it that's how you work   with things in css on the first level  that is you just take up the tag and just   start styling it so in fact even now whether when  we have not really learned about a lot of css   properties just color and background you can see  you can create some fun funky looking pages right   so yeah i mean we'll be learning more about  css properties and what we can do but this is   one way of actually starting to style css and  you can see css follows a specific syntax the   first syntax is you write a selector you have an  opening curly brace you have a closing curly brace   and you have a property column value semicolon  you can see i'm not using quotes here   i'm not writing these values in quotes you don't  have to write them it will not work otherwise some   values need to be written in quotes we'll learn  about them eventually as we are going ahead right   but most of the values you can just use without  goats as well so that is one thing and yeah i mean   in the next video we'll discuss really briefly we  will discuss something super important with css   which will help you in order to debug your code as  well but we'll take a look at that in the next one hey everyone welcome back and in this video  let's just go ahead and take a look at quickly   take a look at one of the things which i think is  important that you know although we will discuss   it in much more depth in our using dev tools  course on the full stack learning path the   front end learning path whatever it is but we  will be briefly taking a look at dev tools in   this one video what do i mean by dev tools well if  you're using a browser like chrome or even firefox   when you right click on anywhere on the page you  will see this inspect option right here at the end   right and when you click on this you'll see a  window opens on the right maybe for you it is at   the bottom like this for me it is at the right  you can switch it by clicking these three dots   and selecting a layout which you prefer anyway  this window right here you could see it pretty   much looks like the html you wrote here but it's  not quite that and we'll take a look at that in   some other video in some other course but for now  you can just consider that this is the same html   what you wrote inside of your html document  but what i wanted to discuss in this video   real quick is sometimes it might happen that  your styles might not work or something might   not work on your page in css right so let's  create a situation where i have a background   of black but it's not working right so you can  see it should technically give me a background   of black but it's not so how do i debug this  well the way to debug this is first of all   you have to open let's just refresh this you have  to open the inspector like i did and you have to   click on this select an element in the page to  inspect it now when you're hovering over the   page you'll see it just you know sticks to  all the elements and just go to the element   you want to debug in this case this is our green  text and i have this aside inside the site right   just right here inside of the styles part  you will see the css assigned to this   and right here you can see chrome gives us a  warning and it says that invalid property value   so now we immediately know that hey our background  black is not getting applied because it has an   invalid property value now you can go back and  change the code and it'll work fine or you can   just click right here and change the code right  and chrome will just give you a small preview   of course this does not stay if you refresh it it  will go again to the broken value but it can just   you know just use you can use this area for quick  debugging or quick checks even you know writing   something like background yellow just to see how  it looks like so you can do some real time changes   on the web and this is how most of the if you  have ever seen that on internet most of the fake   screen shots kind of stuff is also generated where  you would right click on a page change the bank   account from zero dollar to 99 take a screenshot  and you know just show off kind of so that's how   it works people just open this inspector change  the value and use it but of course that is not   something which is in real world because if you  refresh the page it will reflect back but yeah now   i can see that hey we had a wrong value because we  were using codes so i'll go ahead and remove that   and once we do that it will just work fine because  just like html i mean for css the browser kind of   helps you because for html even the browser does  not tell you what's wrong but for css you can get   a little bit of help little bit of hints from the  panel so if you use any wrong value your browser   will say that it's an invalid property value so  yeah that's pretty much it for the css part in   the next video we'll try to explore more ways  of working with css more properties and so on hey everyone welcome back and in this video let's  just go ahead and take a look at css properties so   what we have been doing so far with background and  colors is actually styling certain elements with   the help of css properties right so these things  background color and whatever we will discuss in   the future as well these are called as properties  and these are values in css so like i said   css always follows a property column value format  always you will never find something weird here   and yeah this is this is the underlying thing  of basically all the styles which you see on   the website a selector a property and a value and  that can be used a lot of times a couple of things   you have to note here is that all these values  end with a semicolon there is no exception here   in css your code will work fine if your last  value omits the semicolon then it's fine but   if any other value omits the semicolon you will  get errors right you can see it saves me semicolon   expected and also our styles are broken here so  it's as a rule of thumb just make sure you're   ending all your values with a semicolon that  is one another thing is that we have a bunch of   properties in css some of the common ones  which you can think of are you know related to   dimension for example we sure have background and  color but we have for example width where i can   wi ddh where i can give let's say 200 pixels  otherwise so you can see it's a little shorter   than before if i increase it to 300 you'll see  it just increases a little bit 350 and so on   right so you can see that you can play around  with width you can play around with height   width and height for example  it's it's a long aside tag now   you can also play around with certain properties  like margins and paddings which we'll also get   into and we'll discuss how they work in terms  of their short hands um but yeah for now i think   it's a start with background colors width  and height right so now you can have   four tags for example let's just go ahead and  create a p a side div and h1 right and now let's   just give them different different words so h1  is width and height 200 pixel and background as   green for example then for a side we can have the  same thing but for let's say 150 pixel and then   for div we can have the same thing as blue red  and this would be 250 pixel right so you can see   we have a mix of styles here and it's already a  lot colorful than just you know plain html page   so yeah i mean we have now we also have a property  which comes to my mind like border border radius   and border radius is just in either in pixels or  in percentages the amount of curvature you want   on the borders i'm going to give it a 50 and you  can see it turns it into a circle now obviously   the content is overflowing which we don't want  so maybe we can fix it later down the line or   you know just keep it as it is but you can see  now you are able to play with css a little bit   and there are tons of properties right there are  tons and tons of properties so i would probably   not be doing just one property per video because  that will just be a really boring course in itself   so what we will be doing is we will be actually  discussing these properties as and when we are   building stuff with them right whether you are  building them in the exercises where you will   see the properties names and the description in  the uh in the exercise description or whether   it's a video where of course i will be telling  you what the property does so that's how we'll   start working with css properties by actually  making use of them there are a lot of them hey everyone welcome back and in this video let's  just go ahead and take a look at classes in css   and classes in css will make a lot more sense  the moment we realize what is happening right now   so for example right now you can see that what we  have is that we are trying to create multiple tags   for selecting those tags inside css and styling  them now this might seem okay right now but if   you think about it if your website has hundreds  of elements then it probably makes no sense to   actually come up with hundreds of such tags and  then style them differently because that will be   just insane amount of work so what we came across  is that we said okay you could pretty much use   a bunch of tags on the like div or p or span or  whatever we discussed and you can still select   them in a unique way or in a collective way by  using classes now what does that mean let's say   this is a div again matching it with the with  the one below but let's say i also want this to   just have the blue circle which which it had  earlier so what i can do is i can give it a class   of blue right and right now what i'll also do  is i'm going to give this a class of red so so   far you see nothing happens because that's it  that's what all that's all class does right it   just gives an attribute which you can pick up in  css but we are doing no such thing in css so far   so what we can do right now is instead of aside  i can say i want to target this blue class   but remember the moment we write blue css is  trying to actually look for a blue tag in the html   it's not looking for a blue class right so the way  css looks for a class is you have to start that   with a dot with a period right so this full stop  distort this period whatever you want to call it   this denotes that hey this selector right here  it's not an html element it's not an html tag   but it's actually a class name so go ahead and  take a look at the dom and see all the elements   which have this class of blue whatever you want  to call it right you can call it very well call   it green and it'll still work if you just make the  right changes so if you call it green you can see   it still works so it's basically you can pretty  much name it anything as long as it starts within   um with a string i think that condition is also  relaxed a little bit i'm not sure but yeah make   sure you just keep your class names sane not  really just go all wild characters or anything   so that's how you use classes and you can see we  already have this as red because we are targeting   div but even if we target even if we go ahead  and target for example dot red like this it will   still work right another advantage for this is  that i can also use the same class for example   with this another tag right and now i did not  need to go ahead and write more styles for the   same thing so you can see it's kind of it kind  of makes it reusable it kind of makes your css   code reusable because now you can just slam  a class to any of the element you want and   it will be just turned that way similarly i can  just go ahead and give this h1 a class of blue   and right here you would see that suddenly this  green color went away for each one and why is that   why that happened that is because of some  cascading style sheet rules and we'll discuss that   but for now you can just imagine you can just say  that whatever comes the last whatever comes last   is applied right if there's a competition between  h1 and dot blue then blue is coming at last then   gets implied but this is not the full statement we  can kind of override this as well but we'll take   a look at that later on the line you don't have to  worry about this now at this point i would say not   to put conflicting styles so probably a good idea  is to just remove any conflicting style at all hey everyone welcome back and in this video  let's just go ahead and take a look at   ids in html and css and what that what does that  mean so in the last video we saw about classes and   if you understood classes that's awesome because  ids is pretty much the same concept right it's   exactly more or less the same concept but the  thing with ids the only one constrained with ids   is that you have to give an id to only  one element on the page so one unique id   one unique value of that id belongs to only  one element so what do i mean by that well   i can give this a class but i can also give this  an id and i can say this is only paragraph right   so this id right here technically i mean  of course nobody's stopping me and go ahead   and for going ahead and create this paragraph  two but this is wrong in the eyes of browser   right the browser will not like this and that's  all the browser can do to be honest um because   they don't complain about html right but this  will actually come and bite you when you're   working with javascript because javascript just  like css has selectors javascript has methods   to pick up the elements from the dom right  we'll come to what dom is what did i just say   but what you have to realize is that just just  keep it in mind at the moment although you can   cheat the system and i can tell you like if we  go and only p and do a font size of let's say 30   pixel you will see it works across both of these  paragraphs that works fine but trust me don't   do it if you are using ids just keep the id to a  single unique value on the html document you can   give it another one only p2 that's fine and then  style it and you know i might have skipped this   but the way you style an id is by using a hash  symbol here right so we had a full stop a dot a   period in the class name and we have a hash symbol  for the id so that is basically it that's all   that's all the difference between a class and i  and an id the way you refer that number one and   number two is that the fact that you can only keep  it one unique value per page in most of the cases   i usually prefer people to just go ahead and use  class because it's just less cognitive overload   you don't have to think a lot about that  and it's fine i mean ids have a very slight   more performance on the web page um but  that's that's basically negligible right you   would not never never ever feel that so just  technically speaking ids are faster because   browsers can maintain a hashmap of the ids on  your page and directly go to the element in that   tree but don't worry about that trust me here  you can pretty much just forget all about that   and focus only on classes but i'm telling  you that ids exist just because you should   know if you see an attribute that should be a  unique id on the page and you can style that   using css just like you would do a class  but using a hash symbol instead of a dot hey everyone welcome back and in this video  let's talk about an interesting concept in   css and in html which we also have talked about  a little bit before which is the inline and the   block elements so just to quickly revise if you  have forgotten what inline and block elements   were block elements are the elements which pretty  much take the whole width of the screen i mean in   this case we have obviously just customized  all of them with a given width and height   but if you take a look right now for example  for blue if i give it a background of blue   you'll see that it takes the full screen width  or i should rather say the width of the container   it is in so for example if i go ahead and and  close this in a div and give it let's say a   class of parent and right here if i go ahead and  do a parent and width of 200 pixel you can see   well the blue is also taking the 200 pixel width  right if i switch to 400 the blue element is   also taking 400 but this one right here is  taking the full width of the body because   the parent of this blue element is the body which  is 100 of obviously now this is a block element an   inline element is an element which for example is  a span right this span right here you can see well   we have a rate class as well so let's just get  rid of this first of all so right here you can see   this span right here is an inline element because  it does not extend the whole way to the screen   with css what you can do is you can change these  behaviors so we know that span is an inline   element right but we can make span a block element  how do we do that we make use of a property called   as display and we set this property to display  block and you can see the moment we do that   this span spans the whole row no pun intended  but yeah that's how you can change the behavior   similarly you can make a block element in  line as well so if i go ahead and decide   to let me just go ahead and remove this parent and  switch this blue from a block to an inline element   you can do that so the moment you do that you can  see they have stopped taking up full 100 width but   this span right here takes up the 100 width even  though technically span is an inline element right   it's not a block element so you can see that with  css that's just one of the many things you can   control right you can for example in this case h1  you can go ahead and target h1 and give it a font   size of 16 pixel and you know font weight  which is if the font is bold or not   and you can say normal right so you see that  you have converted an h1 into just a paragraph   and you can pretty much just reverse apply this  to your red paths and say that they are 32 pixel   for example and font weight bold right  so you have basically converted these   red class elements into headings so you  see with css you can bend the rules you can   just break html in multiple ways html says  that h1 should be the heading it should be the   largest element but well there are no rules  to that right with css you can change that   so yeah that's pretty much it that is all on  how you can switch between block and inline   this display property is very useful and it is  also useful for creating layouts with css which   we will see how we can do that but yeah that's  how you switch between block and inline elements   and we will take a look at a couple of more values  which we can give that but later down the line hey everyone welcome back and in this video let's  just go ahead and take a look at layouts in css   and we're going to be starting off with flexbox  now i'm going to give you a quick understanding of   how layouts used to work i think we have barely  just you know in one video touched upon this   when we discussed tables right so in the very  old days when the web was still new and young and   you know the support wasn't there what we used  to do as web developers was we used to create   all these layouts with the help of table  tag because just like i showed you in the   tables video as well we can find it above in  some other section that table gives you the   opportunity to use things like row span and call  span so these things allow you to kind of bend   the rules and display nice uis but that is not  useful at all because tables are not responsive   they just don't make sense on a mobile phone or  you know different width devices and that was   a real problem in 2021 and beyond because we  are actually using a lot of mobile phones and   weird screen devices not just fixed display  devices so we needed a better layout solution so   what we came up with in css3 which was the  latest version in which flexbox was released   was a different sort of layout now how that works  let's see so i'm gonna go ahead and create a div   where i'm just gonna name this as a class of new  new layout uh yeah i mean we can keep that that's   fine and let's just give this div let's just  give create four empty divs here right just to   set the picture set the stage and right here i'm  just gonna remove all of that i can just give   the body a background of pink i don't know kind of  like you know it's a smooth color for the tutorial   so anyway so we have the new new layout and  right here what i'm gonna do is first of all   yeah i'm gonna also tell you about a different  kind of way to select elements the way you can   do that in css is you can write a dot new layout  like this and then give it a space and then div   now what does this mean if you hover over this  you will actually see it gives you a simple tip   as well that it element class new layout and any  element after you know any child div inside that   so what does that mean this says that any div any  sort of div which is inside the new new layout   can be used right we're going to be discussing  more about all the selectors later down the line   but for now this is a start this is how you can  pretty much select div inside a new new layout   class of div right so right here i'm just  going to give it let's say a background of red   a width of 200 and a height of 200 right and you  necessarily do not need to give this um you know   a width and height both if it contains some  sort of content but in our case because these   are just empty divs we don't have any width or  height because of the inherent width or height   because of the content and you can see that it  looks like we have just one div which is super   tall and that is because all of these discs got  stacked with each other right so what we can do   is actually also give them a border so i'm  going to say it has a border of one pixel   solid black again a new property i guess  for you which we did not discuss in this   which is border it takes up a border  thickness then a solid which is the   kind of the border which you want we also  have dotted and i think we also have dashed   so these are like two three values but solid is  like you know the most common one and then the   color of the border obviously we can give it a  two pixel and it'll just double the thickness   so you can see all right the next thing is  we can also give this a little bit of margin   so margin is this property right here is  actually a shorthand of four properties right   um margin left margin top margin right and margin  bottom so i'm going to show you real quick what   this means not in here but actually opening this  in the new tab and opening the inspector again   which we have already discussed so if i go to the  stiff right here which has been styled you can see   although this this width and height is fine  we have these arrows on the right of these   three properties these arrows means that we are  using a shorthand version of the property even   for background right so you might be surprised  what is the actual property name so in case   of margin for example if i click on this arrow  you can see that what exactly was the shorthand   which i used so i said margin top is 10 margin  right is 10 bottom and left is 10. so if you use   all of these four properties or if you just use  this one property this is equivalent right browser   considers these four values these four properties  and this one as same for border you can see it's a   lot of properties right i mean this is something  you can leave out but you can see these are the   actual expanded properties right and you might be  wondering like why do these properties even exist   well they exist because css gives you extremely  fine control over how the layout should look like   so you can say that you want a different width  of the border you might want a different color   of one side of the border and no border at  another side color and so on and so forth so   theoretically you can customize each and every  aspect of these things right so that's why but   in most cases you don't necessarily need to worry  about them for margin sure this will be something   which we'll use a lot but for borders i think  this is this is a very common thing which you do   for background again you can see nothing's fancy  you can't just forget about all these properties   but background actually is background color  not just background why because background also   allows you to give an image as the background  but background color well just gives you the   opportunity to set the background color so anyway  coming back to the video of layouts what i wanted   to introduce you in this video was the flexbox  layout which we still did not see yet so the   build up is done and now what we can do is we  can just go ahead and give it a display of flex   remember we had a display of block earlier right  um because this is also a block element so by   default div takes a display of block right but  what we did was we did not change this to inline   but we changed it to flex and flex is a like  i said is a new layout system flexbox is a new   layout system which allows you to stack elements  in a row or in a column depending on how you want   so by default you can see it changed it direction  to a row so flexbox by default just stacks   all of the things in a row you can  change it with a flex direction   of row which is you know the default value or  column where you would see it just gets stacked   just like before before it was right so yeah  that is pretty much it if you take care look   at row for example you'll see it just sticks  it like this and column would do the vice versa hey everyone welcome back and in this video let's  just go ahead and take a look at what exactly is   flex basis because flex basis is going to be a  property which you will be using a bunch of times   when you are working with flexbox so in order  to understand that first of all let's understand   a concept about flexbox that is the axis so  you see when you have a flex direction of row   whenever i add a new div here you will  see it gets added inside that row right   so it's all the new divs are getting added in  this direction towards my right so this means   this direction towards the right is actually the  main axis of this flexbox container all right   so once we have that understand the that the axis  perpendicular to this that will be downwards right   here is the cross axis so we have to access the  main axis in which the elements are getting added   like this like these stiffs and the cross axis  which is perpendicular to this so what we have   here is a width and a height right for the sake  of clarity i have given different widths and let   me just go ahead and actually just keep it with  just two diffs to actually make it even more clear   and we have a width and a height now we have  some property known as flex basis and let me   just go ahead and give this a width of 300 pixel  right so you can see the divs got slightly larger   right and this width got ignored so with this  width is ignored and the reason for that is   because flex bases actually is width in this case  let me let me tell you what i mean by that so we   discussed about the axis right so in our  case this is the direction from left to right   in which our main axis lies now what flex basis  does is that it defines the length of the item   in the direction of main axis so it is width  in this case which is if i change this to 350   or 340 whatever you will see it becomes longer  and longer and if i shrink this to let's say 50   pixel you will see it becomes shorter right  so basically width is completely ignored   similarly if i have let's say the flex direction  of column what will happen is that this flex basis   right here actually becomes the height of the  element so if i change this to 200 for example   you see the height increased and now if i have  the width as 50 pixel then it stays the same right   so now in this case height is irrelevant because  the moment we change the direction to column the   main axis becomes this from top to bottom because  this is the direction where new elements are going   therefore flex basis property is gonna point to  the length of that individual item which is what   we are selecting right now um in that particular  direction right so in this case we are saying that   hey this should be 200 pixel so if you're using  this in this case it does not make sense to use   height right because height is just meaningless  for this so this is what flex basis property is   super important stuff and super fundamental thing  you should know about flex basis is that it only   works in the direction of the main axis and how do  you find main access a quick simple rule is that   whenever you add a new element to the container  in which direction it is getting added if it is   in the row then the main axis is like this if it  is in the column then the main axis is like this hey everyone welcome back and in this video  let's just go ahead and take a look at flex   shrink property and i'm gonna tell you what does  that mean so first of all let me just go ahead   and change this to row and i'm gonna say i'm gonna  just show you let me just go ahead and also not a   width but a height because our width is defined by  flex spaces let me just go ahead and shrink this   so you can see you can see by the end of almost  you know the browser window collapsing to zero   our boxes also get almost shrunk down now this is  fine because flexbox is considered to actually not   just overflow until and unless really needed right  so it tries to adjust the width of every single   item in in the container you can control this  behavior by using a property known as flex shrink   now first for that first of all let me just go  ahead and move this as first and this as second right and what i'm gonna do is say for the  first box i want to say that it's flex shrink   is zero now let me tell you what what i mean  by that let's just see this at this point both   of them are 200 200 pixel right but what i have  said is that the first which is this div right   here should have a flex shrink property of  zero so this means this flexion property   is basically a proportion of compared to  other elements how much a particular element   should shrink to fit that's that's all  this is so number zero is saying that hey   don't really adjust at all that means never really  change your width to shrink to fit so that means   only the other element has to basically you know  shrink all that all the way to zero or whatever   their minimum weight is now if i give this a  0.5 for example you're gonna see that the first   element just shrinks half as much as the second  element not half as much sorry i should rather say   um for example if the if the second element  because the default property of lecturing   is one let me make it a little bit simple so i  can give this a flex rank of one and this a flex   shrink of two so you can see that this basically  is shrinking twice as fast as this element right   here right so they start with the same width but  right here this element is also shrinking but you   cannot you know this element shrinks much faster  than that because it's shrinking as twice as fast   so these are absolute numbers they do not have  any units because these are proportions compared   to other elements so this is what flex shrink  is right that means if you want certain element   to not shrink at all all you have to do is just  set their flex shrink to zero and these elements   right here will stop shrinking that means they  will just start overflowing the parent container   if they have to right so that's how you  can maintain a fixed width with a flex box hey everyone welcome back and in this video let's  just go ahead and take a look at how you can use   flex wrap so in the last video we saw that if  i do a flex shrink of 0 this basically says   that hey you're not supposed to change your width  from whatever flick spaces has set therefore just   overflow if necessary so what you can do in order  to kind of fix this is on the container you can   say a flex wrap of wrap and what this property  means that just go ahead and overflow this   you know element to the next row if it does not  fit in the previous one and it's kind of fine with   certain card based layouts for example where the  width matters and you want to just just push it   to the next row if possible or before you know for  items where you don't know the size of the element   beforehand or rather the count of the elements  beforehand so that would be useful in that case   but yeah it's as simple as you know just setting  up flex wrap on the parent and not worrying about   what would happen if we have more elements because  now if you just try to add more elements it will   try to fit as many elements as it can with  within the single row as long as possible   but the moment it is not possible it will just  just you know push them into next next rows   and there's that you have a free kind of like  you know free responsive layout available to you   not exactly responsive but you will  get the idea that this is something   which is much better instead of just having a user  just keep on scrolling on the right of the mobile   screen so that's at least that's one step in the  future so yeah that's pretty much it you need to   do flex wrap wrap that's it once you do that it'll  just work fine it'll work the same way with flex   direction column as well but browsers are weird  and they are basically made for top to bottom   reading not from left to right so this is why flex  wrap wrap makes much more sense in a row-based   system but it'll still work in the column  based layout as well so don't worry about that   but yeah that's pretty much it for this video  hopefully you liked it if you did make sure   you're leaving the review to the course if you  haven't left a review yet and leave the comment   just invite some of the people to watch this html  course css course with you i mean it's completely   free right and most likely you're enjoying the  practice sessions as well so if you are make sure   you share a word with your friends and family  that will really help the platform grow as well hey everyone welcome back and in this video we'll  be taking a look at how to center a div now this   might seem like you know a easy thing but it  wasn't easy at all back in the days when there   was no flexbox when there was no advancement to  css layouts and all this stuff so it's super easy   now which we'll take a look at but it's still  a running joke in developer communities that   how do you center a div with html people just  just like to throw the statement all the time   so i think you should know the answer to that but  anyway what do you have to do in order to center   a div in a in a another div let's first of all  have some divs here so let's say this is parent   right and this is dave id child right and now  we want to center the child inside the parent so   first of all let's just go ahead and give parents  some background of red width of 100 or 100 vw and   height of 100 or you know 50 vh and let me just  quickly go over these units as well if i haven't   gone over yet so you could see that we are  pretty much using units like pixel now i'm   using something known as vw what exactly is this  so in css there are multiple ways of specifying   what the dimension should be right just like we  have centimeters and then we also have meters   and although they are technically convertible  there are a certain there are usually certain   ways you can also specify widths and heights  dimensions in computers one of the ways   is pixels which is the most common and the  most used as well so pixel is just basically   basically speaking a single dot on your screen  which is responsible for emitting a light   so 100 pixels just means 100 pixels across and 50  pixels wide and more or less sometimes you just   have to play with these numbers to kind of get  the feel of it then we also have percentages in   css 100 just means complete width of the container  it is in and 100 um is basically similar to what   100 we w would mean with the only difference  between vw is actually the viewport's width now   what this means is the screen size of the of the  container right so right now in this case you can   see there's a little bit of overflowing if you  see on the right the div actually overflows 100   vw but does not overflow if i specify 100 percent  now the reason for that is because 100 vw is true   screen width right and right here we have  some default browser margins available to us   so the first thing we'll do is actually just go  ahead and set margin zero and let me just quickly   go with at this selector as well although we will  go over this these selectors in depth in our next   course which is advanced html5 and css3 but  this selector pretty much here means everything   so what we are saying is by default every single  thing should have a margin of 0. well that sounds   wrong right if you think about it we don't  want every single thing to have a margin of 0.   but the good thing is that css selectors actually  comes with something known as selector specificity   and again this is something which we will  discuss in the advanced course but what   you have to realize is that the star that is  everything has the lowest specificity why does   this matter because this means anytime someone  wants to overwrite this style they can easily   do with any any selector they don't have to worry  about it right so that's that's a handy thing you   should know so anyway we have vw and let's say  50 vh vh is just 50 of the screen if i give it   100 for example you will see it converts fully  to rate screen uh 50 makes it just half of it   right now the next thing is we want some  child dimensions as well so i'm going to   give this a background of yellow width of  200 pixel and height of 200 pixel as well   right and there's our child div and now  what we want to do is we want to center   this child div inside this parent diff and as a  matter of fact let's just go ahead and see all the   positions possible with flexbox um alone for this  right so it's gonna be a fun exercise and you will   also realize what all you can do with flexbox  in terms of positioning and in terms of layout   so let's say i want to center this first of  all because that's that seems like the simplest   so the first thing i'm going to do is i'm going  to make my parent a flexbox by saying display   flex now the moment i say that this  means that my parent now is a flexbox and   all the children inside it are automatically  flex children however i haven't specified how   or what should the layout be right so by default  it just takes the flex direction as column   therefore if i have a second child there and if  i go ahead and convert this to a class and make   this a class and create a second child you will  see that by default no not not in the column but   in the row by default they just stack in the  row right that's the default flexbox behavior   but anyway we don't need to worry about that  what i want to do this time is i want to say   justify content center and align items center  now let's just go ahead and take a look at what   these two properties are because our most of  the work would involve these two properties   so the first thing we are doing if i remove  justify content send align item center you   will see that our main access was from left to  right right which is what we discussed in the   first flexbox video from left to right so justify  content whatever value you provide it you could   see that it actually centers that on the main  axis now this is important this is important   why we will take a look at that but justify  content centers on the main axis and align items   center would pretty much center it across the  secondary axis now let's say if i have a margin of   5 pixel here just to make some space and  now if i go ahead and create another child   right and let me just go ahead and actually make  this full screen why not right so we have these   two divs let's just remove align items for now  we see that justify content does it in the main   access way and we don't have a line items so  what i'm going to do next is i'm going to say   flex direction as column right so what this means  is that switch our direction from stacking items   in a row to the column side right and immediately  you can see because our main axis was now this   you can see it centered it in this main access  row right earlier our main axis was this therefore   it got centered in the main axis so justify  content always works in the main axis direction   and to be very honest it's it's just a property  which you don't necessarily need to remember where   it centers you can just figure it out on the go as  well you can just apply it see how it is centering   because it will center the children in your  flexbox until and unless you are doing some funky   stuff here it will work just like it is supposed  to but again like you can see a line item center   right here will actually center it across the  secondary um axis as well all the items rather   all right so this is that let's just go ahead  and take a look at let's just go back to the   the one child itself and in this case it  does not matter what flex direction you have   but what i'm going to do is i'm going  to start messing around with these   values so i'm going to say justify content  flex start and let's just remove this as well   so you can see flex start is basically like saying  nothing because it just keeps it right there   right so it's basically the default value  then you have justify content flex end which   just pushes the content towards the the very end  right and that is all what justify content can do   on the main axis it can allow you to align all  the child items then we have align items right   and align items just like you would have guessed  from justify content also has these values   flex start which is basically doing nothing  flex end which is basically pushing it on the   end of the secondary axis and center just centers  it right so you see you have three possible   values here and you also have three possible  values here therefore it means that you can   pretty much have nine combinations here right and  if you think about this flex start flex end and   center if you have nine combinations then you can  have one two three four five six seven eight and   nine so this is like this square right here then  this square right here then this square so you can   pretty much possibly place the object all the way  in a in a kind of a symmetry right so let's start   very quickly from flick start and flick start and  we'll go in this direction we'll form this loop   right then let's say if i want to push it all  the way to the center first i'm going to give   this a center then we want it flex end then we  want this to be center because it brings it down   then i want this to be flex end then i want this  to be center because it brings it in the center   then this should be flex start then finally  this would be center and then finally this   value would be also center so that's how you get  a div in the center of a parent pretty nicely and   i hope you understood a lot of properties along  the way as well justify content and align items   and of course they will play a little bit  differently if you have a couple of divs here but   obviously the idea remains same if you just start  again with flick start flick start you will see   that if i do this flick center it's basically  just not flick center just center it basically   just moves both of them together flex  end and so on you know you get the idea hey everyone welcome back and in this video  let's just go ahead and actually take a look at   some of the common layouts and i want you to be  confident in how you build layouts with flexbox   so what i'm gonna do is i'm gonna go ahead and  create some sort of layout structures for you some   basic hands-on layouts which you should be aware  about and as you practice as you build more sites   with the similar layout you will realize that this  is super important stuff which you should learn   now what do i mean by that i mean like if you go  to google and carefully look at this webpage you   will realize that this area is in the center  of the screen then you have a footer then you   have a kind of a small header and so on right  there's a big gap between this footer and the   um these navigation buttons and so on so just to  develop just for developing that understanding   of how to create these layouts you need to  fundamentally understand how you work with flexbox   so what i'm going to do is let's just shift  this to pink for example and what i'm going   to do is go ahead or maybe just a little  darker shade on the reddish side yeah   so i'm gonna go ahead and create first  of all a simple google.com like layout   right and i'm gonna leave the elements filling  elements part to you like creating this button   creating these input fields because we have seen  them all creating these anchor links and so on   so let's just start with parent i'm going to  go ahead and remove the margin from everything   and we have the parent like this and child  and in fact we don't need this as well okay so the first things first i see that  there's a navigation bar now make sure you're   understanding this tutorial in a way how i am  thinking not what i'm telling right super useful   super important just make sure you are able to  see how i'm thinking so i got a navigation bar   i start from the top to bottom of the site i see  first things first which i have to place is this   navigation bar so i'm going to go ahead and create  some sort of um some sort of navigation right   i'm going to use a nav html tag which we'll  probably see in the advanced course as well   nav and i'm just going to add a couple of links  here home about for example right nothing fancy now the next thing i need to do is there are  there are two ways developers approach a project   the first kind of people what they do is they  just code up the whole html structure thinking   about how the css would make them look like and  the second one just takes one step at a time   code a structure then go to css code structure  and go to css what you do is completely your   choice my case i usually prefer to just write  the whole html structure and then arrange it   but it's fine you can pick whatever you  like for the sake of this tutorial i'll   just go ahead and stick to my own style but  you can pretty much do whatever you like right   then you have an area which is the center so i'm  gonna have actually let's just get rid of the   parent as well it's not exactly needed we can just  style the body tag itself then we have a section   which is probably in the center of the screen i  will say this this is divided logo for example   right then we have a footer at the bottom  and we've also have a photo tag in html   and you'll just know about these tags don't  worry about them if you don't understand   that hey this tag also exists or hey that  tag also exists for the most part you can   stick to div but we will also discuss about  these stacks briefly in the next course in   the advanced html css course and how you can  know them as well so don't worry about that yet   so for the footer i would say we have a layer 1  so i'm going to say dave id layer 1 for example   or div class name it's to be honest it does not  really matter you know i can even give this a   class of layer because they pretty much have  the same background color so class layer again   so we have our basic html structure at this  point we are not doing anything with the css and   you can see pretty much nothing looks like google  right but let's let's fix that so the first thing   i'm going to do is arrange this navigation part  right so i'm going to say this nav has a display   flex and flex direction by default turns it into a  row but what we want to select is the snag ul why   because li or whatever you write here would be the  children of ul not nav right the direct children   and what i can say is for these nav uli is list  style none which will disable their bullet points   right and just a quick hit heads up if you know  about what you need to do for example this thing   you're stuck hey how do i remove this  bullet because this is overwriting   how to find this is to go to google and write  that question how do i remove bullets from   ul or from li whatever use google when you're  building projects to answer these common simple   questions don't just get stuck or rely so much  on a video whether it's code down whether it's   any other place which you're watching because we  can just teach you so much you will run into small   issues which you would have to debug yourself  so make sure you're using google properly for   every single question so anyway let's restore  that so that we have a nice clean looking thing   and uh yep that is pretty much it what we can do  next is i can say flex direction flex not flex and   we already have a flex direction of row so that  does not matter just if i contained flex end right   so this puts us right here now you could pretty  much go ahead and play around with a little bit of   padding padding is like i said um we will discuss  about the content the box model in css again in   the html and css advanced html and css course so  stick with me i'm i'm pretty sure a lot of things   would get clear once you are done with this course  the exercises and the next course so i'm going to   go ahead and put a padding of 10 pixels which  gives us a little bit of padding on the sides   um and you can also put a margin off to pixel  and if you want to see like how margins and   paddings are working you can always give  this a background of yellow for example   so now you will see that this white space or let's  give it a darker color this white space in between   this is this is the margin and this gap between  the text and the boundary is the padding right so   if you increase these values the gap increases  but if you increase these values the space   between them between the elements increases  so it's your call what you want to use on   a white background i mean margin and padding  visually both look same here but they are not   just to make sure you know that all right so once  we have the navigation part figured out the next   thing we need to do is the center thing and lucky  us we have just discussed how to center something   on the body or on the you know the page so we  will not be following that because i want to show   you a different strategy i mean kind of we will be  following that but let's just go ahead and for now   i'm going to go ahead and say logo has a width  of 80 vw and a height of 200 pixel right i'm   just giving it a background of red for example  just for our placeholder so this thing should   technically be going right here but we'll take a  look at how we'll do that the next thing i will   do is i'll style the footer which we have right  and the layer part we know that this is a little   bit of grayish color you can extract those colors  out as well but i'll be just a little lazy here   we don't necessarily want to style footer we want  to style the layer part here so what i'm going to   do is i'm going to go ahead and say this has a  background of gray which you can of course just   lighten a little using the select this speaker  itself and yeah i'm just going to give this   a width of 100 or 100 vw whatever you want um i  would recommend not confuse getting confused a lot   with percentages and vw just try to pick something  and maybe like percentages and stick to it   but for the most part you'll realize that you  don't necessarily need to give bits or heights   to these elements the only reason i'm doing this  is because these things don't have some content   contained right for example if we really had an  image right here it will automatically have its   own dimensions right so that's why we don't  necessarily would be giving a lot of width   and height in the real world projects but yeah  it's a good idea to just know about them as well   so we have a width of 100 and a height off again  let's not give this a height because like i said   we are lacking content so i'm just gonna add a  footer one and a footer to notice so you can see   the moment i do that because we have some content  right here it automatically appeared on the screen   now you can sure go ahead and give it a  padding of 10 pixel 0 and what this means   this means padding top right bottom left so  padding top is 10 pixel padding right is zero   padding bottom is 10 pixel padding left is zero  right top right bottom left it if you have two   values if you just have a single value here then  it's top right bottom left all same if you have   two values here then it's top right bottom  left oscillating right for example if i give   20 pixels here see that we have more space on the  left and you can see really right but we do have   than compared to top and bottom so anyway we can  give this a 5 pixel and we can also give it a   border bottom of 2 pixel solid gray for example  right there we go now it still looks horrible   compared to the original side but we'll do one  neat trick which will kind of fix them all so what   we will do is we will go ahead and select body  first of all and let's just go ahead and give it a   height of 100 vh or kind of like minimum height at  least we want at least one the body to be 100 vh   the next thing which is going to be  interesting is i'm going to set this to flex   right and you see the moment i do that it kind of  breaks it it breaks the layout but we don't want   this flex to be row we want this flex direction  to be column which is what it was earlier but now   what we can do is we can stretch this section  to take up as much width as it wants now we can   go ahead and say that hey hey hey hey don't go  ahead and take out any sort of width from nav   and footer and how we do how do we do that we say  flex shrink zero i don't want my header or footer   to be shrinking but what i want is that section  go ahead and take as much width as you want   see now what happened here the way the reason  what happened uh the reason why this layout is   looking like this if i go ahead and open this in  a new tab you will see and we have not have not   discussed the chrome dev tools yet don't worry  about this there is another course in the full   stack learning path on this dev tools but just  stick with me here for the sake of visualization   so we have a body right it has got a nav it has  got a footer and it has got a section the thing   which we said here is that nav and folder should  not shrink and if you do not understand this   just go back a couple of videos you will find me  discussing these concepts in great great depth   when the flexbox was starting so we said nav and  photo should not shrink that's fine so what should   happen to section i say section should take up  as much place as it could right and we know that   body at least has the height of the full screen  therefore section is taking up a lot of space   here right that is cool but how do we center  this now i mean that should be simple here   right because this is again a reduced problem  where you have a div and you want to center this   and we have discussed this so what we want to  do is we want to just say display flex here   justify content center align item center and boom  you're done and that's it that's how you create a   nice little google like layout for yourself you  can see now it pretty much matches a lot i mean   not exactly in terms of the fonts or the  layouts or whatever but in uh in terms of   the positioning right so that is what you want  to do right you want to go to different websites   like even like code dam for example i would  recommend that like go ahead on code damn   try to create this layout again you should be  able to visualize how these nav items would   be placed how the search bar would appear how  this gap would be created in between and so on   right so try to go to different different  websites which you see like in the guess of   this footer just take example of the photo and try  to construct them for now you can also go ahead   i'm not sure how long it will stay like that  probably but if you go to codedam.com projects   you could see certain projects which you can  also build which have certain helper files   available to you in order to build those things  and certain guidelines available to you so these   projects would be also very very useful very  very beneficial when you're learning layouts and   stuff like this but a bunch of them also involve  javascript so i'll recommend just holding your   horses until and unless you do javascript but you  can take a look at them how you can create them hey everyone welcome back and in this video  let's just discuss about a very very very very   very important concept in css again some  of i think some of the fundamental things   just like layouts is one of the fundamental  things this is also something which i consider   one of the fundamental things you should know  in css and that is the concept of positioning   now let's just go ahead and create i'm going to  explain the positioning part from the last video   which we did and create a span right here right  just a simple span tag okay now what i'm gonna   do is i'm gonna go ahead and first of all go to  section span and create a background of yellow   or you know blue for example because  it could give this a little bit of better looking thing width of 100 pixel and  height 100 pixels nothing fancy right so we   have a small square here and obviously because  this is a part of a flex box so it's it's kind of   you know following the flex direction now what  i want to explain in this video however is not   related to flexbox it's related to a property in  css called position now by default what happens   is all the elements come with the property of  position static a position static doesn't mean   anything that's that's just a placeholder kind  of value for example so what what is position   first of all well i believe you will be able  to appreciate and understand it in much more   way if i just kind of used it right away  so we have a value called position absolute   now position absolute like it sounds  it actually picks your element   and picks it apart from the layout tree which  you have from the layout structure which you   have now if you think about html in fact i don't  even need flexbox and all this stuff in this one   if you think about html a little let's just keep  body um you will realize that even though if you   don't have any styles or anything that css just  starts css just starts to not exactly css but   html just starts to stack elements together right  on one after another one after another and so on   but with css you can change this behavior  of elements you can pick an element   bring it out of this behavior and position it  anywhere on the screen by giving it coordinates   position absolute kind of allows you to do that  so if i go ahead and give this a top of zero   and a left of zero you will see that this blue  square just got stuck to the top of the screen   right and if i try to actually let me just go  ahead and open this in a new window because that   will be much faster how i can explain and don't  worry about this weird looking dev tools panel   we will discuss how to work with that in another  course but you can see right here at least um we   have an area where i can see the styles and i can  set this to one pixel right and now if i careful   take a look at here and the behavior what's  happening here if i increase this value with my   keyboard you will see that this element is sliding  down right so it's pretty apparent that the stop   value is exactly controlling the coordinate of  the top left this top left pixel of this element   right similarly the left value is also controlling  the left attribute of the top left l top left   pixel so if i give it a new value you can see  it pretty much just you know it's it's just   increasing and it's just placing the element at a  new place now you might think why this is why this   is necessary i mean would there be any real use  case of this at all and yes there is a use case   even if what i'm about to tell you wasn't did not  exist till css absolute property is super helpful   but anyway there's a special use case of this and  the use case arises when the whatever element has   an absolute value has a relative parent what do i  mean by that i mean for example let's say i have   a 10 pixel top and 10 pixel left and i go ahead  on section and give this a position of relative   you see what happened here if this did  not exist if this block did not exist   what this blue box was doing is it was just  taking up the 10 from left and 10 from top   from the screen from the window right but the  moment i give this section a position relative   which is the parent of the span of absolute  it actually considers this this red box as its   ultimate you know zero zero coordinate system  this is important because what position absolute   does actually in fact is that it tries to go  ahead inside your html and tries to go ahead   to all these parents and tries to find which  one has a position relative stuck to them   and the moment it finds a single parent which  has a position relative it just uses that as the   coordinate system of you know you know just  placing it from top and left if it does not   find anything then of course it's just the screen  right and you can do some interesting stuff with   this now you have position absolute you know for  example if you know the dimensions of a container   you can pretty much just play around with this  mess around with this as well right you can just   place it anywhere um in that particular card for  example you can give this a negative value as well   so if i'll give for example write as negative 10  pixel um well we have the width as 80 vw that's   why but if you take a look here you can see that  this they've just slides outside this div and   you know i'm not sure if you have seen but there  are certain sites like we just post like certain   numbers like new course and that's kind of like  nice looking label for that right so that's how   you style these elements that's how you pick them  out of the tree and do all sorts of funky stuff   so yeah that is how you use position absolute with  position relative super important stuff which you   should know that is how position relative works  in harmony with position absolute and so that   is all for this video make sure you are leaving  rating to the course if you haven't share it with   your friends and colleagues and practice along the  way practice practice practice is super important hey everyone welcome back and in this video let's  just go ahead and take a look at another value   called position fixed which is kind of like  position absolute but slightly different so what   do i mean by that for that first of all let's  just give our body a minimum height of 200 vh   that means we will now be able to scroll this body  right now let's just go ahead and change this from   position absolute to position fixed and you will  see a couple of changes here if you are careful   the first change is that the box has moved  slightly up for some reason and the second   change is now when i'm scrolling this the box is  actually stuck to the screen right and that's what   position fixed does position absolute takes it  out of the coordinate system the l takes out the   element out of the regular html coordinate system  right and puts it to the nearest relative parent   position fixed goes one more step ahead and  just pretty much takes out the element out of   the screen and gives it to you and says that hey  just go ahead and position however you want it   and you can see because i haven't i have  given top as negative values top and right   it is actually going out of the screen because  for position fixed the coordinate system is in   fact the screen and not the parent element which  has a position relative or absolute or whatever   you can pretty much put whatever you like here  but position fixed does not has a coordinate   system which is bound to an element but  it is only bound to the screen so you can   only style it with the help of setting up  coordinates on the screen and the fun fact about   this is that it kind of sticks to the screen right  it just sticks when you're scrolling and so on   that's how pretty much a lot of these sites  even for example for code dam i guess we use   uh we use slightly different technique here which  we'll again discuss but you can see this this kind   of effect where the header stays the same is kind  of like position fixed not exactly because you can   see you cannot get this effect where you have  a where you have something at the top and then   it starts sticking but it's pretty close if that  banner wasn't there for example if i remove this   now you can see you know it seems like  this is position fixed which is pretty cool hey everyone welcome back and in this video  i just wanted to quickly tell you one more   css property css position property that is  position sticky now i just i don't know why   i wrote all these styles in line but it's fine  you can also write them in different style sheet   but because this is just going to be a quick  video i just wanted to show you one way you can   bring the benefits of position fixed that is  just having to scroll just having a fixed element   which is scrolls with your scroll bar and the  benefits of position relative that is relative to   your scroll bar basically for example take a look  at codem.com this header we have something at the   top in purple but the header is position relative  as long as i don't start scrolling and does not   reach here so the way we do it you can do it  with javascript solutions as well but the way   we actually do it now is using css position sticky  so for example let's say i have a yolo div sitting   just right in the middle and let's say this has a  style of i don't know like display not display but   background yellow now what i want to do is i  want to make this as position sticky so when   i scroll past this yolo it just sticks at the  top and currently it's not possible because if   you use position fixed then always stick at  top right or always stick at wherever it is   and otherwise you need javascript solutions  but now you can go ahead and use position   sticky and give this a top of zero a top of zero  just tells it how much distance you need from the   top when the stickiness starts so if i go ahead  and go go and you can see now even i'm scrolling   this just sticks at the top if that if i give this  a top of 20 pixel you're gonna see and i probably   know this is not the right way to write css it's  too cluttered but i hope you are understanding   because as developers you also need to understand  a little bit of way of working with bad written   code or at least bad formatted code so anyway  if i give this a top of 20 pixel you can see if   i scroll down it starts crawling just before 20  pixels in the height right so you can just also   see a little bit of green background at that time  and it has a distance of 20 pixels from the top so   yeah that's pretty much it that is literally how  the code dams header also works in case of this   thing right this is not position fixed this is  position sticky so now you know one way of how to   make cool elements on the web right so yeah anyway  that is all for this video i hope you understood   something if you did make sure you are leaving  a rating to the course if you have done that   already that's awesome if not just leave a rating  and help some people in the comments if you can hey everyone congratulations on achieving  completing this milestone which is completing your   very first programming course in web development  now i'm assuming some of you are extremely new to   programming and if you have completed this this  is a huge feat so don't don't think that this is   a small thing it's it's a great achievement  to complete your very first coding course   now the question is people usually ask what's  next what's next and we are improving the code   dams ui we are improving this whole interface  to make sure you actually understand what's next   but if for the matter of fact if it's not there  yet or if you're even seeing this video that means   there needs a little bit of update in  the ui which tells you where to go next   and in this case what you have to do is go to  your learning path and pick up the full stack   web developer learning path and take a look at the  next course in this case it's advanced html5 css3   but it might be something different in your case  right so make sure you do that make sure you jump   right into the next course and keep continuing  your full stack your front end whatever you   are doing in that particular journey but  yeah that's pretty much it for this video   hopefully you understood a lot of new things  in this course and hopefully that makes you   starts your front end web developer or full stack  fifth developer journey whatever you are doing   that is all for this video hopefully  see you in the next course really soon hey everyone welcome to the very first video of  this new course on javascript which is the part of   full stack web developer learning path on code  dam you can find this course on front-end web   to proper learning path as well doesn't matter  but what matters here is that we'll start from   ground zero we'll start from basically assuming  that you have no information about javascript and   we'll build that solid framework of understanding  along the way in this course before that make sure   you have done the first three or whatever amount  of courses you have before javascript in this   learning path and the best way to follow this is  from code dams learning path code damn.com slash   learning paths so make sure you're following the  learning path in order because if you're trying to   learn javascript before actually getting to html  or css or even i would say internet fundamentals   which is important then you will have a hard time  later on so that is all for the introductory part   super excited to start this course with you  hopefully you are too this is going to be   an interactive course that means you will have  a bunch of exercises and projects to complete   along the way and i highly highly recommend  to do them and not just watch videos only hey everyone welcome back and in this video we'll  quickly take a look at how you can set up your   development environment so that you are able to  learn in this whole course and beyond that as well   now for the vs code the offline setup i would  highly recommend if you go back to the html css   course and try to look to that video because we go  in depth on how to set up uvs code for your local   system otherwise what i do recommend and what  i would also be using is the code dams online   playground so you can go to codedump.com try to  look for playground it might have a little bit   of change to ui maybe by the time you're looking  because you're right trading very fast so maybe it   changes and once you go ahead you should see some  sort of html or css playground just go ahead and   open that the moment you open it you will be able  to see that you get a live ide within your browser   which also saves your work so it's completely fine  to use it for practicing and come back to it later   similarly you will find the same ide also  embedded as exercises right so you would see them   this ide interface in the practice labs further  ahead so this will also feel a lot home to you now   in order to edit this ide edit the files inside  this you can see we already have these three files   index.html script.js and style.s style.css  well we are familiar with these two files   and javascript is all about learning what goes  inside the script.js and a little bit of you   know the html file so don't worry about this if it  seems confusing um you know you don't necessarily   have to look at the javascript syntax yet we will  go through this one by one what exactly whatever   means but yeah once you have this screen up and  running you can see whatever changes i'm making   are automatically synced to the right  side and you don't have to worry about   um anything except the code here  which you're coding so that is cool hey everyone welcome back and in this video let's  just start with the fundamentals why do you even   need javascript we will go into the depth of  this a little bit but just to give you a very   real world example of why you need javascript  is this right here right so if when i when you   change this text right here you see the page on  the right refreshes right so on code damn you can   see whenever you are making some change it happens  automatically and this is one of the examples   where we use javascript what we do we just simply  in the in the code dams source code this id source   code we are simply seeing that hey if there's any  change in this file refresh this page well it's a   little bit more complicated than that but you get  the idea that if there's any change in this file   refresh this page so you see programming is all  about logic it's all about building those chain of   logic and links and if else and going down that  rabbit hole if you understand that you will be   able to understand javascript in no time so our  aim with this course is not only just to learn   javascript but also learn programming in general  because you would realize once you start learning   javascript a lot of things are transferable or  if you're somebody who has a bit of experience   with some other programming languages you will be  able to relate that javascript is very similar so   that's the idea we also want to develop the core  understanding of the language not just the the   basic language itself because that's something you  can do pretty much anytime anywhere right with any   language but what really makes a good programmer  if you is if you understand the core fundamentals   but anyway let us start with a hello world  of course like we always do and for this   for this playground at least what i can tell  you is whatever the syntax here is you can   leave a bunch of these script files if they are  still present by the time you're watching this   if they're still present just leave them here this  script file exists because we want to have these   browser console logs reflected right inside um our  area we don't want to go into the chrome dev tools   but we'll see how we can work with that anyway i'm  gonna remove this and has the hello world program   for javascript all we have to do is we have  to make use of something known as console.log   hello world and don't worry we'll also take a  look at what this is but you can see we get a   hello world here in the console of the screen  which is basically the console of your browser   right so if you open this in new tab you  will see we get nothing but if you go to   the inspect which we have already done by the  way if you are coming from html course we have   used this panel right so if you go to console  you will see we get this hello world with us hey everyone welcome back and in this video we're  gonna be taking a look at a very simple thing in   javascript which is variables and very simple but  fundamental things in programming languages as   well which is called as variables so what variable  is it's basically a placeholder that holds a value   that's all it is right so you can have let's  say if i give you 10 plates to hold it's not   possible right you would hold two plates in your  hand and you need for example some different   some table or some sort of thing to just put the  rest of the eight plates similar thing exists with   computers with cpus precisely cpus cannot hold a  lot of information all together right they need   some place to put the temporary information and  that that's the temporary information is called as   ram right so your ram inside your computer holds  that temporary information random access memory   in programming languages analogic analogous  to that we have variables which hold temporary   information which we might or might not  use later in our program it depends on   us right so how do you create these temporary  containers well in javascript we make use of   two keywords to create these and let me also  introduce you with uh with javascript syntax   with this and that is using let or const these are  the two keywords which we use to create variables   in javascript and the syntax is const let's  say my first variable then an equal to sign   and then the value which you want to set it to  let's say 250 for example which is just a number   so a couple of things you can see that i  have a name of the variable i have a keyword   which basically says that hey this whatever  thing you're writing is in fact a variable   and then i have a value with an equal to symbol  that is how most programming languages work i   mean there might be some difference in how the  variable is declared or how the value is assigned   but for the most part you will see that's how  this works now once you have this variable you   can pretty much do a lot of things with this right  you can maybe add a few numbers you can subtract a   few numbers you can do a bunch of stuff but with  javascript you can not reassign a variable which   has got a const value for example let's say for  a moment let's pretend that you understand what   console.log is right for now we'll just consider  console.log as a simple function which puts   the value here right in the in the bottom  area so if i go ahead and console.log this   you will see that i get 250 console locked  here now if i go ahead and try to make this 251   what you will see is that we get an error which  says assignment to constant variable right so   this const right here means that hey whenever  you create this value you have to keep this the   same value all the way and you might be thinking  like what's the use of this i mean if variable   actually stands for a variable right and you  are saying this is a constant variable which is   i don't know what's the word called in english  uh but it's it's like you know opposite so you're   saying constant but variable but this is super  important because of number of reasons which we   will discuss later down the line but this just  means that once you initialize this variable   with a value you cannot change it later down  the line in your program right now of course   there are a bunch of edge cases we need to be  careful about but we will discuss that later   now the second part which we discussed was  how you can create a variable with let keyword   led this keyword right here what this does it does  the pretty much the same thing but you're seeing   that i did not get that error anymore so what has  happened well you see that with let you actually   tell the javascript that hey okay i'm setting  this variable but you can you're free to just   change this value later down the line if you would  like to right so now if i go ahead and console.log   this my first variable you would see that we get  two console logs the first one is 250 and the   second one is 251 right so that is how it works  that means with let you can reassign the values   with cons you cannot reassign the values and if  you look carefully what you will observe is that   i am not using the let or the const or any other  modifier after i assign it once or after i use it   once and why is that because javascript already  knows that this variable has been created right   so we only need to use this initializer keyword or  whatever you want to call this led or const only   for the first time if you try to do it right here  if i try to do let here you would get an error   which says that identifier myvariable my first  variable has already been declared this error   message simply means that hey go ahead and see  if you already wrote my first variable somewhere   before in your code similar thing with const so  if you change this to const you will get the same   thing you know the same error basically so that  means you should always use let or const once for   declaring the variable and the rest of the places  you just have to use either for accessing it or   for reassigning it you just have to use it without  anything basically right so this is all you need   to know about variables in javascript there is  also a third way to make variables in javascript   using war we are right so this also used to be a  way in javascript but please don't use it right   for the reasons which we will discuss later  this is dedicated this is no longer required   do not use war to create variables in javascript  it is supported and it will be supported for   a very long time in future as well but  don't use war right use let or use const   and finally you would have observed that you  can also create variables without actually   defining anything without actually putting  anything here at all which might seem like   you know that i just wasted your six minutes now  that you did not need to do that at all but don't   do this again because of the reasons which you  will discuss these reasons are due to scoping   and we will discuss these issues later  down the line but for now the best rule   of thumb you have to remember at least  for now is always use const or late   some sort of identifier here and yeah that's  that's all you need to remember at the moment hey everyone welcome back and in this video we'll  be looking at a very important thing in javascript   and in programming languages in general and that  is the data types supported now javascript is   a language which can store a lot of types of  values in a variable like i said variable is   a empty container which you can use to just hold  values temporarily right as long as their scope   lasts technically we will discuss about scoping so  don't worry about that yet but what do i want to   discuss here is all the kinds of values which you  can give this variable and what does that mean and   we'll also just keep an eye on the console at  the bottom so that we can see what's happening   all right so first things first numbers are simple  right we understand numbers like 1 2 3 and so on   right so whenever you store a number you will see  that you never use quotes or anything right single   quotes double quotes nothing that's it you just  put a number you put an equal to sign and put a   number now i want to store a string which might  be my name which might be anything right so for   example for my name i will just write mayhew right  so this is a string and the way you store strings   is that you enclose them into double quotes or  single quotes javascript does not care if you use   double quotes here or if you use single quotes  it doesn't matter in some languages it matters   does not matter in javascript the next type which  we have is boolean which is either true or false   so something like you're above 18 can only be  true or false right it does not make sense to have   an integer answer or maybe i mean a string yes or  no is also fine but we for the boolean values for   values which can only have two possible outcomes  we usually go with true or false so you can go   ahead and give this value as true again without  the quotes or false right without the quotes as   well so you have numbers you have strings you  have booleans which is like um for example my   age could be 22 above am i above 18 could be  true and my name could be mahul right so this   is like reflecting three different kinds of uh  variables and you can see we get an error that   my first variable is not defined because we are  trying to console.log something which is not there   right so another important thing which i would  just pass on as a quick hint is always try to   read error messages if you see an error if you  see the code is not working try to see what the   computer is telling you in a lot of cases it  might just seem practical for you to just skip   over it but trust me computer wants to help  you so make sure to read the error messages   so yeah we have the three fundamental types with  us string boolean and number let's take a look at   a couple of more so what i'm going to do is i'm  going to write an a variable called friends right   and i know that my friends well they  could be a string that means i can   just separate them in a comma but that's  not the best way to store something which   can have a lot of values a better way for that  is to use an array now what this is an array if   you're seeing this for the first time an array  is a collection of usually the same data type   right and why do i say usually because javascript  is lenient javascript allows you to store   an array with different kind of  values as well this is completely fine   so if i go ahead and console.log friends you will  see i get 22 and true like this if i add mahul   here as well you will see i get mayhew logged in  as well so what is an array i mean what is this   weird syntax and why do i have to write these  square brackets right here well you see if you   just write like this this is wrong syntax because  well it doesn't really make a lot of sense right   this square bracket just denotes that hey this  is a start of an array which consists of ordered   items that means the order matters here and you  can access them with something known as index what   index they have and we will discuss about arrays  in great length but just to give you a quick look   at this let's say if i want to access true from  this array so what i will do is write friends of   one that is friends and then in square brackets  i will write one and you can see i get true   because indexes in computers and in javascript  especially start with zero so if you want to get   22 in the console below you will write friends  of zero if you want to get true you will write   friends of one if you want to get mayhew you'll  write friends of two this brings me to the next   data type in javascript and that is what would  happen if i write friends of three here right   so let's just go ahead and take a look at friends  of three and you see we get undefined although we   don't have a string here calling called undefined  right so what is this well this is not a string   this you might get confused here by seeing  that this is a string this is another kind   of data type you can say or kind of value which  you can provide to the variables and you can say   some special special value as undefined right  and again you can see it's not in quotes   that means it's working fine and it's fine so if  i console log this you see we still get undefined   but what exactly is undefined well undefined is  basically a value of a variable which has not been   initialized so here we are obviously  giving it specifically the value of   undefined so that's why it works but  let's say if i go ahead and remove this   right well in the case of const we get an error  that it says that missing initializer in the   const declaration because remember i told you  that const cannot change its value later down   the line right so you need to give it a value then  and there but if i switch this to let for example   so i say let some special value and i console  log this it saves me undefined but later down   the line i say okay you know it should be 22.  then if i console log this then it gives me 22.   so undefined is basically you can see  i did not assign this a value but it   got undefined by default so it's a value for  something which has not been initialized yet   right so that is all you need to remember in terms  of undefined and we can move forward with that all   right the next one which we have is beginned now  what do i mean by that that means big in number   this is a number which is big which is which  could be really big right so for example in this   case you see my age is 22 which works fine but  javascript has a limit on the size of this number   right so if you have a number which is of certain  magnitude let's assume 1000 in this case for the   sake of simplicity javascript would kind of not  work well with 1001 and 1002 and 1003 right the   math breaks for javascript and why is that because  computers have finite memory right so javascript   has to cut off after some point that it has to  say that hey i'm not going to store any number   beyond this and it's a really really big  number right it's a really big number it's   this number is actually 2 raised to the power  53 minus 1 right which is a huge number but   if you are working with large sets of data in  javascript you might need even bigger numbers   right so you might need a lot of bigger numbers  which are much much much much much much bigger   than 2 raised to the power 2 raised to the power  53 and if you try to let's just get rid of this   if you try to console log this i mean this would  work fine but the way i said it is that arithmetic   for example addition subtraction multiplication  would break on this number so the way you put   the way you make this as a big number is you  write an n after this and the moment you do that   you would see that well we do not get a console  log here but if i go right here in this console   you would see it craze out kind of but we do  get a console log and the best way to verify   that this is a big end is using something known  as a type of operator which we'll learn about   very soon there are a couple of more data types  you can say in javascript which are objects   which are functions which are symbols and which  is also null one one data mode one more data type   is null just like we have undefined we also have  a value called null which you just go ahead and   use you will see you just get null right so the  difference between null and undefined is basically   null is like explicitly saying that this value  does not exist or should not exist right whereas   undefined just means that this variable has not  been initialized yet so that's the difference   right null is basically saying that this should  be blank or this is empty and this should be empty   undefined is just saying that hey this hasn't  been initialized yet that's all but yeah there   are like i said a bunch of more variables and data  types in javascript which we will discuss do not   worry about them but we will pick them up as the  time comes but for this video i think that is all hey everyone welcome back and in this  video let's just quickly take a look at   type of operator right so like i said we can  create multiple variables i'm gonna say type of my   h as the variable name and i'm gonna write my h  here first of all just to give you an idea of what   i'm trying to do you see in javascript what you  can do is you can assign the value of a variable   as another variable right or maybe a bunch of  more variables let's say you want to add a few   variables here so you can do that that's  completely fine but what you can also do   in javascript is you can write the keyword called  type off and you can see it immediately turns red   because this ide knows that this this is a special  keyword and what this expression evaluates to if   you just take this expression right here what this  expression right here evaluates to is a string   which is the data type of that particular  variable so a couple of things to mention   here remember here is that this thing right here  gives you a string value just like me hole is and   the second thing is that the string value is  actually a data type of whatever the variable   you wrote after type off right so you can see  in the console if we take a look at this we get   number because my h is in fact a number if i use  type off with this you will see we get boolean   if i use type off with me my name that is we get  string if you type off with friends you see we get   an object and the reason we get an object and not  an array because in javascript arrays our object   right so don't worry about that yet it just means  that you know it's some sort of special value   for some special value which is actually null  you see we still get object this is interesting   this is a weird edge case in javascript as  well which might get caught you off guard   so how do you distinguish you might ask how do you  distinguish between an array and a null type and   there are ways don't worry about them but what you  have to remember here is that if you write this as   undefined you will get the value the type of as  undefined right so null both null and arrays are   type of object but undefined has a type of itself  right that is important then if you move on to   begin number you would see that we get big end and  that's it that's pretty much all we have at the   moment in terms of what whatever values we defined  so yeah that's pretty much it for type of it's not   super handy i wouldn't say that you would be using  this a lot of times but it this is something which   is irreplaceable when it is needed because this  can help you in data validation or this can help   you in determining what kind of data you're  dealing with without actually taking a look at   um the code above which sometimes is not  even possible right if you are using some   library or anything or you know just  use an input from untrusted sources   so that's that's a good um way to just  validate what kind of data type you are getting all right everyone welcome back and in this video  let's to do a little bit of math operations with   numbers because numbers are fun and you will  be using a lot of numbers in your journey so   i'm going to start with cons and i'm going to  show you um what is possible so right now i'm   going to start with my h as 22 and what i can  do is i let's say i want to increment a year   as fast and i want to increment my h223 so i can  do my h plus 1 right which is basically what you   would also write on paper kind of right if you  are doing math problem or anything and that's   what you do with programming as well you just  write plus one but you can see that i still get   22 even though i tried to do my age of plus one  and the reason for this is we are not assigning   this value back to my age right because this plus  one although it does increment this to 23 but we   are not storing this value anywhere so how do we  store this value well you might think that hey   i can just go ahead and use like something like  this and this is completely fine but remember what   i told you about const is that you should not or  you cannot actually um reinitialize its value so   how do you fix this you have two solutions right  now the first solution is you change this to lit   and the moment you do that you will see that it  works just fine why does it start working because   let allows you to change the value after you  initialize it const does not the second way is to   actually create a new variable called my updated h  and then do a my h plus one and in the console log   the statement just pass in my updated age and the  moment you do that you will see that you get a   nice updated value this time i think this is the  first time we are seeing something in the console   which we did not explicitly write in the code  right so this is a big moment where you are   actually computing something for the very first  time this is the very first time you're computing   something right you're telling the computer that  hey go ahead and add something to it and this is a   revolutionary thing if you think about it because  a computer which can add once it can add twice it   can add so many times and it can do it and at  an exponential speed right compared to a human   so that's why computers are well fused because  they compute that's what computer actually stands   for as well but anyway that is a very simple  operation right you can also add two you can   also add three four five whatever whatever  you would like to do you can do with this   and the next thing you can do is you can also  subtract things with a negative sign which is just   a simple dash um not sure if zooming in here would  really help but i hope that you all know that what   addition and subtraction is i'm not probably  going to go ahead on that in this course so   the next thing you can do is multiplication right  so 22 times 5 is 110 and you see that you get that   in the console and also you can do division right  so you see if you divide 22 by 5 you get 4.4 as   the output which is again fine what you can also  do in javascript is you can use double asterisk   right here and this double asterisk  symbol you can see it gives you a   huge value because this is setting this to a power  so this essentially means setting 22 to the power   of 5 22 to the power of 5 and i think we haven't  discussed what i just wrote here which is called   as a comment in javascript so we'll do that  in the next video don't worry about that   but essentially what this means if i have let's  say 2 and i have 5 then this should give us 32   right because 2 multiplied by itself 5 times is 32  2 times 2 4 8 16 and 32 right so this is another   operator these are super handy for example if you  want to have let's say an average of a few numbers   um what we can do is let's let's write a very  simple program right a very manual but very   simple program i'm gonna write my friend's age  and i'm gonna have let's say 20 19 22 21 and 23   right and i want to calculate my friend's average  age using a computer i can do it with a pen and   paper but let's use a computer now remember i told  you how you can access the elements in an array   by using index so i can get 20 if i just use  average right here you would see i get 20. if   i have a 1 we get 20 19 we if i have a 2 we get 22  and so on so what we can do is before calculating   average we can calculate the sum of them and i'm  doing this very manual way there are obviously   better ways which we will look at later but right  now you can see i can just go ahead and keep on   adding them 0 1 2 3 and 4 right so there we go so  now we have a sum which consists of all these sum   and i'm going to say total friends which is one  two three four five so i have five total friends   and the sum of their ages is this so  what i can do right now is i can say um   again we have not discussed console log much but  stick with me here we will very soon and then it   will be much more clear but you can also pass all  sorts of values in console log right separated by   comma and they will all appear down here so what  i'm going to do is i'm going to say sum of friends   h and just pass a comma and a sum which just shows  us this value 105 which is good and i'm going to   say console.log total friends and this will be  not five but actually my variable total friends   here and then finally i can say average is equal  to sum by total right and if i just do console log   average friend age is average and you can see  the console in the console we get 21 which is   fair enough because 105 divided by 5 is 21. so you  have written your very first javascript program   by just calculating the average of a few numbers  and yeah we that's that's a great start i mean   you have figured out what math operators are and  how to perform addition subtraction multiplication   divisions and exponential and actually write  a great program a great small program as well hey everyone welcome back in this video i will  quickly discuss um something known as increment   and decrement operators right now these are just  fancy way of doing something which we have just   done in the last video so first of all let me  just clear this out and let me just go ahead   and say my h again as 22. now we saw that if  i just make this lit i can do my age is my h   plus one and if i console log this you will  see that my age in fact comes out to be 23.   now there is another fancy way of doing  the same line which line number two does   and that is by writing my h plus plus that's  it no late no reassignment nothing like that   remember i told you that hey my h plus one would  not work because we are not storing this value   anywhere right you can see my h plus 1 still  gives me 22 but my h plus plus gives me 23   right so this is because these two pluses are  special these two pluses actually evaluate to   the same statement which we wrote my age is my age  plus one so you might ask why do we need that well   we technically don't i mean we would still be able  to write code if that did not exist in fact a lot   of languages also does not include the support  of doing plus plus um like this but i mean just   another feature right just like your phone has  tons of feature a programming language also has   tons of functionalities does not necessarily mean  you have to use them always but it's good to know   that it exists anyway there's another operator  called minus minus which exists which is you know   22 goes to 21. you might think there might be a  star star operator but it would not make i mean   i don't know like it could make a lot of sense  if you just want to square the number real quick   but no that does not work these increment and  decrement operators only exist with addition   and subtraction because these are the most common  things which people usually do especially in loops   which we will see when you want to loop over a  certain statement you want to maintain a counter   which just keeps on incrementing by 1 1 1 1  until it hits a certain condition so there   is where we use these conditions a lot but you  should anyway know about this plus plus adds one   minus minus removes one and the fun fact  about this is that you can add these plus plus   after the variable or before the variable and  there is a slight difference in these two ways   which we will discuss maybe later down the  line but nothing you should worry about at   this stage right you can add this before the  variable you can add this after the variable   but of course you cannot add this before  and after this would not work right this is   like a weird syntax so if you want to  increment it by two either do it twice or   just write a single statement which just says  my age is plus my ages my age plus two right so   that is how you would work with it and that is  how increment and decrement operators also work hey everyone let's just go ahead and quickly  discuss about console.log in this video which   we have been using for a long time but i haven't  really gone over to what exactly we are doing here   so you can see that console.log is actually just  putting some value here but it is especially very   helpful if you are doing this offline or just you  know just trying to debug something some value   what console.log does is before actually getting  into that let's just discuss about what a console   is right so if you see right here i'm not sure if  you have used this before or not but we briefly   discussed this about in the internet fundamentals  that you have a concept of a terminal right so   this is a terminal which is essentially a command  line access to a computer right so whenever you   are running a programming language you can tell  that programming language to output certain code   or certain outputs whether it's mathematical  whether it's some object whatever it could be   into this terminal into the console right so this  area right here whenever javascript is running it   has a special area not exactly the terminal  but it has a special area called console   which pretty much looks like this terminal right  so where is this console in the browser if you go   ahead and open this in the new tab right click on  this page go to inspect you will see that there is   in fact a tab called console right so you go to  console and you will see all the logs which you   generate right here as well so for the sake of  ease what we have done at code dam is whenever   you use a console log we just put it right here  in front of you right so you don't have to just   switch between codes and uh console all the time  therefore you can use it from right here so anyway   the point is that this console.log is a function  we will discuss about functions in javascript   in the next video probably but what a function  more or less is this function is is that you can   write console log open a circular uh  open parenthesis not a circular bracket   and go ahead and supply these values whatever  you want to console log separated by commas   right so let's say you write the second value as 2  3 mayhew whatever right so whatever you write here   you can see it appears in the console as well as  in the browser if i refresh this you will see we   get this so this is cool because now you are able  to see whatever kind of values you are writing in   the console right or you have in your program why  this is helpful because your program can contain   um intermediate states for example let's say  let's let's take example of the last case itself   right where we were calculating averages of the  friends so we had a sum variable right we had a   um let's say the total count variable and so on  so we had all these variables and these were not   the values which we could actually see right  which we could inspect from the code itself   therefore we could use console to just print them  out and check the values in a running program what   those values are so in a way console.log actually  helps you to introspect a running program as   well so it's kind of used as a debugger as  well right it's not a debugger but you can use   console.log for debugging purposes if something  is not working you can print the values which are   temporary intermediate values and see what value  is going wrong so that's the use of console log   and of course you can print funny messages here as  well want to work with us come join us at carriers   you know stuff like this i think  companies do this all the time right hey everyone welcome back and in this video  let's just go ahead and take a look at functions   in javascript what functions are how you can work  with them and what do they mean so what i'm going   to do is go ahead and create a very first function  first of all and after that i'll explain it to you   what that means so i'm going to go ahead and put  this console.log statement inside this block i'll   name this function and i will say make console  log and like this and if you don't understand   what i'm doing it's fine what you have to realize  is what's the syntax of this the syntax of this   is i have a keyword function then i have a name  then i have these two brackets with me and then   i have an openi opening a curly brace right so  this is the syntax of how you write a function   in javascript and a closing curly brace now  whatever you write inside of this function   is the function's body now what is the use of this  well consider the statement console log of hello   world and let's say you want to console log hello  world but you also want to console.log a variable   there right so you have two statements and it is  possible that you might console logs this multiple   times right so let's say we have another statement  which says total count right so if we go to   the browser logs for example let us see if  this is still attached to our index.html script   and yep it looks like it is but you can see that  we do not get any locks right so why that is   happening now the reason that happens is because  this console log this function right here is a   function and a function is a piece of block which  does not execute until and unless it is called   so how do you call this function you just write  the name of the function in this case it's make   console log and write these two brackets right  opening bracket and a closing bracket and the   moment you do that you can see we get the first  statement and the second console log if i write   it again you will see that even though i haven't  really copied pasted this console statements   but we still have two sets of console logs that is  because we are using two console logs in this call   function statement this is as simple as it can get  so i can go ahead and write this i can go ahead   and let's just go ahead and make another function  where we will say function print all variables   right and the only uh use of this function is to  write all the variables my age is my age right my   sum is sum and total count is total count right  so now what i can do is whenever i want to print   all of these variables instead of writing these  statements over and over again i will say print   variables then let's say if i make a change to  my age then when i make a change to my age you   will see that let's say if i make it 23 and then  if i say print all variables again you will see   that my age first of all was 22 then it comes  out to be 23. rest of the variables are same   so this is like one of the most useless use case  of a function but there is a lot of use case of   functions in terms of you will be using functions  all the time in your code so it's important to get   the basics right how you create a function what  is a function body anything which goes into these   two brackets and how do you call a function  this is like a very 101 function 101 for you hey everyone welcome back and in this video  let's just go ahead and see how you can   pass certain parameters to a function and what  does that even mean so you see functions are   okay this code block is okay that if you want  to execute it multiple times you don't have to   write all these lines which is fine but the true  power of functions come in the fact that they can   work with dynamic data that means you can pass  you can create a generic function for a certain   certain you know operation and pass in some  inputs to it and get a completely different output   so how do you do that the way you do that  is you can pass certain variables to this   function or certain parameters and let's say in  this case i have a function which adds to my h   right so right now the only thing it does is  that it just adds my h is equal to my h plus one   so that's all it does right so i can say add  to my h and if i console log my h after this   console.log my h you will see that we indeed get  23 in the console now let's say i want to make   this number dynamic the amount of age i'm adding  how do i do that well i can just say that hey   get my or you know not get my butt something like  increment by something like this now this is a   this is just a keyword i just wrote it in  these two brackets in these two parentheses   right now what this is is that it is an argument  to this function and what are the argument what   are arguments in general arguments or specific  values which you can pass when you are calling a   function like this so for example in this case  if i want to populate this increment by with   5 i'm going to pass this like this so if i access  this function if i access this variable right here   if i go ahead and console.log this you would see  that we in fact get 5 as the console log and you   can see we don't have a lit or a const here we  don't need that in an argument so you can just   go ahead and name your arguments like that it's  fine now the true power is that i can just go   ahead and replace that one with an increment pi  and now you can see i get 27 if i have adds to my   h and then 7 for example you will see that we get  34 now because 7 plus 5 plus 22 is 34. right so   this is how you pass an argument to the function  now you can pass multiple arguments right it's   not that you just have to pass one single argument  you can say for example something like multiply by   multiply by right and if you just pass  this as 2 and you do something like   you know you can do weird stuff if you would want  but this comes out to be 54 right because well 22   plus 7 22 plus 5 times 2 is 54. so that's  cool i mean that's completely fine but you   can see that you can pass multiple values here  and remember what we discussed about undefined   data type in javascript let's say if i did not  pass this value right here you will see that um   first of all what we get in the console  is undefined for this argument because   like i said it's missing that's what undefined  means it's not initialized or it's not passed   like that and second we also get another  number so if you see nan anytime in your   console that stands for not a number that means  you're trying to use a mathematical operator   on something which is not a number right in this  case it's undefined in our case it could be string   it could be function you might be multiplying  it with a function or anything but yeah that's   what it means so anyway i hope you understood  the concept of functions you can create very   simple functions um once we discuss one more part  about them that is the return statements we'll do   that in the next video and then we can get into  a little bit of basic math with functions as well hey everyone welcome back and in this video  let's just go ahead and take a look at how we   can go ahead and make use of return statement  in a function and what does that even mean   so first things first you can see i'm right now  i'm assigning this variable which is outside   directly and then we just try to log it and  that this console looks perfectly fine but   this practice although this is a bad practice  because we are this function is not pure in   in the sense that it is mutating the  state outside it but anyway leaving   that aside let's say this was const right  i don't want my my variable to be modified   right now we are getting an error that we  are assigning it to a constant variable   and we can fix that i mean not exactly fixed  but we can just remove this assignment and say   that hey this is fine right because this is  allowed we are not changing the my age here   the variable here but how do we get the value  of whatever this is this is being computed   outside this function that means let's say this  function says that it adds to my age right this is   the end goal of this function so how do i get out  the final end goal value for that we use a keyword   known as return in javascript so what this return  does is let's say if i add this return keyword   what this does now is that if i store the  result of this function in another variable   my new age for example so what i'm doing  essentially here is that i'm saying that hey   whatever this function returns me which is  done by this return keyword store this in this   variable so i can say my h comma my new h like  this and you can see we get 22 and 54 like that   so what's happening here is that because i'm  returning this computation i get that value   returned into a new variable and if you do not  store it then it's very well lost right it's   basically lost at this point so yeah i mean if you  need to store it you need to give it a variable   like this now another thing with the return is  that if you do not return anything from a function   if it is empty or you know if it just has a bunch  of statements like this you can guess what it   returns it returns you undefined a value which is  not set a value which is not initialized right so   the b the default behavior of javascript is if you  do not have a return statement in your function it   just returns undefined implicitly if you're coming  from a different programming language which might   throw some errors if you're not having a return  statement that's not that's not what happens with   javascript you don't necessarily need to return  always from a function but you should i mean it   just makes clear that hey this is where you are  pointing that it's the end of the control or end   of the function call right even if you don't have  anything to return for example let's say if you   just want to increment some by 100 and that's it  you can just mark an empty return statement which   is also pretty much just means return undefined  if you don't write you know anything else out   in front of return it just means return undefined  right that's it that's all it does right so   this is one thing and another important thing  is any statement after return never executes   right so if i try to for example if i try  to console log sum here and total count   here you will see we have 305 because sum was  incremented but if i have let's say total count as   total count plus 200 you would see that in the  console we still get total count as 5 which was   the initial value and the reason for that is  because like i said after return no statement   gets executed and you can also see our editor  pointing us saying that unreachable code detected   that means you cannot your program cannot actually  reach this part of code ever right it's an   impossible condition why because well you always  return so you're never going to reach below that   so that is something you should keep  in mind that whenever you write return   you cannot execute anything after that right so  that's important so yeah that's pretty much it   in terms of return we will take a look at examples  of return how they work you can return any single   thing any single value in javascript right  it's not that you have to return numbers or you   have to return strings you can return all these  types you can return arrays you can even return   functions which is interesting and we will discuss  about that probably when we are discussing about   closures in javascript but you can do all sorts of  fun stuff with javascript when you're doing that hey everyone welcome back and in this video we'll  be discussing a very important thing in javascript   and in general in programming and those are  conditionals and conditionals just means to   add if else logic if this is true then that  should happen if that is true then some other   thing should happen right and as developers  all your work would more or less involve   building up this logic and setting up this logic  in the code so this is super important stuff let's   just go ahead and discuss this so let's say i have  a function called should should i get a license   right and this think function accepts an h and it  should return a true or false depending on should   i get a license or not a driving license  so what i want to do is i want to return   true if the age is greater than 18 and  false in the other case so what do i do   is i make use of a statement called  if h is greater than 18 then i say   return true else return false and let me just  tell you what's happening here so you see how   i start an if block is i write a if keyword then a  bracket the condition which should be matched and   this is a symbol for you know greater than symbol  i hope you understand this from your math class   if the age whatever i'm passing here is greater  than 18 just return true otherwise return false   else just means that if this condition does not  match then do that right and if i go ahead and now   pass in let's say if i start console logging it  so let's say i have should i get a license as   100 of 800 so we get true here right  makes sense if i have the same statement   with me but with an age of 17 you would see that  the second thing second statement we get is false   and see that i'm console logging this function  call itself this is just a shortcut of saying   that hey i want my result to be stored like  this and then console logging result these   two statements are same right so i just eliminated  one step by taking this value directly and putting   it inside console.log so that would work right  there's another way we can structure this code   a little if you remember from the last video when  i said that whenever some function returns a value   it will not execute anything below that right so  technically speaking we don't need this else thing   if i remove this it's still equivalent why because  take a look here if the age is greater than 18   then we return true and we know once the function  returns it will not go below this therefore the   program ends if we do not return if we you know  if age is less than 18 or less than equal to 18   then we'd never enter this if block and this if  block essentially ends right so it's technically   acting as a else block itself this would  not have been else block if i just wrote   for example instead of console logging if we  just did uh instead of returning if i just did   this person is above 18 and  let's say if i did this person   is below 18 right and if i just had a single  statement here single function call rather   not even counsel logging it you can see i get both  of these statements this person is above 18 and   this person is below 18. even though this person  is only above 18. so why does this happen because   i'm not using return here right so it enters this  if block but it never returns and therefore it   executes the lower block as well but if i had  a return statement here you would see that we   only get a single console log which just says this  person is above 18 because the moment it happens   we just return right and that's it the execution  ends or what you could have done is you can just   remove this right and else and shift this line  right here and it will still have basically   the same meaning right you can still see we do not  get a duplicate or you know a second console log   now you might think what's a good way to go about  and in programming generally what you will see is   that there are multiple ways to do a single thing  so you have to stick to a style you have to stick   to a pattern and what i would recommend at the  moment at least you can be as much explicit and   as much clear as you can when you're using this  if else blocks right because you clearly tell the   other person who's reading your code another human  that what you want this might this is also fine   and i use it personally all the time this behavior  of early return this is basically what we call as   early returning um but yeah i would just say just  stick to if else at the moment you will also get   a little bit of practice so yeah that's pretty  much it for if else introduction in this video   hopefully you were able to think about how  you can put in some logic using if else but hey everyone welcome back and in this video  let's just go ahead and take a look at   logical operators in javascript and what do  they mean so like i said we have this function   called should i get a license right and it just  accepts an age at the moment let's just go ahead   and extend this and i'm going to say let's say we  also have a bright as the second parameter right   and what i'm going to do is i'm going to write  a condition here which will try to and try   to count for both of these factors so we're  going to say that if age is greater than 18   we will say that well okay this person is above 18  that's fine else you know you can include else or   exclude it because you already have the return  statement so it does not really matter here   else we are not gonna go ahead and do this right  away i'm gonna say inside this else block itself   you can go ahead and say if bribe is greater than  let's say 100 we can say console.log you pass   right else we will say this person is below 18.  simple as that now if i go ahead and write hundred   then obviously it will pass if i go  ahead and write 5 and 100 like this   you will see that this statement  right here uh let's see we get the statement that this person is below 18  because this check fails because private is not   greater than 100 it's actually equal to so if i  pass in 101 you will see we get the statement you   pass right and this is fine but we can rearrange  this code a little bit so what i'm going to do is   i'm going to rearrange this code and i'm going  to write a should i get a license version 2   right and in this case i'm going to start with  the bribery condition so what i'm going to do   is i'm going to say that if my h is less than or  equal to 18 and i have a bribe of greater than 100   then i'm gonna console log u pass  and return what's happening here   is that we are using a double ampersand sign right  which just says that this condition should be true   as well as this condition should be true if both  of them are true then i'm going to enter this if   lock right otherwise we just say that else if any  one of them is false then we enter this else block   and we say that hey this person either is greater  than 18 or they have a bribe of less than 100   so what i can do is i can go ahead and check else  if and see i can write if here as well and else   if here as well that's also a second syntax so  else if age is greater than 18 that means in   this case age is greater just greater than 18.  so i'm just going to say console.log this person   is above 18. and finally i'm going to say else i  mean this you can write here that if bribe's less   than 100 but from the logic you should understand  that this else this if would run if and only if   both of them are true right this would run  if this condition is true and we for sure   know that if this if did not run and this if did  not run then this if would run and always run   because the bribe might be less than 100 right  that's the only that's the only condition   that these two ifs would not run right so i'm  going to go ahead and just write else if bribe is   less than equal to hundred you know i'm just gonna  say two less not exactly two less but the original   messages we had right this person is below 18.  and if i remove this code right here and if i   switch this from license to license v2 you can  see we still get you pass and for 100 you will   see that we get this person is below 18 and  for basically a hundred hundred we just get   this person is above 18 right so you can see  that these two functions are technically the same   but you might find one more readable than the  other well it's it could be the first one it   could be the second one it's your choice but  that's that's what i'm saying whatever feels   more readable to you are logical to you you should  probably use that this one is a little bit flatter   in structure that means if i just even remove  this you can see there's a single if else if else   if chain right here this is a little bit nested  but might be a little easier on the eyes right   it depends on you but what i wanted to focus on  in this video was this double amp sand thing which   just means that this condition and this condition  both should be true right so let's say i have   i'm aged 50 and i give a thousand dollars as  the bribe i still get into this block right why   because my age is not less than 18.  so what we can do is we can write this   um let's say if i have this as the first  condition or i write the bribe is greater than 500   so what does this mean this means if you think  about this i want you to stick with me here if   this gets confusing just stick with me here and  see what's happening we have the first condition   age less than equal to 18 which is not gonna  pass right so the moment javascript sees that   this is gonna fail it just evaluates  this whole expression as false right   now the next thing javascript sees that it says  okay i don't have just this expression i have this   this another expression with me which has these  two bars and these two bars are logical or so   it means if false or bribe is greater than 500  and in this case we are passing thousand here so   this is in fact true so we evaluate this part  as true so what we say if false are true and   false or true just means that it just needs at  least a single value as true right so we are we   end up with true and we just get you pass right  so this is the breakdown of what's happening here   that's it that's why you get pass here so if  you are passing like 300 you will see we get   this block because again just to quickly run  you through this is false right this is false   false and and anything is false because and  requires every single argument to be true   so this becomes false and bribe is greater  than 500 that's not true because it's 300   so 300 is not greater than 500 so this also  becomes false and finally we end up with this   so we don't run this if block we go to the next  elsif block where we say if age is greater than   18 which is in fact the case therefore we run this  block and that's what you see right so yep that is   how logical and and logical or works in javascript  and there's another boolean operator which is   like um you know white listed for example i  have a white listed variable and i can say   that if the person is not whitelisted this not  operator then i'm just going to say console.log   you are banned right and just return from here  so what does this mean you can see we already got   you are banned and if you can guess why that will  be awesome we got this console log because if we   just log this value as well you will see because  i'm not passing anything i'm getting undefined   as the value so if i pass this as true you know  what this means this means that the person is   in fact white listed therefore not of true is  false right not of a boolean is the other boolean   so if it's true then it's this expression is false  if it was false then this expression was true so   because this was true we end up with this right  and this expression becomes false therefore we do   not enter this block right so we move ahead and we  get our regular output but that was not the case   if i pass in false you would see that  we get you are banned just like that   and that's it now what you have to understand in  javascript when you're dealing with this not the   logical the the snot operator javascript considers  true and false as the values which is fine but it   also considers pretty much every other thing as a  value as well so you can technically speaking pass   in a string here and this will work now the reason  it will work is that javascript is a dynamic typed   language that means javascript tries to understand  what is the type of the variable at runtime   right it does not make efforts for you to just you  know make sure you're using the right values and   the right types of uh values basically where  they are required so if you're using a string   here javascript would try its best to convert the  string into a boolean whatever rules are assigned   inside javascript's engine according to them  and then try to evaluate this so i'm just going   to give you a cheat sheet here telling you a  few things which you have to remember that is   if you pass in 0 here this would be a falsie  value right and let's just change this to   right listed so you can see if i pass in 0 we  get you are banned because 0 is a false value   a false value is a value which will evaluate to  false if casted into a boolean right which is what   happens here so 0 is a false value undefined  is a false value like you would have seen   when we did not pass any argument null is a false  value false is a false value right and there are   a bunch of a couple of more right so you will  discover them but for the most part always try   to stick with booleans whenever they are used like  booleans right you can use a string here but it   wouldn't make sense and javascript wouldn't tell  you that it's what's right or what's wrong so yeah   that's pretty much it on your first introduction  to some logical operators and how to use the not   operators with conditions in a function and i  think this is you have made a lot of progress so   if you understand this that's awesome if you  don't then don't worry try to rewatch some of   the content practice all these labs and i'm  pretty sure you will get the hang of this hey everyone welcome back and in this video  we're gonna be taking a look at arrays in   javascript how to work with them a little  bit although we will see how we can work with   the arrays in our different section but  this is like a just a quick start for you   so i'm gonna go ahead and remove these  two functions and i'm gonna create   a new function called add my friends right i'm  gonna have an array here let's say my friends   is equal to this array and what i'm gonna do  is whenever i call this function add my friends   this will accept a friend as the argument and  i want to add this friend to this array right   so what i can do is i can say my friends dot push  my friend now what's happening here let's take a   look at the console as well so that we have idea  what's going on so what i'm gonna do is first of   all write my name right away right so you can  see the moment i do that i get the console log   as mehul inside these square brackets so what this  means is that i have just added one element to   this my friends if i call this function again  someone for example you will see i have mahul   and someone in this array right and a couple of  things which i mentioned about arrays is that they   are ordered that means this order matters what  is first what is second what is third and so on   this order matters this push function right here  helps you to push values to the end of the array   right if you want to push a value to the start  of the array you use a function called unshift   so these are a couple of handy functions  which you should know and you can clearly see   that the order got reversed from the last one  right because earlier you saw that mayhew was   first element then someone was second because they  were getting pushed at the end now if i go ahead   and add the third friend you will see that this  person gets added to the front of the array so   unshift adds the element at the top which is like  at the front and push adds the element at the end   so this is one important thing about arrays second  important thing about them thing about them is   that they start with a zero index that means  and we have briefly discussed this my friends   of zero would be three in this case because we are  unshifting this right so this is zero this is one   and this is two right so if you do a zero one two  cycle you will see that you get these different   different elements together super important stuff  another thing is that you can always get the size   of this array how many elements there are in  in this array by writing a dot length with this   and this comes out to be three and this three  is not this three just let's just change this   so that it makes more sense you will see we still  have this three this three is the length of this   array right how many elements are there so we  added only three elements but if i had some   default friends here you would see our length was  actually four why because we already added one we   already had one and we added three more and when  we console logged our friend's length we had four   so this is how you work with arrays in general  now let's say i have a function or you know i i   wanted to remove this last value from this array  so what i can do is if you can think about it   one way is i can just go ahead and i can say my  friends of uh you know 0 1 2 3 is undefined right   that's something i believe is fair enough to think  about and if i console log my friends you will see   that now we have we still have four elements  but the last one has got undefined so how do   i really remove this element right here well we  can use something known as my friends dot pop as   the method and this is a function right this is a  function so when you call this what's gonna happen   is that it's just gonna give you the end  value the last value which you pushed and it's   just gonna remove that right from the original  area array as well so if i console log this as   final array and console log the my friends you  will see that our final array does not contain   this default value right this is removed and i  also said that it gives you pop actually gives   you the last value so i can just say last value is  this because this returns you if you remember from   the last return video it returns you that value  so last value if you console log this you will see   is in fact the default right so what  it did is that it took the last value   assigned if you want to assign it to a variable  it's fine if you don't want it's fine as well   and then it also removes it from  the primary array which you have   right so if i do a couple of more pops for  example if i write this two times instead of once   and move this you will see my final array is just  two elements if i do it three times you will see   it's just one element if i do it four times i  lose all the elements and if i do it five times   well it does not matter after your element  is your array is empty this function would   just return you undefined right you guessed it  right because there is nothing to be returned   so it returns you undefined and it removes nothing  so you will always just keep on getting this empty   array if you write a lot of these statements so  that's how in general how you work with arrays   in terms of pushing popping and inserting  elements one final thing which we can take   a look at is we can also insert or you know  modify values based on the index so like i said   you can access the first value like this where you  have someone like this you can also modify this   so if you say something like like i said i  had a typo here so if i say something like   someone and then i console log my array you can  see that my typo was updated from the last copy   right so you can change the values  which are stored in an array   if you know the index of the value which you  want to change index is basically everything in   an array if you know the index you can pretty  much do anything with that particular element hey everyone welcome back and in this video i'm  gonna be introducing you to loops in javascript   one of the most important things again in  a programming language and what loops allow   you to do is it allows you to run a bunch of  statements over and over again so you might   think that's what functions did right we can just  call a function again and again which is fine but   you still have to write functions certain  number of times right you are writing this   once then you're writing this twice what if  i wanted to insert 100 of such friends then   you would need to write 100 search calls so sure i  mean you can create a function call of 20 and then   call it five times and so on but that's that's  not what i'm talking about i'm talking about   actually repeating a piece of code a set number  of times or even infinite or even arbitrary   if you want so how do we do that we do that with  loops so what a loop is there are kinds of loops   but we'll be taking a look at for loop in this  video so i'm going to start with writing for   as the keyword and there's a set syntax you  have to follow here so i'm just going to show   you that once so i'm going to say for let i is  equal to 0 i is less than 10 i plus plus right   and i'm just going to console.log i here real  quick so let's take a look at what's happening   well you see first things first is that we in  the console we get 0 to 9 as the values printed   right we never wrote 0 to 9 anywhere in the code  but it got printed so that's our first observation   our second observation is this line number 8  right here what the hell is happening here so   you can see that we have the first block as the  initializer this is the place where we initialize   a variable which will control the loop right this  case it's i i is a convention you can name this   anything you want then we write a semicolon very  important very important syntax this could not be   left out or missed in the second part we have a  condition this condition basically says until how   long this loop should run right so we start  at 0 and we have to run the loop as long as i   is less than 10. that's fair and what do we want  to do as long as you know this loop is running   on every single iteration that is every single  time we complete everything inside this uh   loop body we want to run this part so whenever you  complete it you run it whenever you complete it   you run it and the fact that you can see  that we start at zero this means that   the very first time this loop runs the very  first time then only this runs and this runs   this statement always runs after an iteration has  completed right so that's why we get 0 first then   we check hey if i is less than 10 nope it's not  um so we get into this console log and just puts   out zero in the next part we increment this so  i becomes one we check if i is less than 10 nope   still not because i is one so we put out one again  we increment i becomes two we check if i is less   than two nope it's not so we put out two all the  way this happens till eight so we are at eight we   just console log eight we go back we make it 9 we  say is 9 less than 10 yep it is so we put out 9.   we go back we make i 10 we say is i less than  10 nope i is not less than 10 because 10 is not   less than 10 10 is equal to itself but it's not  less than itself so that's where we know the loop   should stop and the loop stops that's it so this  basically gives you 10 iterations which is 0 to 9   which are 10 in count right and you can do pretty  much anything you want you can multiply this i   with 2 this is just a number right which just  gets populated you can multiply this or you can   raise this to a power of 2 whatever you want to  do i mean you can pretty much have a lot of fun   with the numbers part here but what you can  also do is probably like do a my friends.push   as i right so you're just pushing 10 numbers into  an array and you can say my friends like this   so you can see we have a default and then we  have a zero to nine numbers available in this   array which is like a quick way of initializing  an array with some set values but yeah that's   how you can do it and yeah that's pretty much it  for your introduction part to loops you can pretty   much control all of these variables if you want  you can make this 20 right and we have already   discussed i plus plus this could very well be i is  equal to i plus 1 as well that's completely fine   right nobody's judging you or anything and it'll  just work fine but in loops what we usually do is   we use these plus plus or minus minus incrementers  right and like i said you could also do plus plus   i and it would not make a lot of difference it's  one on the same thing for the loop at least right hey everyone welcome back and in this video let's  just quickly discuss about continue and break two   important statements in loops which you should  know and how to work with them so if we take a   look you would see that we run all the way  from 0 to 20 in this case let's say i only   want to push even numbers to this array right  let's say this is just even numbers and if i   remove this function as well now what i want  to do is i just want to make sure that we have   0 2 4 8 6 10 12 these numbers right here so how  do i do that well the first way to do that is   you actually change this condition so instead of  incrementing it every single time you increment it   twice right every single time just once you  increment it twice which gives you pretty much   the same result which we which i just said right  that you need to get even numbers so that way you   are reducing your iteration count as well as the  numbers you are pushing and that probably is the   best solution right another solution is that you  can go ahead and say here that if i modulo 2 is 0   and i think we haven't discussed the triple equal  to or double equal to yet so stick with me here   we will discuss that later but this just means  that we are saying that hey if you divide i with 2   do you get the remainder as zero if you do then we  know that it's an even number because even numbers   when divided by 2 gives us 0 remainder otherwise  we know this is an odd number so i can say   let even numbers let odd numbers odd  numbers i can say odd number start push   i right and if i console log them in both in order  you will see we get even an odd number separated   so that is how that is another way you can do  that that's fine but a third way to do this   is you just skip an iteration right which is  pretty much what we are doing here if i do   something like this this is pretty much what i'm  doing right but let's say i have a function here   which says skip number and i have a  number like this and whenever i pass   a number for example let's say i have this even  numbers inside this array and i remove this   and i just return even numbers right fair enough  simple program and we know all the parts here   let's say i have a skip number of 10. now  what i want to happen is that whenever   10 arises here i don't want to push it right  i don't want to do anything so sure you can do   something like if i mod 2 is equal to 0 and i is  not equal to number then push it which is again   magically it works right and again this means  that i is not equal to the value here this means   that this result is in fact equal to the value  here right just making sure you know about the   triple equal to and not and then double equal  to symbols here these are important stuff right   so make sure you understand them as well along  the way but what i wanted to discuss is a little   bit of alternative let's say i don't want to push  this in a condition i always want to add this and   now we have a problem because now we get all the  numbers however what i can do is make use of a   couple of handy statements in the loops and that  is the first the first one is called as continue   so what continue does is that it says that i  can say if i mod 2 is equal to 1 then i want   to continue so remember just like return just  does an early return from the function itself   for example if i just wrote return hello from here  you wouldn't see all of this stuff happening and   we will only get hello in the console similarly  anytime you are inside a loop and the loop body   contains a continue or the you know when the  code is executing it encounters a continue   the iteration is marked as done right so it's kind  of like a i won't say a return because it keeps   the loop running but it kind of like skips the  current iteration and whatever has been done it's   done okay that's fine but it moves to the next one  right so if i just keep on writing continue here   you would see we actually get in blank array  right because nothing happens in this loop   for all the 20 cycles we just waste them so  instead of that what we do is that we say that   for every single odd number we want to just  skip the cycle if i switch this to zero you   will see we only get odd numbers because for  every single even number we skip the cycle   right similarly what i can do is i can say if um  i is equal to the number again i want to continue   because i don't want to add that number  and if both of these conditions don't match   then well the code will come here it will execute  and it will add those numbers so right here you   can see we get 0 2 4 8 6 12 whatever that is not  added if i supply 2 here you would see we have a 2   missing now and so on so that's how continue works  let's say we have a number which is break number   now what i want to do is i want to break out  of the loop if i get that number if i don't get   that number then it's fine so so far you can see  let's say if i have a i mod 2 condition with me   that's fine but what i want to happen is that  the moment i get this number which is passed here   it should break out of the loop right so how do  i do that well for that i can write if number or   you know rather if i is equal to number then break  now pay close attention to what's happening here   you're seeing that i passed in 10 and the results  which you get is 0 2 4 6 8 because the moment   this i became 10 and this number  got 10 this number was also 10   then we ran the statement and it breaked out of  this loop that means it came to the next line   and it just said return even numbers so that's  why we get all the previous work which has been   done by this if i write for example 2 here we will  just get 0 why because the moment i becomes 2 we   just breaks out of the loop right that's that's  what we do now there's a very slight difference   between break in a loop and redone in a loop which  is in a function because if you think about this   think about this carefully i told you how return  works right whenever you write a return nothing   works under that so that's kind of true but in  a more logical way what i should say is that the   moment your function executes return nothing else  runs right nothing else runs everything else stops   so if i return here instead of breaking what  would happen is that we will get undefined why   because we are not returning any single value  so let's say if i return and say early return   so or even better like instead of  early return i just say even numbers   so what's the difference between doing this  between doing this and just writing break here   the difference is that if there is anything which  is in between these two loops which might be some   important work like you know just console logging  that final numbers length is even numbers.length   right if we have the statement then the statement  would never run because you just returned out of   the loop right and you did not just return out  of the loop you also returned out of function   so that statement never runs if you want it to  run you just want to break out of the loop you   don't want to return out of the whole function  so the moment you change that you will see that   we also start getting the final numbers length  is 1 and so on so this is a kind of introduction   for break return and continue in a loop  which is running inside of function   return can only be used with functions break and  continue can only be used inside loops right if   you just write break here it wouldn't make sense  and you will get another message if you write   continue here it wouldn't make sense break and  continue only make sense for these loops right   so yeah that's pretty much it for the language  syntax hopefully you're able to understand how   the language and how the dynamics are working  out if you do then make sure you're leaving the   rating to the course recommending these  two other people in your family in your   circle and your peers whoever wants to learn  javascript that really helps the platform hey everyone welcome back and in this video  let's just go ahead and discuss about equality   in javascript and how that works so what i'm  going to do is first of all make some space here   and i'm going to start with just a console.log  statement we're going to keep this simple   so i'm going to say starting with 1 is equal  to 1 right and you can see it console logs true   so whenever you are checking for equality  like this this expression in itself would   give you a boolean value what do i mean  by that for example if i have a result   1 equal to 1 and if i do a type of result you will  see that i get a boolean right so this can even be   either be true or be false and in this case we  know it's true because well one is in fact one   you would have seen that i'm using three equal to  signs here and i'm using one equal to sign here   so what's the difference between these three and  one so what you have to remember is in javascript   whenever you use a single equal to sign that  means assignment that means you are assigning   a value in this case you are assigning result  to one right if you are using double equal to   or triple equal to in javascript you are comparing  a value to something else right this is important   because javascript also comes with a double equal  to variant and double equal to variant is a little   less strict i mean this still evaluates to true  but if my one was a string then also it will   evaluate to true right and depending on how you  are looking at this it might or might not make   sense but if you use a triple equal to it will not  try to type cast things right javascript will not   try to typecast things and it will give you false  why because string and number are inherently not   the same thing however if both of them are strings  that's a different story right but yeah in general   in general always make use of triple equal  to until and unless you know what you're   doing that's the best practice you will find  thousands of code pieces and a lot of things   with a double equal to sign and double equal to  usage that is fine but whenever you're writing   new code always use triple equal to don't ever  use double equal to that's just i mean that's   just not a good way or good practice to go  about plus you will have a bunch of buggy code   if you're not careful with the types like i said  if you're comparing strings and numbers and you   know doing bad comparisons all the time javascript  has a history of not reporting those errors to you   in fact javascript just tries to use its own  little brain which it has and sometimes it   results in horrible disasters so you don't want  to do that try to stick with triple equal to   which will just reject your results if they  are not type equivalent or value equivalent   and yeah that's pretty much it that's all  i wanted to discuss i mean you can compare   all sorts of values fg fdg you know anything  you like right i'll just work out of the box hey everyone welcome back and in this  video let's just go ahead and start with   objects in javascript so so far we have seen the  primitive data types and used functions as well   but objects are super interesting super important  because objects is everything in javascript your   function can be an object your arrays are object  and objects are object so very simply speaking an   object can be created as follows so you can say  my object like this and just create an empty uh   you know this curly braces right now the objects  in javascript are stored in the following way   you have certain keys and then a column and  then certain values so you have a key name   and then a value right and you can put this key  name in quotes again right here does not matter   whether it's single code or double quote so the  moment you do that what's going to happen is that   this is an object which has a key called keyname  and a value called value you can define multiple   values and multiple keys here so i can say  keyname2 for example and then a value 2.   so now if i try to console.log this object right  here you will see that we get the full object key   name as value and key name too as value 2 right  simple as that now how you can access the value an   object and what does it even mean what do you  have to remember in objects is that the way you   access a particular value is through its key  so the premise is how you store the object   is that you store it in such a way that you know  the key more or less or you can derive it and you   don't probably know the value or you know you want  to store it against the value so what i can do   in order to access this value right here is i can  use the square bracket notation just like we used   with the arrays with number 0 1 2 but instead  of writing 0 1 2 i will write key name like this   and when i do that you will see that i get value  in the console which is the value of this and this   could be pretty much anything right it could be a  string it could be a number it could be a function   it could also be a function right it could be a  function like this which is anonymous function   it could very well be another object itself right  so you can have another object so if you want to   go into you know this object for example key name  let's say 2.1 and you say hello world then if i   go ahead and copy this and use the square rocket  notation again in a nested fashion you can see   this gives me this object and then keyname 2.1  gives me hello world right so that's how this   works the object uh you know extracting the key  out of extracting the value out of all these keys   there is another way you can make it work and that  is first things first you don't need to have codes   around the key name if it does not contain spaces  or any weird characters or does not start with   any weird characters so what do i mean by that if  you have a key name like this keynum 2.1 you have   to you use the quotes in this case right because  this is now just bad syntax but if you don't have   any spaces or anything you can pretty much use and  set the key without quotes in javascript right so   similarly for this this is also valid syntax now  similar alternative exists for us here so you have   an array like notation here which is fine if you  want to access but if your key name is valid that   means it does not contain a this does not contain  weird characters or does not contain spaces   what you can do is you can use something known as  a dot notation so you can just write a dot and the   name of the key which you want to access right in  the second case we have to use the square notation   because if i try to use the dot notation you will  see it does not make a lot of sense because this   way it does not know there's a space it does not  know where it ends right so in this case we have   to use a square notation and this should obviously  be in quotes because otherwise it will be   evaluated as a variable right and you don't need  a dot then so yep that is pretty much how objects   work in javascript you can define nested objects  you can do basically any sort of and all sorts of   nesting here these values could be null these  values could be functions these values could   be undefined these value could be nested objects  strings booleans everything you can think about   right and you can look them up with the help  of their key names and that's how this works   so hopefully this was a good introduction for you  um for getting started with objects and there's a   there's a lot of use of objects in javascript  we will be working with them all the time hey everyone welcome back and in this video  i want to discuss a very important thing   a very important concept in javascript and  that is known as how the objects are passed   in a function and in general here and there so  what i'm going to do is i'm going to create a   function called mutate which basically mutate  just means to change something and i'm going   to have an object being accepted here right and  let's just go ahead and create an object like uh   let's name it something else my profile for  example so i can say this is named as mehul   and h as 22 right and in this object whatever  object i pass for example i have a second profile   let's say second profile where the name is john  and ages 42 right so now if i go ahead and say   object dot h just console logging that what you  will see is that when i do something like mutate   my profile we get 22 in the console if i do mutate  of second profile we'll get 42 in the console fair   enough now before doing any sort of work in this  what i will do is i will do a primitive mutate and   i will have a primitive value here right and what  i'm gonna do is i'm just gonna add one to it so   i'm gonna say primitive plus plus right and what  this primitive mutate does is that it'll accept   a number so let's say i have 100 here and i do a  primitive mutate of number right and if i console   log this primitive what we see in the console  is one zero one which is you know understandable   you want increment hundred you get one zero  one but if i console log the number here back   you will see that this number is not changed  right it is 100 although it was made 101   inside this function but this function actually  has this primitive variable in scope plus   this call when this call was made this number  got copied into this function's execution context   right so this means this primitive is a copy of  this number it's not this number which we are   incrementing here with objects however this is  different because with objects if i try to do   the similar thing object.h plus what's going to  happen is that you will see that if i console.log   second profile here we will see that  the age in fact gets increased by 1.   so it was 42 before i passed it inside this mutate  function i just incremented the age object.h   the age property of this object and i console  logged it and you can see it suddenly turned 43   right but if we go by this logic it should  not have modified the original variable   but that is not how objects work in javascript the  way objects work in javascript is by reference so   when you create this object you can think of when  you're passing this in a function you can think of   an address being passed so instead of the  actual object let's say you have passed an   address something like 0x1234565 for example right  this could be anything now whenever javascript is   trying to access the property of this object it  will try to go to that location in the memory   and search for that property and then increment it  now the reason this increments the older object as   well the outside object is because both of them  are pointing to the same object in the memory   right you just pass the address here whereas  when you're using a primitive you actually   copy the value so if this is a number if this  is a string if this is a boolean if this is   any primitive type bigint it gets copied  so the original value isn't mutated but   in case of objects the address gets passed or the  reference gets passed and that is basically where   the change takes place so this is very very  very important behavior of javascript which   might catch you a little off guard if  you don't know about this so this is   super important to know but yeah that's pretty  much it for this video hopefully you were able   to understand that whenever you pass an object you  are always dealing with a live copy of that object   and whenever you pass a primitive you are actually  dealing with a fake copy of that object right hey everyone welcome back and in this  video let's just go ahead and discuss about   scoping in javascript which is again a very  important concept so what scoping is well you see   that when you're trying to work with javascript a  lot of times you would see that you have to create   this opening and closing curly brace now a general  rule of thumb in javascript is that whenever you   see these opening and closing curly brace that  means that this is a scope and what is a scope   a scope is an area in which a variable's lifetime  is right so if you create a variable for example   hello and assign it a world you can do whatever  you want with this variable here right you can   console log it you can um you know if this is a  lid you might also be able to change it and so on   right so if i run this function this works  fine we will get world in the console but   if i do console.log hello outside this you would  see we get an error that hello is not defined   why because the scope of this variable is bound  inside this opening and closing curly brace   right if i take out this line out of the function  you can see that we get two console logs the first   one from the function call and the second one  here right so why that is why this is working now   because in javascript what you have to realize the  scope of this variable is actually the scope which   it is in that is in this case it's globally plus  any other scope which is defined as a child of   that scope right and all the scopes are basically  children of the global scope so that works fine   what do i mean by that let's just take a look at  another example let's just say i had hello inside   this function now what i can do is i can go ahead  and say that if something is true then console.log   hello now if we take a look here this statement  will always run because this is well if true will   always be true but what's happening here is that  i can access this hello variable inside this scope   see we have a opening curly brace and a closing  curly brace therefore this is also a new scope   but this is a child scope of this function  because it's inside this it's embedded inside   this therefore i can access all the variables  defined above just just as usual right you see it   works however if i move this inside this you would  see that this statement right here the second one   starts giving us error why because now this hello  variable is in the scope of the variable or not   exactly variable but in scope of the statement of  this if right so you cannot access this outside   the if block so you have to remember like function  creates a scope this if else also creates a scope   anywhere where there's a opening and closing curly  brace and loops also create a scope what do i mean   by that let's write a simple loop i zero i less  than 10 i plus plus i'm going to console.log i so   what you can see here is that we get let me just  remove this what you can see here is that you get   one two zero two nine and the console log but if  a console.log outside this loop you would see it   gives us an error right and although it seems it  might seem like this is just outside loop and not   inside these parentheses but the loop variable  is also tied to the scope of the loop so you can   access this eye you can do pretty much anything  you want with this eye inside this loop but this   i would not be available outside the loop why  because its scope is not defined outside the loop   if you could have defined i here for example  and if you remove this declaration you can   leave this space as empty it's it's totally  fine right and if you do something like this   now you can see that when i console  log this i get i as 10 the last value   why because our scope wasn't expired  in this for loop we can access it right   so this is one way of creating a scope if  else block is another way like i showed you   and functions is also a way if you want every  single variable to be accessible everywhere   you can just go ahead and create all the variables  at the top so any variable you create in the   global scope can be accessed in the functions  right until and unless they are shadowed which   we will discuss in the next video so yeah that's  pretty much it for this one i hope you understood   what the scopes are how the scope work and it's  basically the same thing for constantly both so   it's fine i mean i just showed you the example  of lit i guess but works the same for the const hey everyone welcome back and in this video  let's just take a look at variable shadowing   in javascript and what that means so what i'm  going to do is i'm going to go ahead and actually   just clean this up and i'm going to say cons to my  variable or you know let's say my age has 22 right   and i'm going to create a function um print my age  right and i'm gonna console.log my h and whenever   i call this you see we get 22 in the console which  is fair enough that's what we would expect right   but what happens if i try to create my age as  25 here well you would see that we get no error   because you know we can see in the console we  get 25. so why do we get an error when we do   happen to create a variable in the same scope  but no error when it's in a different scope   or in a nested scope rather well there's no  why to that that's that's just the rule that   you can create any sort of variable in a nested  scope but the problem here is that now there is   virtually no way to access the older variable  the older value i mean you cannot access my age   as 22 because it has been shadowed by a local  variable and why the way it works is as follows   if you don't have a local variable that is a  variable in the local scope javascript will go   to one scope above and it'll ask do you have  that it will say yes and it just prints that   this can be shown in an even better way  if i wrap this whole thing in if true   so if i wrap this like this and give this an  indentation what you will see is we still get 22   and if i move this a little bit up and define my  age as 27 you would see that we get 27 now right   because it takes a look here it says that hey i  did not find it do you have it it says yes i do   therefore we print 27. if i remove this you would  see we print 22 because this also does not have it   so it asks above and that got that so it prints  22. now the only thing which we need here to   shadow this variable is just a declaration right  not even an initialization if i just have a lit of   my h what you will see is that we print undefined  right i did not initialize this that's it you just   need to define it somehow the moment you define  it it gets shadowed right so the above variable   are not used or cannot be used so this is  important in order to you know just make   sure you understand that you don't shadow  over variables which are required because   then there's no way to access that global kind  of variable right so that's how shadowing works   in javascript variable shadowing nothing fancy  but you should just know about how this works hey everyone welcome back and in this video let's  just go ahead and start with the most important   thing in the browser javascript that is document  object model and what document object model is is   that it connects your html to the javascript world  so so far what we have done and what we have seen   is that you can use javascript to do calculations  to call you know to calculate prime numbers to do   all sorts of mathematical and computing stuff  but that is not what we learned javascript for   right we are learning this because we want to  make sure we use this in web development and we   have already seen that html and css are the rock  stars of web development whatever you write here   the browser processes them parses them and shows  them on the right now the big question is that how   do you let javascript control this html world  and the and the simple answer is that javascript   by itself does not ship with any way to interact  with an html document so how does it work   well you see that your browser in this  case chrome actually exposes another set of   api to your javascript world in order to interact  with this html simply put i'm just saying that   there is a special object here which exists  which allows you to tap into the html world and   that object is not coded in the javascript world  itself it's coded in the c plus plus and c world   of the javascript engine which is a relatively  lower level language compared to javascript   right so what is that object that object is called  document and we will we will take a look at this   document object a lot we will use this a lot of  times so if you console.log this document object   you will probably be seeing something like this  mess but instead of seeing this mess what you   can do is open this in a new tab and go to the  console of this tab right here and you will   see if you ignore this error you will see this  as the document console now this looks awfully   familiar with what you would see in the elements  tab right so this basically means that there's   a variable in javascript called document which  pretty much is this representation of some kind   but not exactly because let me just quickly go  over through what is the difference between this   representation and the html you are writing  so what happens is when you load a page   your browser sends your server sends this code to  the browser right this is just plain html code now   your browser first of all needs to report to two  people here the first person is javascript and the   second person is css right css needs to style  the page javascript needs to add interactivity   but before both of them can do their  work the browser has to create a certain   tree like structure from this text  documentary presentation so that   the css or the javascript can navigate that tree  and reach to the exact node they want to work with   right because this makes sense if your css  code has to be performed if it wants to be you   know fast it needs a good way to reach to the  correct elements fastly right you cannot just   you know brute force or hack your way into  this so what javascript does is that it creates   a tree like representation of html document  which you sent it and calls it document object   model that is what dom stands for document  object model is a programmatic representation   of the html document which is sent by the  browser and basically it is the real view   of what you are seeing on the screen as well so  if you remove an element from dom it is gone from   the screen if you add an element to the dom it  appears in the screen the synchronization of   the dom and the screen is done by the browser  right you have no control over that you cannot   change that behavior but you can control dom which  indirectly controls what appears on the screen   right that's it that's the thing that's that's  all javascript does it can manipulate the dom   which in results can lead to good or bad  user experiences depending on how you do that   so that is all that is what dom is and we will  discuss a little bit more about dom and all the   stuff in the advanced course but yeah we will  discuss a bunch of apis in the next few videos hey everyone welcome back and in this video  let's just go ahead and take a look at how we   can actually get hold of an element on the page  now in the last video i told you what document is   it's basically a way for us to tap into this html  code which is represented as dom in the browser   so we have this document with us now this is an  object right that means it comes with certain   properties which could be functions which  could be just regular properties and so on   and the implementation of all of those  properties are defined in the c plus code   not in the javascript world so you cannot pretty  much recreate them yourself you have to use them   so what i'm going to do is i'm going  to say document dot query selector   and then i'm going to write h1 right which is the  name of the tag we have here now if i do a const   of heading right here and if i just console log  this guy what you will see is that i get hello   world in the console with an h1 so what does that  mean that means we are targeting this element this   heading right here is actually holding a reference  a reference not a copy a reference to this   what do i mean by that that means anything i  do with this heading now will automatically get   reflected on the browser so let's try a couple  of properties i know that there's a property   called heading dot inner text and i can set it to  whatever i like so let's say i said it to hello   mayhal instead of hello world you can see that's  what appears on the screen immediately right so   yep that is how you select an element with a  document.queryselector and that is how you update   any of the property of that element right and it  automatically gets reflected on the screen now a   quick point here about query selector this thing  right here what goes in here is basically the same   thing which you write in your css style sheet and  i have a couple of styles from previous videos but   what you have to remember is that whatever you  write here actually goes as the same thing what   you write in a css selector right so if i had for  example this as h1 id hello then i could write   this as hello as well for selecting id right  and it will still work if this was class   h1 class hello then i would have to change this  to a dot right and then it will work hello me hold   right so it's basically the same selector  which you use in the css which you can use   with query selector and this is like just  the one way of many ways of doing this   but yeah that's how it works but yeah that's  pretty much it in order to get your first element   grab your first element with a css selector store  it in a variable and then start manipulating it   we will do a lot of manipulations in the  coming videos so don't worry about that hey everyone welcome back and in this video  let's just keep on doing some dom manipulation   and what i'm going to do is i'm going to show  you another variant of this and that will be   query selector all so what does that mean that  means let's say i have a ul tag here and i say   list item one list item two and three right so  let's say we have a bunch of list items with us   and what i want to do here is i want to say that  okay what i want to do is i want to replace all   the text inside this these list items so  what i can do is i can get all list items   via document.query document.queryselector ulli  right but if you try to console log this you will   see that we only get the first item in the console  no other item and why is that because by default   query selector only returns  to the first matching element   right so it starts from the top it sees okay okay  not found not for notepad and there we go boom we   found the element but if you use css you will  realize that css actually targets every single   one of them right so css if i give a background  of yellow for example it will target all of them   so strictly speaking this is not exactly  like css then right well it has a variant   called document.queryselectorall which can act  as the following right so right now you can see   it it console logs it as an object but truly  speaking it's not an object it's a node list   so let's just open this in a new tab and actually  see a good console from the browser dev tools   until we fix that in the code dams environment uh  but in the browser dev tools if you go to console   you will see that we get a node list as a  console statement now this low node list   is pretty much very similar to an array but has  a couple of differences which we will discuss   when the time comes but for now for the most  part you can think of node list as an array   right so you have three elements you can  see and three list items here as well   right so what you can do now is just like an  array you can i trade over this with a for loop   so i can say for let i is equal to zero i is  less than all items dot length i plus plus   what's happening here is that we are trying  to loop over this until we exhaust all the   elements in the list and i just plus plus on the  i right because this length will give us 3 which   is basically the amount of items we have on the  screen so the next thing i can say is i can say   list item is all list items of i because remember  like i told you earlier that you can access   the nth element or any element with the index  right so in the first iteration this would be zero   so all list items of zero will give me access  to less than one then two and then three and   then so on if there are any more okay so once  we have this i can say dot inner text is yo   you know and the moment i do that you can see  all of the three items turn into you right so   that's how you can make use of query selector  all and i trade over it and get awesome results   when we learn a little bit about es6 in the one  of the sections in this course there would be a   neater way to do this i mean for loop is fine  but we also have some declarative uh ways   to run the loops now in javascript but this  is also completely 100 percent fine right if   you want to use this this is 100 fine but yeah  that's pretty much it for this video hopefully   you understood how query selector all works this  returns you an array of html nodes query selector   only returns you a single html node which is  the first matching element and that's a big   difference you have to remember right sometimes  this would be fine sometimes you might need this hey everyone welcome back and in this video  let's just take a look at a couple of more   ways to actually get to the elements and  we'll start off with the get element by   id which is i think the only popular um other  thing apart from query selector which exists   so what get element by id does is  that let's say if you have a paragraph   paragraph like this and this has got an  id of para well you can access this with para document dot query selector para like  this but what you can also accept is this   word is document dot get element by id and then  just the name of that of the you know whatever   the name of the id is and one quick notice  you have to see here is that query selector   tries to use the css selector like format  but get element by id does not use that right   so that means um it's a little different and  the reason why this is a little bit different   because this only works for ids right it will not  work for classes or anything and this is slightly   more performant than query selector if you run in  it into millions of elements right because i mean   not that you need to know this but technically  speaking get element by id creates a hash   map of um all the ids on the page with their  corresponding references right so this is like   a truly o1 kind of lookup if you know what  i mean and that's fine if you don't know   that's fine as well so that means this is a  slightly faster look up compared to this one   but for almost every real world scenario you'd  never need to know the difference in speed you   will never really observe the difference as well  this will only come handy if you're doing a lot of   loops and dom manipulations and maybe in millions  of times or tens of thousands of times per second   right so anyway you can stick to just query  selector if you would like that's that's what   i wanted to say but yeah this exists that's one  thing another thing which i wanted to discuss   is that whenever you have a node with  you for example you have this tag   you can pretty much use the query selector again  on that so what do i mean by that that means let's   say you have a ul for example so i'm gonna do ul  as document dot query selector ul right and if i   console log this ul fair enough it gives us the ul  tag but if i do an li i can do something like this   or what i can do is i can just say ul dot query  selector li right or ul dot query selector   all li and if i console log this li part  you will see we have a bunch of lis or if   i just do a query selector of a single one  we just have the first matching result now   the reason this works is because if you think  about it when javascript constructs a dom tree   every node is also a kind of a small tree right  body is a small tree which consists of this   these three children and these three  are the child of this ul as well   so you can think of body as a small  tree similarly for ul and any other   nested elements so that's why javascript  exposes the queryselector method on these   nodes as well but what you will not get is a  getelementbyid method so if you write getelement   by element by id you will see that this method  does not exist on the node um which you got   right and why is that because like i said because  this is a bit performant and it uses hash maps   and indexes javascript does not give access of  this method to everyone therefore you can only   use this when you are using document right so  you have to use get element by id bit document   but you can use query selector with pretty  much any node you like query selector and   query selector all so these were a couple of  points i believe you should know but yeah that's   pretty much it all you want to know about query  selector and going into the depth of the tree   at this point we'll take a look at a few examples  which will clear this out even more in future hey everyone welcome back and in  this video we'll be taking a look   at event listeners in javascript which is super  important super interesting and amazing topic   and what this does is that it finally allows you  to use your cursor in an interactive way on the   page so what do i mean by that that means that now  you can create let's say you can create a button   called click me and let me just get rid  of this as well and you can have an h1   saying counter and then a span id counter  like this right and whenever you click on   this counter this button the counter goes up so  how do we do that right now nothing happens right   so the way to do this is actually let's  just give this button an id of increment and i want to get this button first so i'm  going to say increment button is document   dot oops document dot query selector increment  right now i want to attach an event listener   to this that means whenever something some click  happens on this button i want a function to be run   so what i can do is i can write increment  button dot add event listener and then call   it as a function so what the name says it says it  literally says add an event listener and what we   can do is i can specify the first argument  as the type of listener i want to attach   in this case i want to attach a click listener  that means whenever somebody clicks on this   i want something to happen right and what do  i want to happen i want to run a function now   the function which we specify here can be  an anonymous function an anonymous function   is a function which does not has a name so  you just start writing a function like this   right so it could be an anonymous function or you  can define this above you can say like function   increment counter like this and just pass the  name of the function you don't want to call it   because this will actually call the function  you just want to pass the name of the function   right so the moment you do that whenever  you run or whenever you click this button   what will happen is that you get all these  console logs right which says run right   so this means you have tied a function  call a function to an event on the page   using browser apis now this is interesting  because now you can do all sorts of fun stuff   you can create a counter which says zero you  can increment this counter and you can finally   what you can do is let me just get the count of  counter element first document.getelementbyid counter right this was our span tag right here and  we can implement the counter variable which is our   global counter and then i can also say counter  element dot inner text is equal to counter right   so now whenever i click on this you can see we  are incrementing the counter on every single click   why because this function gets called this  function gets the element it increments our older   counter and we add that counter as the inner text  right and whenever we set it with an equal to sign   it replaces the value so on every single click  we increase the counter now you can do a pretty   much a similar thing and you can develop a  decrement counter decrement counter like this   create a copy of this you can create a decrement  button we will get a decrement button like this   this would be decrement for example and we  will have another button here called decrement   right so this would be increment  counter this would be decrement counter right so now whenever somebody clicks on decrement  button what i want to do is decrement the counter and the decrement in the decrement case we just  have to decrease the count right and that's it   that's all you need to do in order to play with  this counter and if you see that you are using   this counter multiple times you can also  take out the reference to the global scope   and just get rid of them right now it's  much more cleaner and simpler to use hey everyone welcome back and  in this video what i want to do   is actually keep up with our counter experiment  and build a little bit of understanding of   javascript using this example so the first thing  we'll do in this one is actually try to add   an element to the screen using javascript and what  do i mean by that that means actually constructing   an element in the html world which is on the  screen with the help of javascript so first things   first what i'm going to do is i'm going to create  a ul here which just has an id of list items   right and every single time i click on increment  counter we will add a sentence in this ul   so how we will do that well let's see so again  the first thing we need to do is actually   grab this ul element so ul element element is  document.getelementbyid as list items right   so the moment we have this ul element then we need  on the increment part somehow we need to append   a list item to this so first of all let's  just see how you actually even create an   element so the first step is create an element  and second step is append that element so in   javascript in order to create an element we have  a special api called again on the document object   and that is known as document dot create element  so this create element right here is a function   which takes in the name of the tag which you want  to create in this case we want to create an li so   i'm just going to go ahead and pass this li as  the element right so that's first thing the next   thing is we just append that element right and the  way we append that element is again using a dot   append child um special function and this startup  and child special function pretty much exists on   every single node which we have right so we have  selected these nodes and all of them contains   dotted child but we want it to happen on the ul  element so i'm going to say ul element dot append   child and then li and this should be you know the  second sentence and that's it that's all it takes   to create an element and append to it right so now  if i click on increment you can see these bullet   points getting created because a list item is  getting appended every single time i click on this   right although we cannot see anything because  we haven't really added any text content   but that's how it works that's how you create  it so yeah that's that's how you would create   a list item dynamically and now let's just  go ahead and take a look at how you add   text to it now what you have to understand in  javascript is that everything can be a node   right in the dom world not in javascript but  in dom world so these html tags which you see   in the dom world document object model world these  elements are nodes right even the text which you   have are nodes these text nodes are special and  are actually called text nodes right so what you   do if you want to append a text node to this li  you first of all create that so you say a text   node is document dot create text node and then you  write the data the text which needs to be put in   so in this case i would say a sentence  and then i would specify let's say   um counter right so that's to just keep the count  of what where we at and then what i will do is i   will say li dot append child text node like i  said every single node which you have has an   append child method even the ones which haven't  been appended to the dom yet right so this node   when it is created at this particular point it's  still in memory it's still in javascript it's not   appended to the dom therefore it's not visible  once we do all the processing and everything   then we finally append this right so the the  moment we do that something like this happens now you can see that on every single click  of the counter the sentence is increasing   with the counter which is pretty cool  right now this just keeps on increasing   now that is cool but let's say now i want to  make the sentence bold how do i do that now   i have to create another tag right i have  to go and create a document.createelement   create element there should be a b tag then text  node is there b tag should append the text node li   should append the b tag and then  finally ul element would append dli   right and in fact not even this because we  have the text node like this li append the   b tag we would create a text node too  because we don't want the counter to be   you know bold so i'm going to say create text node  counter and i'm going to say li dot append child   text note 2 and then finally this happens  right so if i now click on this you can   see that sentence is bold why because sentence  has been appended inside of a bold tag in html   and the counter is not bold because it is just  directly appended inside the li now this seems too   much right this seems like too much work at the  moment so what you can do is you can pretty much   replace all of this very easily you can say that  instead of all this hassle what i want to do is   this li element should have an inner html  of the following and you can say this is b   something and then plus a counter that's  it and if you do something like this the   result is pretty much the same thing as  you did with all of these lines right   so what's the difference well the difference  is that this code is actually what the browser   has to do anyway in order to understand what  every single element is right the document   object model is consisting of all these nodes  and text nodes and everything so when you do this   you are implicitly you're explicitly telling  the browser what needs to be done right here   when you do this thing where you pretty much  just say li dot inner html is a b tag sentence   b tag close and then counter when you're doing  this thing then you are implicitly telling what   the browser should do and then browser takes  this puts this as the html this whole thing   as the html of the tag right and constructs or  reconstructs rather the dom tree of uh the browser   right so this is super important this is super  super important that inner html can be used for   these small shortcuts right so you should remember  that it has its own tradeoffs that means this is   not exactly equivalent to the other thing which i  showed you because for example let's say you want   to add an event listener on this b then there is  no way you can do that but in the other example   if you are creating every element individually you  can add an event listener so that's one trade-off   there are a bunch of other trade-offs but for  this example it gets the job done right and for   the most part you should just know the both ways  you should go about but that's obviously easier   but yeah that's pretty much it for this video  hopefully you understood how you can add elements   to the screen with just javascript we will be  taking a look at more on this later down the line hey everyone welcome back and in this video let's  just go ahead and take a look at how you can go   ahead and remove these sentences as well so for  now if i decrement the counter you can see nothing   really happens and i can just only increment it  and then only the sentences get added but what if   i also want to remove these sentences as and when  they get completed or you know not completed but   as and when i click on this decrement let's see so  the first thing is whenever somebody clicks on the   decrement button what you have to see is  that this decrement call right here is made   right so we have to do some magic inside this  function all right that's the first thing the   second thing is we need to get to an element which  we need to remove right so in order to do that we   need well we do know what the element will be it  will be a sentence with a counter in the front   of it but that's a little harder to catch right  from the contents of it so what we can do is we   can go back to our basics and understand that  in the html side anywhere when you have a data   star attribute that's just a custom value or a  custom attribute for you like i mean sure you   can have an attribute like mehul 2 and you can  probably grab that from javascript as well but   this is not valid html5 right a valid html5  document would be data mehul 2 for example   so anything you write after data dash is allowed  basically it's just for custom data so what we can   do and then we can use basically the id of this is  using this attribute to get access to the html so   what we can do is this at this point when we are  creating an element i can say li dot set attribute   and i'm going to say this as data dash counter  to counter right so this is the name of the   attribute and this is the value of the attribute  so when i do that what's going to happen is that   if i console.log this li right here what you will  see is that when i click on this we get an li   which has a data counter attribute set to one  and then two then three four five and so on right   that is awesome because now what we can do  in the decrement counter function is we can   grab the reference of that particular item so i  can say const li is document or you know if you   want you can also just start with the ul item if  you want ul element dot query selector and then   i have to catch it via its data value right  and the way we can do it is again by using   css attribute selector syntax where we write the  name of the attribute specify the value like this   and say this is just counter right because  let's say the counter is 4. now when i click   on this decrement counter this gets called the  counter right now is four we have the data counter   equal to a value of four we get to  this and we have this li with us right   and then that's simple the next thing we have to  do is just call a remove on this right and that's   it that's how you remove that's how you can remove  basically any element from the page once you have   that once you have its reference so now let's try  this out i clicked on it multiple times and when   i click on decrement counter you can see we just  remove the elements in order right so when i click   on this the counter is seven we get to the seventh  sentence that's what this li is and then we   finally call remove we decrement the counter and  we increase uh you know repaint that on the screen   that's it that's all it does in terms of  removing the element but what's important   here is that you are able to set the attribute  using a function known as set attribute   right similarly you can also get the attribute  so you can say number is get attribute you know li dot get attribute um and data counter  right you can do something like this but this   number right now is actually a string right this  number is a string because this attribute value   although a number but is stored as  a string in the html world right so   we need to parse this as an integer so how do  we do that we use a function called parse end   and the reason we write 10 here is because we want  to pass this number in base 10 right so that's   recommended that you write this 10 here so once  we have this number what i can say is if my number   modulus let's say 2 is 0 then i want to  remove this that means it will only remove   even elements not the odd ones so let's  just go ahead and increment the counter   and let's start subtracting so now if i click  on decrement you see that it does not remove   19. but if i click on decrement again it  removes 18. again 17 does not get removed   16 removes and so on so if i keep on clicking this  you will see that it leaves me only with the odd   elements because of this check right here right  so yep that's pretty much how you can retrieve   the attribute that's how you can set the attribute  and manipulate it in various ways you would like   and basically you can do this with pretty  much every or any single attribute right it   does not need to be a data attribute it could be  class names it could be ids it could be anything hey everyone welcome back and in this video let's  just take a look at how classes can be manipulated   with these get and set attributes right and how  you can change and add some dynamic behavior   in with the help of class manipulation  so what you can do is let's just say   for a yellow class which we have here and  let's just say we have a red class here   or the background of red so what i  can do is i can set the attribute   to class and i can say this is red or yellow  depending on what kind of counter value we have   so i can say if my counter is 0 count of  modulus 2 that means for every even ones   i want to set this class to be red and for every  odd ones i want this class said to be yellow right   as this is just you know just another simple  example of showing you how you can manipulate with   javascript so you can see now we get alternative  red and yellow stuff here we are doing a little   little communication with the css world  indirectly through html because we have   already defined a couple of classes in css and we  just communicate that via html attributes right   so that's how it works now this is one way  of manipulating css with javascript another   way of manipulating the css with javascript  is that you actually set the css style sheet   yourself and how you can do that is just like  any other property like in a html or in a text   there also exists a property called style  and the style includes a bunch of useful   you know css values which you can see we have  maximum height width height and width opacity   overflow padding all sorts of values exist  here whatever you can do with css you can   also do here with javascript right so in  this case i just want to do background   and i want to set this to red right and in this  case in the other case i want to set it to yellow   so that's it now when i try to do something like  this we still get the same result but instead of   relying on the css classes now we are actually  directly communicating with the css world using   javascript so we have skipped the html step where  we add the class and html communicates to css   but here we are just directly using our  knowledge of css style sheets in javascript to   you know just add some styles here right and you  can also customize it even further li dot style   dot let's say padding you can say as 10 pixel  in this case and 20 pixel in the other case   so in this case what will happen is  when i click on increment counter   you can see the red boxes are a little smaller  than the yellow ones because the red boxes only   have 10 pixels of padding so that's how you get  an awesome nice result but yeah that's pretty   much it that's how you work with css in general  inside of javascript we won't get into a lot of   these properties because if you do then you know  you can spend a lot of a big part of the day here   manipulating just css with javascript but  yeah you should read a bunch of documentation   about this on mozilla developer network you  should google about this if you're interested hey everyone welcome back and in this section we  will take a look at some of the most popular es6   plus features which you should know about so what  is es6 plus features well es6 if you don't know   what es6 is it stands for ecmascript standard  6 or es 2015 which you might have guessed came   out in 2015 so why the hell are we talking about  something which is so old well that is because   es2015 brought a major upgrade to javascript  standard and added a lot of cool features and   new syntax to it right and even though javascript  updates every single year after that but still the   majority of upgrades were brought into es6 and  all you see the lit the const all these stuff   are actually from es6 update right so the first  thing which is awesome about es6 is destructuring   syntax what do i mean by that it means let's say  you have an array like 1 1 2 3 you have an array   which is four five six and you want to create  a third array which is the mix of both so how   do you do that well instead of running into  loops and trying to figure out the logic you   can just destructure an array one another a two  and when you do that and if you console log this   you will see that the elements of both of them  are merged right let's try to do one without   destructuring and see what happens so when you do  it without destructuring you can see that you get   one two three as separate elements but four five  six in itself is a big element right so it's an   array of arrays and if you don't even destructure  this one you would see that it pretty much is an   array which includes a couple of elements and both  of them are arrays which include three elements   each right so the way you destructure it oops is  using these three dots inside an array and it just   it just temporarily blows out these boundaries of  the array right and it just puts them right here   in that particular place so you end up with  something like this right so it works with   works awesome with arrays even if you have an  array of object for example let's say you have   an array like name mayhew and let's say you have  an array like you know an array of objects name   john for example and if you do the same thing  you will see we end up with a couple of arrays   not a couple of single array with a couple  of objects which are now merged together   right awesome the next destructuring which you  can do and merging is between objects so you   can have an object one where name is mahul  you can have an object two where h is 22   and you can have an object three where you want  both of these properties so how you can do that   well you can use the same syntax you write three  dots and name and you write three dots not name   sorry you write three dots and object one three  dots and object two right and the moment you do   that you console log object 3 you will see you've  got a single object with both of these properties   and for some reason if the properties overlap  or you know collide so if this was john   then whatever properties written the last that  means in this case object 2 is destructured the   last will hold more um you know weightage  in the sense of overwriting so you see   the name finally is john and not mahul and the  age is 22. why is that because john overwrote   this name property because both were same right  so that's something you should also know about   and one final thing which i think you should  know here is that in es6 if you have the name   of the key is same as let's say this is key name  is same as cool for example this is the value   if the name of the key is same as the value the  variable which you want to set it to for example   if you want the key name to be key name what you  can do is you can just omit this key name on a   column syntax and just leave it like this and  keep on with your business for example some   other key some other key as 100 right so this is  perfectly fine you can see key name is still cool   even though you did not write key name as key  name even if you did write it like this it's   not wrong i mean but es6 allows you to skip  that part and just stick to a syntax like this hey everyone welcome back and in this video let's  just take a look at es6 arrow functions well es6   arrow functions is interesting because it changes  how we define functions in javascript not exactly   changes but also gives us one more option so  what i can do is i can create a function like   this right which is pretty cool right i can  just do whatever i want with this but the arrow   function also allows us to create a function a  function like this where we specify the function   in this manner right and pretty much whatever  you write inside this function as the body   would remain same inside the arrow function you  can have variable declarations you can call other   functions you can return values here it's fine  it'll do the same thing but there are a couple   of differences here the first difference is that  you can see it's defined with a const or a lit   right so what this means is that you can  call this function below its declaration   and it will not give you any error but if you  try to call this function above its declaration   then you will get an error that cannot access this  function before initialization this thing is not   a case when you have a function with a function  keyword so if you call this below the function it   will not throw you an error if you call this above  the function it will still not throw you an error   right now the reason for this is because by  default javascript takes all the functions   which are there and hoist them at the top  right the word is hoists hostems at the top   right so this concept is what javascript does and  that's why you are able to access this function   before even kind of it is declared in the order  right because javascript changes the uh picks   this function and puts it at the top so that  it's available for every single code but it   does not do that with these functions which are  which are arrow functions defined by constant lit   and therefore you have to you know  you will get an error like this   so that's one thing another thing is  also a difference in lexical scoping   of this but we'll get into that in  the more advanced course that's fine   but one more interesting part about this function  is that you don't have to write a return keyword   if you skip the function body as well so you  can just write 200 here for example and if you   console log this you will see that it returns you  200 right if you pass in a number and you get an   argument like argument here you can also just  power it to a 2 and you can see we get 10 000   here right which is what is returned from this  function so this explicit uh you don't have to   explicitly write it written here it is implicitly  returned if you don't have a function model   if you do have a function body well then you have  to just write return just like any other person   or any other function but otherwise this will work  just fine another cool thing about these functions   is that you can omit the brackets if you have only  one argument right so technically speaking that's   as simple of a function as it can be in javascript  in today's time right and yeah it looks pretty   cool it's clean it's decent and i can understand  that it takes an argument and powers it to two   and that's it it returns the value right but this  does not work if you have a couple of arguments   if you have another argument then you do need  brackets otherwise it will not work or even   if you have no arguments then also you need  brackets right the removal of brackets only   work if you only have a single argument then it's  fine it's even fine with brackets but yeah it's   your choice whatever you want to do so yeah that's  your introduction with arrow functions and you can   pretty much use them just like regular functions  for example if i have a const button as document   dot get element by id of increment i can say  button dot ad event listener click and instead of   specifying a function here which might be a little  verbose i can just specify an arrow function   like this right and i can just say console.log  clicked now whenever i click on the increment   button you can see i'm getting all these  clicked console logs which is pretty cool right hey everyone welcome back and in this  video let's just go ahead and discuss about   array functions in es6 and what does that mean so  you see that we have an array which can consist of   multiple elements and you can do whatever you want  to do it with it the best and the most versatile   way is to actually start a for loop on these  arrays right i less than ar dot length i plus plus   now you have the current element with arrow i  and you can pretty much do anything you want here   you have ultimate freedom right but sometimes you  might not want a lot of verbose syntax like these   so in those cases we have certain helper functions  which are declarative in nature that means you   just tell them what to do you just specify a  conditional and they will just do it so let's   take a look at first the first one is a new mapped  array and the way this works is you write arr dot   map and then you specify a function you specify a  function which is called with a functional element   on every single pass now what do i mean by  that when you call this function and if you   just console log this log the element and you  return let's say 100 for now from this function   so right now if you just console.log arr as well  and console oops not here console.log arr and   the new mapped array what you will see is right  here because of this console we got one two three   four five six seven eight nine whatever which are  the elements here and the final console log is the   original array and with a new array which has all  the elements set to 100. now why is that because   you can see i'm returning 100 from this method  and like i said whatever you return from this   method actually takes the gap or actually takes  the place of the new or the older value right and   very important thing is that this map dot map does  not change or does not mutate the original array   right so that's important this new mapped array  is completely different from the older one so now   if you want to square an element you can you  can every element you can just simply use this   you can see this is now the square of all the  individual elements or you just want to say   um eight times real quick i love code damn for  example if you want to say this eight times real   quick that's how you do that right and it will  be just there so this is one important function   new mapped array how we can create its equivalent  in this for loop let's just do that so i'm going   to say let's just say we do a new mapped array  for equivalent because we need an first of all   we need a new empty array because we don't want  to modify the existing one so what i can do is   for the map part i would just say for equivalent  dot push and then the expression which i have here   right so if i have just i love code dam i will  just do this if i had something like you know   which we had earlier element times 2 i would  just do el times 2 power 2 and be done with it   now the advantage of this function over this is  that this can be reduced a lot so i can trim this   down to an arrow function where it just gives me  an element and just returns me the square of every   single element right so that's all we need to do  in order to get the new mapped array but with for   loop we have to do so much more work right so  that's why these elements or these methods are   interesting let's quickly go over through another  one which i find really interesting and useful   and that is the filtered filtered array and what  this does is just like map it takes in a function   but in this case you don't return an element but  rather you return a boolean value either a true   or a false so let's say if i return false here the  filtered array right here would be empty right why   because for every single element in this array  we returned false and whenever you return false   it will exclude that element it will filter that  element out hence the name so if i return true   you will see that we get all the elements back  so if i do something like if element is less   than five then this expression will evaluate to  true therefore we only get one two three four   if element is greater than five then we will see  six seven eight that's it right so that's how you   can filter out elements like this so for example  you could have an array which is like friends and   you just have these friends as name x and h 17  then you have a second friend which is named y   and age 21 and you have a third friend which is  named znh22 right and you just want to filter out   only friends which are above 18 right so the way  you would do that is you will write friends.filter   element now this element is the single object  right so i'll say element.h is greater than 18.   and the moment i do that i will see this filtered  array actually consists of only two people y and z   right which is which are the people basically 21  and 22. it removed the x and the thing you have to   note again with filter as well is that it does  not create or does not mutate the array so our   original array actually consists of you know the  x element but the filtered one does not so that   is important but yeah that's pretty much it about  filter and map there's another one called dot find   which is also interesting which just finds the  element until and unless it gets a match tries to   find so let's say i want to find my friend x right  find x so i go ahead and say friends dot find   the element find the friend or you can just write  friend here if you want i want to find that friend   where the friend dot name is x right so when  i do that you will see that if a console.log   this guy find x you will see that it returns me  that exact element present in that array right so   i just get name x and 817. if i had something like  some some more prop as true for example then i'll   also get that right away because it just gave me  that object right away right so that's how you use   find as well pretty simple um allows you to do a  bunch of things and finally we also have a method   which does not return you anything in all these  above cases it always returns you something right   but this method right here does not  return you anything but just acts as a for   loop kind of right for do pass in just gives  you a quick access to all the elements and how   do we do that we do a friend start for each  let's say friend and right here you can just   use this information to print do whatever  you want right so if i do a friend like this   it'll just print out these individual records  right these three records in three different lines   so it's just a simple iteration over your array  now this could be um your regular area as well   in this case you will just get a number from one  to eight but yeah that's how you do that so yep   these were a few methods which i believe would be  helpful for you when you are working with arrays   in javascript and that is all for this video  hopefully you understood how to use them what's   the difference how to work with arrow functions  and why you would probably want them over a   generic for loop for the most part for loop is  also fine if you want to include it but sometimes   just to keep your code a little decent and clean  you can use these methods wherever appropriate hey everyone welcome back and in this video let's  just go ahead and take a look at es6 template   literals which is probably my favorite feature  of es6 introduced and that means you can now   i mean after es6 you can now first of all create  multi-line strings so earlier if you had to write   a paragraph about me what you would have to do is  this is me and then if you try to go to new line   this will break right you can see all sorts of  syntax highlighting problems as well in order to   fix this you would have to escape the new line  characters with these back backtick symbols not   backtick sorry these backslash symbols but there's  a new version of creating a string introduced in   javascript which is about me latest and in this  case remember i told you that quotes don't matter   in javascript right whether you write double  quotes or single quotes it's all the same thing   but in javascript there's also a third type  of way you can create these strings and that   is using back dicks and these backticks are the  symbol which are probably on the left of your one   numeric key and when you do this you will  see that this is me and this will not break   and you see we don't even need to escape  the new lines it will just work fine   right so this is pretty awesome what's  another awesome thing about this   is think about something like this my name is  mehul and i am 22 years old right and let's say   i had an object here saying person which had a  name property has mahul and an h property s22   now i want to inject these two properties in the  sentence dynamically so how do i do that i would   have to concatenate it like this i would need  to say person.name and then the same thing for   person dot h and i mean it's it's fine at this  point even because we just have a couple of things   to concatenate but this gets real get that gets  that this gets ugly real quick if you have a   bunch of variables you want to concatenate  right and even bad if you want to perform   some math or anything this is super convenient  with string literals or template literals here   the way we do it is i say my name is a  dollar sign then an opening and curl closing   curly brace and then write any  javascript expression you want   and i am and you see we don't have to ever  close the uh close or open the codes so it just   naturally sits in the sentence my name is this and  i am this and here you would see that we have to   include all these pluses you know these codes  we have to open and close the codes and so on   so template literals also allow you to include  variable output just like that and you can see   that about me latest is pretty much just like you  would expect it to my name is fehul and i'm 22   years old and a similar thing exists with about  me as well right basically the same sentence so   yeah that's pretty much how the um template rules  work in javascript and that's how you can use them hey everyone welcome back and in this video we  will probably discuss one of the most important   things in javascript that is a promise and we will  also discuss about fetch api within this video so   first things first let's say we have an external  file or an external api route from where we   want to fetch the data right in this case it's  data.json in some cases it could be even a remote   url right so what we want to do is we want to make  use of something known as fetch api which is a   function provided by the browser and this function  just takes in a url in this case data.json   and returns you a special object right this  object is not the response data because network   requests are unstable and asynchronous and can  take a variable amount of time so this does not   require return you uh you know uh the response  right away but it returns you a promise object   right this variable returns your promise  object so couple of things this is an object   and this is a promise you know one thing about  these two things what is an object right an object   is basically which you can where you can  access further properties or methods right   so what is a promise a promise in javascript is  basically an object which promises it does not say   that it will definitely but it promises to resolve  to a value in future sometime in future right   so what it says that okay right now i am this  promise object but i swear within two seconds   it says within two or three seconds maybe more  i will have a definitive value that's fair   but how do i know that it has got a definitive  value well in order to do that what we have to do   is we have to write a dot then on this even if you  write dot then you see we have three things here   dot catch finally and then so we start  with dot then and this dot then what it   does is that it accepts a function of  which the first argument is data right   and what is this data this data is actually the  result value right so whatever this promise said   if it resolves any time in future then this  function gets run this arrow functions in our case   and this arrow function will run with the first  argument being what this promise resolves to right   so in this case in our case of requesting  data it returns it results with the data   which is actually the response so if  i console.log this response right here   what you will see is if i refresh this let's  see you see we have this response right here   logged with us which pretty much has a bunch of  useful information but it still does not contain   the body of you know the response so how do we get  that well you see right here let's see if i can   see it here not really but this response actually  consists of something known as response.json   right and this method right here is another  promise so i can say this is promise object 2.   right so this is another promise which returns us  the actual data right so again this promises to do   that sometime in the future not exactly  right now so again we can bind it 2.10   and say once it has data once it has a result  just let me know right and i can just console.log   the data finally here and when i do this  you can see i see record and value finally   in the console right so what happened  here let's just quickly revisit first   things first fetch is an api from the browser  which returns you a promise object a promise   is an object which promises to deliver a  value sometime in the future it might be   uh in a second it might be in a couple of seconds  it might be in 30 seconds it might be in 30   minutes right it's not fixed when this dot then  would run it could run as soon as it has the data   well as soon as it has the data this dot then  runs and in this case in case of fetch in order   to read the response we can use a dot json here  which parses the response as json automatically   and then response.json also returns as  a promise it does not return us the data   right away therefore we have to do a dot then  check again and then finally we console.log it   now a great thing about promises is that you can  chain them that means every single dot then call   always returns a promise even though you are  not returning here anything if you return null   if you return undefined undefined you know  even if you do something like this then also   this is a promise object again this is the  beautiful thing about dot then that no matter what   you return from here it always returns a promise  with the value being what you return from here   with the result value being what you return  from here right so what do i mean by that   i can say a dot then here and then final data for  example final data and i can say console.log final   data is and then final data all right so what's  happening here is that you see final data is null   right why this is null because you can see i  returned null from here from this promise object   if i returned 1337 from here you would see my  final data is 1337. so that's what amazing about   promises that if you return a static value then  also it will be a promise if you return an actual   promise then also it will be a promise right with  the value being what happens when it gets resolved   so if you think about this a little what you  can do is instead of doing a den then check here   you can simply return this promise object  so you can say from subject to is returned   why would you want to do that because now this  gives you the advantage of saying that you can   nest these promises instead of just you know  instead of just chaining them in one go so now   you can see it looks much cleaner than previous  iterations and it's much better to read as well   right and you can just keep on going technically  speaking you can just keep on going and going and   going and going if you want you can just keep on  going that and it'll still work but there's no   need to right so that is a very basic and general  introduction to promises we get a little bit of   more introduction and in-depth introduction to  promises in the next advanced practical javascript   course so don't worry about them yet but yeah  you should know about promises and working with   fetch api like this so that is all for this one  i'm gonna see you in the next video really soon hey everyone welcome back to another video  course an interactive course i should rather   say not a video course on code damn which will  be on react now react is very special it's very   close to my heart because i have been using  react for a very very long time in fact in the   very first versions of goddamn this platform  which you see were built purely in react and   yeah i mean it's it's a great framework it's a  great tool to have on your list and i'm super   excited to start this course in order to tell you  the best way to work with react.js and whether   your goal is to get a react developer job build  your own projects get an internship whatever it is   i'm pretty sure that this course would be a solid  foundation to that goal so in this course you   will find videos and you will find hands-on lab  exercises like this but for reactions which you   have to do within your browser so make sure you  are doing those labs you are completing these   exercises you are practicing because practicing  is super important and i don't want you to   get stuck in tutorial help therefore we  will be completing labs in this course   as soon as we understand or as soon as we  covered an important concept there would   be projects to build there would be labs to  complete and i'm excited to start this course hey everyone welcome back and in this video  let's just go ahead and set up your development   environment first how would you develop how would  you write this react code which i'm talking about   so first things first react is a javascript  library that means it's not as different as   writing in html and css in javascript which we  have been doing so far in the last three four   five courses but with the react let me tell you  what happens with html and css and javascript   you know these are three static files you can  create an index.html style.css and script.js   include them into one another and you're done  with the react there's a build process in between   to convert the code you are writing the javascript  you are writing into something which browser can   understand i mean browser can also understand  react directly but let's just assume for now   you can assume that you write react in a way and  then the browser understands it in a different way   although both are javascript but there's  some differences which will address   so in order to make that javascript compatible  from what you're writing to what browser sees   we need an intermediate server a build process  right so for that we need a little bit of special   setup so in order to do that what you can do is  a you can set it up on your computer which i'll   just quickly show you or b you can use the code  damn react playground which we will be using in   this course so the best way to follow along is  to just use code damn playground and your labs   would also be in that interface so that would  be pretty much what you would probably need but   in case you want to follow locally that's how you  can do it go to your terminal your shell whatever   you have if you have one if you're on windows you  can open powershell or command line and write npx   create react app and then the name of the app  which you want to create let's say i want to   just create hello world and hit enter now the  moment you do that you will see that npx uses npm   and sets up uh create react app but create react  tab actually uses yarn internally and these are   like both package managers i'm sure if you have  seen the npm course in the learning path which   you are following on code damn if you haven't seen  pro it's probably ahead um but we will cover npm   and yarn in depth in those courses but anyway  the moment you do this you will see it will take   some seconds um sometimes it's fast sometimes  it's flow depending on your internet speed but   once it's done you will see that a folder is  created for you which you can cd into and start   your project and looks like we are almost done  here with just a few more updates there we go   now you can go into hello world and if you  open this in vs code you will see you can start   programming right in order to start the server you  have to write these commands yarn start yarn build   yarn yarn test is not required yarn build is also  not required just yarn start with starters start   the server this is how you set up locally another  way which is the recommended way which will help   you avoid all this clutter and setting up on your  computer and slow internet speeds is actually go   to code down playgrounds right here and click  on this react playground react 16 playground   we'll update this to react 18 and beyond  real soon so you don't have to worry about   the versioning i mean it might seem like it's  react 16 it's too old but we'll update this to   react 18. anyway so the moment you open this you  will see that you have a playground booted up in   seconds not minutes in less than 10 seconds  so once you do that you will see that you   also have a terminal at the bottom which we  can use pretty much to control all the parts   you know just restarting server or if you want to  navigate in the server if you want to do ls and   stuff you can do that right in our case we don't  want to do anything so we just start back our   build process which i mentioned like we  need a build process in the middle so we   started that back and right here in the hierarchy  structure you can see we have a bunch of folders   we can take a look at and it pretty much matches  very closely to what you will have inside of your   local setup public src node modules we hide the  node modules folder because that's something you   probably don't want to enter if you do want to  enter you can use the command line anyway right   so anyway once you do that if i open index.jsx  right here you would see that there is a bunch   of code already present in these files so what  is this all code and how does this work we will   take a look at that in the next video because  that's the video we'll be writing hello world hey everyone welcome back and in this video  what i want to do is tell you how you can   write a hello world program in react.js  and before that let's just take a look at   what exactly is happening right now at  this point when i open this in a new tab   so you see that we get a nice little page for  us which says edit src react.js but how does   this even work i mean if you remember from  in the internet fundamentals thing you know   that you need your server needs to send an html  file first right in order for anything to start   so if we take a look at this page source you  can see we have a bunch of html right here   right which is probably auto generated so we won't  go into the source that much what i would go into   is basically this public and index.html file  so what this file is this file is served   whenever you load that website right you load your  development setup so what this file is it's pretty   much boilerplate it's a template right you don't  you would not be working in this file in the html   file why because what you have to realize when you  are working with a framework like react you do not   basically write html in html files right you  construct that document object model the dom thing   which i was talking about inside of javascript  that is important that when you're using react we   don't write html and manipulate it with javascript  we actually create the whole html or you know   most of the part from javascript world itself  right so for that all we need to do in this case   is we have an index.html file we have this special  tag which you don't need to remember like you   don't have to remember this information which  i'm telling you but this is just just me telling   you how everything is working we have the special  tag which is pointing to a file slash dist slash   index.js and you might wonder that i'm not able  to see this directory anyway right any i'm not   able to see this directory anywhere so how does  this work well the reason this works is because   remember i told you that these are not static  files i mean these are static files but they are   served by the server called snowpack in our case  now this server could be any any server right it   could be create react app which we saw in your  local setup in this case it is no pack it could   be es build it could be any sort of server the  the point of the server is to build or slightly   or lightly build your code which is being shipped  to the browser right even in the development mode   why because if you take a look at this thing  right here you see we are writing some sort of   html in the javascript world right and of  course this is not supported in javascript   out of the box i mean you cannot really write  javascript you cannot really write this html   like thing inside javascript right away right  it will not work so why does this work well   because this is the snowpack right here which is  sitting right in the center injects some sort of   code or manipulates or you know just creates this  behavior which allows your browser to understand   what is going on here right so this is like super  important stuff in the sense that you should   always remember that whatever you're seeing  in this public dot html public index.html file   it might or it might not be true what do i mean  by that for example in this case slash disslash   index.js this file when accessed is not actually  looking at a at a file system file but is actually   served automatically by this process right here  right which just sees that hey if this page is uh   accessing this slash disk index.js file let me go  ahead and serve this page this generated code out   of the mem out of the build process so anyway what  you have to remember at all from this video is   that you will always work with javascript files  or most of the times you will work with javascript   files when you are working with react right you  would not be interacting with dot html files   for the most part right so this is super  important but yeah i mean once we have this   in case of just doing hello world let me just  go ahead and first of all delete this so that   we can do a little bit of minimal hello world and  i'm just gonna say react on.render h1 hello world   and h1 closes that's it that's all i would do  and we could probably remove this as well let's   see if i refresh this page because we had some  major changes out there deleting files and stuff   you can see we get a nice little hello world right  here so we'll go into this what is happening here   in this program and how everything is working but  yep this is your hello world the very first hello   world you have done on react and i mean you  don't even need these css files if you really   want a really really minimal hello world then  what you can do is let's see something like this yep i mean you can do this and you get a  very basic hello world in react so all you need   is a bundler which is snowpack which is running  in our case an index.html file which is like the   first file which is served and just a single  file saying dot render hello world and there   you go and this is basically this element  we'll get into this how this is working   but if you're smart you would be able to  see that we have a div id root on the page   and that's exactly what it's targeting right  so yep that's pretty much it for this video   hopefully you were able to write hello world  in react yourself if not we would have a lab   after this when you have to write so that's  how you would be able to practice with me hey everyone welcome back and in this video  we'll be taking a look at how the hello world   program works in react because it's super  important stuff and super fundamental to get   right when you're starting off so what i want to  do first is start from the very first line here   which is importing react from react and for those  of you who don't know what this import syntax is   i'm sure we have discussed this in the  javascript basics course some some course before   so if you are watching this and if you know  that's fine but for back for those people back   in the audience who are relatively new to this  this is just the syntax of new es6 import syntax   if i go ahead and create a file  let's say calculator dot js right   and if i go ahead and create a function add num1  num2 and if i just console or you know just return   num1 plus num2 what i can do is add a keyword  called export in front of this and now   any single file in this project can import  this function right so it's basically making   your code mode more modular so i can go  into this index.jsx and i can say import add from calculator right and  what i can do is i can say   console.log add five six right  and what this will do is um   let's see i don't think we'll get a result like  this so maybe we can just probably alert this   so what this will do it basically give me an  alert of 11 right console.log is probably being   blocked by snowpack here so a load just works so  i'm able to import this function from this file   now quickly i was able to see that i had to write  these curly braces when i'm importing now we would   probably discuss this more in the es6 syntax es6  import syntax but the tldr here is that if you   use just export then you have to add these curly  braces because you can do it for multiple multiple   functions or multiple variables you know looks  like we need to disable this alert there we go   and if i do a subtract for example and return num1  minus num2 this will also work so i can import it   like an object like syntax but not really right  so if i do something like this this will also work   you might sometimes see that your import is  not working just give it a refresh it should   and if you use something like export default  function abc and return 100 for example   then in order to import this into some file  you just use that without the curly braces   right that's basically the crash course on es6  import export syntax so right here you can see   i mean there's a lot to it don't really just  you know consider this as the ultimate tutorial   i have kind of like oversimplified a bunch  of things here as well but that should be   enough to get you started but what i want  to do here is i just want to show you this   react and react on what they are doing they are  basically importing these two important packages   react and react on and further down the line in  the further advanced tutorials about react what   we will understand is that react is nothing but  a ui library which handles trees right that's   all reactors react knows how to differentiate  how to diff not differentiate how to diff that   means take difference of two virtual dom trees and  just tell the renderer in this case the browser   what are the differences which needs to update  on the screen right so let's say if you had a   thousand hello worlds and i click on the third  hello world you do not need to repaint all the   thousand hello worlds right you just need to  repaint that third hello world that's it that's   all reactants to browser and that's all react  does and that is the function of react now people   realize that this behavior is awesome and we can  actually make it generic right so they took react   out of the browser and started using it in places  like mobile for example you have react native   now when they did that they also realized that  this has to be generic like i said so what they   did is they split react into two parts the first  part is the reconciler which is basically what   i said that this uses the diffing of trees to  understand what's happening and ui consists of   trees right whether you are on web whether you are  on mobile it consists of a root element then you   have a bunch of elements and so on and so forth  and what the second part was of the equation was   the renderer so in this case react needs to know  how to create elements on the screen for example   react needs to know about document.createelement  right when you're writing this h1 hello world   and react has to render everything in this  div id root then react needs to know how   to create this h1 right or how to create that  div so react dom has that job react tom tells   uh the react how to create these elements on the  screen right so yep that is how it works and what   is happening here is that react dom has to get  a first initialization point of how react should   start or where react should start rather so what  it does is it the first argument it takes is a   root element and the second argument it takes  is basically the place where you should mount   that react tree right whatever that is  so you have one root element which can   contain multiple elements and you need a place  to mount that on the screen so you just create   some random place you it could very well be body  but it's usually recommended that you just keep it   some div or something so that you can still use  other parts in your html so that's what we do by   default document.getelementbyid root and there we  go so that's all it does that's all hello world   program does but it does a lot of things right  and soon by the end of this course or maybe in   you know some other course we will also discuss  about the react 18 and beyond features which   include a bunch of interesting stuff right it  includes concurrent ui and stuff like this where   this definition actually changes where you don't  have react.render but something known as create   root we will learn about that don't worry about  that it's it's ahead but this is like the old and   you know solid way so far of creating react hey everyone welcome back and in this video i  just want to upgrade to react 18 so that we can   also use a bunch of reacted in features as we go  ahead because that's the latest react right now   and i'll probably update this whole course or  you know parts of this course if react 18 also   becomes outdated but anyway at the moment what we  have to do in order to just upgrade to react 18   first things first you can see we have a yarn.log  file that means we are using gyan as the package   manager here so i'm going to say yarn add react  at the rate alpha and what i'm doing why i'm doing   alpha because react 18 is an alpha at the moment  and that's what we need to have right similarly   i'm gonna do yarn at react dom at the rate alpha  right and the moment i do that you will see   that basically if i get package.json you will see  a react and react dom both are on react 18 right   awesome so once we do that let me just go ahead  and refresh restart the server here real quick as   well so yep if i refresh on this you see that we  still have pretty much no change at all hopefully   it's just the bundler is just starting off the  build process so there's that but yeah i mean   it should probably give us the same output more  or less let us hope and there we go there we go   so we have an h1 rendered on the screen but right  now we are running react 18. you can see it in the   terminal and we can also verify this real quick  um on how you can use a new react feature which is   known as create root so what is this root api for  now you don't need to worry a lot about this if   you're starting off but i'm just showing you this  so that you can show off to your friends that hey   you are on the latest and greatest react so i'm  going to say container here is my root element   and instead of reactdom.render i'm  going to say react dom dot create   root of this container right and i'm going  to say this is my root element and then i'm   going to finally say root dot render what do  i want to render h1 hello world there we go   and boom we basically have the same hello world  but in a two different in a different syntax right   earlier we used to have react.createelement now  we have react.createroot and if you're confused   it's fine i mean it's fine to be confused  because the real benefits of react.createfood   would be out there when you actually understand  react internally very well right which is the aim   of this course so anyway i just wanted to put  this out that we are using the latest course   the latest technology so that you don't feel like  you're watching some course from 2017 or something hey everyone welcome back and in this video i want  to go ahead and explain components to you now what   component is it's basically the fundamental  building block of react now how react works   is think about this in the following way let's say  i go to codedam.com which you can see right here   on the screen you can see that if you think  about it you can split this layout into multiple   components the first one is this header which  is sticking at the top and inside even header   we have these links right here right the next  layout which you can think of is these repeated   areas right you can see these areas are repeated  multiple times then this is this block right here   on the right which is floating so you can split  pretty much all of this into multiple components   and finally we have a footer at the end right so  what you can do is in react the way you work is   that you split this whole ui into different sort  of components and then code them all individually   and then use them together right so the first step  you need to do in order to start your programming   journey basically is to just go ahead and create  a folder let's say components right here right   inside this i'm gonna say i start with head header  dot jsx and if you're wondering about what this   jsx is the extension it just stands for javascript  extensible extensible javascript now what this is   it's basically the syntax which you are using  right so if i say for example function header   like this and let's just return header just  like regular html and i just say hello world   or you know not hello world too much hello  world is there already this is header   so what's gonna happen now is that when i export  this export default header i could go ahead and   use it right here like this right and of course i  have to import it as well so i'm going to import   it like components header right and the moment i  do this you can see on the screen i get this is   header which is pretty awesome because now what  i can do is instead of creating this as header   i can also create my initial app.jsx component  right and what this app.jsx component will be it   will pretty much be what we are doing right here  but instead of app basically i would say a div   and instead of h1 i would just embed our header  right here so it might seem that i'm just going   a little faster but we need this boilerplate code  in order to understand it better but the moment i   do this you can see now i can switch from header  to app and all i need as my root component is this   app right here right and there is no change  basically in the header part because it still   renders fine but now i can split this website into  multiple paths header for example i can include a   footer and in the middle there they will go the  content so i can say this is divided content   and i can say that this is pretty much  like hello there right so if i have a p   opening and p closing you would see that we  get a hello there which is pretty awesome   right now you can make all sorts of changes  here and this will work just like that   so yeah that's pretty much it that's  how you work with functional components   in react all you need to do is make  sure that you create the root component   as a single component and then that component will  be kind of like you know your bootstrapping way   of layout we can include header which are  different components we we can include bunch   of regular html and we can include footer etc as  well which we will see very soon as we proceed hey everyone welcome back and in this video  let's just go ahead and explore about jsx in   javascript and in react basically so what this  jsx is it's basically this weird syntax which   you're able to write which looks like html but  it's not html so what happens with javascript or   in react in this case is that earlier when react  was new what you had to do is you had to import   react first and then you have to do some weird  stuff like react.create class and then pass in um   basically an element and stuff like this and i  don't even know if this was create class or create   element or something like that but what you have  to do is you have to actually write in javascript   to create the html like structure right just like  with dom what we do we do uh let's say a ul is   document dot create element a ul right then for an  li i do the same thing document.createelement li   then what i do is ul dot append child li right and  then what i would do is for example i would say li   dot append child document dot create text node and  so on right so this is this is super verbose right   all this code all these four five lines of code is  doing is generating this syntax ulli three dots li   ul that's it so so much information is there  even though we had so much better syntax like   html already in place so what react does is that  it combines the best of both worlds that means   you get the best of javascript world that you can  compute and do all sorts of stuff in a function   but at the same time what you're also able to  do is you're able to write html like syntax here   now your browser does not understand this right  your browser by default does not understand this   therefore we have snowpack babel stuff like this  running which converts this compiles it down into   different syntax and that is what is understood  by your browser now that is awesome because   now we can as developers we can write in great  looking syntax and the browser can understand in   the syntax which it wants right so this looks very  very close to html with a couple of differences   which you will understand um but yeah that's  that's great right because now you can write html   like syntax in javascript but the problem here  is or rather i should say a great a great great   feature here is that you cannot write invalid html  right if i let's say if i remove the stiff tag   you will see the whole code breaks right now this  is because of the internal validation performed by   javascript on this jsx syntax which you're writing  but nonetheless this is awesome because now you   cannot write a broken html technically this would  work if this was in an index.html file but it   does not work in a react case so that's awesome so  anytime you are seeing this error message like you   know unterminated jsx contents that probably means  that you have messed up somewhere in your html   like looking syntax so this is one thing another  thing which is super important and critical in   which you have to understand that in javascript uh  in react at least for now at least right now when   you want to create a class to an element or assign  a class name so that you can style it with css you   don't use the class keyword right you don't use  the class keyword you use the class name keyword   right and why is that because class is a reserved  keyword in javascript and there are reasons for it   the way javascript is compiled how it gets  transformed so react developers just said screw it   we will not allow people to use class but rather  just you know just go with class name so a lot of   places when you are reading react.js code reactors  code bases old and new you will see that they are   using class name instead of class this is not a  special attribute if you take a look at the dom   for example if i open this in a new tab and let's  say i inspect this by taking a look like this and if i increase the size you will see if i go  to elements we get a class of dsf dsf right not   a class name but rather a class right here so this  is another thing the third thing you should know   about jsx is that you can write actual javascript  expressions right here right so you can do hello   two plus two like this and you will see that it  actually spits out hello four right here instead   of hello you know two plus two literally so in  order to write a javascript expression all you   need to do is open a curly brace and close a  curly brace and write whatever you want here   now you might think what can i write here and  what cannot i write here so think about this   in the following way you can write whatever you  want here as long as this is something which you   can also pass in a function call right what do i  mean by that let's say you had a function called   dummy right with just console logs whatever you're  printing let's say this is one argument right   whatever you're sending so you can call this dummy  with two correct you can call this dummy with   this a string value correct you can call this  dummy with an array like correct you can call   this dummy with x greater than 5 or you know not  x but let's say 4 greater than 5 is true then   hello otherwise world like this  like ternary operators and stuff   you can do this stuff right but what you cannot do  is you cannot write if something then do something   right this does not make sense you cannot pass  this as an argument similarly you cannot write   this if else statement like this right here  in this stuff right all you can write here is   what you can probably pass in a function call  as well and we will understand we will actually   understand later down the line that that is a  very good way to realize this because the syntax   is actually converted by babel and others  is actually converted into a function called   argument itself right so this jsx expression  actually becomes a function call argument   so anyway that's it that's all you have to  remember so you can say that if i am am i above 18 if this is true for example i can  say am i above 18 is true then i am   above 18 for example otherwise i just return  null and null is a special jsx element which   just not does not render anything right  it will not render anything on the screen   so if i make this false for example  you will see that this is then gone   right because well i'm not above 18 so it renders  null so instead of this you can say i am too small   right something like this so now you can see  if i toggle between true and false you will see   it just changes into a i'm mobile 18 and i'm  too small right so on and so forth so yep that   is your introduction with these javascript jsx  how react uses it and how you can work with it   as well we will be using a lot of these  components and a lot of stuff and we will   be playing around with some dummy applications  as well so make sure you are able to understand   this you are able to complete the practice  labs on code dam and move forward from there hey everyone welcome back and in this video  let's just go ahead and learn about something   important which is known as short circuiting  in javascript and how does that work because   the further concept which i'll be discussing  is based on that so we need to understand this   fundamentally in javascript first so in javascript  what happens is let me just go ahead and actually   do nothing here except for a simple console log in  the browser and i want you to guess the output of   what would happen right so just checking up once  you can see we get one so that's fine what i want   to do is i want to say true and let me just switch  it to terminal so you cannot guess it right away   and false so i want you to guess what  would appear in the browser in the console   if we take a look in the console you see we get  false right now the reason we get false is because   when you use double and in javascript what it  tries to do is it tries to keep on checking   the argument as long as it does not find one  falsely value what do i mean by that if i have   let's say hello double and mayhew double and  undefined if i have an expression like this   you see we get undefined in the console now the  reason for that again is because hello is a truthy   value right it evaluates to true when you force  typecasted into a boolean similarly mahul is a   string it's a truthy value but undefined is not  a string or you know it's not a truthy value it   evaluates to false that is why ampersand these  double ampersand will keep on checking which one   is a false value and the first value which they  find they will stop at that what do i mean by that   if i don't have any falsie value at all you see we  get mahul in the console which is the last value   so pay close attention what's happening here  if i have an expression which is just this   so if i assign this to a variable which  is thus just this we will get undefined   if i assign this expression to a variable we will  get mayhol as the value right if i have undefined   in between you will see again we still get  undefined because remember i mentioned it   will go ahead and keep on looking until and unless  it cannot it does not find the first false value   and in this case it just finds it because you know  it's the second value so it does not look forward   so this is known as short circuiting behavior in  javascript and why this is important because what   it allows us to do is do conditional rendering now  what do i mean by that let's say i have a div here   instead of just an h1 which just says  h1 hello world right and what it does   is that it has a paragraph which may be visible  right so this paragraph may or may not be visible   and the way this works is that let's say if i  want to make this an expression a jsx expression   remember we talked about how you can make a jsx  expression with these curly braces and in fact   as a matter of fact you can write html like  tags of jsx within these expressions as well   but what's powerful now about this is that i can  bind this to certain expressions so i can say   something like true and double and this thing  now what does this mean taking a look at this   it will try to evaluate and you know just keep on  evaluating as long as it does not find a falsie   value right and in case it does not find a falsie  value it will just return you the last one so in   this case this whole expression actually just  becomes this single p tag right similarly if you   had a false here then you see nothing appears on  the screen right because by default faulty values   just are not visible um in a jsx expression right  even if you have something like zero here which is   also a false value so you can see here here this  is a little fun why because you can see zero gets   rendered on the screen because zero is a false  value so this whole expression becomes zero and   react just shows you zero right but in most cases  if you know this is a boolean expression this is a   common pattern which people follow right a boolean  expression for example like age greater than 18   and and this thing so what does this mean let's  say if there's a variable called 18 uh h which   is 18 you can see it does not render it but if  i change this to 20 for example you can see now   we get the p tag on the screen right so this is  super super interesting and super important stuff   which is one way of doing conditional rendering  in javascript conditional rendering just means   that sometimes the element might appear  on the screen sometimes it might not right   another way of doing conditional rendering  is using ternary operator which you should   probably know about so this basically also  requires you to specify the false case   so you can say that if age is greater than 18  then you want to do this otherwise you want to   just render null or any false value right you can  also write false here but null is basically what   you should write because null is a jsx element  a jsx component a valid jsx component as well   all right i think this is pretty much  it all you need to know in order to   conditionally render elements we will learn more  about them when we work with state in javascript hey everyone welcome back and in this video let's  just go ahead and take a look at what props are   in react and how they work now we will be spending  a lot of time with these things so you don't have   to necessarily worry about them right away but  it's good to know about them so what props are is   basically in react what happens is just like in  java in html we have discussed if you go to a   page source for example you see we have this html  then it contains a head then it contains a body   and so on right so what we know here is that html  constructs a tree like structure which is called   as dom right similarly what react can also do is  it also constructs a tree-like structure which is   also called virtual dom but the point here  is that react can also have custom components   right so let's say we have a new component  here which is custom.dsx or not dsx but jsx   for now so if i have react from react and if  i do something like function custom like this   what i can do is i can just return h1 hello  me whole right so let's say this is a greeting   component which is like a very common example but  there you go so now what i can do is i can just   say custom like this and it will just surrender  hello me right after importing this like this   but the problem here is let's say i want to  change this name to something dynamic right   so this should be supplied by an api or something  so what i can do when i'm rendering this component   is i can actually pass it custom data alongside  this component which helps it to render properly   now this data could be optional this  could be mandatory depends on how you   have created the component but in this  case what i can do is i can give this   this give this function a new argument the first  argument called props now this props argument is a   custom object which is supplied by react to this  function when this is rendering right so you could   pretty much use these props in in here and react  will make sure that these props are available   when this function starts rendering now we know  this props is an object but what is it exactly   well this is an object in which keys are the keys  which you pass in here as attributes so i can have   something like name and the values are in fact the  values which you pass in the attribute value so i   have decided that i would just write name equal  to may whole for this custom attribute custom   function and what this would transform the props  into into something like this name as mayhem right   so what react is doing under the hood is that  it will transform this calling signature and it   will make sure the props which you receive in this  custom component is in the following object format   so all i need to do now is that go ahead and just  write a jsx expression here called props dot name   and voila you can see that i get hello meijo  instead of hello mayor which was also before   but we could change this to pretty much like  anything and it will immediately reflect right   so this is pretty powerful because now what you  can do is you can create a very generic component   like you know i think we discussed an example  of e-commerce website right so this could very   much very well be a uh item in in in the website  right it could be a singular item and then all   of the data which it needs in order to render  whether it's price whether it's title whether   it's description whether it's rating all of  that could be supplied by props and how would   we get that data in props through an api through  a fetch api call or whatever we'll discuss that   but yeah this is your introduction to props and  one more thing which is possible here which is   usually not possible in the html world that is  that you can supply this uh jsx expression as well   right so we discussed that you can do weird stuff  like two plus two here and it will evaluate into   four you can pretty much do the same thing you can  pass pass like variables you can pass expressions   you can do anything you want and you can see it  renders correctly if i pass an age like this if   i square this you could pretty much do a bunch of  stuff here with props and of course i mean you can   pass multiple props here so you can say greeting  message as hola for example and what you can do   is just replace this with props.creating message  and this will also work right so you can customize   it as much as you want it's up to you but yep  that's pretty much it for your introduction with   props we will be using this a lot again like i  say uh with jsx expression and everything because   this is more or less how javascript works and  react and how reactants itself is used a lot right hey everyone welcome back and in this video let's  just go ahead and take a look at how you can   basically add a dom event listener kind of  thing in react world now this is basically   how you would do exactly in javascript but with  a little bit of differences in javascript you   would have remembered that we use add event  listener to add certain events right in react   we do it in a little different way the way we  do it is that we don't use ad event listeners   and anything but we directly go ahead on the  element let's say this button says click me   and on this button right here i would  just go ahead and start writing on click   and see that the c of this on click is capital  this is important because if you make this small   your handler will not be called so what this is  is that first things first you can see that i'm   directly given giving it a javascript expression  now the reason for that is because i want to pass   in a function here it does not make sense for this  on click to be a string right so what i'm going to   say is i let's say this is button click function  for example and just create this function outside   our component which just says console.log i was  pressed right just like that so now what i can do   is i can just go ahead and start clicking this  button and you can see in the console i start   getting i was pressed so all you need to do and  all you need to remember in react is the way   the eventlessness work is that you have an on and  then whatever the event is um as an attribute or   as an as a prop rather i should say right so  this is a prop which you which you're passing   to this button which you react internally  binds to actual event listener on the page   right now the funny thing about this is that if  you actually open this in a new tab and try to   take a look under the hood of how this is working  you will not find this on click attribute in the   in the rendered dom right so if you take a look  here you would see there is no on click attribute   present here right and the reason for this is  because this binding although it works this is   internally binded using add event listeners and  stuff right it's not just directly an inline html   sort of uh function binding so this you should  remember but yep this is how you would work   with it and one more thing which you would often  find a lot of people doing is that they would be   defining their their callback functions for events  right into the component and this might seem like   a crazy thing to do that defining a function  inside a function if you have never seen it before   but this is pretty common in react world right  what you want to do is you want to keep your   functions as tight as possible so you would just  try to keep everything enclosed in a single scope   so this is perfectly fine practice and in  fact this is actually mandatory if this   function wants to access any state variable  or anything which we will take a look at   very soon but yep this is pretty much it how  you should go ahead and attach a click event   listener for example and that is how react  binds it to your real elements on the page hey everyone welcome back this is an important  video because in this one we will be starting   off with introducing the concept of state in  react so so far what you have seen is pretty much   useless till certain extent because we are not  using react to its full power what react is   really capable of it's capable of creating these  static pages and static stuff it's fine but the   true power of react is realized when you actually  add interactivity and stateful components now what   is the stateful component or what is state in  general so you see most useful applications or   most applications which involve some sort of user  interaction need to be stateful that means they   need to remember what has happened in the past for  example in games if you are playing tic-tac-toe   you need your game needs to remember the past that  is which one which box is square which boxes which   works as occupied which box has not been occupied  which who's the winner and so on similar thing you   need to you can do with react components as well  by introducing the concept of a state so let's   take a look at a very simple example in this one  let's say i have a counter like this which is just   a number you know like you can right away see that  i did not use a 0 right inside this but i gave it   a number right and we can get rid of the custom  component you can see i have a counter of 0.   let's say this button increase the counter and the  next button decrease the counter right and i have   this first function which just you know  pretty much just console logs i was pressed   now what i'm going to do is i'm going to import  a function called you state from this react   library and i'm gonna say stick with me here for  a while counter set counter is you state of zero   now there's a lot that needs to be explained here  so let me just go ahead and explain it first of   all before we even move forward so first things  first u state is a function internally provided by   react it's a function right it's a it's a regular  function you can think of but this function is   called a hook in react right so anything which  starts with use it's a convention technically   speaking but react considers anything which  starts with the use as a hook right what is the   difference between a function and a hook nothing  on the technical sense but if you are using a   react linter react will warn you if the u state  hook or you know if any hook as a matter of fact   is conditionally rendered that means all of your  hooks needs to be at the very top of the function   right anyway what we need to discuss right now we  can just forget about the hooks complexities for   later down the line but what we need to discuss  right now is that this hook right here u state   accepts a default value so what this default value  is is that when this app component would render   for the very first time this is the value which  would be used as the default value for counter   and the way i have destructured this  you would have observed that this   u state actually returns you two values right so  i could have also done something like counter set   and then i know this is an array so in order to  display this i would do a counter set of zero   so what this does you can see it gives  me zero if i re if i make this hundred   and refresh this page you will see i get a  counter of hundred why because this is the   default value which is available to us right and  the counter set of one is actually a function   so what that function does is that if i call that  function with any value that is what the zeroth   value or you know the counter value becomes now  this is important because let me just go back to   the previous syntax because that way you would  be able to see it in a much better way so now i   have counter for example now what i'm telling is  that let's say in this function i say the counter   becomes negative 250 right so the moment i click  on this button you will see that this right here   updates to minus 250. so let's go and you can see  it updates to minus 250. so what happened what   happened this is this is the exciting part and  this is the part where you have to be most careful   you just told react declaratively what you want to  do and react automatically matched it to your ui   super powerful stuff why because what  you have here is just a counter right   and a set counter function the moment you click  this button you scale this set counter function   with a new updated value and what react did under  the hood is that it repainted this ui it recreated   this function it actually recreated this whole  function right it called it again and it saw   that okay this counter variable now in the last  render it was 100 but in this render it's -250   so i'm gonna go ahead and show this on the  screen now the important part here is when   this function is called again so this  is like we can mark this as the first   render right so in the first render what happened  was that this u state the array value which   this returned was something like 100 and then a  function right this is what this function returned   but in the second render which happened  when the moment i clicked this button   second render let's just make this an  underscore so that it does not complain   what this u state returned was negative 250 and a  function important the same code everything same   but react knows that this is the second render  right react is aware about the state of the render   so this allows react to you know  basically allow us as developers   to use const even though this variable technically  changes in the next render right so this is why   you have to remember why you can use const with  state variables because state variables are not   mutated they are actually created again in the  next render so in this case in the second render   this is what you state returns therefore your  counter is minus 250 react creates a new tree   new render which shows you minus 250 here and  everything else is same right so yep that's   pretty much it that's how i think that's more  than enough on what you should know about when   you're starting your first you know introduction  with react state we will be using state a lot so   it's just getting started but yeah that's pretty  much it for state in react that's how it works hey everyone welcome back and in this video  let's just go ahead and complete our application   which we were trying to develop which was  just increasing the count of this counter   right so what i want to do is for you to think  about how i can increase the counters count by one   because that's what we are trying to do  right so if you think about it the most   obvious thing which might occur to you is that  hey let's just go ahead and let's start it with   zero first and let's just go ahead and set it  to counter plus one right because it makes sense   i mean and in fact it also works if you  just click on this button you can see   it starts on increasing right it keeps  on increasing and increasing and so on   now this is absolutely fine to for this  application and it will work just fine as well   similarly what we can do is  we can create another function   so we can just say this as increase  we can just say this as decrease   increase like this decrease like this and in  this one i would just say this has negative one   and now we have a little application for us which  increases and decreases the counter declaratively   and the reason i just keep on saying this word  declaratively is because you can clearly see   nowhere we are mentioning that the ui  should update or you know document dot   query selector dot inner text is equal  to counter plus one we are not doing   any of that we simply say that this is a state  variable to react and we control the variable   we only control the variable we do nothing  else and and that's it react handles the rest   and if any one of you have any doubts about why  don't we set like counter plus plus or anything   like that you can clearly see that we are using  const so counter is a constant you cannot do this   and we also discussed this briefly in the last  video but yeah i mean understand this carefully   that state variables always need to be updated by  their setters you cannot update them directly you   can technically create this as a lit as well which  would allow you to do this thing but react will   not care about this expression which you wrote and  this will be a bug right your ui would not update   so just a quick help tip out there that you need  to update your state variables with the setter   defined all right once you have this application  you can see it pretty much works flawlessly   but what i also want to discuss in this video  itself is that there is another way you can   increase um or decrease or do whatever  you want with the setup function now   this will be a little hard to me for me to explain  right away all the details why this works but what   you have to understand is that the setup function  also accepts a function as the value now this is   slightly different from an integer or a string  or anything like that because if i go ahead and   set this counter for example if i set this to the  string right and if i click on this you can see   we get this random string if i set this to let's  say i don't know like you know some random number   and again when i click on this i'll get that  random number but if i set this to a function   then something special happens because react  internally is configured to see that if there is   any native boolean string object any such value  like that then pretty much just set it directly   to the variable but if there's a function supplied  then do a little different things right so   maybe if we can just figure out the algorithm  of how the set counter works or you know the   pseudo code this is probably something like this  so set counter is a function we know that it has a   value right so what react kind of does i mean of  course you can consider this in a different way   react says if type of value is a function  then i want to do want to do something else   otherwise it just basically says set counter as  value right which is basically just internally   setting the value as the same but basically  just saying counter is equal to value   and then basically re-render kind of like this so  what does what happens here if this is a function   well if value is a function this is what react  would do so react would say updated value   is value of old value and then counter is updated  value and then re-render so what's happening here   what's the difference you can see a couple of  things the first thing is react will actually   call this function which you have passed to it  and the second thing is react will call this   function with an argument which is equal to the  older value awesome so in this case what we have   is a code where i can accept an old counter  value which i just told you right and whatever   i returned from this function would be set  as the new counter value that's the thing   so if i return for example 200 what's going  to happen is that it's just going to set   this counter to 200 and i had to just do a  quick refresh of the page but anyway we are back   and you can see i returned 200 from here and if i  click on this you see we set this to 200 now this   is important because now what i can do is i can  also say old counter value plus one right and if   i click on this you can see now we are actually  doing the same thing right but in a different way   this also works fine but here we are using  the older approach now you can reduce this   a little bit using arrow functions so you  can say this is basically old counter value   as old counter value plus one something  like this and an old counter value minus one and you're gonna see that both of these  things work just like before right this   thing is also working like before and  the other one is also working like before   so the question now is that which format should  you use should you use the functional update or   should you use the you know the value  assignment thing remember for now for   reasons which we will discuss in future when you  have a little bit of advanced react knowledge   whenever possible whenever possible use the  functional updation criteria as long as the   newer value depends on the older value so what  do i mean by that in this case you can see the   counter depends on the old value that means this  is a dependency the old the new value cannot be   computed if you don't know the older value right  that's why we were using counter plus one here   right similarly in decrease as well as long as the  value depends on the newer value try to use the   functional updation way and there is there are  a bunch of good reasons for this which we will   discuss later um but yeah this is just a general  rule of thumb if your value does not depend on the   older value at all i mean just like at wrote 200  here for example if you are doing something like   this where it does not depend on the older value  you might as well just go ahead and do it like   this it doesn't matter right it really doesn't  does not matter but yeah functional notation   is super important if your older value depends  if your newer value depends on the order value hey everyone welcome back and in this video  i just quickly want to create a very small   project which might help you just understand  a bunch of things and react again very simple   stuff and that will be a random quote generator  right and i just want to think you to think about   how you would create something like this so  what this would involve is pretty much nothing   it will just involve a button with you which will  just say click me and it will involve an area   it will involve an area called div where the code  appears right and this quote is a random code   so first things first we know because this code  is going to change this would be this should be a   state variable right because only state variables  when those are updated then react re-renders the   component right so we can import use state from  here and that's it now what i want to do is   i want to go ahead and create an array of quotes  which include all the codes which you want right   so something like if you are good enough never do  it for free even though you're getting this react   course probably for free right but yeah i mean  the better courses and the hands-on laps would   be paid but you get the idea then let's see  what else do we have i am not afraid of a man   who practice one cake you know something like  that thousand kicks one time but rather one cake   thousand times something like this  this is this is like one of my favorite   quotes so that could also be one then we  can have something like abc because i'm   lazy def ghi and so on but you can pretty much  use an api or anything like that so what i want   to do is first of all we can initialize this with  the you know the first code if you would like but   second thing which i want to do is i want to go  ahead and let me just refresh this real quick   i want to go ahead and create a function  randomize randomize quote and call it   just when i go ahead and click on this button  right so right here now what this button would do   is that we'll just set the state um to a new code  and remember that in this case we don't have to   depend on the previous state right so we don't  need to necessarily use the functional approach   so we need to generate a random element in this  array and the way you generate a random element   in an array in javascript is like following  so you say random code is codes and then   math dot random into quotes dot length and  then you just wrap it down into math dot floor so just to explain you what's happening here  if you haven't seen this code ever before   this right here math.random returns us  a number between 0 and 1 and it'll never   return you one right it will always return you  0 and probably a number like 0.99999 whatever   so it will never return you 1 that  means this number will always be smaller   than codes.length right so this means if  this length is one two three four five   this number at max could be four point nine nine  nine nine nine whatever right but it is finite   and then finally if this is always less than five  or you know in this case the length of the array   then math.floor will bring it down by one right  so it will make the 4.99999 in worst case a 4.   in any other case this will always lie between 0  and 5 exclusive of 5 and this will just flow it   down to 0 1 2 3 4. so it pretty much depending  on what map.random does you're going to select   one out of these so it's a random code it's a  truly random quote and you can just set this code   like this now when you click on this you can  see every single time randomly you get a quote   right see up i mean you can now use your css  imported css and style this a little if you want   but that's how you pretty much create  a random code generator with react   so yep that is all for this one hopefully  you are able to follow along pretty simple   stuff nothing fancy but yeah covers a bunch  of important concepts in javascript and react hey everyone welcome back and in this video  let's just go ahead and take a look at how you   can create a side effect when something happens  now what is the side effect well in general if   english is your first or second language you  know that side effect is basically something   that happens after you do something like maybe  taking a wrong medicine or anything like that   so similarly in react what happens as a side  effect is let's say you update this variable right   and you want a side effect to happen in your code  which is you know not necessarily bad like in in   the analogy but you get the idea so the side  effect is basically something which happens   after you have done something so what you do in  order to do that in order to have that listener   set up or a call back kind of thing set up  is make use of another hook called use effect   now what this use effect hook is is let me just go  ahead and actually show you before even explaining   this so import it just like this and use effect  right here just sits as a standalone hook   it does not return you anything it does not  do anything it has two parts however the first   argument is a function which can be anonymous  functions in the most cases it's just anonymous   and the second function is a dependency  array now if i go ahead and console.log i was ran right or i i ran or whatever   so what you can do is refresh this page for  example and you will see the first element   which you get is iran and that's it so what's  happening here well you see use effect although i   told you that this is a side effect but this also  runs all the times after the component is mounted   for the first time right so you see it was mounted  for the first time when i increased the counter   you know it got mounted again because we discussed  how the first render and the second render works   so this is the center second render right  but we did not get iran again because we   have no dependencies at all this function is not  listening for any dependency or it's not observing   any dependency you can see i can just keep on  decreasing the counter and nothing happens here   but pay close attention to what will happen  here the moment i give this a counter   variable as the dependency and remember this is  an array right this is not a regular just a single   value this is an array of values that means it can  accept more state variables if you would like to   so anyway now when i click on this you can see  any single time this counter variable changes   we get an iran information and if i try to  console log the counter here as well you would see   give it a refresh we start with an iran of  zero which is fine i mean it makes sense   now when i increase the counter you see  we get the console log of iran of 2000   careful on what i'm gonna say next now you can  see that the second console log which we get iron   of 2000 means that this use effect actually ran  again in the second render of the function right   so when you call the set counter and updated it  to 2000 it did not run in the first vendor how do   we know that because if it did run if it did run  in the first render we would have got a zero here   why because counter was zero in the first  render right in the second render we know   that this copy was created this copy  was created again by react internally   so this was like app and in this case this was  2000 and now we know that this returned at 2000   and therefore this function when it ran it console  log 2000 therefore we know that this function   actually ran in the second render and not in the  first render right another thing with use effect   is that it runs after the component gets mounted  or repainted so what do i mean by that this means   in the second render this whole thing  was mounted and visible on the browser   before the console log appeared now this  might be hard to actually prove or justify   until unless we put a debugger statement  or anything something like that but   you can trust me on this one right that the use  effect actually runs after the ui is mounted right   so what's the use case of this well let's say you  have a to-do list where whenever you update a list   order you save the um order or anything on the  back end right so in that case all you need to do   is create a use effect add an order or something  like that which a variable which defines the order   of the list and then basically just write a fetch  request here that whenever something changes or   maybe like a local storage save request here you  just update it automatically again this is super   declarative why because you're telling it that  this code has a dependency on this one your net   delay you're not telling it how to execute it what  should happen when should it re-render and so on   right all of that is managed automatically um by  other code on the on in your code base right so i   hope this makes sense if it does not then don't  worry yet because there's so much we need to do   and we will do uh in order to solidify  these concepts but yeah this is a start hey everyone welcome back and in this video  and i think in this whole section of many   section which we have we will build a to-do  application from scratch using all these   videos and by the end of this section you would  probably also have a full blown lab where you   have to create the same application pass the  test as well i'm super excited to start this   and let's just go ahead and take a look at how  you can build one if you want what you can also   do is open that lab at the end of the section in  a new tab or anywhere on and start building it   as we learn and use these videos as a you know as  a unblocker if you would like to you can feel free   to just go ahead and start building it yourself  as well you pretty much know all the information   more or less you need to know but we'll cover  a bunch of concepts in these videos as well hey everyone welcome back and in this video  let's just go ahead and start creating our   to-do application in react how it can work  so first things first what i'm gonna do is   create a div in this application space and i'm  just going to give this an h1 of best to do hap   ever like why not all right so what we want to do  is we want to do a couple of things in this app   the first thing is this should have an input field  of course this would be an input type text you can   give it an id or a class if you want to style it  with the css but i'm just going to keep it raw at   the moment and what i want to do is also create  a ul unordered kind of list which just shows us   our tasks here whatever we enter now a couple of  things here first thing is whatever i'm typing in   this i need to have a reference i need to have a  track of what i'm typing why because the moment i   hit enter i want to take this text and append  it as a task and second thing i want to just   take care of all these to do's in in themselves  right so what i'm going to do is i'm going to   go ahead and create a state variable called to  do's and set to do's and we know that these state   variables can be pretty much anything right any  sort of data type which we have in javascript so i   can keep this as an array of to-do's right instead  of just having a single string which you would   probably need to split and do something which will  also get ugly arrays is best suited for this task   so now once we have this to do's what i want to  do is i want to render this inside this ul tag   and how do you render elements what is  the standard practice how do you do that   well what you have to remember here is that es6  array methods play a very important role when   you are working with javascript inside of react  because whatever we write is a jsx expression   right we know we discussed in jsx that we can  only write expressions which we can also pass   in as a functional argument because technically  that's what it gets compiled down to   so what we usually do when we are writing  jsx expression is we do not make use of   for loops like this for let i is equal to 0 is  less than to do start length i plus plus because   you see we cannot really write this this sort of  code right what we need to write here or what we   can write here however is the array methods right  so what we can do is i can write for example to   do's dot map to do and then i can just return  an li which has this to do so let's just take a   look at what's happening here let me just add my  name mahul and let's say john as the second name   so what's happening here is that we took both of  these elements right for each of these elements   dot map runs this function and returns a  new array right a new array of information   so you can see i ran this and i you know just put  an li around them now this thing right here is   equivalent for me storing allies directly inside  of the state this is also fine and completely   acceptable so if i do something like this and i  just go ahead and directly try to use to do's here   those two examples are the same thing right if  you write these elements directly in the state   like this or you just map it over and then use  it here both are same things because this thing   as i said in the jsx video also gets compiled down  to a javascript like representation anyway right   so this is one on the same thing but the reason  we avoid storing it in this way is because this   gives us less flexibility i mean sure there  are ways to extract out um you know this text   from this but it's ugly right it's complicated so  what we do is instead we keep it in the simplest   data type we can which is string in our case and  then we construct it on the fly what we want to do   using functions like map or filter or anything  which returns us an array right because   jsx can display an array with you know the jsx  elements right like i showed you you can have a   couple of lis here and you can just display that  array as it is right and it will run into properly   so that's important so anyway for now i can  just say this is my example and be done with it   right so that's it now if i add another name  here let's say hello for example you'll see we   have another one so what we want to do is once  we have the setup is whenever i write something   and press enter then this should uh basically  append it right here so i'm going to divide   this task into two things first of all i'm gonna  just create a button which will say create to do   and then we will also add the enter functionality  which i was talking about so with button we know   how to access the event which is using on click  so let's say this is create to do like this   and what i do is inside of this create to do  i say i want to append this to do whatever we   have written now before we are able to do that  i also need to extract out this value right and   in javascript or in react rather i should say how  you do that is you set an attribute called value   to a state variable or to any particular  value right so let's say if i set this to   one two three four five now what will happen is  that even if i try to edit this i will not be   able to edit this input field and trust me i'm  typing on my keyboard at the moment but i'm not   able to edit this because this value attribute  if set if this value attribute is not undefined   then react will consider this as a controlled  component that means this value has to change   here itself if you need to update the ui right and  because this is a string static value this will   never happen because you know the string would not  update automatically so this has to be a variable   and the way we do this is the follows  so i'm going to say this is let's say my   task i'm going to say set task and i'm  going to initialize this with an empty   string right because that's what our value  would be initially so this is my task right   now still you would see this is not very helpful  because i'm still not able to type and the reason   for that is same because you know this task  is empty string and we are not updating this   so what we want to do in order to make sure  this control component behaves properly   is we want to say something like on change  and then i want to do something here   on change event receives an e which is just like  the javascript event which we receive which we   have also discussed in the javascript course and  what this e does is that's you know e or event or   whatever you want to name it this event contains  useful information about what has happened or what   has been entered in this text field so what i  can say is i can simply say set task to event   dot target dot value right so event.target gives  us this input field and the value gives us the   current value which is in so now if i start  writing you would see that i'm able to write   pretty much just like i would used to you know in  a regular input field but the advantage here now   is that on every single keystroke this on change  runs and we always have the updated task value   right with us and yep this is important  because now i can access this task value   directly whenever um this create to do is called  so what i can do is i can just say console.log   the task value is this task like this and if i  go to browser logs for example and start typing   and click on this button you will see i get the  correct task value right here right if i update   one two three click we get the correct task value  always now it's simple right here to update this   because all we need to do is we need to set the  to-do's and append one more to do here right   now remember what we discussed about the set state  in this case the next the future state actually   depends on the current one why because we want  to append this to the existing array right so in   this case we will use the functional updation  methodology right so i would say old produce   and what i want to do is return all my  old to do's but also add my task like this   to that right so what's happening here is that i'm  just appending this particular new value to these   old to do's right and that's how i'm doing this so  if i try to go ahead and add a task one here click   on this to do you can see we have a task one added  and if i go ahead and try to add task two click   create to do we have a dash too and pretty much  you can do anything you want here and this will   be created now it has a bunch of things we can  improve and a couple of optimizations as well hey everyone welcome back let's just go  ahead and proceed with our optimizations   and things which you can add in the to-do  application which we looked last time so   first things first what i want to do is whenever  we have this on change event fired i also want   to probably just you know blank out the task  because right now if you add it you see the   task still remains here so that's one thing which  i want to do so the way i would do that is just   by setting the task as empty like this and here  what might happen is you might think that hey   what if this code runs before this code  and then this task is old and it does not   get appended right and you might be right  right so if we go ahead and try this out   and create a to do although this kind of works  but i would say we are in a scary territory   because it is not given that the react executes  this part of the code synchronously right it might   very well be executing it asynchronously so if  i go ahead and console.log one here and if i go   ahead and console.log 2 here and if i go ahead  and write a statement and create a to do you can   see we get two first and then one later that means  react is not executing this function synchronously   right so a safer way for updating this would be  actually to set the task as empty here and then   use the task like this right so this is what  probably what is probably will stick to as well   but yeah the moment you do that created to do  it's working just fine now the second thing   which we can do is like i said right now the enter  does not work right for us now there are a couple   of ways to fix this the first way to fix this is  you actually have a key down event on this input   field as well so you have something like on key  down and you just say try to check for enter key   something like that and the way this would work  is that you would just go ahead and try to look at   the event which you receive here so event received  as this event right here now if i try to go ahead   and type something here you can see that we have  a lot of console coming in so instead of looking   there we would probably stick to the native  console right here and what i would do is write   one two three for example and let's just ignore  this exception for now because this is because of   the web console script which is custom to go  down to editor you would probably not see this   by the time maybe you're watching this video  but anyway what this even contains is you can   see the key and the key code so if i try to hit  enter here you would see the event which we get   has a key code of 13 and a key of enter right so  we could very well just use key code right here   and i can just go ahead and say that if e dot key  code is in fact 13 this means that we have got a   enter input in this field right so you pretty  much just want to run the create to do function   because we already have done the work in  that right and yep that's pretty much it   so if i go ahead and give it a refresh for  example try to enter something and hit enter   you would see it just works just like if  i enter something and click on the button   right so this is pretty cool this is one  way another way which is less javascripty   is to actually go ahead and stick to the basics  stick to the native things and what is that well   you might have seen that in html world you already  have this behavior where you enter something   hit enter and the form gets submitted right if you  go to very old sites which are just constructed   with html you will find this behavior where you  just enter something in the text box hit enter   and the form gets submitted right the page reloads  because html actually includes this functionality   internally so how do you execute this thing  you wrap the whole thing inside a form element   and this is just html there is no javascript or  there is no react part involved in this one right   and the second thing which you do this is fine you  can keep this input but the button which is the   button which on click or you know should happen  or it should be present how it should be present   is of type summit right so this button should have  a type of summit why because if this does not have   a type of summit then this form does not know what  should happen if you hit enter on an input field   so right now what's happening is that this on  click would work fine but if you hit enter you   will see that your page reloads right so if  i hit enter you see it gets entered but our   page also reloads and why is that because that is  the default behavior of forms in html right they   just reload the page without any attributes  if you don't give it a path or anything and   even if you give it a path it'll reload it at  that particular location so what we want to do   is we want to add an event listener on this so i  want to say on summit i want the create to do to   run and right here what we will observe is that we  don't no longer need the on click on this button   and why is that because whenever you click on this  button as well the create to do function fires   right so if i write this click you can see it  refreshes or if i write and hit enter it adds the   text and it refreshes now the only thing which  is left is we want to first of all remove this   and second of all we want to just make sure  that the page is not refreshed so i can also   remove this enter key function because we no  longer need that and all i need to do here is   grab the event which react gives us on  the summit and just say event dot prevent   default now all this is going to do is say  to browser that hey we don't want the default   behavior which happens when this form is  submitted that's it now if i go ahead and   write hello and hit enter you can see it works  fine world works fine one two three works fine   works fine right i can pretty much do anything and  everything i want so this is also a neat hack or a   not exactly a hack but this is actually a  standard practice which you should know about   instead of just relying on on key down right  because this is also technically speaking a bit   performance beneficial right it's a it's  performance is better than just having   on key down on every keystroke and doing that  stuff but yep that's pretty much it that's how   you're gonna detect all of the enter and  button clicks and everything and create a   very basic to-do app in the next video we'll  see how you can also remove these items right hey everyone welcome back and in this  video what we're gonna do is go ahead   and take a look at how you can remove these  elements as well on a click or anything right   so what i'm gonna do is i'm gonna instead  of returning just an ally we could probably   return a div or something else maybe a div  insider live or allie inside div doesn't matter   but what i'm gonna do is do a couple of things the  first thing is i'm gonna go ahead and remove them   and the second thing i'm gonna do is actually  change the structure a little bit so instead of   setting the task like this what we will do is  we will add a to do as task an id and an id   as a unique id right for example in this case  it could just be a global counter or a global id   and we can start it from zero and why am  i doing this i'll let you know in a moment   but once we do this now we have an  array of objects not just an array   of strings right so in order to render this  properly what we need to do is to say to do   or you know not to do but let's say this is  item and then say item dot to do right so now   if i go ahead and hit enter you can see it still  works fine but we have done a bunch of changes   now the second thing we can do is we can say the  key of this item is in fact item dot not to do but   item dot id right now this item dot id like we saw  is a global id counter which basically is unique   now right so we don't have to worry about  just having an index pretty much like this   so we can just have this as global id and we  can just keep on working um like we used to do   so so once we have done that what we want to do  next is add a button right here which just says   delete for example and what i want to want  this button to do is whenever i click on this   it should delete item you know somehow which  we will see how we can do that so it's just an   empty function for now which will get called  but now what i can do is when i enter this   well not at the moment but let's just see if i  give this a refresh enter this you can see now we   have a small delete button with us right so what  i want to do is the moment i click on this delete   this should just disappear from the  screen this should just be deleted   so how do i do that well in this case we  need to give it a little bit of more context   right what we should do is that we should go ahead  and instead of calling it like this we should go   ahead and call this with the id of the item so i'm  gonna say delete item and i'm going to specify you   what the id of the item is right in this case  it's whatever the id is at the moment now what   happens now is i'm receiving the item id  right which we increment every single time   so dsf dsf has an id of one maybe we can also  display it just for the sake of clarity right   at the time of frame rank so now you can  see the ids of these elements as well   which are also the keys and which are also the  values which we are passing to this function   so all i want to do now is i want to set the  to-do's to certain list which does not include   that id which i have right and again you can see  the new state depends on the previous state so   again i'm going to use the functional notation  so i'm going to say set to do's old to do's   and then what these old to do's would be is old  to do's dot filter item and then item dot id is   not equal to item id now let's see what i'm doing  here first of all i'm using the functional update   updation notation so that's what this functional  call is second of all i'm trying to return an   array here where i'm trying to filter out all the  items where the id is not equal to the one which   which has been passed right which will result  in not copying the only id which i have clicked   all right so once that has been done if you click  on the delete now you can see it updates and all   the other ids stay same so zero two three four now  the reason i did not use index as the key and as   the id and as the thing which you need to pass  is should be clear now right because the index   would change the index would become 1 2 3 again  right so it is something which is not unique   right so we broke our contract with react  when we said that hey our key would be unique   to the item which we will bind because if  this was just index which we used earlier   then this element would become index number  one let's just go ahead and refresh this and   use some real items so i'm going to write  apple mango banana pizza and burger right   now you can see all of these ids here and if i  go ahead and delete banana you can say you can   see that pizza still stays at three but if i was  using index you could clearly observe that pizza   comes at 0 1 2 so it will be 2 right so that's  why i told you know let's just go ahead and   create an id out of it and whenever possible  you should use a globally you should use a   locally unique id right not exactly globally but  a locally unique id but yep this is pretty much   it that's how you can create and add more elements  and remove them as well with a click of a button   right and yep that completes pretty much more or  less your basic version of to do app i mean sure   you can have a bunch of functionalities here where  you know you have a little bit of layout as well   and you can also store this in local storage and  stuff you can do that but this is the bare bone   structure which you require where you learn  a lot of about a lot of react concepts and   this is you know pretty much touches on  a lot of important react concepts as well   so yeah that's pretty much it for this video  hopefully you were able to follow because after   this video you will probably also have a lab where  you have to create this to do application so make   sure you do that by yourself it will reinforce  all the things which you have learned here hey everyone welcome back and in this video we'll  be learning about something known as react router   in react and how you can work with it so you  can see i have a fresh project with me here   um with basically nothing set up apart from react  itself so we can start with scratch right so   routing is a very common practice right  you can see even if you take a look at   the url at the moment in the browser  it's cooldown.com playground something   so what this means is that i'm on a on a route  which is having certain parts like the path   is playground then inside of playground  i'm inside react snowpack v3 and so on   so you can do the similar thing in react right and  there are pre-built solutions for you to handle   that right and one of those is react router so  first of all let me just go ahead and clean this   up a little bit so it's not as scary as it looks  so it's hello world for example right and let's   just replace this and what i'm going to do is i'm  going to try to set up a react router for us here   i'm going to split my terminal and i'm going to  start writing by saying um yarn add react router   dom now remember i wrote react router dom because  that's the name of the package right now what this   package does what this package truly does is that  it allows you to work with certain browser apis   to for the lack of a better work word fake a  url into believing into user believing that   you are actually on that page and i'll tell you  what what i mean by that just stick with me here   let's first of all once this installs let's  just do a hello world here right so it is   done and what we can do now is we can import  a bunch of components which allow us to do   basically what i'm talking about so i'm going to  say import from react router dom and what we need   is a couple of things the first thing we need is  a browser router the second thing which we need   is a route right so what does this mean this means  that i have a router component which is which is   going to be a top level component which is contain  all these routes which we will define right so   the first thing i have to do is i have to  define this as the top component in my app right   now once i have defined this component as the  top component in my app i have to define these   individual routes which needs to be you know  matched so what i'm going to do is i'm going   to start with a route and end it with a route and  i'm going to say the path what this path should   be what the path should match right so this path  should match let's say hello world in our case   once i do that anything i write here inside of  this would be rendered only and only if this   matches the hello world route so let's say  this is i am on route hello world right and   just let's just go ahead and actually  wrap this whole thing inside a div as well   and i can just say right here i am  just a h2 right something like this   all right so once we do that if i give this  page a refresh what you're going to see is once   snowpack is done compiling a bit of dependencies  let's see all right so it's done and we can   see now that it just spits out i'm just  finished too so if i open this in a new tab   you can see we still get i'm just an h2 because  we have defined hello world on this route so let's   just go ahead and visit that hit enter and you  can see that we get a 404 and let me tell you why   do we get that now the reason we get a 404 when i  was at hello world is because snowpack right here   is not configured to send our index.html file  which we have here on every route right so let me   tell you what's happening here exactly when you  visit a route like this or you know in general   a home page like this what's happening is that  snowpack or your backend server in this case   which is snowpack since this index.html file  right which contains certain scripts which boots   up react which boots up this component and this  component realizes what what path you are on right   so in order for this component to run this needs  this index.jsx file this index.jsx file needs this   index.html file therefore in the first place your  backend server should send this index.html file   for pretty much everything but it does not  happen in the case of front-end applications   or you know you have to configure it somehow  so in this case that's why we get a 404 error   when we try to visit that url directly but what  we can do instead is we can use another component   here which can allow us to fake redirect or fake  navigate from our application itself so what i can   do is right here instead of you know doing i'm nh2  we can define a small navigation and it would be   naf like this right you can also put it in div  it's fine but i'm just going a little fancy so   what you can do is you can say a link to and then  hello world so it's like ahref but it's for react   routing internal react routing and i can say  go to hello world because we only have a single   link at the moment we can also define something  like link to slash and i can just say go home right so the moment we have something like this  you can see the first thing we see is an error   that you should not use link outside a router so  let's just go ahead and fix this by bringing the   router but actually let's just make the router the  actual you know the main child of the page so once   we have that you can see we have our links coming  up and we can actually just throw in a unordered   list here for it to just be a little bit prettier  right and let's see looks like i have to configure   prettier on this editor right it's just it's just  a waste of time manually formatting all this code   maybe we'll do that probably sometime later  but now you can see that it has started looking   just like you would want it to look like right  so now if i click on go to hello world you can   see you get i'm on the route hello world and if i  open this in a new tab take a close look at what   happens to the url up here when i click on hello  world you can see the url actually in fact changes   to i am on hello world right i'm on route hello  world and if i go back to home you're going to   see the url changes back back and forth back  and forth right now if i refresh on this page   you're going to see we get the similar error  and i explained you the reason why because in   this case when i click on this if i go to inspect  into the networks tab and if i let's say remove   this and if i refresh this one more time or  you know maybe go back to the home page oops   refresh clear this out and if i click on this go  to hello world now you're going to see no network   request has been made right you can see i'm on  all there is no filter and no network request   has been made that means react code did not  go to server to check if this route existed   or not it handled this routing internally  with the help of the browser router right   so yep that is what is happening when you refresh  this it actually goes to the server right and the   server says that hey i don't know like what this  route is if somehow you were able to go ahead   and return pretty much the same index.js file for  this route as well you know this route right here   as well you would be able to serve the you know  the right code even on refreshes which is exactly   what you want on production applications but  it's fine on development if you want to skip it   but yeah you can configure that here as well if  you would like but yep that is pretty much it   in terms of introduction to the browser router  and how you configure it we will pretty much   take a look at a bunch of other things in the  upcoming videos but yeah that's a solid start hey everyone welcome back and in this video  let's just quickly go over and take a look at   an exact route match what does that mean   so let's say i define a route which  is our home page and i just say i am on home page right and if i go  ahead and refresh this tab right here   what you will be able to see is that we get i  am on home page which absolutely is fine but if   i go to the hello world route you can see that  i get i am on route hello world but i also get   i am on home page now why is that well this is  because by default the behavior of these routes   is to match the route first as a path and then  pretty much anything after that as well so do   i mean by that it means if you're on home page  basically what's happening is that you are pretty   much routing the router matches the slash which  is at the end of the url but anything after the   slash also matches right so this route here would  also return you i am home page if you visit this   with a link right so it i can just go  ahead and for example create a go to   go to random link and i can just say this  is some weird route and if i refresh this   again and if i click on that random link you can  see i still get i'm on home page why because it   matches anything after this slash which is pretty  much anything similarly this route would appear   every time i have i'm on hello world or i'm on  pretty much any other route as well so i can copy   this actually revert back and change this to this  and if i refresh this click on the link you would   actually see that i still get i'm on hello world  even though i'm on some weird route now to order   to fix this problem all you have to do is always  and always it's a good practice set this exact   um attribute on your route component and this  basically just means exact true right in jsx   you can just omit the the true bit if you like  it's just a style so even if you just write exact   like this it just means exactly said to true right  and the moment you do that you're gonna see that   now it's actually much stricter now if i click on  the hello world you can see we no longer get i'm   on home page i get it here but i don't get it here  right and on the random link you can see we pretty   much get nothing so this has solved our problems  which is you know the weird behavior which we were   getting with the routes so this is something  more or less what i feel is a common practice   which you should anyway do right whenever you're  defining routes just put an exact keyword because   in most of the cases it will do what you expect  it to do right instead of having these edge cases hey everyone welcome back and in this video we're  going to be taking a look at dynamic routes in   react which is also pretty helpful especially in  case when you're building dynamic apps which you   probably will be when you're working with react  so let's say you are building a social media app   or whatever and you go ahead and you want to have  a route which basically catches everything after   user right so it could be a username mayhole  or any other name which you want to capture   now if you think about it if you remove  the exact keyword that would kind of   fill our purpose but this is a bad hack right  because now you're not only just catching me   but you're also catching me who'll slash this or  slash this or slash this right so this is clearly   not a solution so we do need exact but what we can  do is we can define a dynamic route or a dynamic   piece of the path here and the way we do that  is we put a column and we write the variable   name which we want it to be called right in  our case let's just say we just say username   as the variable name right and what  do i mean by variable name we'll see   but what this means is i can just go ahead  now and i can just say i want to render a   custom user component with me right i can just go  ahead and create this function user component and   probably in a separate file yeah let's just go  ahead and create it on a separate file user.jsx   function user like this we can just import react  real quick and once we do that we can just say   i am a user component right and don't  forget to export this and once you do   that you will be able to see that if i refresh  it let's see but i haven't imported it yet yep   also need to import user component from user.jsx  right so the moment i do that you're gonna see   that if you just go ahead and create a  bunch of links here let's say profile one   which is user slash mayhew right let's just  create this link a couple of times five two three   four right mayweather xyz go damn playground  whatever right so we have four profile lengths   and now whenever i click on one of them you can  see we get i am a user component right that is   fine i mean that's great progress but how do i  capture this part right on which path i am on that   is what this variable name is and that is what it  could help you with now in order to capture this   what you have to do is you have to use a custom  hook in react router right and the way you do that   is you call this hook but you know what this hook  is called rather i should say is use patterns   right from react router dom and actually  i'm in the wrong file this should be   user.jsx so import this and i just go ahead  and call this right here now what this use   param hook returns this returns us an object  of all the all the parameters which we supplied   right so if i go ahead and take a look here you  can see we only have a username as the variable   so this will return us an object the  username being the value of the path right   so i can say this is username i destructured  restructure it like this and i just say the   user is something like this right so you can  see now i'm on the user component playground   if i click on profile three i'm on code damn xyz  and mayhol right so this helps us to pretty much   set some context right and now you can use this  username component for example and use effect   or you know react query if you're using  the act query for performing fetch request   fit some data with user name variable right like  their account details or anything and pretty much   just use it um to display some dynamic data right  here right so that is how it works that is how   the routing part works right maybe it's a public  profile or anything and that's how you can do that   but yeah that's the basic of it  how you would grab a dynamic path   how you would render a component and how you  would use hooks to grab out that information right hey everyone welcome back and in this video i  want to go ahead and show you how you can use   fetch request to fetch basic data in react.js  and mind you that we will be learning about   react query in a different course which is an  actual library just like we use a react router dom   for performing routing we will be using react  query for performing all these fetch requests   but react query is a big library in itself  right so we have a dedicated course on that   don't worry that is included in this  learning path which you're part of   so it's fine you would be able to access  it once you complete the react course   but anyway just to give you an idea of how you can  do it right away even without react query library   i gave you a little bit of idea how this would  work in the last video when we closed it but   let's just take a look at that formally so what  i'm going to do is i'm going to go ahead and   right here i'm going to create a file inside of  this public folder called users.json right and   this is just a static file which i'll just make  it myself and i'm going to say something like mehul has name mehul and age 22 right pretty much  similar things for john and let's say for goddamn   as well so we can just change the name of them as  you know john as john and this could be 40 right   anything so what this does is that this allows us  to have a static file in place which we can fetch   because remember all the assets in this public  folder are available um on the on the main domain   so if i go ahead and write users.json right here  you're gonna see that we get this user.json file   which is pretty awesome right so what we will  do is we'll dynamically fetch this and we will   try to render the content from it so i'm going  to say fetch what do i want to fetch users.json   and then when i fetch the data i want to set this  data to let's say a state variable uh user data   set user data which is pretty much use state of  empty object at the moment right and we can just   import use date as well so once i fetch this what  i want to do with data is i want to get the data   of uh username right which is which is  what our parameter is and i want to set   user data set user data to that right and  finally what we can do is we can have a   provision where we are trying to do something  like um paragraph i just say name is userdata.name right and um the h basically  which we also used is userdata.h   right so you can see right now we don't get  anything because we are not on uh we are on code   damn right but if i just give a refresh for this  use effect to run and if i visit the profile one   you can see i'm a user component which oh because  we are doing it the wrong way here it has to be   past our json first and then we can use the  data right that's a that's a fault but yeah   the moment we do that you can see now it for  me whole it starts rendering the correct value   if i visit xyz it does not render anything  for xyz but can you guess why that happens   well that happens is because this function does  not run once the username changes and a quick fix   for this is you just add username as a dependency  to this one right now if i click on mehul   we get the name now if i click on profile 3 we get  the updated data again playground well we don't   get it because we don't have that we have john  instead so let's just replace it with playground   and give it a refresh and let's see if i  click on this now you can see we get john now   right so we don't have data for xyz that's why  but yep that is how in a in a bad way kind of   you can perform a fetch request i know that  this can be improved a lot we are just using a   single file so we don't need to perform multiple  fetch requests again and again but think about   this in the following way let's say if you had  mayhold.json and playground.json and all those   files there then you would have to perform these  all these multiple fetch requests but yep this   is how you would perform a fetch request inside  of react store it in state variables and render   the data after that we will take a look at a  much better way of handling network request   in the react query course which is part of this  learning path so don't worry about that anyway   but yeah that's pretty much it for this one  i'm gonna see you in the next one really soon things which i want to discuss in this video  is just the basics of what we are doing in   this course what tailwind is what we will  be doing and how you can practice using code   dam's playground interface so tailwind is an  interesting framework for css which allows you   to pack your ui and your styling of the ui into  the html itself right so the traditional way of   working with css is something like you give it a  class of hello let's say and then you go to your   css file let's say you create one oops style.css  you create a file and then you say hello and then   you give it a background of yellow something like  that you go back to the html you link the css   like link let's see link real style sheet href  style.css and then your styles automatically   start reflecting once you put in some content over  here as you can see so this way is fine but what   tailwind allows you to do is that it restricts  your ability in a way to use certain number of   styles only now what do i mean by that and this  is also not fully true statement but let's say   i wanted to create a nice looking button over  here which says something like click me now i   could have any amount of pixel padding here which  is like if i say display inline block i could have   any amount of pixel padding for example padding  5 pixel right i could have any amount of margin   margin 2 pixel or 20 pixel i could have any sort  of color in the whole spectrum of colors of rgb   and you know web supported colors which is to  be honest you know a huge choice to pick from   and i could have any text color now in theory  this sounds awesome and this sounds wonderful   but in practice when you're doing styling like  this it becomes very very tiresome to actually   build a a ui system yourself where the margins are  pretty much you know standardized the paddings are   standardized the colors are standardized the color  palette is there and so on so more than anything   tailwind does two things for me which i personally  like a lot about and you if you go to the source   code of goddamn you will pretty much see tailwind  being used all the way you know this page is   not rendered on server side but if you go to  a page like this you're gonna see on code down   we pretty much use tailwind in a lot of places  flex px2 you can see it still went all the way   right so one of the things which i like a lot  about tailwind are these two things the most   important things the first is that you can cut  this ui and paste it in some other project which   is also using tailwind or some other page which  has tailwind enabled and you don't have to like   include style sheets and everything over there  because this is like a complete widget in itself   and second of all it binds you in certain  best practices with css itself that is what   should your margin values ideally be what are  your colors which you should be using in your   project or which you should be using in your  site and so on so these abstractions and these   value binding plus the ability to get out  of these bindings that is also tailwind   provides so that's completely fine this is super  important stuff and super awesome of tailwind as   a framework because i am not a ui person i  don't like to work with uis as a developer   i can rely on tailwinds measurements and units and  you know ability to create nice uis so this is why   i believe tailbone is an important library for  you to learn only if you like it um because it   will boost your productivity a lot that is all for  this video in the next one in the next interactive   videos and labs which we have in this course we're  going to be discussing a lot of new features of   tailwind 3 as well as you know the fundamentals  of core understanding of tailwind as well hey everyone welcome back and in this video we'll  be discussing about how you can get started with   tailwind css and this course in general would  also be divided into two parts the first part   is where we are actually learning about tailwind  in html world and the second part will be where we   will look at look at the tailwind configuration  and we'll also tap into react in that you know   section or in that particular video so right  now i'm gonna stick with the basic html css   javascript playground which we have just to keep  things simple i'm gonna include a tailwind css   jit compiler which i'll tell you in a moment  what that is and we're going to be learning all   about tailwind using this interface right and then  further down the line in the course we'll actually   see how to use stalemate properly with  react because react is the technology   which we are learning inside of this full stack  or front end or whatever learning path you   are in enrolled right now so let's go ahead  and take a look at how the new tailwind css   you can use in your basic html project so in  order to do that what you have to do is this all   the stuff we'll do when we are working with react  but for now we're gonna be going all the way down   and i'm gonna be going to this place cdn link  i'm gonna be adding this script tag called   this script src cdn.tailwindcss.com right and  i'm just going to make some space over here   and also remove the style sheet because we are  not going to need that and let's just get rid   of these few meta tags as well because we don't  we are not like shipping any website or anything   so there we are now tailwind is pretty much  available to us right away what this script   tag does is if you open this you're gonna see  that it redirects you to cdn.tailwindcss.com3 now you might be thinking that if tailwind  comes with all the pre-built classes and   you know the things which i mentioned all the   restrictions then why is it loading a javascript  bundle instead of css well up till tailwind 2   there was nothing known as jit compiler and  what a jet compiler is it stands for just in   time compiler this just in time means that  tailwind is actually generating your styles   just in time that means as you are writing it  tailwind is generating those styles in memory now   this is important because with css obviously even  if you restrict it i mean even if i restrict it to   10 margin classes let's say if i have margin 1 to  margin 10 right and then if i have something like   padding 1 to padding 10 so you can see over right  here i have padding at x axis padding at y-axis i   would have padding at you know maybe both axes and  so on so this would pretty much start to get a lot   heavy very soon and this is one of the problems  which tailwind two faced as well which led to the   just-in-time compiler mode that is the bundle  size of tailwind in the developer environment   was so huge was probably in megabytes  that it was no longer a viable option   to you know just keep on loading the whole bundle  every single whole css bundle every single time   i mean in some cases it was also approaching the  browser limits of how much css the browser can   handle so something else needed to be done so what  the smart people at tailwind did is they come up   with a just-in-time compiler which pretty much  allows you to write all the css which you want   of tailwind but it will parse that on the  runtime and it will just create styles for those   particular classes which you are using instead of  just loading all the bundles so this is why this   is a script tag and not a js and not a css bundle  okay so how do we verify if this is working or not   so let's verify it with a very simple let's  say h1 tag i'm going to say my name is   mehul and you are watching this on go damn or  rather i should say watching plus practicing   right because you know why so if i go ahead and  give it a class of bg gray 800 you're going to   see something nice happened automatically the  background is very dark and it is a shade of a   gray but the text is not visible so i'm going  to give it a text of white as well so you see   it's almost like intuitive if you read it it says  like background gray of 800 800 is the intensity   of the color so if you can guess a less intense  color would probably be like something like 400   or 300 what you have to realize is that when we  talk about intensity of the stuff and tailwind   it's always in the multiple of 100 except for 50.  so there is a shade available of bg gray 50 which   is a very very light gray i'm not even sure if  that is visible in the video but if it is i mean   i'm saying the truth there is a color of bgg50  there would not be a color of bgk 49 or anything   this will just probably not render anything at  all because you know it's just css not found   but 50 is there 100 is there then 200 is there  300 is there and so on so as you move above this   color gets better a bit stronger and stronger  right so it just keeps getting stronger at a   point because you have text white over here it's  advisable to give it something like 700 or 800   right so these are the classes and the the good  thing about this is if i give it a padding of   let's say two and i'm going to come to these  units as well and margin of let's say four   now the block which we have created over  here and let's say if i also give it a shadow   and bear with me over here it'll just  become a little bit easier in no time   now the good thing about this h1 tag or a  nice thing about this h1 tag is that this tag   would always render this particular layout and all  i have to do is cut and paste this in any place in   any environment where tailwind is running right  so this is the awesome thing about tailwind that   you pretty much have uh you know an independence  from importing all the css styles and stuff like   that so this is one one of the aspects which  i like a lot so yep let's keep this video to   this because we have done enough we have imported  tailwind's jit compiler we have understood widget   is needed we have done a bit of hello world kind  of stuff with tailwind as well and we have done   the hello world thing so yeah that's that's the  most important part of starting something new hey everyone welcome back and in this video let's  just go ahead and try to understand what exactly   is this two and four and all this stuff which  is going on i'm gonna head back to the tailwind   documentation and this is like one one place  where you should be spending a lot of time   as a developer uh not just in tailwind rather i  think in pretty much anything which is like the   official docs and especially with a library like  tailwind which has a very nice interface and a   lot of things documented it's always a good idea  but anyway if we go to something like let's see   if we search for padding over here you're  gonna see we have all these units over here   now you can see that tailwind has does not has  a continuous limit a continuous euro as in you   can create a 0.75 ram in tailwind utility but you  cannot create a 0.76 ramp right so when i say that   tailwind restricts you in a way where it would  not give you pretty much all the things to do   this is what i mean right you cannot just blow  up your design by having a left and right with a   padding of 0.75 and then top and bottom of a weird  0.76 you know something like that which does not   seem normal but you can see all of these units  these these are like class names on the left all   of these class names actually have a corresponding  ram unit not a pixel one there were a couple of   pixel units at the top if you took a look that  is padding right pixel padding top pixel padding   y pixel and so on but all the other things are  not in pixel similarly for margin you will find   similar units and you know for space between and  all the other utilities which involve any sort of   padding or margin or any sort of unit you're going  to see that they do not include pixel instead   they include them now there's an important  reason for that let's say if i start with   this example itself if you if i want if i tell  you to read this example how would you read it   background of gray text of white padding of 2 this  means padding 2 pretty much everywhere on the side   let's say if i wanted to have a padding of 10  only on the x-axis and nothing on the y-axis   you can see it reflects and then on the y-axis  let's say if i wanted to have a 24 which is like   a huge padding but sometimes you will see that 25  would not work right why because 25 is not a class   so for that you would have to check either in the  documentation or if you are working locally on vs   code your ide should also give you hints we are in  the process of adding the autocompletion and ide   part of tailwind in the playground so if for some  reason you think that your style is not working   make sure to double check whether that  style even exists in tailwind or not   so you can see over here after 24 you're  gonna see there's a direct jump to 28   right so the values are also continuous initially  one two three four and then they also have gaps   right so this is something you have to  remember when you're using tail weight   that sometimes if the glass is not reflecting it  is possible that you have written the wrong style   so i'm gonna go back to 24 and you can see we have  a nice little tip and this margin over here also   follows the similar format of margin x and then  margin y of let's say 10 and you're gonna see it   gives me 10 units of margin on the y part and four  units of margin on the x part that is the x axis   or if i have a similar value i could just drop  x and y and directly use this all right that   is fine but the question still remains why  do we have rams in tailwind and not pixel   now the reason for this is because rams are more  customizable than pixel one ram essentially one   unit over here if this is one then that is 16  pixels by default in pretty much every screen   so you see when you have a padding of one rim  you actually are doing 16 pixels of padding   so if i go ahead and actually take a look at  this h1 over here and if i shift to computed   which actually shows us what the real css  is being applied real real css right not the   fancy stuff which tailbone is doing this is the  real css which is being applied to the element   you can see we gave it a padding x of 10 which  means padding left and right of 10 units 10 units   according to the documentation over here means  that the padding is 2.5 frames and 2.5 frames   should technically be equal to 40 pixels of  padding if i go back and if i check out padding   left and right you can see it's 40 pixel it's  in the computer tab that means this is what is   being applied now here's the fun part with rams  the fun part is if i go to the html tag at top   and if i change the font size of html tag from  16 pixel to let's say 18 pixel you can see   every single thing every single thing on the page  which was using a ramp automatically got adjusted   if i go back to this computer you're gonna  see the padding left and right became 14 pixel   why because the calculation now is not happening  on 16 it's happening on 18 which is the base size   of the page now let me tell you that most most  most systems always have 16 pixels as the default   value so you don't have to worry about it but you  remember or if you have ever seen that you can go   to the browser settings and you know toggle that  area where it says you know i don't uh i'm not   able to read uh you know font at 16 pixels so let  me just increase it a little bit so you have those   sliders for people who want to see things a little  bit bigger on their phones or on their screens   that is where the browser would start injecting  this particular thing and this is you know if   for example somebody wants to have a 24 pixel  kind of thing it'll automatically adjust according   to their preference in their you know whatever  setting they have chosen again let me remind you   that like probably 95 percent of the world does  not keep it at 24 they will keep it at 16 only   but for some people who want to do that  still your website would look awesome   on the other hand if you were using pixels  then you know padding or not font size actually   if you were using padding of adding left and right   of 16 and padding right of 16 as well  this would actually not reflect properly   right this will actually break in  a way where you know it'll it'll   uh i think in this case it would not really matter  as much because h1 is a block element but still in   case of margin you will see the difference  but if i change this margin left and right   two different values you're going to see that  the margin and padding everything would remain   same and your site would not scale properly  so this is why tailwind uses ram as a choice   and this is why you don't really have to worry  a lot about the ram and pixel and to be honest   i did this video i wanted to convey this concept  because sometimes you might be confused what is   the significance of this unit and everything so  the significance of this unit in itself is that   four of these units is actually one ram right  so it's four is one ramp so it's basically   like saying every one increment is an increase of  0.25 frame which in itself is something like 0.25   times 16 which is 4 pixels right so kind of if  you want to think about this in an intuitive   way when you go from one to two you're  actually increasing four pixels then three   four pixels then four four pixels and so on right  if you wanted to think about that in that way hey everyone welcome back and in this video  before we get into all the tailwind css styling   and shadows and this and that what i want to  discuss about is a fundamental way tailwind   works with responsive design and with devices of  different words and that is using these classes   now in tailwind what you have to understand is  that a lot of metadata to the existing classes   is attached using column right so let's take a  look at these set of classes this set of class say   that smd large extra large and two times extra  large have these particular break points as the   you know a minimum width which is important and  what this means is that if i am in this in this   particular class and if i say that hey this sm  should be bg grade 700 which means anything above   640 pixel should have this style applied right if  the screen size is above 640 pixels then only the   style should be applied and this could be visually  seen as i drag this and if i make this above 640   you can see the moment my screen goes above 640  pixel we get the gray and the moment it goes down   640 pixel we pretty much lose the gray because it  is lost right i mean this becomes white if i give   this a background of let's say vg yellow 900  like this you can see this is yellow right now   as as long as it is you know under 640 pixel  width and the moment i cross that you can see   it becomes grey now this is like a media  query and this is in fact the media query   under the hood which says that anything which  is minimum width of 640 should have this that   this particular style right and in this case it  doesn't matter the order in which you put you can   put it above as well because media queries have a  higher specificity than a single style so you can   see this would still work but this is important  because using these selectors using these sm   md lg xl2xl you can customize the behavior of your  website right so you don't have to write explicit   media queries in css you can just write it  write the behavior over here and be done with it   for example one quick example i can also show  you is something like sm and then you can say   text to excel right so you can see that if  i increase the size of this div the text   automatically increases because the text is set  to 2xl if i change this to 4xl for example you're   going to see it becomes much larger the moment  we cross that small boundary right so you can   see you can play around with a lot of styles in  tailwind using these selectors and the good thing   about them is that there is no limit pretty much  to whatever you enter here so for example if you   enter a background as a normal class you can  also enter that as a background in sm or md   or excel or extra large or anything right  so you can pretty much apply all the styles   whatever you want with these responsive  selectors and as well and that will just   work out of the box and this is like most most  common with layouts and sometimes with font sizes   as well and you know with paddings as well a lot  of times less common with colors and stuff because   ideally you would not switch colors based on the  layout but yeah i mean that's something you can do hey everyone welcome back and in this video let's  just go ahead and take out some time to discuss   about all the colors which are available in  tailwind and how you can set them as background   or text colors right so i'm gonna get rid of the  responsive styles for now so that we can focus   more on the colors part so if i go ahead and take  a look at this colors section in the let's see there should be a dedicated section for colors i  think inside theme inside colors there we go so   you can see that tailwind by default and because  we are using jet we get this complete color   palette right out of the box right so you can  see we have slate color we have grazing neutral   all these colors and we have like i mentioned  earlier in the i think in the introduction video   we have very light shade in terms of 50 then after  that it just increments from 100 in terms of 100   right 100 200 300 all the way up to 900 900 so  one of the best things about tailwind is that it   also gives you a nice color palette which which  are carefully chosen colors with nice you know   color theme and nice background  contrast with the text colors as well   obviously you can add custom colors we're going  to learn about tailwind configuration later down   the line but for now what the way this works  is that you pick up whatever the color you want   for example in this case let's pick up this  keyword which i don't know how to pronounce   but looks awesome so i'm gonna paste this over  here lowercase and i'm gonna add an intensity   of that particular color right in this case i  just chose 900 you could have pretty much chosen   800 700 and it will work out of the box similarly  for text you can see that white works out of the   box because tailwind just provides that although  you can see that white isn't like really written   anywhere but that still works but in general you  can play with the gray or the slate variants as   well text gray wouldn't work what you have to do  is text gray and then an intensity of that as well   in this case this is just just a little bit gray  so that's why it appears almost like white this   is like even more closer to white but this  over here is pretty much a solid dark gray   right so you can play with these colors um in  terms of background and text colors you can   also give background gradients as a color which  is like a really cool and interesting thing you   can do with tailwind although i would admit it's  not like completely customizable and controllable   if you want anything which is more customizable  you would have to go into css files but here's   how the background gradient part works so for the  gradient color what we can do is say vg gradient   to right which means it should start the gradient  from left and to right and that is also clear in   what we're about to write and then you have to say  from the color and the intensity whatever you know   whatever that color is so you can see that already  the gradient is working just fine it fades into   the transparent color but that's usually not what  we want if we are creating a gradient it should   probably go all the way so i can say  something like 2 blue 600 right so blue and   sienna's basically you know a little bit on the  similar sites it forms a nice gradient over here   similarly you can have gradients not only  just between different colors but between   same colors as well so if you do something like  this this also creates a gradient in terms of just   increasing the intensity so that is also awesome  and what you can do i mean this is pretty much all   you can get in terms of the gradient stops this  is like a 50 percent kind of 50 percent in between   transition you can also specify via and then  see on let's say 400 so what you have the option   over here in terms of customizing the gradient is  specifying either two stops or three stops and the   colors which is from the tailwind color palette  right so this is pretty much it in terms of   what you can achieve with gradients which is also  pretty awesome right if you just want to create a   nice looking gradient in fact if you go to core  dam's website you're going to see at home page   this gradient this is actually a gradient which we  have in the background right this particular thing hey everyone welcome back and in this video let's  look at hover classes in tailwind as well because   over is also one of uh you know a common action  especially on desktops where you have a mouse   pointer so tailwind makes it easier to customize  your styles based on hovering as well so instead   of writing css for this we have inbuilt  support for tailwind and just like you would   do it with a responsive breakdown you would do the  similar thing in tailwind with a hover and then   a column and then whatever style you write over  here would reflect whenever you are hovering so   if i have text gray 900 and a bg over remember  that you have to write over multiple times   bg gray 200 if i do something like this then  when i hover over this you can see the text turns   the text turns grey but the background does not  turn gray because you can see we have a gradient   so that might be taking a bit  of more specificity so i can   probably give it vgc 900 something like that  so now if i hover over this you can see the   text turns black and the background turns gray  right so this is how you would work with hover   in general nothing fancy nothing complicated  you just specify the styles which you want   and they will start working the moment  you pretty much hover on any other element hey everyone welcome back and in this video  we'll be discussing about how to build   flexbox layouts in tailwind and this goes  without saying that we would not be discussing   flexbox in general but only about using flexbox  because we have already done that in the css   course so if you're not following the full stack  or the front-end loading path on code amp it is   high time that you do because that is  a path that is a structure in which you   will be following you know or becoming  a whole stack or a front end developer   but anyway let's start with the flex box in  css and just like other classes it's pretty   simple to use flexbox with tailwind because they  provide out-of-the-box classes and out-of-the-box   utilities for most common things let's just go  ahead and start developing a very simple layout   so i'm going to say something like let's  say this is a div and i have another   three divs inside this right what i can do is  at the same time i can give them all a width or   let's say a height of 10 something like that with  a background color of gray 800 this could be blue   this could be red something like that right  and on the top i could start giving this   some flex input right so right away you can  see that the moment i give it flex everything   just disappears because these do not have  weights with them now with flakes what happens   is that if i go ahead and let me just refresh  this if i go ahead and open this you're gonna   see that this flex class actually just says  display flakes and nothing more so what we want   is that every single one of them to be equal width  by saying flex one now what does this mean in real   world css is if you go ahead and take a look at  flex one it gives you a flex grow flex string   and flicks basis of zero so just a quick revision  with flexbox flex growth one and flex shrink one   means that you know you should try to take as much  space as you can and flex basis is basically you   know a kind of like a width equivalent in flexbox  and giving it a zero percent just means that you   fall back to flex grow and shrink so this gives  you a nice little layout you can see i can also   go ahead and increase this let's say a little  bit only if this is available yep or maybe we can   use the highest one which i think is 96 and you  can see now that we have a nice little layout   now a nice thing which we can do in order to  combine this with a responsive base layout   is i can say that hey whenever this  is by default this is flicks column   but nope not flex column actually flex row that is  the default flex behavior but whenever i am on the   on a larger screen for anything which is smaller  it should be flex call and in this case you can   see because we don't have a definitive width  i can also go ahead and do something like   on you know sm this is flex 1 but otherwise it  just takes the full width as a block element   all right so what's happening over here you  can see the moment i cross that small barrier   the moment across that all of them get this class  removed or not exactly removed but the effect of   this class gone so this is why you get a flicks  call i mean this is basically you know in a in a   stack in a vertical stack the moment we grow over  this this class takes over and then this renders   in a row right so if you know how flexbox operates  you know this would be useful for triggering   uh mobile based layouts right whenever size  goes below 640 pixels so yep this is like   pretty much how you can work with flexbox there  are a bunch of utilities flex nand flex auto   flex one on over you can also kind of  like modify the style and the and the   you know a bit of functionality but for the most  part you probably would see yourself working with   this flex property flex call flex row property  and the modifiers associated with them flex one   something like you know you can also do something  like if we go to this area and get rid of   this then i can say something like flex grow and  then i can say to this for example something like   width 24 and then this could be width 24 as  well right so now you can see that this one   takes all the available width and these ones are  24 units of width in this case right so you can   play around with this and it's easy to build such  layouts you can see this works just fine but yeah   that's pretty much it how you can get started with  flexbox and with flex in general with tailwind all   you have to do is understand which class is doing  what sort of trigger so flex triggers display flex   flex calls trigger the direction then with  responsiveness combined you can change the   direction then flick scroll flex shrink flex  1 all sorts of things can help you trigger   various kinds of layout in your file without even  changing any sort of external css or anything hey everyone welcome back and in this video  let's just go ahead and take a look at   grid as well with tailwind how you can work with  grids and grid is also a great way to build uis   especially two dimensional uis where you want  you know a lot of customization and control over   a grid sort of formation instead of just the flex  box which allows you to either work horizontally   or vertically so in this case we're going  to start off with a very simple example   where we could probably create something  like this only so i'm going to start off   with the same thing but let's say if i  give this each of them a dimension of 20   20 as well get rid of effects growing so  we can go ahead and do something like this   and over here instead of flicks i'm going to  change this to grid this allows us to use all the   properties which we have right so in this case you  can see i can use grid columns four which means   that this should be organized in columns of four  so if we have like a bunch of more such elements   right i can say grid calls four or  three in this case and you can see   they equally line up in three different grids  right and i could just probably say this as w full instead of restricting the width and you're  going to see that it combines them of course this   is not visible right now so what we can say is gap  of one which is like a grid property which allows   you to give a little bit of gap between all these  elements similarly you can play around with other   properties of column start template start row  start and row end so for example in case of call   start or call span i can go to a particular  grid and give it a property of let's say   this one right here has called span of two and  get rid of this one over here so you can see   that the second one now spans two columns so  you can play around with more properties of   grid by looking at the documentation and whatever  your layouts demand you to do but it's basically   css right you can see the equivalent css as well  over here sometimes the css might be a little bit   more complex in a way because stalemate might be  using variables and all sorts of stuff in the css   but if you understand the premise of  what tailwind is doing it's easier to   build complex layouts over here as well you  see it has pretty much support for all the   grid properties which we have learned  in the css module in the css section   and it also has property support for flexbox which  we also looked at in a couple of videos before   but i think we skipped over the justify contained  items and this sort of stuff which is also like   pretty basic and and one of the few things which  we discussed like almost immediately once we   start working with flexbox so i hope that you  remember the justify content and left and right   and center and all that stuff from the css module  if you do not then go back into your full stack   learning path or front-end learning path and  take a look and these properties basically just   plug and play and allows you to write those  particular styles so yep that's pretty much   it for grid as well in tailwind in the coming  videos when we'll build some apps or something   with the tailwind css we're gonna be using a lot  of this stuff so make sure you keep an eye out   on not only just this course but in other courses  ahead where we would use tailwind to build stuff hey everyone welcome back and in this video we're  going to be taking a look at how to build a simple   sort of carousel in css with tailwind which is not  exactly a carousel because it'll lack controls and   stuff because we need js for that but mostly a  nice widget which will snap itself in place just   like this particular widget does when i release  the scroll right and this is because of the new   addition of scroll snapping feature in tailwind  not in css it has been available for css for a   while but this scroll snap align which is possible  now inside of tailwind is available in version 3.   let's take a look at how we can build this  particular app right here you can see when i leave   my mouse it snaps itself to the center uh not  exactly center to the start because that's what   the snap says but let's see how we can build it  with a couple of divs over here i'm going to get   rid of this code right here we're going to start  a little bit fresh i'm going to start off with   something like for example let's build up a few  divs i'm going to say something like width of 100   hopefully that is available height  of let's say 48 then a bg crate   800 something like that right and it looks  like it's just way too big so probably   something like or maybe it's not available  that's that's a more plausible explanation yep   all right so we have the first div we're gonna  do a bunch of tips with different colors green   blue yellow right and i'm going to give this  upper div a class of flex so what this means   is that this is now a flexbox and you can see  that obviously it does not follow our width   set in flexbox right so what i can  say is something like uh overflow   x auto which just means that hey  you are allowed to scroll out of the   original width of your container and  finally to allow this element to actually   use its own width instead of just shrinking to fit  what i can say is flex shrink shrink zero right so   the moment i say that you can see now this area is  scrollable instead of you know just getting shrink   down to the individual words awesome so now right  now you can see in terms of scrollable this does   not does much except for scrolling so in order  to add those snap possibilities what we can do   is give it a direction first of all so i'm going  to snap this into x direction by saying that   right so this sets certain properties which are  required for enabling the scroll snap in css but   you can see that it still does not work because  you have to give where that particular element   should snap on an individual level in this  case let's say if i give it a snap of center   you can see now if i go ahead and try to scroll  this green over here snaps at center right when   i scroll and i leave my mouse similarly  this red over here snaps at center as well   similarly for blue and similarly for the last  one yellow if i change the direction from snap   center to snap start you're gonna see it starts to  snap at the start similarly for green you can see   it snaps at start and so on so if you give  it something like space x of 4 for example   you can see now it is like much nicer in terms of  visibility and even if you give it a nice scroll   thing you're gonna see it always lands in the  the starting part of the particular div right   so that's awesome you can also add a margin a  scroll margin to it so you can see the scroll   ml6 creates a left margin of six units so if i  go ahead and give this to all of the divs over   here you're gonna see that now they pretty much  have a six units of snap margin to themselves   and if i match this with the spacex that is the  padding this would pretty much mean that you know   it'll just keep that area to itself it'll snap to  the white area instead of the actual boundary of   the element so yep that's pretty much it for  scrolling in css with tailwind scrolling and   snapping the scroll so pretty exciting pretty  pretty neat feature of tailwind version 3. hey everyone welcome back and on this  video let's just go ahead and discuss about   the css typography where the tailwind which  is also an important thing because a lot of   most of the part of our website is actually text  so let's start with the regular h1 tag over here   and if you have not observed it yet when you  include tailwind you're going to see that you   automatically lose the ability of nice font sizes  which the browser provides which is not exactly   very nice but you can see here h1 h2 h3 all are of  same font size and same font font weight and so on   so the reason for this is because tailwind  wants you to explicitly style them according   to your layouts or whatever your need is and it  provides you with a rich set of classes to do that   so font family starting with font family  i'm just going to cover a few important ones   you can see that you can specify a particular  font directly whatever is available inside of   tailwind and of course you can add more fonts  later down the line as well with configuration   which we'll talk about a bit later in the  advanced section but mostly you would not   be setting or hovering changing fonts on hovering  right wants one set for a website is usually set   so we're going to be moving on to font size which  is super important and this is what you will be   using all the time so you can see that tail one  gives you the variance from extra small all the   way up to 9xl which is eight ramps 0.75 ramps to 8  rims right which is the default system so usually   you would obviously have something like text for  excel for a heading then maybe x3 xl for an h2 and   so on right but it's up to you so let's start with  a single h1 let's say the quick brown fox sentence   whatever that is because it includes all the  alpha bits but i don't know the exact sentence so   specifying a text font size actually increases the  size of the thing which is awesome right you need   that the font style is something like you can set  it to italic or not italic depending on what you   want again just you have to write a single keyword  font weight allows you to set a weight that means   how thick the font should be so you can see the  eq balance of this is actually in the font weight   of css and this would only work well if you  have imported the correct fonts with the   correct weights most of the fonts sometimes don't  have all the variants so the browser somehow just   tries to make up for that so make sure yeah if  you are looking at custom fonts make sure you have   imported the correct weights of the font so for  example take a look here if i do font extra light   over here you're gonna see that this is much  more thin compared to what the default was   right and if i say font extra bold this becomes  much more thicker than what it was right so   depending on what kind of heading you have you  might want extra bold at some places and extra   light at other places so again this is something  you can pick up with the help of tailwind then of   course you have basic utilities like text aligning  as a center so if you give a text center to this   it will center your text instead of just writing  another part of css manually so that all sorts of   alignments and stuff is there but text color  you can see that it specifies text white and   all the colors which you have already seen in the  color color palette so that is awesome so you can   just pick up any sort of style and you're going  to see the moment you apply it it turns the style   into that color similarly if we move over to text  decoration you're gonna see this kind of is a new   feature how you customize the text decoration  color in tailwind css3 so if i just copy let's   say this one over here and paste it right here  you see it will underline it and let me just   give this a gray of 800. it will underline it  and it'll underline it nicely right you can see   the cues in the sentence don't get  cut off so that's that looks good   and on top of this you can also specify the style  of the decoration so you can see you have a bunch   of styles you can have a double double decoration  you can have a solid decoration decoration   which is the default style if you opt into  double you can see you get something like this   you can also have a wavy style which is you know  something like if you want to show a grammatical   mistake or a sentence something like that  you can do that that's also pretty awesome   um you can have a dashed decoration dotted  decoration and so on so it's almost like   whatever you can do with a border kind of  thing you can do over here and similarly like   you know this can be applied on over so that's  pretty awesome as well so if i hover over this   you can see it changes its style that's awesome  so those these utilities over here is pretty much   a lot of what you would need along the way the  font size the type the decoration the colors   the alignment the thickness and you know basically  how you want it to present can be done with all   of these utilities entailment css i'm going to  keep this video short and until this point only hey everyone welcome back and in this video let's  talk about shadows in tailwind which was being   awaited for a long time and finally the support  for shadows is here and the color shadows i should   mean because the regular shadow which was just  that black shadow was already there but now you   can have colored shadows with tailwind and this is  awesome so let's try to create a button like this   in our coded playground over here so i'm going to  go ahead and click on write something like this   is the best programming website you should get a  pro account right and it seems like it's just too   much text but that's fine so i'm going to go ahead  and now create a button which would say subscribe   via stripe something like that and this would  be our subscription button but right now you can   see that it does not look very fancy so we're  going to start building this button over here   so i'm going to walk you through with  the example of how it is done on the main   site on the on the tailwind side so it's going  to need a little bit of padding on the x-axis   and on the y-axis so you can see we have given  it you know roughly like 12 pixel assuming that   my device is working perfectly fine so  it's 12 pixel padding on the x direction   and 8 pixel on the y direction or rather we  should just say three units and two units   then we have to give it a background color as well  let's give it a indigo as the color and vg indigo   500 that's the opacity we need the text to be  white and we need a little bit of border around   this as well border radius right which is what  we call in uh css in tailwind it is just called   rounded right and rounded can give your borders  a little bit of rounded but you can also increase   the intensity of rounded by having a dash and then  you know lg or md or you know sm these these sort   of modifiers which you also see the responsiveness  view right then we would do something like   shadow so when i say shadow it will automatically  create a shadow which might not be just   visible just yet so i can just give it a shadow  of large you can see now the shadow appears a bit   but that was it earlier in the tailwind earlier  versions that was the only thing you could do   but now let me just center this first but now  you can let's just give it a margin top of   8 or 12 so that we have a little bit  of cap but now you can in tailwind css3   also give color of the shadow so the  way you do that is you just say shadow   then the color in this case indigo and then the  intensity of that color right so you can see it's   500 right now but it appears like it's too thick  of a color so in order to control the opacity   you have to give it a slash and then the  percentage of opacity so let's say i just want 90   opacity right so this is like 90 of the original  shadow if i give it 10 then this is like 10   percent of the original shadow which is pretty  much like non-existent so let's just give it a   close to like 50 percent and this will give a nice  shadow effect what you can also do is on hover   let's say you want the shadow to become a bit more  intense at 80 percent opacity so when i hover over   this you can see the shadow increases which is  pretty awesome now just to complete the demo you   can also play around with the font size and font  semi bold just to give it a little bit of bold   area uh bold text and you have got a nice stripe  button subscriber stripe and obviously this is   something which you can copy paste anywhere on  your website and this button would render exactly   like this as long as you're using tailwind so this  is the magic of shadows and tailwind in general   pretty awesome if you ask me and now you know this  shadow could look pretty amazing on different sort   of backgrounds as well so if you have a dark  background on the body you can see that you   can have a nice little text gray of 100 as a  text color and a nice stripe button over here   right so yep that's pretty much it how you can  create shadows in tailwind css and how you work   with a lot of this stuff a lot of buttons and a  lot of classes i think we have done this for the   first time in having so many classes on a single  element but that's you get used to that stuff hey everyone welcome back and in this video let's  just go ahead and discuss about functionality   in tailwind css which was only possible because  of just-in-time compiler introduced in the last   version and now it seems like a no-brainer  a lot of times when you want to opt out of   the default styling mechanisms so what dynamic  styling would tailwind means is that instead of   sometimes okay sometimes what happens is that  your default styles which tailwind provides   are not enough right whether that's maybe a one  pixel margin which you wanted to give or a custom   font size or a custom color or something which  you wanted to give which is not available and   you don't want to go into your css files or mess  around with that what you can do is instead use   these placeholders with properties that is like  one way to go about so if i give something like   200 pixels and remember that i'm doing this inside  these square brackets what tailwind would do is   that it will try to infer what the property did  earlier for example this property did margin top   and there used to be the value for this particular  property right so instead of the value it found   that hey i have this weird square syntax so  this means that this is a dynamic property   this means whatever the value is inside this  is actually the style which should be generated   so if you open this in a new tab and if you  take a look under the hood you're going to   see the style which is generated the class name  which is generated over here is a dynamic class   of dot margin top of 200 pixel the same class  which you use but the style is pretty much   the same thing which you would expect it to be  right similarly you can have 3 em for example   it doesn't matter what you want and refresh you're  going to see it's going to generate the same class   as your class name but it's going to  dynamically populate that particular style   so this is pretty awesome why because it allows  you to opt out of tailwind's default boundaries   although it should not be used pretty much with  every single style because then what's the point   of using tailwind but sometimes it's a great  escape hatch right for example i want to give   a custom color to body so instead of going all  the way you know to config files or to css to   add it what i can do is something like something  like this where i just specify or you know i think   i don't know a black color i think fd was the one  yeah not sure so for example let's just have a   background of black or something like which is  a little bit nicer or a little bit less black   3e so i can have a 3e 3e3e as a dynamic background  color and this will just work out of the box so i   don't have to like add it as a new color or  you know mess around with my css and so on   similarly for text i can have a 72 pixel as  a size and it'll just work out of the box   but like i say it's more of a like a replacement  of a existing value and tailwind would understand   it out of the box so this is pretty awesome and  pretty amazing which escape hatch which allows   you to work with all sorts of values within your  tailwind so this is one way of having a property   which taylormade already knows and assigning it a  custom value in tailwind css3 there is another way   of having completely dynamic property and value  assigned to your div element or whatever element   so you can see in the dynamic section of the  tailwind docs it actually says that you can pretty   much throw in a full utility uh the full property  and the value pair and it will just make it work   right so if you want to try it out what we  can do is something like background and then   the same color just like that and it should  still work and yep it does work so this is pretty   awesome right you can have a black background  over here so at this point you are literally just   writing css but in a way which is combined with  tailwind right so you can have background black   and then display flex something like that  and it will just work out of the box so   not display fix i think that won't be visible very  much opacity 0.5 and then what i can say on hover   opacity is one so again this is like an escape  hatch which works pretty awesome but you should   probably not use it because tailwind also already  has support for opacity and opacity 100 like this   so try to not use the escape patches if they are  not required bg 3 900 it'd be a good option as   well so yup i mean but but in case you wanted  to do that just just letting you know that this   is completely fair completely possible and  completely valid in tailwind css version 3. hey everyone welcome back and in this video i  want to show you how you can use tailwind css with   react and that that is pretty much what you would  be doing in this learning path all along because   we have chosen react as a technology so in order  to use tailwind with react you have to set it up   according to what your environment is for example  if i have react playground on code damp at least   for now we use something known as snowpack as a  bundler instead of create react app because it's   a bit faster if you are running it in a create  react app locally then you have to follow it a bit   differently if you are running it on nexus there  is a little bit of different procedure and so on   so if you go to tailwind css installation section  under docs path you're gonna see you have multiple   options we have been doing so far with the  play cdn which is not optimal for production   and fine for just you know having a little bit  of experimentation what you want is go into this   frameworks guide and pick up whatever framework  you are using in this case we are using react not   on server side but on client side and that also  with snowpack so i'm just going to follow this   quick slow pack guide which in essence is pretty  much uh similar to what your create react app   guide would be i'm going to fire up a second  terminal and start writing these commands if   you want to follow along you can do the same  thing in the code down playground at least if   we are still using the snowpack bundler you  can see that we are using snowpack because of   the snowpack keyword so i'm gonna install this the  next thing which we need from the snowpack bundler   is the configuration part so we can do something  like yarn tailwind in it i believe and you can see   it has created a tailwind config for us but  not a snow pack not a post css config.js   let's go ahead and create that ourselves four  css config.js and over here in this file i'm just   going to keep it like this and in the tailwind  config we have to specify the content part this   is a little bit older configuration algorithm  version 2 in tailwind version 3 you just have   to specify the content part of all you want to  have so let me just go ahead and copy that instead   so right here we need what we want to  say is that look inside the src folder   and anything you find with js or jsx just try  to extract out tailwind styles from that and   apply that right that's that's what we are  saying and yup that is pretty much it in the   setup and finally it says us in the snowpack  configuration we have to add this as the dev   options so let's go to snowpack and over here you  can see inside dev options we have to add this   tailwind config and inside the plugins we have  to add the snowpack plugin over here there we go   finally we have to go to the public global.css  in this case and if that is not a file then we'll   create that global.css import the tailwind  utilities which are the base utilities   and then finally add this as a global  css file inside our index dot html   okay once we have done all of this hopefully  when we restart our server for snowpack it should   pick up our tailwind so for this what i'm going to  do is i'm going to say inside src folder i'm going   to remove all the css files right including  this global.css i'm going to just close this   inside app i'm going to remove this refresh  this even inside index.js let's remove this file   and refresh this and for global.css  saves us not found there we go   okay so now you can see that global.css is  pretty much empty at the moment so looks like   it did not propagate the changes so let's just  go ahead and copy these utilities one more time   to see if it is not being overwritten  and okay now if i go back to app.jsx   remove this app class and try to write bgray of  800. okay so did a quick change in the setup move   the global.css file in the src folder and this  index file now includes the global file so now   what we can do is do all sorts of tailwind  css stuff which we did back in the   html and css tutorials and whatever we do it  will automatically start reflecting it in a   react playground so yep that's pretty much it  that's how you would set up your tailwind css   thing in a react based playground and the fun part  of this you don't have to reload so that's awesome   but it will automatically minify and take out all  the things all the required things from your react   jsx files thanks to the configure the content  property which you have specified over here hey everyone welcome back and in this video let's  just quickly discuss about dark mode configuration   option in tailwind and what does that do so in  tailwind.config.js you would see that there is   nothing over here but what you can do is add an  option known as dark mode of class so the moment   you do this what's going to happen is that now  wherever you specify dark mode styles in tailwind   you can make them toggle just with a click of  a button and let me show you how that is done   we have this page over here which has a couple  of dark mode classes you can see i have a dark   selector and then i'm specifying a background and  i have a dark selector and i'm specifying a text   color by default if i did not have the start mode  class it would automatically show me dark mode why   because my system is in dark mode so what tailwind  does is that it prefers the scheme of the system   so if i did not have this class dark mode over  here and if i just wrote these couple of styles   and just started my server i would have the dark  background over here but because i wrote class   that means whenever i add a dark class at the top  of all of these where the dark class is applied   dark selector is applied then only it gets  triggered right if i remove that it goes away   so in order to create a simple uh you know  toggle button all you have to do is import   your state from here you can say x set x for  a lack of a better word i cannot think right   now and you can say that if x is true then dark  otherwise no class and by default you can see   we start with a false and i can say on click  on this div itself i just toggle the x right   so whenever i click on this div you can see it  turns from light mode to dark mode and vice versa   and the fun part about this is you can pretty  much apply any sort of styles so you can say   b class dot x to excel and this will  just start working automatically so   just give it a second for the styles to  propagate and make sure you have the correct name   over here as the attribute name and as you can  see when i click on this now it increases the font   size so you can pretty much customize your website  as you like in the dark mode and whenever you   toggle it on a click of a button it will  operate just fine so yep that's pretty much it   for this video hopefully you were able to learn  something new something interesting about dark   mode and this one that is all for this one and  i'm gonna see you in the next video really soon so what is going on everybody welcome to the very  first video of react query course now this course   is super important for all of you react  developers out there who have experience   with react but also want to standardize how they  perform network requests in a react application   because what you will see is talking to back-ends  and apis is one of the most common thing you will   do when you're developing a web application so  we're going to be taking up this course this   is not a static video only based course you are  going to watch this course on codedam codedown.com   and you will have practice sessions in between  so make sure you are practicing completing all   the labs which you get along the way those are  super important and relate to what has been taught   in the previous video and yeah just make sure you  are also working in a real playground environment   even with the videos so you can launch a codename  playground by going to codem.com playgrounds and   you can see the react playground there or if  you want you can just set up a quick react.js   project locally on your system as well and follow  along with the videos and of course complete the   hands-on challenges along the way but for the most  part this terminal this environment is pretty much   how a typical react setup would look like on your  system as well so i don't think you necessarily   need to work on your local environment just spin  it up on your browser and once you're done just   you know spin it down so you don't really have  to do any sort of cleaning and everything but   yeah that's pretty much it for the introduction  part in the next video onwards we're going to   be seeing some basics why we need react query what  exactly it is how to install it and all that stuff hey everyone welcome back and in this  video let's just quickly take a look at   why would you even need react  query in the first place   so if you have spent a little bit of time  with react.js and some multi-component   architectures and multi-component file systems  in in your react query in your react project   and you also have used some sort of network-based  logic where you are performing fetch requests and   everything you know a very common pattern for  react developers is using a use effect like this   and you know just having a fetch request here  right so you would probably have something   like fetch this api not then you know data and  then you just set data to data and you have a   state variable here so you have data set data  something like this you know so you have this   stuff going on now this is completely fine i  mean this is not technically wrong it's just   inefficient if you try to consider some other  factors right for example what if i want   to cache this api right so let's say if this  is a this is some sort of different page   on which this api is being you know made call and  when i navigate away from it and then come back to   this page i want to have the cached response  because i know this api although is slow but   the data won't change that much so caching is  difficult you have to implement it on your own   how about something like polling for example let's  say i have this api but i want to ping it every   couple of seconds or you know up every couple of  minutes or anything like that so how do i do that   right so that is also a problem re-fetching is  also like one of the problems which can be there   for example you know if you just want  to refresh this you probably would copy   paste this in a function and then call it again  but these are some of the high level problems   some of the problems like caching and polling  will require might require a lot of code for you   and some refitting might require a bunch of  hacks right so the problem here is that react   actually does not provide any standardized way  of making fetch requests or you know making   network requests as a matter of fact that  means you can might as well use axios here   you might as well use you know xml http object  that primitive way of making requests so you could   use pretty much everything here right there's no  right or wrong answer but in order to keep things   sane and in order to keep things relevant what you  can do is you can make use of react query react   query comes with certain practices and certain  things and certain hooks which you have to follow   it makes your code more declarative that means  you're just telling what needs to be done   instead of imperative where you actually define  how it needs to be done right so this is this is   sort of an example of you know imperative request  where you are telling how it needs to be done   you might also specify a method post and all  that stuff if you implement caching on top of it   that will be imperative again but react  query abstract all of that away from you   so with that being done let's just quickly take a  look at react query we're going to be installing   it inside the code and playground interface as  well in it only um by actually you know just   going ahead and closing this terminal and doing  that so we'll be doing that in the next video all right so let's just go ahead and set up react  query now and the way we're going to be doing that   is first of all installing it so i'm going to go  ahead and say yarn add react query in my terminal   you have to do the same thing in your terminal and  i'm using yarn because we are using yarn.log file   if you are using npm that means you're seeing a  package lock.json file then you would have written   npm install react query but depending on whatever  it is for you right so once that is done we can   go ahead and start our server again so that you  know if i refresh this it will just load our react   application once that is done as well what we're  going to do is start making some changes here in   our index.jsx file which is the top file and i'm  going to import a couple of things here called as   query client and query client provider from react  query right so these two things basically the   first one we can just get rid of the strict mode  query client provider in checks a query client   inside of our full application right and what this  query client is this query client simply gives   your application the access to modify the cache  the query cache in react query right so this is a   mandatory step in react version three so you have  to do that but once you have done that you'll see   there's no major difference right here so what i  also want to do is import react query def tools so   i'm going to say react query def tools from react  query and def tools right and once you do that   and just write it right here you're going to see  you might see this error no query client set use   query client provided to set one and this is  actually a false error so just go ahead and   restart your server if you see this right i'm  not sure why this happens on the snowpack build   but if you refresh it restart it it'll just  work fine all right so once that is done we   can just switch to the browser only mode so  that it's cleaner now you could see that if   you open this you will also have little  react query dev tools by your side which   will actually help you debug any sort of network  request you make with react query right so we're   going to be making tons of them in the further  videos but that's how you're going to do that alrighty everyone welcome back and in this video  let's just go ahead and write our first react   query make sure your setup is on the point  and it is on the point if you're seeing this   little react query logo at the bottom and we will  be using this to debug or you know just to see   what our queries are looking like so first things  first what do we do in order to write a query   now we will not be writing fetch or anything just  yet but instead we will be importing a new hook   called as use query from react query right and  you can pretty much use this uh whatever we will   be doing now in any single component because we  have our root setup done correct right so you   can probably have a nested component as well where  you would just import it and start using it so how   does use query work well at its very fundamental  level what you have to understand is react query   is doing two things with a hook the first thing it  says is that hey developer go ahead and specify a   key to me you know something like hello world  for example this is a valid example of a key   right and you can see some activity happening over  here which we'll discuss later on but yeah let's   just skip this for now so we see that hey use  query this is the first argument which i'm going   to give you it's a string hello world but it's  not useful so what is it exactly this is a key   to a request which you will make now what what  does this key mean this key is basically used   every time you want to for example invalidate  this request or use this request again as a cache   or you know fetch this request again do any sort  of stuff so basically whatever request you will   be making here whatever request you make as a  second argument it is cached and it is you know   basically pointed with the help of this key right  here now what this request is this request or the   second argument is a function it is basically a  function which should return a promise right which   should return a promise that's the only condition  of this function so you can say return promise   dot resolve let's say five for example right and  if you do that that's it that's actually a valid   thing that's actually a valid condition you have  right so you can have a hello world two here and   this key actually points to a resolved  promise which has a value of five   right now most likely you will not be using  obviously promise.resolve like this but you   will be using some fetch request or anything  like that but what you have to understand is   before getting into fetch what i want to show you  is what happens if we use promise.resolve right   use query is a hook which returns you multiple  values and multiple things which are super   important what these are these are some of the  loading states right so i'm going to start off   with data because that is interesting and what i'm  going to do is i'm just going to say console.log   data right here all along and let me just jump  into terminal browser and move on move on to   the browser preview right so if i refresh this  page now what you will be able to see is that   inside our console you can see we are getting this  five repeatedly right if i do a console log data   is the data just to distinguish it right so  you see five is the data five is the data   a bunch of times right so what's  happening is that react query   returns you whatever this promise resolves right  that's one thing let's say this promise rejects   something so instead of resolving it is actually  rejecting you whatever you're writing now right so   what this will do now is that this will actually  also have an error parameter right and i would say   error for example error comma data is the data  and let's just go ahead and refresh this again   and you would now see that we first of all get  null undefined null and find is the data because   it's in the fetching state and then we start  getting this 5 as the error right so you can see   we are actually logging this five react queries  also doing it it on its own and then the first   argument which is an error we get five and the  data is undefined now right or maybe like you know   you can just do error data like this like cool  people do right and you'll get stuff like this   there's also a couple of you know there there are  also a lot of states as per say which you can use   and i'm not exactly going to get into all  of them because for the most part you won't   necessarily need to know them right away you can  know them you know slowly as you are building   your application but these states are for example  is loading is error is success is idle all that   stuff so these four states right here what they  mean is obviously this is loading will be true   whenever the request is being in progress right  so if i have something like return new promise   resolve set timeout resolve one second basically  this just means resolve this promise in one second   don't really stress about this if you don't  understand the syntax you can check out the   advanced practical javascript we discuss stuff  like this there as well but anyway yeah so   let's just go ahead and refresh this and take a  look at the console what happens so you can see   the very first time we get data as undefined  error as null is loading as true is error as false   success as false and idle as false as well so what  does this mean that means that our request is in   loading state right now the promise is there but  it has not resolved or rejected right now right   finally once one second is over you can see 145  30 we get this message and after one second we   get data as undefined error as null undefined is  because we are not calling resolve with anything   um is loading is false is error is false his  success is true because the promise resolved   it did not crash or anything and his idle  is also false right we'll be discussing more   on these states later later down the line as  well as we progress but that's the crux of it   right so it gives you full uh picture of where  your request exactly is so the first thing which   will fire is is loading then you know if data is  available then his success will be true as well   if error is available is error will be true as a  boolean and so on and so forth right we will be   discussing is idle it's a special case where  your query is disabled so we'll discuss that   um but that's how it works at the moment right  so yeah for the most part what we could just   keep it to is data and error and you know  whatever we do we will be able to do it   just right here with data and error for the  most part but you can bring in additional   flags as well if you want right all right so yeah  that's pretty much it i think we have written our   very first react query which is technically not  making any network request but you get the idea   that anything which is a promise widget  returns react query internally you   caches it uses all sorts of logic behind it but  the underlying assumption of react query is that   it just requires you to return a promise as  a second function as as the query function hey everyone welcome back and in this  video let's just discuss a little bit about   states of react query itself you know these fresh  fetching stale and inactive and what these means   and how react query you know assumes your data to  be as well because just getting into syntax right   away won't be as much beneficial as it would be if  you know about the core functionality of it first   so what i'm gonna do is first of all let's  just go ahead and create a very simple button   component right here which just has this i'm just  going to return you know button i am a button nothing fancy here just want to separate um  this component from the actual app file right   and if you do something like this you can see  you get an imo button like this so there's that   but what i want to do is i also want to  have another button which just says toggle   the button component right so i'm gonna say button  on click hide button or you know toggle button   so the idea is that i also want to unmount  and remount this component so i'll say just   set visible visible and not visible right  so this is just a convention which says   just set it to the state which it is not and i'm  gonna have a visible and set visible as a state   variable which will just start with true let's  say and finally let's just import the u state hook   so what's happening here is that when i click on  this toggle oops we also need to use this when i   click on this toggle it will toggle the visibility  of the button right so if you toggle you know   that's how it works now the very first thing you  could see right away is that if i toggle this   the button is no longer on the screen you  can see the inactive query right here is one   that means react def tools and react query in  general will move your query as inactive as   status inactive whenever you know it the component  is not mounted right and it makes sense that your   query is inactive at that point once the query  is active you can see it immediately fetches the   query right and this is the default behavior you  can see it toggles off and it toggles on and it   fetches if you increase this duration from one to  two seconds you'll see that now if i toggle it on   it takes a couple of seconds and then immediately  once it's fetching once it's done fetching that   means you know you get the response and everything  instead of moving it to fresh it moves it to stale   and you might be seeing that hey why  this is happening again and again   i mean why is react very fetching everything again  and again so let me just clarify what's happening   here is that i'm bringing this window this you  know this embedded browser on code dam into focus   and then out of focus into focus out of focus  so whenever you move from out of focus window   whether it's a tab whether it's anything and you  focus it back on it react query would internally   update that uh query which you know has been  marked as stale right so any any particular query   which is stale will be updated that means it will  be fetched in the background and you know it will   just it will just do that it will just show you  that thing what we can do also is that instead of   let's say just 1337 i also want to resolve  a math.random number and we're going to do   i'm a button with a data right here right so you  can see right now in the sense that it starts with   a random number now if i move out of the browser  and into the browser you will see that the number   of dates out of the browser into the browser you  will see the number updates again in a couple of   seconds but if i'm just sitting here you will see  it will not update if i toggle it again it will   start with the cached value but it'll update again  right so it starts with the cached value initially   and then as soon as it has the new data  it will just show that otherwise if you're   just starting off for the very first time  for example if you're doing a page reload   it'll not have the data with it so the data is  empty that's why you don't really see anything   and you will have an is loading flag set  to true right at the initial point as well   so how is happening how this is happening again  is couple of things first of all react query will   attempt to fetch everything which is stale  when it moves from foreground to background   background to foreground right and second  of all the default behavior of react query   is that whenever a request is completed it's  fetched it moves it to stale and why is that   because there's a parameter called stale timeout  or stale timer or whatever it is time to stale   which is zero in react query by default that  means as soon as a query is fetched just move   it to stale right that means the data is still  and it needs to be updated so you can increase   that and if you do it will move to fresh for that  particular time duration and then move to stale   um yeah i mean right now it's an aggressive data  mode that means it always want to keep showing   the user the most up-to-date data which i think  is the same default right um and yeah one thing   you might have observed that while it's fetching  the data it actually doesn't clear out the older   data which is fine because it just keeps showing  the user a cached version of what was available   earlier right so that's that's cool so that means  once you have loaded data with react query you   won't really see any loading indicator if it needs  to be updated it will just update it automatically   now the other thing which i wanted to discuss  is about the react query dev tools itself   which probably we will do it in the next  video because in this video we have just   focused on these four states and i hope  you understood how all of them are working hey everyone welcome back and in this video let's  just go ahead and take a look at this react query   tiff tools and what how we can make use of it  you know more than just seeing this hello world   so if i toggle it back again once it fetches  and if i click on this you will be able to see   a lot of more details which react query internally  stores right so this is like the internal state of   react query library itself which is pretty cool so  what's happening here is that you can see inside   query details we have the query name first of all  and the state at which it is right now which is   stale observers 1 basically means that we have  just a single component using this query you can   have us multiple components using the same query  and have all that caching advantage and everything   and just a single request so this is like a super  cool feature as well which is very very hard to   do manually i mean you have to pollute your global  scope or something like that if you want to do it   and it's usually not required if you have  solutions like react query and yeah so you   can use the same query in multiple components and  not exactly worry about storing the data somewhere   in global right react query is doing that for  you internally so you know you can basically   make request for user profile data in your header  component as well as in your footer component as   well as in your sidebar component and react query  will make sure that you know the request only   goes once to the server but all the caching and  revalidation and invalidation is delivered to all   all the components right which have subscribed  to it so that's what this observers is for   last updated again is just a time stamp of when  it was updated last so that that should make sense   then actions is basically you know something you  can play around with it internally right so if   you click on refresh you can see you know you can  trigger that behavior invalidate reset remove all   that stuff you can see the data we should get is  the new data which you get every time the query   fetches and in our case it's just math.random  nothing fancy here query explorer is basically   consisting of uh you know some options  which react query is using right so   let's see if we can find something interesting  here you know options is basically query key   query hash we'll discuss query hash what it is  and why is this as an array in an array form   we also have observers which is you know again  the same thing more or less that how many   components are using it we have the cache which  could be used for you know cache revalidation   invalidation and then fetching the stuff again  um queries map is also there so this is this is   sort of you know if you want to dig a lot into  internals of react query what all data is storing   then you can do it from this particular point  right and inside state you will get again all   sorts of stuff what is the data currently  how many times it has been updated i mean   you usually won't really need so many details but  it is there if you want it ever right so that's   that's a good thing to have right so yeah i  mean more or less what's important here is that   you have a lot of information inside of react  query within the dev tools and it is accessible   in simple terms right so these are simple words  is paused is resolved you can understand it   on your own as well that date updated  count stuff like this time stamps etc   so yeah that's pretty much it for react query dev  tools tool and once we start writing more queries   you will see more lines here and you can you know  just play along with them around them as well hey everyone welcome back and in this video  let's just take a look at the query key before we   actually get into query functions and in detail of  building a project with react query so we already   have taken a look at what query key is and how  it works but let's just go and formally look   at it once in this video so you can see once you  have set up just two device once you have set up   the query client provider you have created a new  client and you have imported the use query hook   you can simply go ahead and create any query with  like key one something like this just write this   hook as it is and if you open the reactive tools  you're gonna see that key one now exists right   although it's saying fetching and all that stuff  but you can you can leave that for the moment   but you can see key one is how it re how it is  represented in the dev tools is in the form of an   array not as a string and this is important  because react query internally uses   arrays for storing the keys to the query right  and why it does that because it helps you to   just forget about you know you know forget about  just concatenating the key in a you know in a way   if it depends on props and something like that and  just focus on uh passing dependencies to the query   so what i want you to think of this is in  the following way you can have like key one   you can have key two and so on but how you  should think about this is that these are kind   of like use effect dependencies not exactly  but you can think on the similar lines that   the way you specify dependencies and use  effect that whenever those dependencies change   your keys your use effect function  runs similarly your use query   result the final result is dependent on whatever  keys are here right and if these keys are changing   then your query will can be refreshed your query  can be uh you know invalidated the data can be   brought again from the server and so on so for  example if i had a to-do list right as a to-do   list application and this was just a single item  so i would probably have a prop which was like   prop dot item id and let's say i had a rest api  which got that so i will probably specify an item   id like this right and you can see it's null  right now but you know if you populate it then   it'll automatically be um you know relevant so  in this case you would have something like to do   single item as the first key because you know  it just marks the name space as such because you   would be using use query later down the line right  in other components as well but let's say if the   item id is just one or two or just a single number  then of course you don't really want that to be   just a single key because that's just too common  right and some other component might overwrite   that so you just specify what the category is and  then the number so it's more of a convention also   what you should follow and what you could follow  is that the first thing could be you know you're   defining name space of what is happening what  is going to happen with this query what you are   exactly fetching and the next few um keys could  be just dependencies of what you want to bring in   right and yeah that's pretty much it you  can also throw in objects if you want here   status data errors stuff like this if you have  like you know depends on your use case but you   can't throw in objects although i would recommend  try to stick to primitives no no specific reasons   i just see like you know because just like with  usefix it's kind of a bummer or you know not a   good practice to throw in objects because they  might get recreated on um every single render   but this is not the case here you can safely  use objects but my suggestion is just if you   could try to stick to primitives just keeps the  things clean and concise so yep that's pretty much   it for this video hopefully you understood what  keys are we're going to be taking a look at that   in the practice labs and the practice projects  hopefully which you are completing along the way hey everyone welcome back and in this video let's  just go ahead and take a look at how you can make   use of dependent queries in react query and what  exactly does that mean so first things first what   exactly is a dependent query a dependent query  is a query which you can control by passing in uh   enabled you know let's let's first of all define a  feature function and then pass in an enabled enab   led as false right so this feature function is  gonna be very simple we're just gonna have a uh   you know promise dot resolve let's say 100 right  whatever so just a function which returns your   promise and if i refresh this now let's see so  we have got our query right here in the dev tools   and what you could see is that if i go ahead and  open this query right here um what you will see   is that right here inside of the state you will  see the statuses idle so what this means is that   whenever you have the enabled as false this this  option present as the third argument whenever that   is happening your query would be in status idle  and you can actually get out this value by saying   you know is idle which we talked about as well and  i think in the beginning videos i can say is idle   and then just throw in right here and inside  the browser logs you will see that is idle   is true in fact true for us so what does that  mean that means that is idle flag is enabled   when the query is enabled false that's something  you can make use of and second thing what this   enable actually do is that it allows you to  conditionally render the hook right because   you know you cannot technically use if else right  here because react then complains that you should   have equal amount of hooks so this enable is kind  of like you know let's say if this enabled was   um item id let's say right from the props so it's  kind of like saying that if item id then i want to   run this query otherwise i don't want to run this  query so because you cannot do it with a with a   hook you cannot use if else with a hook that's why  you have this uh nice little syntax with you which   just says enable item id and you're done for the  day now we can go ahead and create a very simple   uh you know very small application out there so  just to test it out and i do recommend you guys   are also testing it out as you are playing  around even with the real apis if you want   or if you can i'm just going to have grab  the use state from react and what i want   to do is instead of all this let's just go  ahead and have a button one click which just   this and sets this to you know whatever it is  not right so this and just say this is state   and what you're gonna see is if i get remove  if i remove this we have a click me button and   you can see it's it's in the stale state right  now it started from the stale state and it was   in the stale state all along right but if i click  on this you could see that well you didn't see   anything because you know the moment i click  on this we got the data because promise.resolve   resolves very fast so instead what we can do  is we can make use of our nice little hack   return new promise resolve which just returns set  timeout resolve after a second right or after a   couple of seconds now if i refresh this and if i  click on this you can see it goes into fetching   and then goes to stale again right so you can see  now because the query is enabled we get all the   behaviors which you also talked about earlier that  react query will start fetching whenever you bring   the window into focus but if i click on this again  to disable the query so this enabled is false now   now you can see we again lose out on that  thing and if you pay close attention to the   state here of success we have a state of success  right here but if i refresh this you're going to   see that it starts with the state of idle right  and if i click on this button it goes to loading   success and then it stays at success you know and  then it's fetching true false it's just it's just   the variable which gets uh triggered now if you  click on this to disable it again you're going to   see that it stops working and because you already  have the data well it can re it can use that data   right so it does not need to fetch again to use  that data so yeah that's pretty much it on how   you're gonna use the enabled property in the use  query hook i hope you understood how this works hey everyone welcome back and in this video  what i want to do is create a very simple   application using react query so that we  could understand how it is exactly working   right by actually making requests to the backend  server now the way we're going to do that is first   of all we're going to define a fetcher function  right so it'll take in a name of the repository   right and i'm going to come to that while this  what this means and we're just going to return   a fetch request we're going to make a fetch  request to api.github slash repos and then this   repo right and i'm going to tell you what this  means we're just trying to get some metadata about   any github repo and this just passes it and then  once we have that i want to convert the result   to json and i hope you understand the syntax  that how you make fetch request in javascript   you just write fetch if if you just want to make  get request you write the fetch the url dot then   and then whatever response body you get you  process it into dot json.json in fact also   returns a promise so this whole line is a promise  right so you have got a fetcher as a promise   now what you want to do is right here we just want  to give this as a function and now i want to say   let's say facebook slash react right so once we do  that and let's say we change this to github data   and let's say for now facebook slash react because  that's that's our query right and let's just get   off enabled as well because we want it to be  enabled like forever all right so let's see i   think we are missing some semicolons no not really  all right so once we have done that let me just   refresh this real quick and what you're going to  see that we have this and instead inside of this   inside the data you see we get all this nice urls  and all this data and what this data is exactly   you can go ahead and take a look at you know you  can just open this in a new window if you want   facebook oops facebook react and you're gonna  see this is what github returns you right um on   this on their public api so we can extract away  some information out of this what exactly um   what exactly whatever we want in the ui so what i  can say is i can say something like you know name   of the repo for example is the name which we get  from here right and we know that we have the data   from here so i'm going to say data.name and i'm  going to immediately see that if i refresh this   you're going to see that we get a crash because  obviously the first time when it loads the   fetch request has not completed the data is not  available so this data is in fact null right but   fortunately we also have an is loading flag here  which is available to us so we can just say that   hey if this is loading then i just want to return  h2 loading right something like this so now if i   refresh you can see for a split second we get the  loading on the screen and then once it's ready we   get name as react right we can do much more than  that we have more data so we have a description   we can do data on description something like this  which is the description which will be available   a declarative efficient and flexible blah blah  blah right and you can do you know the repo stars   as well so if you want stars that is basically  data dot star gazers underscore count this is how   the property is available you can take a look at  json it's not a it's not something you won't find   but you know you get the idea so now  what i want to do once we have this   is we can have an input type text and then i could  have you know value as repo repo name or whatever   so what we're going to do is we're going to create  a state variable repo name and set repo name   and this state variable is going to hold our this  information which was actually which we hard coded   right so instead of this i'm going  to go ahead and actually do repo name   and set repo name like this right and of course  close this out and i can say on change you know   just set repo name to either target.value and you  can see repo we can get the event right here and   you can see right now we get blank information  because well we don't really have any data   at all or you know we do have the data but it  does not contain any name or description or   anything like that so that's why it just does not  render anything at all so now if i start writing   you can see if a c e and you can see obviously  it's not very helpful because on every single uh   you know keystroke we are also getting  that so instead of that what we can do is   probably just you know move it here also diff  class name app you know there are better ways to   do that but i'm just going to stick it right  now so that we just have to write it once   um and of course here as well so if i write  now f-s-e-b-o-o-k slash re-act you can see   that's how it looks like in terms of  network request so it will start making   all these network requests and once we get  to facebook slash react we have it right um   another thing another repo which we  could do let's see api.github.com slash you know if we just do let's say github.com   i can do code down because those are  private repos and it will not be available   so we can do read x which is something new i  have not really heard about it so if i do r e d e   x you can see a bytecode optimizer for android  apps and it just got a 5 000 stars right   but the funny thing here is now that if i do r e a  c t again you can see that it immediately appears   right it immediately appears on the screen  because we already had data for this request   and you can see if i do r e d e x it immediately  appears right because we already had data for this   and it can just fetch again in the background  so this is where you know react query really   shines in it's not about just making the first  request but it's more about subsequent request in   your application right and if you have a single  page application you will realize that people   you know if anyone is staying for you know more  than a couple of minutes they're not just you   know taking a look at the first page but actually  interacting with your application there will be a   lot of events where they would be actually just  interacting with your app and your apis and they   will be hitting the back end and a lot of your  apis would be hitting the back end multiple times   for the same thing like user data or you know  whatever it is user settings something like that   so react query can cache it for you automatically  and you can see that what happened here was   it's it displayed all the data i'm not sure if you  caught it if you did not just rewind the video a   little i'm pretty sure you would be able to see it  but it started with one six eight nine seven one   nine seven one nine seven one and then it updated  to two and the reason it happened is because you   know it displayed the older data first it fetched  it in the background it updated it with the newer   data it's very smooth it's something which  you would almost always prefer out of the box   and which is something of a headache to maintain  if you're doing it yourself right i mean   why would you even want to do it when a solution  like this already exist and it is very well   maintained as well so this is the place where  react query and things like these really shine up   so yep i mean that's that's why you would use  it right so this was a very simple application   which you can of course improve maybe you  can have a button here which when clicked   then makes the request but for the most part you  know you will have this um working right so yeah   that's pretty much it for this video i hope  you learned something from this probably in   the next video or something you might be required  to build this yourself using the uh react query   and all these hooks so make sure you are doing  this because i can't enforce you're doing that   or not if you're not passing the challenges  and passing the labs and passing the tests   and all that stuff so make sure you're practicing  along the way and yeah that's all for this video hey everyone welcome back and in this video we're  going to be starting off by creating a small   blog for you which would be powered  by react query and by powered by i   just mean you know just having those links  and caching and all that good stuff enabled   so we're going to be using a placeholder api but  feel free to create a small back-end for yourself   and use it right and if you want to do it on  code damn you can do it by splitting the terminal   you know just creating a server.js file here and  by running node server.js you know second terminal   if you want to do that that's possible but  anyway what i want to do is i want to say   that um let's let's first of all  take a look at what json placeholder   is right so it's a it's a sort of a api available  for you to just try it out right you can just   basically get dummy.json response and if you do  like post for example right here you're going to   see we get a bunch of posts right which looks  like you know for our use case these are just   random posts with random text so we can go  ahead and play with that so what i'm going   to do is i'm going to first of all try to get  these posts and try to display the data so i'm   going to say use query um post and i'm going to  just have a fetcher function again so feature   but this time this would be just url and this  would be like just fetching url and then result   is resolved.json right that's it very simple so we  have this then we have something like feature of   this and then finally what we have is that's  it yeah i don't think we need any options here   what you're going to be seeing now is that if  i refresh this we will have data eventually   right once this once the loading is complete so  i can say something like is loading and you know   if it is loading then i just want to return h1  loading otherwise we have our request is complete   right all right so technically we should do a  little bit more than just checking for is loading   because apis also fail back ends fail networks  fail a lot of things can fail in the way but we   can add error handling data down the line right  what i want to do right now is i want to say data   whatever we got we can just rename it to post if  you want so we can say post not map a single post   and then if you take a look inside the api you're  going to see we get two three fields like user id   id title and body right so what we can say is that  hey i just want to have a post dot title right   and the the key which you can give it is probably  post.id because it seems like it's unique   so you can say post.id and there you go so now you  have all these posts and all these titles and you   can also have you know a post or id right here  just so that we have a small number or something   like that in front of every single post right so  that's that's done so we have our post on the page   but we also want to link them right so what i  can say is that instead of a paragraph tag or   you know maybe we can keep a paragraph tag we can  also give it an ahref so that we link it to some   place on our um you know on our screen so either  you can go ahead and create a different route   a different component which will require us to  install you know react router and stuff like that   which i would probably not do because this  is a tutorial focused on react query but   you can do that so either you can just go  ahead and redirect the person to a post id   or what we can do is just stick with the official  documentation example which is available right now   and just do it in place so although we are doing  it in place that means whenever somebody clicks   we're just replacing the post into the same  component but it is like i said it is completely   possible to do it in a different route as well you  just have to redirect that person to a different   route and get the post id from the url  instead of the state which we'll define here   so what i'm going to do is i'm going to call  a state or you know post id set post id and   i'm going to say it equal to you state null for  example we're going to start with null right and   what i'm going to say is that whenever i click on  this a anchor tag we set the post id to post or id   right so now whenever i click on let's say this  or this or whatever if i just go ahead and say   you know if i just go ahead and  say if post id is not equal to null   then i just want to return h1 active post is  post id right so what's happening here is now if   i click on five you can see we get active post as  five refresh we have to refresh because we can't   really go back because we are making changes in  the same component active process nine and so on   all right so once we have done that  how do we display the active post now   so to display the active post what we can do is  we can create another component so we can say   post and then you know post id as post id right  and that's it now we can go ahead and create a   new file that will just make things a little  bit easier to see so we can say post.js6 and   this right here we're just gonna have import react  from react i'm going to say const post is equal to   we're going to have a post id sent to us and i'm  just going to say export default post as well   right so now if we just close this  and if we import our post from   you know post i hope that will work yup  and i just say return h1 post id is post id   you would be able to see that now if i click on  four we get post ids4 so fantastic that's working   now what we want to do is we also want to  say a reset post right or maybe like go back   something like that so what this go back just  does is that it sets the post id to null again   so that we have all our post visible right  so what i can say is that hey this is a div   which we return and i can just say hey this  is fine but whenever somebody wants to go back   we can just say on click go back which is  again something which we get from the props   right all right so now if i click on this if i  click on go back perfect so it's working we have a   dynamic post id available in a component and it's  also working now the question is how do we get   more data about this post itself right what we can  do is we can make use of use query again inside of   this component because you know that's that's  where the true power will lie that we can use   use query multiple times in different places  so what we can do is we can define another use   query hook i'm going to say use query and what i'm  going to do is i'm going to say this is basically   you know we wrote posts here i'm just going to  go with single post and i'm going to specify   the post id now this is important because here  like i said in the previous videos as well here   the post id is actually dependent uh the queries  result is actually dependent on the post id right   so i'm going to use the same  fetcher because it will just work   we get the fetcher right here and  that's it we don't really need a third   solution or anything so we extract the data we  extract there is loading as well and we just say   if is loading we have a return loading or you  know just loading post something like that now what we want to do is we want to say that  once we have actually first of all let's see   how the fetcher would work because this is the  wrong implementation the way we want to say is   that it should fetch this url which we have with  us of posts so if i go ahead and open this you see   we get a single you know long list of array of all  the posts but if i go to post slash let's say 22   so this is the post id right so now we get just  that single post with us now technically does   not really make a lot of sense because you know we  already have title and body but just imagine that   if you had some more information or some more  metadata which you could display in the post   because most likely you will if you're creating  your own personal blog you will have some more   data right here now what we can do is we can make  use of this inside of the feature so i can say   something like jsonplaceholder post and then the  post id now this is important that you're using   this in the url obviously for obvious reasons  that you want to fetch that data but that is also   important because you know as a dependency in the  use query hook because when it changes we want it   to change as well so now what we can do is we can  finally say uh data dot you know whatever we get   title and then we can also say p data dot body  right so now if i click on this one which has this   title use query is not defined very  well import use query from react query click loading post boom right we have the title  we have the body go back click loading post boom   title body go back click loading post boom title  body go back now if i click on this one again   you're gonna see boom we have that already loaded  in although it was stale i agree although it was   still and it faced it again under the hood but you  did not see that happening because you already had   some form of cache available um anyway right so  that's that's that's awesome 33 boom again done   so yeah i mean this is this could be pretty much  you know a regular different page as well right   now we have just hacked it into a single component  but you could just very well be redirecting it to   you know some slash post or something like  that and then this post id would be getting   from the url not from the prop inside of  this uh component but you get the idea right hey everyone welcome back and in this video and  actually in a few videos now we're going to be   discussing about how you can interact with the  react query cache right so as a developer you   know i know that when i have clicked on three and  i go back and when i click on this three again we   will not make the request i mean we will but  not immediately and won't show any loading but   how do i for example modify the cache or you  know just get ahead of time what it is maybe   i want to get it for some reasons so the way you  do that is by accessing this little thing which we   created earlier right so this query client right  here is the thing so what we can do is we can   just go ahead and create a react query client  dot js something like that and what i can say   is that hey this little guy or uh you know this  statement right here is this and i can just   say export default client right and we can just  have import query client from react query right   so not now what we are doing is the purpose of  this is to have a single ton representation of   this client so that we are working with the  same client when we import it other places   so what i can do is i can go ahead and  say client like this but i need to import   the client from react query client right and once  we do that you would see that it's basically the   same thing in the browser preview nothing has  really changed but you can now also access   the query client inside your app.jsx for example  i'm going to tell you why this matters so we have   client from react query client right and remember  this is the same client which is being used   by the react query client provider that means  whenever you are using use query whatever data   it is fetching it's actually linking that somehow  to this caching uh this query client provider   so what you can do one interesting thing you  can do with this query client provider is you   can fetch and see what is available inside of  the cache right inside of the cache system right   now all right so the way you would do that is you  will say let's say cached post is equal to client   dot get query data now this that quit query data  is something which will give you a sneak preview   inside of what's happening and the first argument  is just like use query it's a key so for this one   i'm going to give it a post because you know  we obviously know post is there because of this   thing but post and then the id of um whatever  it is that's that's what we want to get right   that is is that post cached right so we can have  like let's say just five as the id at the moment   right so if we have this if i do something  like console.log cached post and then   cache post something like this if i do like this  and if i refresh this page right here you're gonna   see in the browser logs we have the cache posts  and us as undefined which makes sense because   you know we have not really fetched this number  five yet but if i click on this now right and   if i go back now you're gonna see that we get the  cash post so this means that get query data would   actually return you undefined if it is not present  in the cache but it will give you something back   if it is right and obviously it will just  give you back what is present in the client   this is useful this is helpful because now you  can get ahead of time uh you know you can not   only just fetch data into the cache which we'll  see soon but you can also get the data out of the   cache as well so what you can do one thing i can  think of is you can go inside this render function   and you can say something like you know if the  cash post is there then i can just say visited   otherwise i just say nothing right so this just  means that hey if the cash post is already there   that means this value is not undefined we  will get a visited otherwise we get nothing   and you could see this is actually not working  because we are getting all the visitors because   well we have visited five so we want to replace  this with post.id and now it works like clockwork   we get visited only on the post 5 maybe you can  you know if you want you can just take it out   so that it it does not appear  as a hyperlink or something   but it's your wish so there we go so now if you  have this you can see you get a visited in bold   and then a link otherwise you get nothing so  if i click on three go back boom right four   go back boom and it knows that we have visited  because it is present in the cache 19 go back   and boom right so you'll also have that on 19. so  yeah that's how you get something from the cache   and you can pretty much do anything  you want i mean if you just import this   um right here and try to do a cache uh check it  wouldn't really make a lot of sense because you   know you would be running the hook eventually so  why would you want to extract it but you know if   the use case is there that then you know  that it's possible right and programming   most of the things you know we are watching these  videos you are watching these tutorials most of   the things are not for you to just go ahead and  implement immediately but they're mostly for you   to just know that they exist so that when you  need them you at least know that these things   exist and you can take a look at documentation or  these videos or any other text later down the line   so yeah that's pretty much it for  this video i hope you understood how   this get query data is working from  the client how you can abstract it away   and yeah that's that's super  helpful in a lot of cases hey everyone welcome back and this is a good time  to discuss about a parameter called cash time   so cash time in react query is used to determine  how long your query result will be available   in the cache and this means that whenever let's  say somebody you know in in this case you visit   a page or you visit a component you get a split  second loading and then this loads but you don't   get that again right so for how long will you  not get that loading again that means for how   long will it keep it inside its cache that's  what the cache time parameter determines right   that when something becomes inactive that means  you know when this component is not mounted   this use query hook is inactive then how much time  will it keep the cash will it keep the results   in the memory right because obviously it does  not make sense to keep it forever because   well you know you probably want to free up memory  a little but you can customize that by using a   cache time parameter right so what i'm going to  do is i'm going to set this parameter cache time   to let's say 0 right and when i do that and if i  refresh this you're going to see what we have done   is we have set the cache time of this every single  post to zero that means when i click on this   i get that loading for a split second i go back  and if i click on this again you see we still   get that loading right so what you were able  to see was that it was no longer present in the   cache although it says visited here because when i  click back for a splits again it is present in the   in the ui but it let's if i click on this number  two and go back you can see it's gone the it is   gone from number one right because the cash time  is zero and it is immediately destroyed as soon as   this post is unmounted right and you will always  get that uh split second loading which you see   right you might not be seeing that that much  if uh that is an issue what we can do is i can   just go ahead and throttle my request to slow  3g and now if i click on this you can see we   get the loading post i go back and if i click  on this again you see we get loading post again   so this is what happens right i hope that helped  you understand how the cache parameter is working hey everyone welcome back and in this video let's  quickly take a look at query data selector in   react query which is a relatively new feature so  you won't find it like in in previous versions   of react query and what this essentially means  is that you know it's nothing fancy as such but   the ability to modify the response of the query  or transform it somehow what do i mean by that   let's go to the app.jsx and right here inside  of the third argument which is like you know   the options argument for us what i can say is i  can pass in a select here and what this will do   is that it will allow me to transform the result  of the query so what do i mean by that you know   we are we are getting post right initially so all  we get all the posts so what i can do is i can say   post or do you know result whatever you want to  say it it's just a anonymous function and i just   say result dot slice 0 to 5 for example and you  can see immediately what we saw is that we just   get first five results here and if you console  log it in fact if you try to console log it if you   console log the post here you're gonna see that in  the browser you know not really post post.length   you're gonna see in the browser you always get  five post right now if i changed it this two to   six you're gonna see we start getting six posts  right now what does this mean is that you know   you can surely write dot slice here if you want  but react very just gives you the ability to pass   in a function which can transform your results  somehow before your component actually consumes it   it might be super useful if you want to just keep  your component level thing clear and if there is   a transformation required but if not well you  can just bounce it off but like i say for all   the things i say that you should know that this  exists right so you have result dot slice maybe   you can just do a result dot slice zero two one  just get a single post right you can do probably   you know one two two whatever you know  you can just play around with this   and get a single post so this basically gives you  the ability the superpowers you know you can just   return the first post as well in this case  it will crash because you know we are trying   to map over this but now this is just a regular  post so your call whatever you want to do right   this will fix it but you know you get the idea  this is similar to like how the slice would work   but yeah that's pretty much it for this video i  hope you understood how the selector thing works hey everyone welcome back and in this  video let us just go ahead and take a look   at what set query data does now if you remember a  couple of videos back we looked at what get query   data does and you know that's how we implemented  this visitor thing you can see right here now just   like get query data allows you to query the  cache of the react query and extract it out   set query data actually allows you to do something  but opposite right it allows you to overwrite this   cache or update this cache if you want to say  that so what we can do is right here with this   anchor tag being done what i can say is button and  i can say mutate the title for example right and   i'm just going to say that you can see we got this  muted the title button with every single thing now   and what i'm going to do is i'm going to say  on clicking this i just say hey mutate title   and post.id right let's just take it out of this  function it's already getting too messy i'm going   to say function mutate title and right here i'm  just going to receive an id right so what i'm   going to do is first of all let's just alert this  so that we are sure that we have the right id 1   5 awesome so we have the correct id now the  next thing i want to do is i want to make use of   the same client which we had and i want to say  client dot set query data right instead of get   get query data and what this does is that it takes  the first key as the query key like you know the   first argument as the query key so we know that  this is post and then post id right and the next   thing it does is that it takes either new data  as the thing or just like you know use state   works you know that you states handler can either  take the new data or it can take a function which   has the old data as the first argument right so it  can do that so we have the old data first right so   i'm just going to go ahead and first of all try  to just console.log yeah maybe this console log   if all data exists right something like this so  let's just go ahead and keep it a little small   give it a refresh because you know all that cash  is already present there so if i click on this   muted the title we get post is not defined and  that is because you know we just have to write id   here not everything so if i click on this you can  see that we are getting undefined in the console   right like right here keep your focus here if  i click on this we keep on getting undefined so   this means that hey this is you know the post is  not present in our cache right so that's that's   that's all it means that it is the source is not  present so if i click on this okay you cannot read   property title of undefined let us see what  went wrong so we have is loading data.title looks like we are missing something said post id  hmm looks like a network request error most likely   let's try this one more time click on this yup  looks like some some network error or something we   should be handling you know network errors as well  i'll go through that how we can do that but anyway   now you can see that i've got the title i've  got the body if i go back now and if i click on   this mutate the title you can see now we have the  post as the console logged right so there's that   so what i can do is right here i can say if all  data is in fact available i just want to return   um you know old data and i  just want to say title is   boom boom mutated i have no idea why i went with  that this is completely random but uh yeah let's   do that so i'm gonna click on this and looks  like this is something different probably um   not exactly sure if this is some this is a  cache problem from react query or you know   something related to that but let's see if that  happens again i'll just pause the video and see   it for once and get back to you but anyway if i  click on this now we get this go back i can mutate   the title so hopefully has done it hopefully has  set the title as boom boom title and if i click   on this again we get that go back mutate click  on this again you see for a split second we do   get boom boom title right but it gets replaced  after that so what i can say in order to not   make it replace is i can say this tale time is  infinite infinite infinity right and what scale   time means is just like we have cash time which  keeps it in cash the stale time just means hey i'm   not going to refetch it um considering it's not  stale that is you know considering it's out of the   screen or you know uh by default the scale time  is zero we're going to discuss that in the next   video pretty much but for this video if i take the  stale time as infinity and if i click on this now   go back mutate the title click on this again you  can see we get boom boom mutated right this time   because tail time is infinity let me just actually  discuss tail time in the next video in depth real   quick so that you guys are not lost but anyway  you can go back you can start seeing stuff now   if i click on this you're gonna see we get this go  back and you know if i mutate this click on this   again we get boom boom mutated and bonus points  to you if you can guess why the title here is   not changed title here is not changed it's changed  inside this but it's not changed on the out front   can you guess why well of course you should  be able to guess that that is because   posts is a different key than post and then the  post id right hopefully you were able to get that   although the titles are same in both  the cases when of course they are same   but in this case we are modifying the post  id as the key right using set query data   this is being i traded on post which is this key  right here in use query so if you modify the post   key right here then it will make some differences  right so yep that's pretty much it for this video   let me quickly jump to stale time as well in  the next one so that we are on the same page hey everyone welcome back and in this video let's  just go ahead and take a look at what is stale   time and what are the differences between stale  time and cash time so first things first let's   let's understand the fact that react query  starts with a stale time of 0 as a default   value and a cache time of i believe 60 seconds  no not 60 seconds actually 300 seconds that is   5 minutes so these are the default values react  query uses for you but what do they mean exactly   so let's see that so first of all about stale time  what stale time means is that whenever react query   fetches a request whenever react very completes a  request that is the data is available and you know   it's done and dusted what it will do is it will  start a counter inside it and it will count it   to steal time right so if your scale time is 1000  that is thousand milliseconds it will start the   counter 2000 that is you know for for one second  and then it will mark the query as stale so what's   going to happen is once your query is fetching  it it is into the fetching state it moves to the   fresh state and then once that stale timer hits  it moves into the stale state let me tell you   how this works let's say i have a scale time of 10  seconds on every single post request let me just   give it a refresh real quick um we have the cache  time as default so don't worry about that let me   click on this and you can see it fetched it for  a brief amount of second and it is in the fresh   state for 10 seconds right it's going to stay  there for 10 seconds and you can see once it   110 seconds are over it moves to stale and you can  you know even take a look again if i refresh this   if i click on this you see this post one is green  for 10 seconds and once these 10 seconds are   over it will move to the stale state right yep  there we go so what's happening here is for 10   seconds it will not go ahead and refresh the  query in any case now what are the cases the   cases could be if i click on this the mount the  second one is refocus you know like we used to do   and the blue uh request which you see is of the  post request right it's not the post one because   it still is fresh right that's why now you can  see if i refocus it again both of them would   be served and this one again gets fresh so you can  see refocusing uh you know unmounting and mounting   that will not happen so if i change it to for  example 20 seconds and if i go ahead and you know   just go ahead and activate that mutate function  which is already activated and now if i refresh   what's going to happen is that if i click on the  title you know quickly go back mutate the title   and click here also before getting into that one  bug which i discovered is the cache time that's   actually 300 milliseconds not 300 seconds  so let me just go ahead and remove that   and what i'm going to do if  i go back here refresh this   and if we click on this quickly go back mutate  the title and go to the again this post again you   can see we get boom boom mutated but as soon as 10  seconds are over and the query is marked as stale   let's see what's gonna happen so nothing is going  to happen as such you know once 10 seconds are   over so you can see let's see the query is still  fresh i think it's 20 probably yeah it's 20. so   you can see now the seconds have passed and now if  i click on you know for refocusing you could see   that react query saw that hey the query was stale  so i'm going to re-fetch it right so this is how   stale time works if i go back mutate this click  on this and now if i go back and you know just   visit this again and again over the time until and  unless this query has been marked as stale it's   not gonna be re-fetched right you can see nothing  is happening to this but the moment it switches   to stale it's gonna be re-fetched by the browser  this is super important this is super critical to   understand you can see now it will be refished  that's that's you know that's that seems like a   good choice if you think about it now what about  the cash time so the cash time is pretty much what   for how long it should even keep the stale data in  memory that is that is cache time right all right   so now try with let's try this with a cache time  and still time both of zero right so if i click on   this now you can see it loads for a split second  and then um you know it's just available for you   then you can go back and click on this again and  you can see it still loads back again for you   you get that split second loader so this is what  cache time did if you had a cache time of you know   fairly large number like infinity or you know even  five minutes which is like the default you will   see that if i click on this go back if i mutate  the title and if i click on this now you get that   boom boom thing you know that that cached value  but you know you did not get the loading indicator   that's what the cache time is that will keep this  keep displaying you the stale value refresh it in   the background and replace it once it's ready but  if your cache is expired well then you know your   query is just as as fresh as a new query right  so yeah that's how the cache time and still time   work together i hope this gave you more clarity on  what stale time is super useful parameter um and   you know the use case really depends on your use  case or what you're trying to do but yeah for the   most part you can push a little bit of higher  value on still time right you don't want to be   too aggressive on on data which is available on  your front end but yeah like i said again depends   on your use case so yeah that's pretty much it  for this video i hope you understood something   let me know what you think about this in the  discussions below on the codename website hey everyone welcome back and in this video  let's just quickly take a look at how you can   modify the stale time cache time and any other  parameter value which we have seen and we'll see   at a global level as well right because let's say  if you don't want to do it on a per query level   but actually for every single query how do you do  that well the best way to do that is actually go   to your app.jsx or you know whatever not exactly  app.jsx but where you have defined the query   client provider right and right here you will  see the client which you are passing and we are   using an external file so what i wanted to do is i  want to create a an object which i pass here with   the first key as default options right and this  default options is basically just gonna be you   know just being merged with the all the options  which are available and they will act as a default   base for you to start so you can say like stale  time as infinity you know and basically get the   same behavior which you were getting earlier that  will not re-fetch it again so if i go back click   on this again you know um oops and made a mistake  this should also have a query right here and we   also have something known as mutations in react  query so i'll come to that but now you're defining   the default options for queries only queries right  so if i refresh this again click on this go back   and can you believe that i made us made the same  mistake two times in a row this should be queries   not query so if i refresh this now you can see uh  the queries are now always green right once they   are fetched if i click on this you can see these  are always fresh and they'll never go to stale so   pretty much you are locked into an application  which is never gonna be updating itself again   um you know unless the cash expires of course  um but yeah they will not refit to the back end   unless and until the cash expires so that's it and  if you want if you want to go like total insane   mode you can also set cache time as infinity and  now you have got a truly truly weird application   which will never really contact server ever again  once it has you know visited once which might seem   like something you might want to do but not really  i mean why would you want to do that um i wouldn't   i wouldn't recommend that right so you should  keep saying values i mean still time infinity   still might make some sense i don't know but cash  time should be a finite value according to me alrighty so that is pretty much it  how you can customize default options   i'm gonna see you in the next video  where we will discuss more stuff about   react query building projects doing  something more interesting with it hey everyone welcome back and in this video i want  to discuss about mutations in react query and what   they mean so we have so far just seen how you  know use query hook works but there's a there's a   there's a important thing which we have not  discussed yet this architecture assumes that   we want only the data from server number one  and number two is that we want only the data   whenever you know the component mounts but this  is usually not the case right if you have a form   or if you have some sort of interactivity where  the user clicks on a button and then the data   is fetched i mean in case of this we are just you  know just changing the link uh changing the whole   component but if you have something like that then  what happens so in that case what we can do is we   can make use of mutations in react query and i'm  just going to get rid of all the code which we had   just to keep things a little bit cleaner and  what i'm gonna do is i'm gonna throw in a p   tag here as well just because i feel like  it and i'm gonna start with a new mutation   and i'm gonna say this is use mutation and we're  gonna get this hook from um you know from the same   library obviously right react query and what you  want to do is inside this used mutation you want   to pass in a function which returns you a promise  again right so i'm going to pass in this fetcher   and i'm going to say you know whatever it is  you can say a fetcher or i can just say you know   a timer so i can say you know duration and new  uh promise resolve which just sets time out and   don't be afraid if you don't understand anything  but this is just you know just a fancy way of   making a timer await right so this is a promise  which just results after set duration that's it so   i can say this timer and after one seconds right  so expected identify with function what the hell   anyway so you can you see that you know we have  a mutation now with us but if you take a look   at inside the dev tools what you will not see  is that you know there are no queries at search   and also this mutation has not run and how do we  know that we can just you know just see that um   if we have console log for example i was run  something like this right and if you go to   browser you can see that we do not get that we do  not we do not have a i was run console log here   that means the mutation is not run when it is  defined and it makes sense why because the idea   of a mutation is that it mutates the state on  servo right it mutates either some database   it mutates something right at the end of the  day you know this is just a convention this is   again calling just an api endpoint in this case we  just have a promise which resolves after a couple   of seconds but this would ideally call something  like you know slash api create post something like   this for example right and then you know whenever  you have a summit button here you would say p on   click um run this mutation somehow and that's it  that's that's how you get event paste requests now   so how do you run this well what you can do is  you can just create a function called mutation   and right here we can just say on click call  mutation and i can just you know tease you a   little bit more by saying console.log about to  call mutation mutation right and if i click on   this you can see in the console we are getting  about to call mutation wrong right now how do we   call the mutation exactly is we say mutation dot  mutate async and we're going to start with async   right here right and there are a couple of  methods but that's that's one way to go about   so what i can do is i can refresh this i can  click on summit and you can see that we get   i was run right here and actually let me just  go ahead and move this i was run inside of   the promise which is resolved right so that we  get that um actually not even here we want to add it right here once it resolves  right kind of so if i refresh it now   you're gonna see that now if i have  you know console.log mutate async   called if i have something like this and if i  click on this you're gonna see we get about to   call mutation mutated async called and then  i was run after a couple of seconds right   now the good thing about mutate async is that you  can await on this that's that's why async is there   right so if i create an async function out of this  and if i call await on this what you're gonna see   is now if i click on summit we get about to call  we get mutation oops looks like we need to give it   a refresh again oh i think we are not returning  this promise that's why all right let's do that   and now click on the summit you can see about  to call mutation i was run gets called from here   and then we call this mutate a6 so it could be  something like you know you are updating the post   so you can have updating post as a notification  and then you can say post updated something like   this right assuming that you know your request is  your request is successful but there are a couple   of more things we have with mutation not just  muted async you can have a mutate only function   which we'll discuss in the next video but yeah  that's how you can do some event based trig ring   and you can see pretty much nothing appears in  the react dev tools because of the reason that   you obviously don't want to cache mutations  why because like i said mutations is an idea   that something is changing on the server and you  don't want to cache that result you don't want to   you know just rebroadcast it again at some  interval sometime because these are like   you know these are actual systems which will be  affected think about somebody who just you know um   tried to log out sometime and then somehow that  that cache was invalidated and your application   automatically logged them out right in case  of fetching that mutate muted async endpoint   so that that should not happen right so that's  why um mutations do not cache they do not   you know they do not work like typical queries  work and they are usually driven with events   from users endpoints like on click and stuff  like that or form summit or anything like that hey everyone welcome back and in this video  let's just go ahead and take a look at   side effects from mutation and side effects  is just a you know a fancy way of saying   some sort of callbacks from mutation so what is  it and how does this work well the first thing   is that you can pass in an object like this which  is inside of use your use mutation hook now you   can start defining some good stuff but that what  i mean is you can say something like on success   as a callback and this could be a function which  will just be called when request is complete for   example right now if i click on this submit you  can see we get update post request is completed   and then post updated so basically what react  query internally is doing is that once the request   once the mutation is successful it internally also  calls these on success this on success handler   right and not only just this this actually gets  a bunch of things so it gets not error actually   it gets data and it gets you know variables and  context as well which we'll discuss later down   the line but most importantly it gets data so  what we can say is if i do data console.log like   this and if i click on summit now you're going  to see we get updating post request is complete   we get data as undefinable because we are not  passing anything in the resolve but let's say   yo is what we passed right and give it a refresh  because probably this is outside the function so   might not get hot reloaded click on summit  updating post request is complete data is yo   and you can you know access it here as well if  you want and you know move ahead with your life so   you can pretty much drop this at all if you just  want to keep your side effects at a single place   but that's how it would work then of course  you also have on error with this which will   accept first argument as error and if there is  any error then this is what's going to happen   right so it will just say error with the request  and we can just throw an error what we can do   is to simulate that i'm just going to have a  reject here as well and i'm going to reject it   with yo again right so now if i can click on this  updating post we get i was run we get the error as   you you know this this was this error is actually  thrown by javascript because you know we are not   using try catch but what the console.log says  us in the on error we get error with the request   and we get the error as yo right so you also  get error you can also get error handling but   unsettled which is another one is something which  will run every single time so it will just say   you know request either errored or successful  i don't know but it has happened right   and of course you can know because onset will  also receive state and error as uh a couple of   arguments if you want to do that right so this  data is basically if on success was there error   is basically if one error was there and so on so  this is how you can maintain your side effects   like this inside of your mutation  hook itself sometimes it might make   sense to do this sometimes it might not right um  depending again how your component is laid down   your component is structured you might want to  do that but one thing which i know is that uh   when you combine like on success mutation with  something like you know query dot query client.set   query data stuff like this this becomes a very  useful thing because now your ui can automatically   update refetch new data after a mutation is  done which is pretty sweet uh we'll discuss   on that what i mentioned by that in more practical  examples stated down the line but yes for now that   is pretty much it i think that is all for this  video i hope you understood something out of it hey everyone welcome back and in this video i'm  gonna discuss you discuss with you the syntax of   dot mutate so earlier you remember that it was  mutate async but we also have a just a mutate   as a function available on your mutation and this  one is not asynchronous in the sense that it does   not return you a promise well it is asynchronous  because it has got callbacks but that's that's how   it works so when you call this for example if i  refresh this and click on the submit what you will   see is if i click on summit you get post updating  post post updated because you know this is not   awaited so it does not wait for that and you  know you get all sorts of logs and errors but   what you can do is you can also pass in um  a bunch of options just like how you pass in   in the used mutation hook and i have passed null  here i'll explain why because we don't really need   the data right here but i'll explain it why we  have passenger layer and what could we have passed   but for now if i have the same thing as above what  you're gonna see request is completed from mutate   you know error with a request from mutate and  from mutate right just to make a distinction   and now if i click on summit you will see we get  you know the same things request either error or   successful this is basically from the original  hook and we get error with the request mutate   so that's it and error with the successful mutate  right so one thing you can understand is that the   react first of all internally calls these before  calling the actual ones right on on the mutation   itself and that is important if you care about  order or something but for the most part you   should not have a code that relies on that thing  but yep that's that's how you have to work with it   the next thing i wanted to discuss is why do  we pass null here well this argument could be   anything right you can have 22 here that's that's  completely fine whatever you pass in here is   actually available as a param right here so if you  have you know like a second argument which passes   some data and you get a second argument like  pattern like this and if you can say you know   yo and then whatever the pattern was you will  just see that if i click on summit now we get   um you know this outer function does not update  on hot reloading so we have to give it a refresh   submit now and you will see error oops i think  it is not updating anyway oh we are using reject   not console.log oops so this should be right  here and maybe it does update let's see summit   um i was run whereas i was running yeah it gets  updated so you can see the pattern was past 22. if   i change it to like you know something else click  on summit you're gonna see that in the i was run   we get the pattern as updated so this mutation is  just a you know this argument is just one way of   transferring some data to your actual handler  which is something you would obviously do right   you won't just run a mutation without any state  you would probably have some sort of form data or   some sort of new post some sort of json which gets  passed here which gets passed again here and then   you know in your fetcher or whatever you're  using you just json dot stringify it and so   on and so forth so that's how it will work right  and similarly it will also work with muted async   you know this not this exactly but this  part which where you have to pass the   data so even if you have something like  this right here and give it a refresh   and you know just click on summit you're gonna  see that you still get the patterns as correctly   right so yeah that's pretty much it for this video  i hope you understood how mutations are working   how muted async work how you can pass some data  how mutate only works how these side effects work   super important stuff super practical stuff which  you will obviously use when you're building some   new applications some new projects um and  yeah very very very standard stuff and very   high quality things as well these are like you  know standard practices for calling mutations uh   some calling something as mutations for updating  data queries as different things and so on and   so forth so you will you can use this all of  this knowledge in production level applications hey everyone welcome back and in  this video i want to give you a real   real use case of using mutations with the help  of queries but for that we have to write a   very simple node.js server and i'm going to do  that all in the code down playground itself so   feel free to follow along with me or you would  probably have an exercise like that in in some   one way or another so what we're gonna do is  i'm gonna have a mutation right here which has   all of these handlers and you know we can just  get rid of unsettled for the most part and what   i'm gonna do is first of all define a fetcher  function like this which gets a url and then   doesn't fetch of the url with a method of post  right and probably like url and body because this   will be used with the use mutation we're gonna say  headers is content type this is something you have   to do with you know fetch request application json  then you do a body of json.stringify of the body   right and that's it that should get you started  now once you have this fetcher i can define this   feature and i can say this is like body and i can  say um you know the url is something like api dot   create record something like this and the body  is of course the body right on success we have   you know got response from back end and the data  and on error we pretty much have the same thing   got response from back end but the error got  error from back in right just to distinguish it   now what we can do is pretty much you know  get rid of this even get rid of the async   away thing we can just say mutation.mutate  and with some body whatever we want to pass   in but before that what i want to do is i want  to say some are you know some favorite languages   right let's say that is it now what i  want to do is i want to say let's see   first of all let's just close this up let's  refresh this guy and let's say that hey   here are my favorite languages and i'm going to  have favorite langs dot map language and you know   just returning an li or flank right with  a with probably a key of lang as well   and this should probably be lank not lan and  one the only error now we get is that favorite   language is undefined so let's create a query  as well so i'm going to extract out the data   as favorite lang i'm going to say use query right  here and what i'm going to do is i'm going to use   the query as you know the key as favorite langs  and the fetcher we could either define the fetcher   or you know i can just return fetch here because  it's just a single query api get records and   dot then t d json to convert it into json  and that's it that's pretty much it right   because now we just have to define this very  simple server and we'll be up and running so   what i'm going to do is i'm going to split this  terminal real quick um i'm gonna create a very   simple server.js file right here right and i'm  gonna just open this install express real quick   and i'm gonna start importing stuff right so i'm  going to just say const app is required express   and this is we this is going to be just a very  simple server so don't really worry a lot about   this so app.listen here we have to do a little bit  of hacking in this playground interface for now   i'm going to tell you why that is so i'm going to  just give it a refresh app.listen1337 because this   is the only publicly available port you should  probably not face this issue on your local setup   because you would have multiple ports available  but because this interface is just connected to   a single port right here that's why we have  to use just one three three seven and i can   just say console.log so so started on one three  three seven right and i'm just gonna say app.get   um you know right here what we had  api slash get records app.get this   i'm just gonna respond with request  response i'm just gonna say response.json   favorite langs and i'm going to say app.post right  here with api dot you know add record i think   that was it i'm going to first of all  get the record from request.body.record and then i'm just going to  say rest.json status okay   but before that i'm also going to add it  favorite langs dot push record right and   i can just say my favorite lens is an array  which is like html css javascript and react   right so what you can say is like you know  langs here as favorite lens something like that   already looks like we are all good to  go so what i'm gonna do is first of all   you know um let's see first of all fix our  front end so that we don't exactly need a   back end because we can we cannot use this port  and the server together so what i'm going to do   is right here make a bunch of  more changes so i'm going to say   right here i'm gonna say if is loading or if is  error i'm just gonna say if is loading return   loading dot or dot right or if there is an error  is error return you know error with request simple enough right now if i go ahead and close  the server and if i start the server of server dot   js what you're going to see is that we still get  well we still get favorite langs dot map is not   a function and that is pretty not pretty awesome  because what we would have in this favorite length   is actually the response like this lang and then  favorite line so what we can do is we can actually   go ahead and close this and this is this is a  little inconvenient at cooldown playground but   you know right now it just supports a single port  forwarding that's why you can only get access to   1337 uh on a single port but what we can do is we  can go ahead and write here just write you know as   a third argument select remember we discussed  this data and i'm just going to say data dot   lags right because that's what we are returning  from the server i guess lang not langs okay let's go ahead give it a refresh close this  down once we have got the data start the server   and what you're going to see is that we get  our some favorite langs ready for us right so   we have got four five languages right here from  the backend server what i want to do next is once   we have that in place what i want to do next is  right here i'm going to have an input type text   you know with a value of at add  lank whatever you know or maybe like   templar or whatever and on change i'm just  saying e set temp lang as e dot target not lang   either target dot value not lang right and the  set temp lang is just a state variable template   set template is used of empty string and finally  what we want to do is when i call this i just say   record is this template right because at the  server side we get the record like this and use it   one more thing we want to do here at the  server side is actually split this down   into express and app and just before that we want  to also say app.use express.json so that we are   able to send and receive json post bodies right  alrighty so there's that now once we have that   in place what i want also want to do is whenever  i click on summit we should also um you know fetch   the data again so how do we revalidate that query  how do we get that data again but for now you know   if i just go ahead and close this and start the  server not really close this basically start this   give it a refresh real quick and you know  then close the server and start the server   close this start the server then you will see  that we have all the languages available from   the server but now if i click on summit you  know although we do make requests but nothing   really happens and the reason for that is that  we are not refreshing this so how do we do that   that is something which we'll explore in the  next video because that's all for this one alrighty welcome back and in this video what i  want to do is actually invalidate our query our   data so that it re-fetches it again from  the back end once it's you know once it's   once a mutation has been done so what does that  mean that means that whenever we have a success   i want to say that whatever our query client  was that is this client right here i want to say   that hey bro just invalidate my queries and my  queries are for example in this case it's just   this favorite language right so the moment i  do that what's react query gonna do is that   it says that okay i think you know you told me to  invalidate this query so i'm just gonna invalidate   this and because this is already mounted it  will try to get that refresh the data and   show it on the screen also what i can do is also  set templating as empty once we have got success   or you know just press the button as  well depending on whatever you want to do   and that is pretty much it that is all we need  to do if i close the server right here start this   again just so that we propagate the react changes  at least and once we have the react changes with   us close this again start the server again you can  see that we get our application up and running so   our backend is now running and if i try to add one  two one two here hit summit what you're gonna see   is that well it goes out and um the query is also  fetched but our data right here does not contain   one two one two or you know anything like that  so that is probably some issue with our um   you know our end on the back end  so let's just see what the record   is that we get here so if i submit  it now maybe give it a refresh summit well actually looks like we  are not um we are not actually   making any request at all so let's just  quickly see if we can debug it real quick   so i'm just going to go to the  networks tab if it just allows me to   and there we go so summit create record okay so  we are hitting the wrong endpoint this should be   create there we go one two one two summit there  we go now it works perfectly fine so you can see   we also got the record on the back end and what's  exactly happening here is that we write something   hit summit it goes to the back end once it is  resolved we get the you know we set the input   field as empty and we also invalidate the query so  that means it will just refresh it again because   you know it sees that it is mounted so it's going  to refresh that query again and it's going to   populate it with an updated view super convenient  super easy to build a to-do application like this   now you know just have to use a query you have to  use a mutation and you're good to go right so see   how how convenient it gets and what i'm going  to do is i'm going to probably take another   video and do some good practices on what we have  here right because we can definitely improve this   so yeah that's pretty much it for this video and  i'm gonna see you in the next one really soon hey everyone welcome back and in this brand  new course we'll be talking a bit about github   actions continuous integration and continuous  deployment why that is important and how you   can set up these basic pipelines for your project  on github actions now by the end of this course   you would not just be able to understand what  github actions is and what ci cd is but also   would have built your few small build pipelines  where your project is being built is tested   and then deployed automatically wherever you  want so let's just go ahead and get started   with this mini course which we have on code dam  and this is part of your full stack and backend   learning paths on code dam so make sure you  are subscribed to code them if you are not yet   because we'll have a lot more things to  follow up after the cicd course let's go all right so in this course i'll be following up  with a simple react playground i'm just going to   say ci cd with github as the name and you can  pretty much follow along on your local system   or on code down playgrounds on codedam.com  playgrounds and once you get started with the   project what we'll be doing is not focus on the  project that much but focus on something known   as yaml files in this little series and github  actions eventually let's talk a little bit about   github actions as well so github actions is  basically a service which allows you to do   continuous integration and continuous deployment  now let's actually understand what this exactly   is and why do we need this these kind of things  well you see when you're building a project like   on condom playgrounds or you know on your local  systems what you are essentially doing is working   in the best possible and the best comfortable way  you can as a developer right so you are working   on all of this code and folders and everything  as as a nice experience for yourself but a lot   of times your project actually needs a build  step and sometimes even a compilation step   to become production ready that means trimming  off unrequired code compressing the code making   the code more performant and so on and all  of this build step and compilation step takes   time to run so what these ci cd services do is in  a in a nutshell basically they allow everything   which you have coded or written or any member of  your team has coded or written build and deploy on   staging production or preview environment whatever  environment you have automatically once you push   on a repository like github now this is again  important because you don't want as a developer   you don't want to spend a lot of time just  building and testing all the things by yourself   on your local system why because it wastes your  time and it wastes the capacity of compute you   have on your system so you want to make sure  that your deployment and testing part is as much   automated as possible so that you as a developer  spend most of the time working on logic and   building new features instead of actually building  the project itself and testing it yourself   github provides this as one of the services but  github is not the only place where you can run ci   cd there are basically countless tools out there  which can do that but we prefer github i prefer   github in this one because github actions actually  sits right right across your source code right so   when we will take a look at how we push this  project to github and so on i'll actually show   you that basically like you know github is uh  just very convenient to push your source code to hey everyone welcome back and in this video let's  just go ahead and set up a git repository in this   in this source code first because that is what  will allow us to also then set up a github action   so i'm going to go ahead and open a second  terminal over here and i'm going to start writing   get in it right you know all of this from your  from basically your github course on code dam   and i'm gonna just initialize i'm just  gonna say git remote add origin get   or you know i'm just gonna go ahead and  create a repository first so new repository   i'm going to say let's say this is test github  actions or you know maybe like github actions   code damn course something like that i can make it  public and i'm just going to create this now once   i create this i'm going to just use the https  version i'm going to say git remote add origin   and paste this thing now when i do get remote wii  you're going to see that that particular origin is   added now one thing we are still missing is  the get ignore file over here so that we can   just add node modules and everything and uh yep  that should be it and if i say initial comment   okay we need to also set up git here real quick  all right so once that is done we can say get   comment initial comment over here and i can now  just say get push origin master and apparently   git has removed github has removed the support for  password-based authentication so what we can do is   go back and create in the github settings apps  create a personal access token just for this use   case and i'm gonna of course remove this just  tomorrow so that it's not misused obviously   i'm just going to say this is github actions token  right make sure you select the repo access so that   it is able to access your all your repositories  copy this token right here and remove mode remove   origin because we need to add it back so  i'm going to say git remote add origin my token at the rate github.com mayholdmpt github  actions code damn course and hit enter now i can   go ahead and push it to the github right now the  moment i do that you're gonna see that if i copy   this repository url and paste it over here you're  going to see that it pushes our code to github   which is awesome but now we need to set up certain  github actions right now the way github works   is that it needs a folder called.github it's not  get you can see the git folder is already here   we created a dot github folder right now this  particular folder whenever this is present   github would try to see what kind of workflows  this folder contains right so i'm just going to   go ahead and create another folder inside this  called workflows right and when we create that   folder any yaml file which is present inside  this particular folder would automatically   be marked as a github action now what do i  mean by that let's say i create a yaml file   test dot yaml right it could be test.yml and if  i go ahead and open this you can see that we get   a yaml file over here and i can  just go ahead and write some crap   right here let's not worry about this for now  but what this essentially means is that this   particular file is now a github action and  now let me go back a couple of directories   and just push it again with the test yaml added  and i'm going to say get push origin master okay   so we do not have a workflow scope in the access  token so this might not be a problem if you   actually go ahead and you know just use ssh based  authentication in my case it is a problem because   i am using an access token but you know how to set  up an ssh based authentication as well i would not   recommend doing that on the code damn playground  until unless we secure all your credentials not   just the source code so maybe when you create a  new token let's say this is github actions token2   you also give it the access of the workflow over  here so once you create this token copy this again   git remote remove origin hit remote basically do  the same thing and then i'm gonna attempt to push   on master branch again and this time this works  because now it is able to create that workflow for   us if i go ahead inside this take a look you're  gonna see this dot github workflows is now created   and if i go to this actions tab over here in my  repository you're gonna see we see something test   yaml added with the cross because obviously we did  not write anything meaningful inside inside this   particular file but you can see something happened  right now this is what the workflow is all about   you create a workflow with a file a  yaml file inside github workflows folder   and it just gets picked up by github automatically  right no configuration nothing needing nothing   needed no toggles anything like that so a  lot of work which we'll be doing would be   in this yaml file from this point onwards and i  hope you understood so far what we did we just   created a repository we pushed it on github  we created this folder structure and github   automatically picks it right this is all magic  of github it's not the magic of git as per say hey everyone welcome back and in this video i want  to talk a bit about yaml or yml like i wrote here   and what this exactly is so yaml stands for  yaml is not a markup language or sometimes   some people say yet another markup language as  well but the point you have to remember is yaml   is pretty much what json is right so you have  seen stuff like package.json right so when you   take a look inside package.json you see there  are these objects which can contain keys and   values keys and values right yaml is pretty  much the same thing the only difference is how   yaml is written json is used as a thing to  communicate between different kind of languages   and build systems and you know environments right  so package.json can be read by javascript as well   package.js on this file technically could also be  read by a java program or a python program right   so let's say if your node.js script wanted to spit  out some data which your python backend would read   then one way to do that is to spit out  that data into a json format similarly   yaml is also a similar format for which you  would have uh you know you would require a   few libraries for example there is no native  support for yaml in node.js but it's more like   a data exchange format among different uh you  know different languages or different systems   now what yaml does better over json is readability  right so we're gonna see eventually like this is   this is also quite treatable but yaml is even  more cleaner why because it uses very less special   characters like usually there is no need of these  codes these brackets these commas nothing is   required right there is very very minimal language  syntax which you need and a lot of information   which needs to be go you know needs to go in  the file is just basically what your logic is   for the data so in this little section or in this  collection of videos we're gonna learn about yaml   a bit because it is really important to understand  yaml first before you actually start writing   workflow files because this is almost like a new  kind of data format which you're seeing right hey everyone welcome back and in this video let's  start with yaml basics right so we're going to   cover a few important things in yaml the first  thing is how you generate keys and value pairs   right so in yaml what you do is you say keyname  and then a column and then the value whatever that   value is right so this is like a completely valid  yaml file similarly let's say if i have a service   my goddamn project then i could have you know  tests or script as script 1 then test 2 as script   2 and so on so what essentially we are doing here  is if you want to compare it with a javascript   based rendering something equivalent in javascript  let me just go ahead and actually create a   basic.json file because i don't want to destroy  our package.json so i'm going to go ahead and   open this basic.json i'm going to try to  convert whatever we have written into the   json part right and the json equivalent of this  would be something like service then a quote   then test then these codes and then test two  then the codes and then closing and of course   these keys should also be in codes right so this  is a json file and this right here is a yaml file   and you can already see that yaml has much more  condensed information compared to json right and   it just gets more condensed as we nest objects  and as we go ahead and start working with that so   you can see right now that we just created some  top level keys and value pairs now it is possible   in yaml to also go ahead and create nested objects  right and the way you do that is pretty much with   indentation so you can say my app as the key of  a of a you know a parent object and for these   three keys you have to indent them now this is  very important in yaml just like in python that   these indentations are actually consistent with  each other right whether they are spaces or tabs   doesn't matter but they have to be consistent  with each other that if you're using one thing   then it has to be one thing all across your  file the similar thing the similar logic   in json would look something like this my  app and then an object something like this   and yep there we go so these two files over here  are technically equivalent in terms of the data   which they contain right so this is important  because now you can see that it's much cleaner   and much more human readable compared to json so  that's pretty much it for this video i'm going to   keep it short because i want you to understand  how this yaml file looks like and works and in   the next video we're going to be taking a look  at how you can work with more data types in yaml hey everyone welcome back and in this video let's  just quickly take a look at comments in yaml   now one of the best things i like about  yaml is the support of its native commands   so you can say this is my comment   and right here this would pretty much be ignored  by any file which is reading this particular   piece of data right this is impossible in json i  mean json does have some variants where it allows   these commands over here but you'll start seeing  that comments are not permitted in json is is   something you will pretty much see every single  language or library which does not have some   additional functionalities would be complaining  about right json cannot have commands and this   is one of the nice things about yaml is that you  can start it with a hash symbol and start leaving   comments all the way across right you can leave  comment over here hello you can leave comment   you know somewhere here it doesn't matter it just  has to start with the hash symbol and it has to   be like a single line right whatever you write  in front of that hash symbol would get commented   out there is no multi-line comment as far as i  know in yaml so most of the stuff you do can be   done just with single line commands which is i  think is fine given that it's mostly organizing   data and configuration and not actual code so  as far as that is concerned that should be good hey everyone welcome back and in this video let's  just go ahead and take a look at lists in yaml and   how that works out now lists in yaml is basically  a way of organizing elements in an array right   so for example you're going to have something like  my array like this and jake in json and you can   add something like this right this is like a valid  json over here the similar thing can be done in   yaml as well basically in the same format right so  you can copy this and you can paste it right here   you just have to remove the extra stuff and this  is like completely valid uh yaml syntax over here   now the good thing about this yaml part  is that there is another way to create   an array of objects and i'm going to tell you  what that is so let's say if you have this array   as an array of objects then you have something  like key 1 value one and then let's say   key two value two right let's say we have this  particular json object and we want to create a   array representation of this particular thing  in the yaml world right so how would we do that   now the way we would do this particular  conversion to this over here is as follows   whenever you want to start a list  of things in yaml you press enter   give it a tab or in this case it would work  without even a tab and i'll tell you why   but the general rule is press enter give it a tab  and put a dash now this dash over here signifies   that hey this is a single element in this array  right and when you do a structure like this   and when you start mentioning key value pairs then  yaml automatically knows that this is an object   right if we wanted to replicate the earlier  example of this into this newer format what   we will do is something like 1 then 2 then 3 then  4 then 5 then 6 right this particular thing which   i have written is pretty much equivalent to this  thing but the reason we use this syntax earlier   is because it's much more cleaner and concise  this syntax would not work with array of objects   because well you need multiple properties over  there right so what we do is we start it with   a single dash and then we'll start mentioning the  key value pairs so i'm going to go ahead and take   a look at here and it says that key one value one  so i'm going to say key one value one right and   actually let me just go ahead and add a couple  of more keys here key random and value random   right now in order to create this i'm  just going to give an enter and do this   you can see that i did not put a dash over here  why because this is a single object right the   moment i put a dash over here this means that  the new object has started in this case right   so i can now go ahead and put key 2 value 2 and i  can go ahead and say key random 2 value random 2   and this would actually represent the following data over here inside of json right so i'm taking  i'm just giving you a json and yaml comparison   just because it's easier and most people have  worked with json in the past so it's easier   to bring those learnings into the ammo world than  actually just understanding everything from start   right so you can see that it's much cleaner  the syntax already looks much cleaner to ice   compared to this one and it gets even  better as you have more and more things   going on right but that's the essence of yaml in  a nutshell you can have numbers over here that's   completely possible you can have booleans you  can have you know strings which we have already   discussed if you want you can put them in codes  that's also completely fine this is also fine   and if you want if you can just remove the  codes as well that's also completely possible   so yep that's pretty much it for this video  in the next one we're going to discuss some   more concepts on yaml and take a look at how you  know maybe things like multi-line strings or those   those sort of things would work out in yamalan  the good thing is there is support for that hey everyone welcome back and i just wanted to  make this quick little video i just googled yaml   validator on google and wanted to show you that  yaml needs to be proper in order to be parsed   right because the score damn editor although  it does provide syntax highlighting currently   we don't tell you if the yaml is valid or not so  whatever yaml stuff you are writing here you can   go ahead and paste it inside this yaml lint click  on go over here and you'll see that it gives you   a valid yaml message right now if i go ahead and  mess around with the spacing a bit you're gonna   start seeing stuff where it says you know some  some sort of errors and something and it also   highlights the line number i mean i don't really  have any clue about whether this website is the   best one out there or not but if you google yaml  validator you should be able to find some nice   little online website for the time being which  can help you with the you know just validating   yamalan you can see it already says valid  yaml but if i give it a couple of spaces back   you can see that it starts messing around right so  that's that's one thing i wanted to tell you that   yaml needs to be validated it's not like you can  mess around with spaces and padding all the time   so make sure whenever you are you know just  executing this configuration file whether   that's on github actions whether that's on pretty  much any other thing and if i haven't told you   yet yaml is a very very popular way of writing  configuration files and a lot of devops and in   a lot of uh infrastructure as a code stuff as well  so if you did not know that then congratulations   you have been learning a markup language which  would be very very convenient for you when you   are getting into that space but yeah i mean that's  that's the whole point of this particular video hey everyone welcome back and in this video  let's just go ahead and take a look at what   yaml multi-line string is and how you can work  with that and this is also one of the interesting   things about yaml that is you can represent  multi-line strings that is not possible in the   native json format again second feature which  we discovered and which we are talking about   the first one was commands the second one is  this multi-line feature okay so let's say this   value over here needed to be multi-line right or  let me just get rid of this because we already   have discussed how the nested objects and array  of objects work so let's keep it a bit clean   even this top level would work fine so let's say  if i wanted to have a similar thing over here in   my json representation now the only way i can  represent multi lines in json is by actually   physically typing the new line character so i  can say something like my name is mehul i am 23   years old i am the founder of goddamn like these  three strings three's lines right but in order to   represent this new line i have to write this new  line character right i cannot give this a render   key this would not work json would complain but  this is pretty much possible in yaml world right   why because you can go ahead and start writing my  name is mehul hit enter and you know give us give   it a tab i am 23 years old hit enter and you know  i am the founder of code down now this is fine but   when you copy paste or you know create a second  key hello world let's say and if you copy paste   this in the yaml value data now what happens if i  bring the first line also in the next line right   now you can see that it starts saying me unable to  parse now in order to tell this service key that   hey you're going to find a lot of multi-line  content in the next line you have to give it   a pipe symbol over here now the moment you do that  you tell the yaml syntax that hey whatever you are   writing over here is actually multi-lines right  so until and unless you encounter another key   or the end of the file that is a string so in  order to make this valid all we have to do is   something like this and this is now a multi-line  string in yaml which is the equivalent of what we   have written here now you can see the application  of yaml in the human readable stuff right so yep   that's pretty much it for this video hopefully  you understood the basics the fundamentals of yaml   this is probably more or less all we would need  in order to understand and work with the github   actions part so let's get started with that now  and deploy some pipelines on the github actions hey everyone welcome back and in this video  let's just go ahead and write our very first   valid action in github actions and this is kind of  a hello world tutorial for github actions so let's   go ahead and take a look at how we can do that so  i'm going to go ahead and actually make some space   over here because we don't need the terminals  just yet so what i'm going to go ahead and do is   remove this and let's just also remove the basic  we don't need it anymore and we can start working   with test.yml format itself it's it does not  really matter the very first thing with a what a   github action needs is a name right a name as the  key and let's say this is something like my first   github github action right the second thing a  github action needs is when this particular action   should run right which is specified with this on  keyword right and the reason you need to specify   this particular thing is because there are many  times you want to run a workflow file on sometimes   like a push on a comment push or sometimes on a  pull request when somebody creates a pull request   on your repository or you know something like on  a deployment status this action is basically you   can think about this in a way that let's say you  have a bot like a versal bot which deploys your   project online and then sends you the url of that  particular project right which is deployed so you   want this action to then run and maybe do whatever  end-to-end testing it wants to do but the most   common and the most simple one is on push because  this says that hey whenever you push a comment   run this action which is precisely what we want  in this case the next thing github action needs   to know is the jobs which is which it is supposed  to do right the jobs which it is supposed to run   in the single workflow now one important thing  about this jobs is that there could be multiple   jobs you know i'm specifying this as jobs not a  job and i just can start working in a you know a   fashion where i specify all the jobs over here  so let's say one of the jobs is to print hello   world right this is a single job and i'm you can  see that i'm trying to create an object within an   object over here it's not a list so this means  they are not running in sequential this is very   important that i have not put a dash over here  that means this is not a list this is not an array   this is actually an object that means there is no  guarantee that this would run in sequence you know   if i have a second sec o nd job sec s e c o nd job  if i have a second job then also it is it is not   possible it is not compulsory that these two jobs  would run one after another right but let's stick   to only a single job for now let me just go ahead  and specify a couple of more keys i'm going to say   runs on ubuntu latest which is basically what the  underlying image you want on the runner and we'll   discuss about that don't worry that much and then  finally in a single job you want to have multiple   steps right because in an ideal world scenario  your this job would be something like uh you know   build my project then another job would be check  linting right another another job could be unit   testing something like this right so what this  would be let's just rename it back to print   hello world because that's what we will be doing  is we want to specify an array of uh you know   steps again because these steps should be executed  in order so i'm going to start creating an array   over here and i'm going to start saying run and  this run pretty much is the bash command over here   which you specify so i can say something like echo  something like hello world like this right so what   essentially we have created is a very small github  action job which runs the sprint hello world shop   on ubuntu latest docker image and there's only one  step in this case that is to run hello world i can   specify another step and i can say this is step  number two and this is guaranteed and don't worry   about the syntax highlighting which is breaking  but this should work technically um let's let's   not keep number two so that it does not break  the tutorial but this is step number two and it   is guaranteed that these two steps would execute  one after another right it is not guaranteed or in   fact not even guaranteed it does not even happen  that if i have a second job over here that these   jobs would run in sequence right like i mentioned  earlier so anyway we have a working job right now   with us let's just go ahead and try to push it  so i'm going to say added a new job hit enter   and i'm going to push this to the master repo  alright so once that is pushed i can go ahead and   copy this repo over here and open this in a new  tab and what we'll see the first thing you will   see is now you have this nice little yellow dot  over here in your repositories which on clicking   shows that hey github is running your action  now you go to actions tab and you can see that   there is another added a new job workflow which  is running over here and which has already ran   and completed so the way you debug this and know  more about this is when you click on this but   that is something i want to discuss in the next  video i want to keep this video short and crisp   so hopefully you were able to build your first  github action with me over here if yes then that's   a great thing you have just started your journey  on the ci cd and just you know removing a lot of   headaches of testing and building and everything  just transferred it to github so congrats on that hey everyone welcome back and in this video let's  just take a look at what this github action did   when it ran and how you can actually work with  this page as well because a lot of times you will   be working with this page as well so when you  click on this page and this layout might change   maybe in future when github updates their ui but  the fundamental concepts remain same you can see   that github provides you with a bunch of options  the first thing is you can rerun these jobs which   are over here when you click on this button  github would run this action again and this   is helpful when sometimes your job fails this this  whole workflow file fails because of some external   reasons which are now fixed for example let's say  docker is down or aws is down or something is down   which led to your workflow failing so you don't  want to push another comment to trigger that   workflow or do any sort of other action you can  just go ahead and click on the serene on all jobs   button the second thing over here is this these  three dots you can see that over here they provide   you with some very minimal information you can  view the work flow file which was executed in   this case this is our yaml file which was executed  you can see the workflow runs which this has done   which brings us back to our actions tab kind of  more or less because we only have a single action   over here and the first the third thing which you  can see is that you can create those status badges   which people you know often you might have seen  often this is embedded on repositories that build   passing and you know test running and all that  kind of stuff so you can build those badges like   this over here just copy this and paste it in your  github readme files and you're good to go so this   is pretty awesome these set of features are very  handy sometimes when you need them but the way you   actually get into what has happened is you click  on this step or click on this job not the step so   what github does is that it will organize all the  jobs which you execute in this section over left   so you can see that if i specify another job let's  say this is print hello world 2 and if i add this   and if i commit this job 2 and if i push this  just get push origin master you're going to see   the second action which gets run over here this  job two over here has these couple of jobs running   right now again they kind of appear in order but  they are not really executing sequentially right   you can see that they started executing parallely  so this is very very important because this is an   object this is not a list so github follows that  particular thing but what you can see over here   is that you can jump into a singular job by  clicking on them so now what this page over   here does it shows you the steps in all the  jobs now you might be thinking that hey i did   not specify the setup job and complete job steps  then why are they here well you see that github   obviously when you specify this runs on thing  obviously needs to set up that particular   environment for you right in this case you can  see that because we specified ubuntu latest   it gave me ubuntu 20.04.3 you could you could have  technically just hard coded your ubuntu version   here as well and then github would always give you  that same environment right and you can go ahead   and take a look at all these environment variables  as well right github token also gives you a   glimpse into what is possible with your within  your workflow over here right we're going to   discuss a little bit about github token later  then once your job once your environment is   set up your next steps start running in sequence  again this is in sequence this is not happening   parallelly right these two commands are not  running parallely they are running in sequence   so hello world is executed first and this is step  number two is executed second and then finally the   job gets completed github does some cleanup of  processes and this and that you don't have to   worry a lot about this but this is in general what  your job looks like then there was a similar but   separate job running parallelly to this one  jobs run parallely steps don't run parallely   and this particular thing  pretty much executed the same   stuff which was happening right in the top  one so there's nothing really to explain here   but yep that's pretty much it for this video  in the next one i'll actually tell you how you   can execute jobs in sequence as well because  that is also like an important part but this   should get you started with at least writing  your first few bash scripts in github actions hey everyone welcome back and in this video  let's just go ahead and actually instead of   you know just jumping directly on how to make  interdependent jobs let's actually first of   all try to build this project which we have been  trying to do since the very starting so i'm gonna   go ahead and say this job as build app and i'm  going to keep this runs on ubuntu latest tip as   you know as intact because this is something  which we need we're going to be going ahead   and removing this particular thing and we're going  to be messing up with steps a bit now the reason   for this is that if you take a look over here  github actions at the end of the day although   it is integrated with github closely i mean it's  just a tab away but still the environment which   it prepares is completely isolated with your  repository right this is a docker container   this is a temporary environment running somewhere  on the cloud where you which you don't know about   so obviously it does not has access to your  repository right away but github has created some   interesting and some handy actions default action  steps which allow you to work with your repository   easily right and we're going to be taking a look  at all of them most of them and i'm going to show   you how to you can find them as well but there is  this one action which you can use called actions   check out version two right now if you google the  string up you're gonna land up on a page like this   now if you pay close attention to the url over  here it is github.com action slash checkout this   actions is actually an organization account from  github which includes a lot of interesting and   default runners right or step as you can say so  this checkout action over here the only thing it   is supposed to do is you know clone the repository  in which it's currently running and of course you   can have customize it with all sorts of options  and all sorts of customizations but the moment you   specify this action what it will do without any  customization is that it will clone the currently   running directory right so if i go ahead go back  and right here in the next step i do something   like run and i say uh let's say something like  ls for example or not ls let's run tree right   because tree would show you pretty much all the  output which a particular directory has this is   a bash command right nothing get about nothing  fancy like that so if i go ahead and run this now   new action and if i push this to master you're  gonna see that when this action gets deployed   and when this action starts running if i go inside  this build step you can see sometimes it takes a   couple of seconds to start the build process but  if you come here on time you can also see uh how   or what it is doing to initialize that particular  action sometimes it gets lagged a little but yeah   right here you can see in the second step it ran  actions checkout version two and it had these   bunch of steps you can see it initialized it with  a bunch of default values this repository over   here is of course the default repository because  it was able to you know compute that particular   thing where it is executing and when we ran  this tree command over here you can see the   output which we got was this this means that our  repository was successfully cloned right because   this is our repository over here you can see the  file structure we have the src folder we have the   public folder and this is exactly what we see in  the runner so at this point over here we have the   repository cloned that means we can start building  stuff right so yep that's that's basically it in   terms of setting up your repository on the  github runner the only next thing you need   to do is set up node.js on this repository and  start working on it start working on building   your project i'm going to go ahead and tell you  how to do that particular thing in the next video hey everyone welcome back and in this one let's  just go ahead and take a look at what should be   done to set up node.js on this repository  right now and start building stuff so of   course thankfully there is another action  which you can specify from github itself   that is actions and then setup oops not the at the  rate setup node version 2. again if you google up   this string you're going to land up on this action  over here which the version 2 is a newer version   which allows you to set up a node with any sort of  version you like right you can specify this with   property over here let me just copy this or you  know let's just write it so i'm going to specify   this so with property over here i'm going to say  that hey this right here over is node version   and then let's say 14 right so let's see there  we go so what this means is that hey i want   node 14 cloned into my repository right or if  you wanted a specific version over here let's   say if you wanted 14.17.0 cloned right then this  14.17.0 would be available in your environment   now in the next step you can just have something  like node v and you can just node setup   once you push it you're gonna see the moment  github action starts running it it's gonna set   up that particular node environment for you all  right you can see if i expand this run node v   section you can see it ran the node we command and  it gave us version 14.17.0 right which is exactly   what we specified in our setup node area so  that's all fun and games but how do we do anything   from this well when you install node version it  automatically comes with npm and yarn installed   so the next thing you can do is start working on  building your project now the good thing about   github actions is that you can also specify or you  know you can also change the name which appears   here right now it just says run and then whatever  command you are saying but i can also specify   that by saying name as the property instead of run  directly as uh you know build the project and then   i can specify the second property in this array of  object that is the run thing and now i can say if   i have a package.json and if i let's say specify  a build command i can say snowpack build and just   to see if this is working we can just run it here  as well and you can see snowpack build is in fact   a command and i'm just gonna remove that for now  but this should get us started right i have a yarn   build command now and i just have to say yarn  build over here right and maybe the next step   could be set up finish and i can just say run echo  hooray right so if i say multiple steps over here   and push this to github what you're going  to see is now when you go to the actions tab   it starts with the multiple steps commit it we can  go into the build app job and right here we should   see that it should build your project in the ci cd  runner for the first time right and of course this   fails because you can see that it is not able to  find snowpack so can you guess what you have to do   over here what we did wrong well we missed a step  which is that you have to install node modules   right and to do that all you have to do is just  write yarn that should be more than enough and we   can add a commit missing installing node modules  step right get push origin master hit enter go   to github go to actions go to the build area and  you should be able to see that github now should   be able to build your project successfully as you  can see now it's starting to install node modules   and this is like a great place to be if you want  to just take a look at how everything is working   out because github gives you real-time logs of  whatever is happening and you can see now if i   expand this node modules area we see the logs  which were coming in it built the project that   means it created this build directory over here  right and the setup got finished and we got a   hooray from github actions right so yep this is  this is pretty much it for this particular video   we have built a project we have pushed our project  to github and this just works out of the box right hey everyone welcome back and in this video i'm  gonna go ahead and show you how you can deploy the   simple react project on warsaw from github actions  as the ci right now warsaw does provide its own ci   and the way the ability to do that but sometimes  it's not just enough that means you might have   to install a bunch of different things or you  might have to do a bunch of different testing   for example so you might want to just say to  yourself that hey i want to run my own action   as well but you can once it's done maybe in this  case in react's case it's simple because you know   you get a bundle of static files then you can go  ahead and deploy it by yourself right so what i'm   going to go ahead and do first of all is i'm going  to go to get more get you know ignore and add oops   and add build folder and i'm going to run the yarn  build command locally the reason i'm doing this   is to show you why i would be writing the commands  which i would be writing now so you can see when i   run yarn build i can go to the build folder and  we have this static output over here right so   on warsaw we would not be deploying this project  as a react project but in fact as a static html   project right because in that case whatsapp can  just skip the build and deploy this directly   so what i want to do now is go inside the build  folder and actually write the command vc or   before that let me just go ahead and add vc that  is worse cell i hope that's what they call their   cli tool but if not we can check that later but  once you add this warself package you're gonna see   over here in the package.json that ware cell  should be available and this versal package ships   with a binary called vc so i can say yarn space  vc hit enter and you can see that it tells you to   log in into versailles first right in my  case i'm going to go ahead and use github   right so i'm just going to go ahead and copy  this particular url over here open this a new tab   because i already have an account with versailles  so it should just work right away you can see   i have this token with me i copy it back  hit enter and now my versailles is connected   right now it says me to set up and deploy code  for which i'm just gonna reject for now and uh   that's that so the next thing i'm going to do is  take a look and see that we still don't have any   versatile configuration so what we can do is we  can say worsel that should be yarn versal and then   the path to our project in this case this is build  right the build folder it's not the build command   it's the build folder and then it says set up and  deploy this build folder which in my case i want   to say yes and then i would choose my own personal  account i'm gonna say no and we can just say test   build project and i misspelled that but anyway so  because it's already inside this folder i'm just   gonna keep it as it is that means it is inside the  build folder already so right now you can see that   it shows says me that hey do you want to override  any settings i'm just gonna go with the default   that is no and it starts deploying the the you  know the basic setup with the basic instructions   okay so over here you can see it created a dot  versus folder which has a project dot json inside   it right and it has a readme over here as well now  this is all fun and games but there are a couple   of problems here the first problem is that all of  this prompting and setup which we did over here we   cannot do that on github actions why because we  don't have an interactive terminal right neither   do we want to nobody wants to go to that action  every single time and hit enter a bunch of times   that means this project should automatically be  deployed every single time right when we push so   what we can do is we can create a small little  script which automatically runs and it does   take no input from the user and it automatically  deploys to versil right so in order to do that   we're gonna be taking a look at how we can create  such a script inside our package.json that's   pretty much it for this video i'm gonna continue  in the next one where we will discuss this hey everyone welcome back and in this one we'll be  discussing about how we can deploy with the worst   cell without any intermediary requirement of this  keyboard or anything right so before we actually   go ahead and do that let me just go ahead and open  and verify that our project is in fact deployed on   versailles and you can see that we have a nice  test build project.versal.app which loads our   snowpack production build just like we would  expect it to right super fast on the edge and   deployed just like that now if you take a look at  the versa project deployment pipeline we had three   requirements and and in this little series i'm  just discussing about versa but this particular   thing basically applies to more or less anything  which which provider you're deploying whether   that's on an ec2 ssh machine or whether that's on  something else you can see in the project we have   the organization id the project id and the access  token remember that token which i copied pasted   in the cli that is the access token so we need  these three things supplied to the versailles cli   and thankfully enough versailles cli does allow  us to pick these from the commands itself so   i'm going to say something like deploy and  this command over here would actually run   worsel which is also you can also call it with  versailles or vc right and this command over   here this should deploy our app to production  so that is flag number one the flag number two   is what is the token which we have right and this  token over here was the value which i copied so to   get that value again i'm just going to go ahead  and you know copy this and paste it right here   so this is our token over here which i would  obviously remove once this video is done   so that you don't deploy on my pro my you  know environment um but this token is the   most important part the next two things that is  the versailles organization id and the project id   they actually come from the environment right  so versailles needs those two values from the   environment and it's not up to me it's the  way uh you know the the versatile cli as well   so it's not something i have configured so for the  environment part now this is interesting because   for the environment part first of all let's  just create a step for deploying the project   i'm going to go ahead and say run  and i'm going to make this multi-line   remember we can do that and i can just start here  as well or i can give it a tab it doesn't matter   for the run part i'm gonna first of all go inside  the build folder because we know it is ready   then inside the build folder uh or actually  let's not do that at all let's just run yarn   deploy directly and for that i think we don't even  need a new line because we can include the build   folder command just right here right now this  command is fine but it's still missing the env the   environment support right so in github what you  can do is specify another key called env over here   and you can start mentioning the environment  variables which you want in this step right to   be available in this particular step and this is  again an object it's not in a list or anything   so what we need to specify for whatsapp is the  versacell organization and the project id so   i'm going to copy the organization id and i'm  going to go ahead and paste it right here with   the versacell organization id and the second value  which we need is virtual project id right and the   project id over here was this particular  thing now we have all the necessary parts   in this particular deployment pipeline we have the  organization and project id that means we can just   completely get rid of the build folder which  also contain the versa folder we don't need this   anymore uh we have the token with us in the deploy  command and we have the build steps running just   fine right so let's just go ahead and try to  push this to the build pipeline and let's see   how that works so i'm going to go ahead and  commit this versailles build test and push it   over there so now if i go ahead and take a look at  this github repository you're gonna see the action   which is running right now should also build and  try to deploy your project on versailles once   it's done with the node modules part all right  i think we have an error here that this is not a   option so i guess this cli flag is called prod  and not production and we can just test it once   by saying yarn deploy ourselves and of course  this folder is not found so anyway let's just   go ahead and give it a bug fix message and push it  to github for it to deploy and we're gonna be just   sitting down here sitting back here just seeing  if github is able to deploy this or not alright   so in this case you can see that warsaw cli is  kind of misbehaving and i don't understand why or   when they change the behavior where they would not  read the organization and project id from the cli   so we're gonna do a little bit of improvisation  i'm gonna run yarn build again i'm gonna deploy it   from the build folder directly and we can  construct the virtual folder on the fly   which is also something interesting you can do  with you know because you can pretty much script   everything in the virtual cli so let me just  go ahead and say nope to this or you know   universal actually we don't need to deploy  that we need to deploy universal build and this is also something which we i guess  missed in the package.json that we don't need   to cd into that we need to build like this  yes mohan yes link to the existing project   and the project name for this was this  was the project name test build project   over here and let us see if it creates a  versal folder over here and if you go to the   build folder you can see we have a versal folder  and right here we have the project.json with us   right which is basically the same thing so what we  have to do now is add a build step where over here   before it deploys the project sets the versa  env so we can say something like run which   is a multi-line command now and i want to say  i want to go into the build folder i want to   make the directory which is dot versus i want to  touch the project.json file and i want to echo   this json string which i have into project.json  right and this is just a hack right for deploying   this thing because versailles for some reason  virtual cli is misbehaving right now so this   is all we can do at the moment now what  we can do next is pretty much add comment   improvise or cell deployment and we have already  changed the package.json command as well so that   should be fine and i can just push it and let's  see what happens and of course warsaw has to give   one last error to us because we are missing  confirm flag over here which should skip all   these automated questions let's do one final build  and see and there is another error where it says   that the token is not valid and today is probably  an error day so i'm going to go ahead inside   versus dashboard and create a token manually my  versa or cell token create this token i'm going   to copy this and use this instead and there is  one mistake we have to fix is that we have to   go inside the virtual folder after creating it so  that this is actually inside that particular file   right so once we do that we can do a  final fix and let's wait for it to deploy   and as you can see versal has started deploying  on the test build project or checked folder which   was our typo for this particular url and once it  deploys you can see that it's ready and of course   we did not make any change but when you make any  change on this text now it will automatically   reflect so this right now is an example of a  fully functional deployment pipeline over here   from github actions you just have to make some  changes push your code and it will automatically   deploy it but it has some obvious serious flaws  like exposing all these secrets like this right   so we still need to fix that but we'll take  a look at how we fix that in the next video hey everyone welcome back and in this video  i want to discuss a very interesting part   about github that is known as github secrets now  github knows that a lot of times we will need   sensitive environments and sensitive values  to work with in this case the three sensitive   values we have is the project id organization id  and those two are not so much sensitive as well   compared to this one thing which is the token id  right which is very very sensitive so the way we   approach these sort of things in github actions  especially with something which is like a public   project over here is that you go ahead and convert  these things into secrets on github now to do that   what you should do is go ahead inside the settings  on github in in your particular repository and   go to this particular manage access and let  me actually now i think about this i should   have made this repository private because anyone  uh at the time of watching this video creating   this video could have just you know gone into the  repository and copied my voice token and remove   all those projects which i have uh so hopefully  nobody did that yet and that was my bad on my side   but anyway so now the repository is private at  least we are sure that nobody's messing around   now what i can do is go ahead inside settings and  inside secrets over there you see over here this   is a place where github allows us to add secrets  to our repositories now a secret is basically   you can think about this this as a kind of a  variable but this is encrypted that means this   is not visible in the logs and this is not visible  to anyone who's using your code as well right so   i can say something like versailles project id  right this could be named anything and this goes   as a secret now you can never see the secret again  you can only overwrite it but never really see it   and then versal organization id and there we go  there we go we have the two secrets now and the   third one is my worst cell token right in this  case this token would be this particular thing   and of course once you add secrets you should  obviously just refresh all the all the values   so that you know somebody just does not going to  get history and check out what you have done now   in order to access these secrets you first have  to bring them into your runners environment right   the secrets are not just available in to the  environment right away so in order to bring   these secrets into the environment of your yaml  file you have to do two things the first thing   like we already did a little bit earlier that is  you have to uh in case of the deployment part we   want to do this you have to add an env block and  the second thing is you have to specify what the   secret name was initially in the github uh secrets  panel as well so in this case i want to say   that hey i want to get this pack as a versailles  project id as the env name and what this value was   was from secrets dot the same thing  right why because this thing right here   should actually match this thing over here this  thing could be anything right whatever this is   this is the name of the environment variable in  this case i'm also keeping the same but this has   to match the secret of the github right similarly  for token we can get the token like this secrets   dot virtual token and then secrets.versal  organization id this over here this secrets   variable is automatically filled by github  so you don't have to do anything over here   but the moment you do that in any env block now  these three environment variables are available   right and of course you would want to do this one  block above that is in this particular job itself   now when you specify the environment variables  on a job itself then of course they are available   for all the steps when you specify it within a  step itself then it is only available for that   particular step right so we want to do a little  bit of change over here i want to escape these   codes real quick like this and i'm going  to say over here this is versailles project   id right and this over here is worsel  organization id i guess yep there we go   and now we are filling this from the environment  and finally because this yarn deploys also running   in a step which is controlled by github action  we can go ahead and use the versal token variable   directly as a bash variable right because now  this is an environment so this also secures our   this now secures all of our environment variables  as well so i can go ahead and add commit and moved   to secrets and i can say git push origin  master and this should be more than enough   to protect protect our stuff and as you can see  over here whenever github tries to echo out a   secret variable it automatically masks it in the  input that means if you use echo versus project   id or anything over here github would not show it  in the logs right it is still technically i mean   obviously possible that you echo it to a file  and then perform an http request and extract   it out somehow sure that's possible otherwise  how the hell would the command itself use it   but for the most part the logging part is  protected right you cannot just log a secret and   be done with it so yep you can see the builds are  still reflected on the main project itself and   now we have a fully functional secure deployment  pipeline where if i say something like hello from   codem this is so awesome all i have to do now is  add the change and push it to my github pipeline   and this would deploy my project it will build  it it'll minify it it'll do all sorts of amazing   stuff on the versailles cli itself on the github  action itself and deploy it on this particular url   test build project which is our  typo you can see right now it's not   reflecting because it's not built yet but this  would be built soon and then it will basically be   visible on the screen all right so once built you  can go back to the page hit refresh and now you   can see that it reflects your production build  and it's on virtual deployed app on the edge   super fast super scalable all the good stuff  with a good nice deployment pipeline setup as   well so yep that's pretty much it for this video  hopefully you were able to follow along and this   video is deliberately you know this whole series  with versailles and everything is deliberately   done with the versailles cli otherwise there was  a reversal action as well just so you know about   environment variables and you know all this  hacky stuff and all that stuff so this is just   a way to learn ideally you should probably be  using some easier solution like versus versatile   action directly or even you know just using  warsaw runner if you want but yeah hopefully this   teaches you a bit about how to work with github  actions which was the purpose of this series hey everyone welcome back and in this video  let's just go ahead and take a look at how you   can create dependent jobs inside of your  workflow now this is interesting because   a lot of times when you start a second job you  don't necessarily want to run it in parallel right   for example this might be a build app this might  be a test app and you cannot really test a web   app until it is built and deployed right then then  that is the point where you will run the cypress   end-to-end test and all that stuff so in this  case if i also specify a ransom thing as ubuntu   latest and in this video let's just keep the  steps as very simple i'm just going to say   run echo yellow something like that what i  want is that this yolo waits until the build   is complete until the build is complete right  and the way you can create these dependent uh   jobs is by using something known as needs now  this needs key is a special key for github   which says that hey if i  specify this build app over here   it's going to wait for this particular job right  here to finish so now if i deploy this dependent   job and push it on github you're gonna see that  if i go back to github it's gonna wait for us   it's gonna wait for our build to complete and  then it goes to the desktop and you can see this   with this little link which github creates right  earlier you knew that when we created this job   both of them appeared here apparently and they  were executing right here you can see this test   app is actually you know a little dimmed right and  it will only become active the moment this uh the   first job actually succeeds right or not exactly  succeeds but it completes and not i mean succeeds   is also of correct word because if it fails then  the next step would not run right which is the   which is the build which is the test test app job  you can see now the moment it completes it jumps   to the chest test app version now and now you see  a dependent shop and it runs the yolo command and   that's pretty much it now this is of course fun  but how do you get the data from previous job to   the next job because that is pretty much you know  you would be doing a lot of times so there's a way   to do that and we're going to discuss about that  how you can get some information from between the   jobs in the next video that is all for this one  i'm gonna see you in the next video really soon hey everyone welcome back and in this video  we're gonna be taking a look at how you can pass   information between two jobs now this this becomes  super important and super interesting because in   this case for example we want our second job  to run end-to-end tests and the first job just   builds and deploys right now the reason you need  to pass information between them in a special way   is because if you take a look the different jobs  all the different jobs run in completely separate   environments you can see it starts from scratch it  does not share the file system or the underlying   uh anything variables or anything as well from  the previous job from the previous build right   so this this becomes really important that  you understand why we need to transfer this   information in a special way now the way  you do that is using a special syntax we   said we echo a special variable we call  as we're going to say set output output   we're going to set this name in form of a pair  right so in this case let's say if i want to   send this link or send some information send some  text over here and this text should be hello world   from build job right a simple enough text string  now the way i have exposed this is that there is   this variable text in this particular job which  can be read by any other job which needs it   this step is also important so if i copy this  text and mark this as a export kind of thing now   again we are we know that yaml is not strictly  speaking a language but you can still use these   features because github provides them out of the  box you can add an outputs key over here and say   that hey my text variable would be a variable  which would be available from steps dot and   then you have to add the id of the step which you  want where this particular variable is exported   in this case we do not have an id on this so we're  gonna say something like id as final step or you   know let's just say finished something like that  and then steps dot finished and then the name of   your variable right in the output section so this  is text so what we are essentially saying over   here is that the output we are setting the output  variable of text to this particular string job   and we are marking that hey this particular text  is the output of this whole job itself this build   app itself now you can consume this particular  output inside of your basically in your next shop   which needs this particular thing and the way you  do that is with another special syntax of github   just like we used in the in the you know  secrets part so i can say my job output as   needs remember this needs thing which we did  dot build app dot and let me just go ahead and   mark this as build app because the dashes makes  me a little nervous because that's not how you   usually write in programming languages build app  and we will also need to change this to build app   then needs.build app dot outputs and dot text why  because outputs.txt is the property which gets   outputted right and once you do that and once  you try to use this right here it should just   spit out this particular string from the  last job so now if i go ahead and say   dependent jobs with data sharing then this should  pretty much be everything you would probably need   in a in most of the cases this is all you would  need to work with github actions in general   right you have a build step you have a test step  you can use this area to not just send a static   string but you know something like the dynamic  deployed url of the staging or the preview write   it here read it from here and send it to your  cypress runner or something and why stop here   after test app for example you can have another  step which says like the email the deployment   status where you get an email from github i mean  you by default also get emails from github on   the default action status but yeah i mean you can  why not just add it as a step so you can see our   build app step is completed now we are waiting on  the test tab part and right here if i take a look   you can see it says me hello world from build shop  which is exactly what we wrote as the string over   here so yep that's pretty much it for dependent  jobs with data sharing super important stuff   for building your custom pipelines that is all  for this one i'm gonna see you in the next video   really soon if you're still watching this video  make sure you comment down in the comment section   i watched this video till the end also if you're  not part of code dam's discord community you are   missing out a lot on events which we organize  on a weekly basis to code you already know the   drill make sure you like the video subscribe to  the channel if you haven't already and thank you   so much for watching hey everyone welcome to the  linux cli fundamental course this is a part of   code i'm back in learning path and in this course  we're going to be learning so much about linux cli   fundamentals that you are more productive and you  are more familiar with the command line interface   if you're somebody who who's new to linux cli or  maybe you just know some sort of commands you can   change directories here and there trust me you're  gonna be a thousand times more productive once   you're done with this course so let's see why  we should go ahead and start with this course   in the backend learning part before we do anything  else first thing is that you usually work with cli   with servers so if you are working on any  sort of technology whether it's node python   php anything if you're working on cloud if you're  working with actual real machines you have to ssh   into them and the moment you ssh into a server  you are into the cli of that server now there are   some ways people use gui to work with servers but  when you're working with linux servers the most   common way to interact with them is using command  line you can pretty much do anything a gui does   and more right so you have so much power with cli  to customize your operating system customize the   actual configuration files which your operating  system reads and write and a lot of time you do   not have that luxury with gui gui can do a lot of  things but not everything and cli tools are easier   to build by developers and they're easier to ship  as well so cli does a lot more than a gui can do   operations with cli a lot of times they are much  much faster and you as an individual can be much   productive than a gui for example let's say if  you want to append a certain string to every   name of the file in a folder and you have let's  say a 10 000 file list in a single folder with gui   it would be a nightmare unless you are using some  sort of automation program but with cli if you   know the right commands you can go ahead and start  doing those things very easily and within a couple   of seconds maybe less than a second you will be  done and would be much more productive and finally   you get that those hacker fields right when you're  working with cli you actually have that sort of uh   wipe within yourself that you actually know you  are actually doing something you know stuff so   this is like the coolest thing of knowing cli and  working in front of your friends and colleagues   the objective of this course is going to be  introduce you to linuxcli as a back-end developer   now this means that we're going to be working  with a lot of cli in this whole learning path   but this course would specifically focus on some  of the things which we might not just cover um   directly in other modules right so we're  going to be focusing on the most common things   which we will not cover we're going to be using  cli for the whole part and would be learning for   the whole back-end learning path but this course  just dedicates some time a good amount of time   to learn cli in a much better way then we will  be working with and writing simple bash scripts   so that you actually understand the nuts and  bolts of things you're working with most of   the time you would not be really writing bash  scripts but instead actual you know programming   scripts within your programming language but  you should still know how to interact with   uh bash scripts or zsh scripts or whatever shell  you're using so we'll be working with that as well   we'll also be using common linux commands  which are super powerful and helps you dig   a lot deeper into your operating  system your application performance   and allows you to monitor a lot of things so  that is pretty cool we'll also be learning   about shell configuration files you know along  the way how you can configure your shells how   those configuration files actually work how you  can look back into past which command you ran   stuff like that and finally we will  also be creating some small project   apps that is some tasks to do with the help  of goddamn classrooms where you instead of   the static video content will be actually going  ahead and taking a look at hands-on practice   very soon so this is the objective this is the  whole picture of what is gonna happen in the   course i'm pretty excited to start everything  in this course with you guys let's just make   the best out of it that's all for this video  i'm gonna see you in the next one very soon   hey everyone welcome back and in this video we'll  be taking a look at what actually is linux now we   are starting with linux cli which is all fun and  good but you'll appreciate the usage of linux even   more when you have the background of what it is  what it actually consists of on a surface level   so linux basically when you're talking about any  operating system or any distribution in linux for   example if i say you install ubuntu or anything  what it consists of are basically three things   the kernel the operating system tools and then the  distributions so the kernel is basically a piece   of software which is responsible for interacting  with the underlying hardware now you see that you   have all those ramps and hard disks and you  know all sort of chips inside your computer   there should be some software which is managing  everything everything in the hardware section   which is interacting with these hardware sections  which is checking if there's a fault with hardware   or not if you are able to perform a certain action  or not all the low level things right so that   particular software is kernel let's let's actually  move on to the slide for kernel as well so it's   basically the core of any linux distribution  and it is shared by all the linux distributions   the android which you use right on your mobile  phones chromebooks anything which uses linux   under the hood shares the linux kernel it is a  bridge for hardware software just like i said   it allows other softwares built on top of linux  kernel to interact with the underlying hardware   for example if you want to calculate a certain  operation if you want to add two numbers your   program which is running need not really know  about hardware right it need not really know about   how it should store a number on to the physical  memory so that work is handled by the linux kernel   whereas the programming languages and other things  at the top just handle the logic and the actual   code responsible then linux kernel also manages  hardware interacting with all the hardwares you   know when you're installing a certain driver for  a certain hardware and that means you are making   sure that the linux kernel is able to interact  with that particular hardware in that sense   then the next thing is the tools now kernel with  itself cannot really work in a very great way it   would not be very useful because it's just the  underlying software which can talk to hardware   so you need tools on top of kernel to help you as  an individual developer as an individual person   to help you to run certain programs right  so there's this collection of tools which is   built on top of linux kernel then enable you to  interact with hardware by writing your own code   so for example you must have heard about gcc it  is used as a compiler to compile c programs so   that is one example of a tool gnu is a collection  of these tools right so gnu is a huge collection   of all these useful tools and it ships with linux  and shipped with linux very first time as well so   gnu slash linux was the name was the actual name  given to the linux operating system although a lot   of people just drop off g and u and just stick  with linux and say it's an operating system   but if you want a full operating system you  are actually talking about gnu slash linux   because linux ships with the kernel or linux  actually shipped with the kernel when it was   released and the gnu consisted of all the tools  which were required in order to actually call it   an operating system in order to actually make  it usable by humans finally the layer above   tools is the distributions now the distributions  like you can see on the screen kali linux centos   ubuntu alpine there are so many distributions  of linux basically aim at mostly two things   the first one is the package manager included  in the distribution and the second one is the   goal of creating that distribution right now  for example take example of kali linux it is   a distribution which is more oriented towards  penetration testing people which want to get   into ethical hacking which they want to have all  those tools and environments ready for themselves   metasploit you know any any sort of tool which is  super common in pen testing environment so that   is the goal of kali linux you take alpine on the  other hand alpine's docker image for example has   a size of 5 megabytes so it's a super small image  which consists of just the required bits to run an   operating system as a cli so there are different  goals for different distributions but all of them   really share the linux kernel that is the  basic functionality which enables a linux   program to interact with the hardware which is  shared among all of the distributions but they   might have different packages installed they might  have different package managers they might have   they might have different goals in mind but at the  end of the day all of them are linux distributions   so this was a little bit about what linux is  i hope this gave you a little bit idea about   um you know working with linux in general really  means that you are working with a wide variety of   operating systems and a lot of your knowledge  for example if you learn linux or ubuntu   a lot of that knowledge would be transferable on  let's say centos or let's say alpine because even   though there might be a little bit variations in  the installed tools but the underlying concept   the underlying management of things the memory  and the hard disk and all that stuff would be   same because of the shared kernel so yeah this  is pretty much it for the introduction part   let's move on to the next video hey everyone  welcome back and in this video let's start   with the practical linux cli which we have been  waiting for so we're not gonna get into a lot   of theory first and just jump right on to what  we have to do here that is learning about cli   so first things first i want you to install and  you know just set up somehow an operating system   which would be ubuntu favorably because i will be  using ubuntu in this whole demonstration if you   have some other cli if you have some other linux  distribution that is also fine because the basics   of linux are just gonna remain um pretty much  more or less same irrespective of the distribution   so once you have ubuntu setup on your system open  the terminal you can just go to the application   manager of your operating system and just search  for terminal all linux distributions are gonna   have a terminal so go ahead and open that and  you should have something like this now your   username right here might vary it might be  something else at the rate your host name might   also vary so this is your username which is the  current user which you are logged in as and this   would be your host name right which is the name  of your computer sort of this at the rate means   that this user is logged in at this computer also  root is a common word in linux terminology which   means somebody who has access to everything so if  you are root that means you have access to every   thing you can do possibly on an operating system  so it might sound dangerous just like you know   it actually is as well so we are still gonna i'm  just still gonna keep it to root because i'm just   teaching you but you might see something else  here depending on how your system is configured   so anyway once we are done with this you can see  the next thing is we see that there's a sort of   a column here and then a slash and then a  hash now you might see a dollar sign here   right this hash appears when you are signed in  as a root user right if you are signed in as   some other user you'll see a dollar sign here  that is it this hash just determines that hey   you are working with super powers so if you  see a dollar sign here do not be confused   then you have a sort of a cursor right  here where you can basically write anything   and hit enter and it's just going to spit out some  information that this would not be found if you   write just anything right but we you can see that  we have a space to write something so there's that   you can see that there's not a lot of gui going  on here you can only use your keyboard for the   most part and this is fine because we'll  be uh using this only for the most part   so let's start with our first command our first  command would be you can see that there's you   know we have done a lot of damage on the screen in  terms of text so let's clear this out and how do   we clear this out is by writing clear in linux  and hit enter and there you go so if you write   you know anything which is garbage and then maybe  you want to clear out the screen or if you have   done just a bunch of things and you want to clear  out the screen you can write clear as the command   and hit enter once you do that your contents  would be cleared so there's your first command   the second command which you should learn is a  valid command right so we have just seen clear   but it does not really do anything so let's learn  about echo as well so echo just like the name says   it echoes back what you're saying so if i write  echo right here and let's say i write hello   and hit enter you're gonna see that we get hello  written on the terminal again so it's sort of like   you know talking to a mountain so you say  something it says that thing back so if you   write echo hello it says hello there's one more  thing you can write something like this or you can   say hey i want something like this but see that  this time we are using quotes to encapsulate this   thing right so quotes basically means that hey  i want this whole expression and if i hit enter   you still see that we did not get quotes but we  just got the text between these quotes now why   these quotes are important because sometimes you  might want to write something here which has a   special meaning right it might have some special  meaning and you want to perform a special action   which we're learning which you'll learn later  on but these quotes just provide you a sort of a   feature or a sort of a safety that the text you  want to echo out is echoed out in the correct way   so it's fine if you just have regular text you  can go ahead and use it without quotes as well   but you can go ahead and use single quotes  or double quotes both of them work just fine   once we are done with this you can just clear  it out and you know you can just say uh hello   world for the first time like this so this is your  first command your first introduction with linux   i hope you were able to follow along if not let me  know below and i'll be happy to help that is all   for this video let us move on to the next one hey  everyone welcome back and in this video let's just   take a look at you know just let's take a step  back rather and see what we are actually doing   you see we are actually writing commands right  we wrote echo and clear in the last video   but where is exactly where we are writing commands  you see i told you to open terminal but what is   a terminal really so terminal basically means that  it is sort of a window which runs a program which   is called a shell so a shell in linux is basically  responsible for providing you a interface like   this where you can actually write commands and you  get response and all sorts of stuff happen right   so you can execute programs you can write commands  so it's shell is itself a program which runs your   commands right so you see then when i write a bad  command we get bash this command was not found so   you know we can understand about command not found  that is common english we can understand this is   what we wrote so that's fine but you see this bash  right here this bash means that this is the shell   so bash is our shell which is saying that hey  whatever you wrote i was not able to understand   that and therefore i cannot execute this so i'm  just gonna say that hey this command was not found   there are a lot of shells as well so if you are  probably if you are running linux you would be   if you are running ubuntu for example you will  be using bash by default right if you are running   a distribution which is not strictly speaking  linux but is linux like for example mac os then   by default mac os comes with zsh shell so zsh is  also a shell which is like bash for the most part   but has a lot of differences as well in terms of  commands and everything so if i just go ahead and   show you zseg you can see this is my mac os shell  so this is an ubuntu shell trust me i'll just show   you why i can say that this is ubuntu later on  but you have to trust me for now this is an ubuntu   shell this is a mac os shell right so yeah i mean  if i try to write something which is invalid here   you're going to see that we get zset instead  of bash here so we can see that hey the shell   for this particular environment is zerus h and  for this particular environment is bash so you can   have different shells there is also a fish shell  and yeah there's also the research there's also   bash there can be a lot of other shells as well  most popular shell is bash because obviously it   comes with a lot of distributions by default but  these other shells you see like zsh for example   or maybe fish shell these shells provide you a  lot more interactivity these shell provides you   a lot more features sort of in terms of commands  and everything but at the end of the day bash and   zero such have one common purpose and that is to  allow you as an end user to execute programs right   so yeah i mean this is pretty much it for having a  little bit of knowledge about differences in shell   pretty important stuff but you know something  which a lot of people overlook in their initial   days that is bash is not the only way  not the only shell for executing commands   however most of these shell just like i  said share a lot of common commands so   just like i said between distributions as  well as between shells you can transfer a   lot of knowledge so if you learn something on  bash if you learn a bunch of commands on bash   similar thing would work on zero such as well  for example this hello world is just gonna work   fine on z as well we get similar thing  but it's a different shell so there's that   and that is all for this video let me just quickly  catch up with you in the next one hey everyone   welcome back and in this video let's take a look  at how you can browse your computer on a single   shell so on this shell which we have which is  the bash shell how you can browse your computer   now on gui you know that you have all those files  and folders and you can double click on an icon   or double click on a folder to open it you  can double click on a file to open it but   it's obviously different in a shell because you  do not have access to a cursor well you do have   a cursor access but for the most part you will do  all of the stuff with code or with your keyboard   so how do you start well you see first of all this  slash right here the slash basically means you are   at a path which is the root of the of the whole um  file system right so by root i mean that there's   nothing below this right so for example if you  are nested in let's say a photos folder which has   subfolders like 2018 2019 2020 2021 then  2020 for example has let's say a march folder   then march folder has let's say uh 23rd of march  folder so you see you were inside the photos   folder then 2020 then march and then 23 right  similarly if you start going back from 23 you   can you will go back only to the root the the main  photos folder now how far can you really go back   if you keep on doing that this is how far you can  in linux that is a single slash so all the parts   in linux if you are talking about absolute parts  would be something like you know root folder then   folder one folder two then maybe somewhere down  the line you might be able to let's say store a   file called my 23 march pic.jpg right so this is  gonna be the whole path of that particular thing   which you're trying to open or which are trying to  which you're trying to manipulate in some way so   in linux just like this is just a quick another  tip if you do not know about this you see this   what what is this thing which appeared well that  is because i write i wrote control c right here so   control c is basically um a quick little command  to cancel what you're doing right now so instead   of if you have written all the stuff and you do  not want to execute this but you want to remove   this so instead of just pressing backspace all the  way down what you can do is press ctrl c and you   will not be executing this at the same time you  will be back to a new line so there's that right   so yeah let's come back to the browsing your  computer in this one so what i can do is i can   tell you about another command which is called pwd  so pwd stands for print working directory right so   print working directory means that hey just echo  out a directory in which i am right now and you   do not really need the echo keyword instead in  front of this because this automatically echos   right so if i enter this you see that i just get  a slash this is because i am in fact in uh in that   particular directory and this is what it tells me  to so let me just go ahead and ct this is another   command which is change directory let me just  go ahead and cd into a directory called root   now you might or you might not have this directory  but i'm sure that i have why i'll just tell you   in a couple of videos but just stick along for  now so if i try to cd into root and hit enter   you can see um this sort of change to a the  tilde sign right which might be confusing but   don't worry about this but once i do that you can  see this has changed from slash to something else   and if i do pwd right now and hit enter you  can see it actually tells me hey that you are   inside the root directory so what has happened  well pwd tells you that which directory you   are in currently and cd allows you to change the  directory now cd actually allows you to specify an   absolute path or a relative path here so cd root  basically means that go into a folder called root   which is in the current directory right whereas if  i do cd slash root this means go into the folder   called root which is at the root of the directory  root of the file system right so in this case what   we are doing is i want to go into the root folder  but that should be in the root of the file system   so if i hit enter nothing sort of happens why  because this folder is actually this folder itself   in which we already are so that is why nothing  happens if i try to just do cd root instead   you can see that bash tells me that  hey there is no such file or directory   because there's no folder called root within the  current directory because we are already inside it   so i hope this is clear if i do a pwd we are  still in root if i do cd slash and that's it and   hit enter you can see that we go back to our root  directory and if i do pwt here we are again inside   the root directory so that would be a little  bit information about how you can work with file   systems in linux that's how it all works in the  next few videos we're gonna be learning more about   common commands common linux commands which would  be super helpful to you and uh yeah let's just   start escalating the level now so that would be  all for this video i'm gonna see you in the next   one hey everyone welcome back and in this video  we'll be learning about our first linux commands   the first one is gonna be ls so ls basically  means list right so if you write list you can   see that we just got removed we removed the i and  d from it and just ended up with ls so if you hit   that and enter that you're gonna see you get a  bunch of stuff here so this is basically what   you actually see inside of a file explorer for  example when you're browsing your computer using   a file explorer you see all sorts of folders so  these are all sorts of folders which you can see   right now um in the last video what i did  is i seeded into root and how did i know   that root was a folder you can see right here  root is listed as one of the folders right here   and how did i know that root is a folder and not  a file i'll just tell you about that later on   but right now you can see that there are  other folders as well for example this   etc folder so let's just cd into that and let's  just hit enter uh ls and hit enter and you can see   that you know there's a bunch of different  files now depending on your shell your shell   if it has colors sometimes it just lists files as  different colors and folders as different colors   for example in our case you can see my shell bowls  the names of folders and the names of files are   not bolded right so obviously you cannot cd into  a file so let's say if i try to cd into this issue   cd issue you can see that bash saves me that hey  issue exists but it's not a directory so i cannot   change your working directory into issue however  if i try to let's say go into m tab so if i do   cdm tab hit enter well i still get not a directory  so that's that was a bad example that it boils uh   the things but let's let's actually understand  how you can understand which is the file and   which is a folder in this simple shell within  the simple raw shell so let me just clear   this out first of all and inside edc what i'm  gonna do is write ls and then space dash l so   what does this mean so if you go ahead and  hit enter you're gonna see that you have   a bunch of output which might be super weird if  you're seeing this for the first time but what   is really happening here is that ls-l allows  you to list all the files that is fine which   we were already doing but with a lot more details  about a particular thing right so you can see for   example this is a file and how did i know that you  see that this first character is a dash right so   for any case if the first character is a dash  in front of anything that is going to be a file   otherwise you can see this is a d which  means that this is actually a directory   so if it's a d forget about everything else  right forget about everything else if this is a d   then that means it is a folder if it is a dash  then that means it is a file so if i try to go   into alternatives for example so if i do cd  alternatives and hit enter you can see that   i am inside that particular directory now if i do  ls you can see we have again same thing but cannot   really trust the bold font because it has ditch to  me once so let's just do ls la again uh lsl would   also work right so this is it and once we do that  you can see that all of these are files right so   there's no d right here there's this l which means  something else we'll discuss that later on but   this is not a folder because a folder would have a  d here so this is how ls would work in a nutshell   hopefully you have a better understanding if  i go back to my directory you can see that if   i do ls here lsl here you're going to see that  we have all these bunch of directories with us   right so you can see ddd now i said that l would  not be a directory but sometimes it could be   it's little bit tricky right l just means  that this is a magic door sort of thing   which really means that it just points to some  other file or some other folder on the system   right so you see that bin in our case is actually  a directory so if i do cd bin i'm actually in a   folder but this is an l this is not a d right but  still it is a folder why because it is pointing   to another folder on the system so you can see  that user is right here which is a d so if i go   back and if i go into user you can see that i can  go into bin as well so i'm inside user bin which   is same as going into cd slash bin so these two  directories are same we're gonna cover this later   on but for now just understand what ls is and how  it works so if i do lsl here inside user bin you   can see that we have a bunch of files which have  a dash then we have some special things with the l   and we do not have a lot of directories here right  so we do not know so yeah this is pretty much   how you're going to work with ls ls on itself is  pretty much you know you're going to get all the   files but when you do lsl it kind of becomes  a little bit more organized because you get   a single fine on each line and yeah it becomes  sort of more readable as well so that is all for   this video i'm going to see you in the next one  with some more commands with some more insights   on how you can use a particular thing but this  should get you started with ls command at least   hey everyone welcome back and in this video let's  just go over through basics of linux command again   which would be the cat command now you see right  now i am inside the root directory if i do pwd you   can see that if i try to do lsl here you can see  that i have a file which is called index that is   it right so in linux there's a special thing if  you're coming from a windows environment that you   can have um sort of all sorts of files without  extensions so extensions are not really um the   concept of linux although you're going to see  all of a lot of files with extensions but you   can have files without extensions as well a lot of  meaningful files that is right so once we see this   index file you know i know that this is a file i  know that it exists right here because i can do ls   but how do i read what is inside this file with  let's say a gui you can just double click this or   maybe just right click and open with a text editor  but how do you read inside a terminal what is   inside this file there are a bunch of ways but the  most common one is to use a software called cat   so cat is a binary which is again very common and  is available with a lot of shells right so we are   using bash it is also available in zset or fish  so you just do cat and write the name of the file   in front of it and hit enter so you see i did cat  index and i got 1000 this means this was written   inside this particular particular file right so  there's that so how do you read from something   like this is using cat now let me just quickly  go ahead and create another file here for you   and we'll read from it also all right so now  if i do ls you can see that i have a file   as well as index so we just did get index  and we got a thousand if i do cat file we get   this is a string right so file actually contains  this string called this is a string so this is how   you're going to use cat you're going to use cad  so many times a lot of times because you're going   to be reading files from terminal all the time  because it's really infeasible if you're working   with terminal and you switch to gui to open a  file in text editor so that's the introduction   basically to cad that's all for this video  i'm gonna see you pretty soon in the next one   hey everyone welcome back and in this video i'm  gonna show you a quick way to determine your linux   operating system most of the linux distributions  ship with this file you know you remember that   initially i told you how you can go ahead and  determine your operating system and how i am using   ubuntu here but how can you trust me when i'm  saying that i'm using ubuntu and not maybe centos   so to do that to tell you that i'm actually  using ubuntu what i'm gonna do is make use of cat   and i'm gonna read a file which is sitting inside  this etc folder so i'm gonna first of all go to cd   slash i'm gonna do ls you see this edc folder  let's go into that ls you can see there are a   bunch of files but there's a special file let  me just see is this is called os release so let   me just do lsl here and see that this os release  is actually this particular file but it does not   matter right this is still a file i know that this  is a file but it points to user lib os release but   it's fine we can operate with it from here also  so what i'm going to do is just say cat os release   and hit enter so what happened is that cat told me  that hey these are the contents of these this file   and we get all this information so you can  see that the name of this operating system   is ubuntu and the version is 20.04 there are  a bunch of other tags and information as well   but for the most part we should be done and  satisfied with these first two things right   so this name is ubuntu and the version is 20.04  so yeah that was a quick video on determining   your operating system you can just go ahead and  run this command from anywhere so for example if   you are inside root and if you go ahead and run  cat edc os release this is also going to work   because instead of now giving that a relative url  the relative path not really url relative path   you're giving it an absolute path and this is  also fine right for example if i have ls with   a file here if and if i do cat root and then  file then you also get this is a string right   so it does not matter if i do cat file or if i do  a full path from the root directory that is also   fine so yeah that's pretty much it for this video  i'm gonna see you really quick in the next one   hey everyone welcome back and in this video let's  just take a look at how you can actually read big   files on linux inside terminal so you see i have  three files here and if i try to cat this big text   you're gonna see that it actually overwhelms the  whole screen it fills the whole screen and we have   to eventually scroll up and down for in order to  read this file right so what happens is that a lot   of times for example if you're running a back end  which generates a lot of logs and if you try to   cap that thing you're going to be lost in all  those logs so what you want really is to read   them in sort of like pages so how you can do that  is using the less command so you write less space   the name of the file which you want to read just  like we did in cat which would be big text or txt   and you can see that suddenly this file opens from  the very start you can see this is the start of   the file we get the name of the file here and i  can use my arrow keys to browse up and down so if   you i can go up in the file i can go down in the  file and once i reach the end of the file it says   me that this is in fact the end of the file so you  can see i can go up down and this is how you can   read large files and with the help of sort of  you know a sort of pagination instead of just   throwing the whole file on your face right away  and just to quit this interface just hit the q   key so once you hit the q key you're going to be  out of this interface right otherwise you can use   arrow keys to go up and down so this was a quick  introduction to less command it's pretty useful if   you are working with logs and stuff so yeah that's  pretty much it for this video i'm gonna see you   in the next one hey everyone welcome back and  in this video let's just take a look at the   make directory command because at the end of  the day you will be using all sorts of making   files and folder stuff from the cli all the time  so in gui what you will typically do is go to a   folder right click and select a new folder and  then a new folder will appear and then you will   write the name of the folder and hit enter which  seems like a lot of work if you think about it   for us action as simple as creating a directory  in terminal it's just two steps the step number   one is to go to a directory where you want in our  case we are already inside that directory and the   second step is run this command called mkdir and  then the name of the folder so for example my own   folder and hit enter and that's it if i do ls  now you can see i get my own folder and i can   actually go ahead and cd into this so you see um  i can ls this ls but it's empty so we're not going   to see any file if i do lsl we can see that there  is no file right here so there's that now with cd   a quick neat trick is that you can move a folder  back right you can move a folder back for example   i'm inside my own folder right now i can move to  this home directory or my cd root by just writing   cd dot dot so this dot dot really means that go  back a directory so this would really work like   this as well cd dot dot slash dot dot so this  means go back a directory then again to go back   a directory so if i hit enter you can see i'm back  into the slash so if i do pwd i'm back in slash   if i do a cd dash this command right here  means that go back to the directory which   you were working in before coming to this so if  i go ahead and enter this you can see i directly   go into this my folder directory and if i pwd into  this you can see um that we are actually back into   into our my own folder right similarly you can  for example let's just go ahead and make folder 2   and cd into this right and now i'm inside my  own folder folder 2. i can go cd dot dot dot dot   and i'm inside still the home pwd there we are  cd dot dot we are in the root directory if i do   cd dash i'm gonna get back to root directory  because that was the last directory i was in   and yeah this is how pretty much it's gonna work  one quick thing which you should understand with   make directory is that you cannot just really  go ahead and make multiple folders with it   with the same syntax so if you want folder 1  folder 2 folder 3 like this structure and if enter   you can see that it gives you an error why is  that error because you know it can go ahead and   create a folder one but it cannot really go ahead  and create nested folders within itself unless   this is created so how do you instruct instruct  make directory to create these nested structure   is by passing a flag called dash p now this dash  p is basically a flag and we have not discussed   flags really but whenever you write a command  and you write a dash and then something that   really means that you are passing a flag a flag  is basically an extra information to a command   when you are executing it so now if i write folder  1 folder 2 folder 3 and hit enter you can see we   get no error and if i do ls you can see we have  folder one we have folder two and we have folder   three so you see how easy it is to create nested  folders with command line and it will take you a   lot of time if you do it with gui right because  you have to just repeat all those five six steps   again and again in every directory so i can pretty  much just go back to let's say root and then i can   use cd dash to jump back into all the folders  so it's sort of a sort of a video for both cd   and mkdir in this one which obviously stands for  make directory if you haven't figured that out yet   but yeah this is how you're gonna use mkdir and  uh yeah that's pretty much it for this video   i'm gonna see you in the next one hey everyone  welcome back and in this video let's just go ahead   and learn about the remove command now you can  see that we have a lot of clutter going on here   so let's remove some files and folders so there's  a command in linux called rm which just stands   for remove and you can give it a file in front  of it so for example if i do an index and hit   enter what it's going to do is remove that file  so if i do an ls now you can see that that file   is no longer with me it's pretty much similar  to how you're going to delete a file using   the gui but the difference here is that when you  use the rm command there is no trash on linux   right so your gui provides you that convenience  that if you delete a file you can restore it but   with rm it does not go to trash it's just deleted  from your computer you can no longer access it   so this pretty much works with files nicely but  if you are for example in a folder if you try   to remove a folder what's going to happen is that  it's going to say you that hey you cannot remove   a folder because it's a directory now with rm in  order to remove a folder what you have to say that   hey just go ahead and open this folder and delete  everything in it as well because deleting a folder   literally just means that deleting all the  files in the folder first and then deleting   that folder itself so how do you do that you  do that by passing this dash r flag this r   dash r basically means that recursively go  ahead and delete all the files in that folder   so once you do that and hit enter you're gonna see  that we get no error this time and if i do an ls   now you can see that that folder my own folder is  gone similarly if i try to do folder one we cannot   really do that unless i pass the dash r flag which  says recursively and go ahead and delete that   and there we go you can go ahead and see that  it does not really give us any error message   now and if i do ls you know it will just work  interestingly enough because this dash r flag   is just meant to say that releat stuff recursively  you can pretty much just go ahead and use it with   a file as well so it does not really matter  it would not throw you any errors or something   because a file is just a single file there is  nothing to recurse about it so it's fine bash   will just you know just just take a laugh and  ignore your dash r command here but this would   become very handy when you're deleting folders  because it will allow you to not go ahead and   delete all the files manually one by one inside a  particular folder so yeah that's how pretty much   you're gonna use rm for the most part there's also  a force option here but we're not gonna discuss it   in this particular video but yeah this is this  is most likely what you're gonna be seeing and   working with in the coming tutorials so that's all  for this video i'm gonna see you in the next one   hey everyone welcome back and in this video  let's just take a look at a command called   copy which is cp which basically just means  what it says that it copies a particular file   into another location or into the same location  but with another name so how do you use that if   i else this you can see that we have big text and  hello world and new file and script so these are   some new files but what you can see is that you  can understand for example if you want to copy   this big text file and store it as a backup  what you can do is just write cp which is   copy write big text and then write the name of  the new file so i'm going to say bigtext.backup   and hit enter and if i do ls you can see if i cat  this big text or if i catch this bigtext.backup   these are both the same files right so you can  go ahead and verify that from hello world as   well so if i go ahead and cat hello world this is  hello world so let's just go ahead and see copy   cp hello world and then hello world dot backup  and hit enter and you can see that if i try to   get helloworld.backup now you can see  that it is same as the previous file   now copy that is the cp command works with folders  as well so for example if i have a folder one here   it will work with folder as well folder one for  example if i want to copy folder one as folder   two for example let's assume that this had some  contents it does not right now but let's assume   that it had some contents so if i want to create a  copy of this folder i'm going to do something like   this but it's not going to work and the reason  it's not going to work is that you can see that   this command actually tells you why is that dash  r is not specified just like with the rm command   we need dash r to remove a folder similarly with  copy command we need stash r to copy a folder so   if i do it now you're going to see that now we  have folder two with us as well and if i can go   back go into folder let's say folder one and if  i go ahead and create a file by let's say touch   xyz which just creates a empty file right touch  command just creates an empty file and if i   carried you can see there's nothing inside this  but if i go back and if i try to do copy folder   one and obviously you might want to do a dash r  here folder one and then folder three now and if i   go into folder three you can see that we have the  xyz file present we also have the xyz file present   inside dot dot slash folder one right so this is  the ls4 folder one this is the ls for folder three   and we have the xyz file present for both of them  because we copied the whole folder so this is how   you're gonna work with copy command in a nutshell  and that is all for this video i'm gonna see you   in the next one really soon hey everyone welcome  back and in this video let's just learn about   the move command now this move command basically  just how copy the cp command copies the stuff   the move command actually cuts the stuff right  so it moves it somewhere else and move command   is actually very useful in renaming stuff as well  because you know if you just move a file from one   name to another in the same directory that is  basically renaming right so that's how it works   so what you want to do for example let's just ls  and let's say i want to rename this bigtext.backup   to backup.bigtext and why do how do we do that is  by using this command called mv mv stands for move   and i say bigtext.backup and what i do is  i just go ahead and say backup dot big text   and hit enter and once i do that you can see  that bigtext.backup is gone and the only thing   i have now is backup.bigtext you can pretty much  just go ahead and move stuff between directories   as well so you can say movebackup dot big  text inside folder one so once you do that   if you go into folder one now folder one and  if i ls you can see we have backup.bixtext   inside this particular folder now and  if i do an ls of the previous directory   you can see we do not have backup.bigtext with us  anymore in that directory so let's just go ahead   and clear the screen and move backup.bigtext from  folder1 back a directory this is with the two dots   which is we have specified hit enter and again  we do not have that file in this folder anymore   oops and if i go to folder one you can see  we do not have that file and if i go back   you can see that we have backup.bigtext  available with us here so this is how move works   again you can use move to move folders as well so  you can see if i do folder one inside folder three   hit enter you can see that if i go ahead inside  folder three it is containing folder one now now   one quick thing you might have observed compared  to copy is that in move if you are trying to move   folders you do not need the recursive option  right so it just works out of the box like that   so yeah that's pretty much it for uh moving stuff  with the move command that's all for this video   i'm gonna see you in the next one really quick  hey everyone welcome back and in this video let's   just take a look at a quick command which is known  as which right so this command is named as which   and this actually helps you determine where a  particular binary is located now what do i mean by   that you can see that we have been executing these  commands like ls you know pwd echo stuff like this   all the time but honestly these commands are  actually a file on your system which is a binary   file by binary i mean it is not a human readable  sort of text file it is actually a compiled   code a compiled binary which is executed by  the system so when you really call echo124   what happens is some system level code is invoked  within this binary and that is responsible for   telling your display driver to say that hey  go ahead and write one to four on the screen   so the code for that the binary the file for that  is located somewhere on the system and you can   see that you can access a lot of things without  actually going into any folder but to be honest   when you're writing ls what you're really doing  is you are actually executing a binary inside this   bin folder which is named ls so if i go ahead and  hit enter on this you can see it still works fine   why because if you go to bin folder and if you  just write ls you can see in this bin folder we   have all sorts of binaries and ls is one of the  binary right so you can see ls actually lists   itself so it's sort of a recursive thing but you  know you get the idea so you can see there are so   many commands you can see that we just uh talked  also talked about less command we will talk about   a lot of commands we talked about cp we talked  about uh you know you'll if you spend some time   you're also gonna find mv here you can see we  have the rm file we have a bunch of stuff right   so what you're really doing is you are executing  just like i said you are executing these commands   when you are actually writing something so echo  one two three four five under the hood is really   what it's doing is it's calling bin echo and  then it is executing this particular stuff right   and uh yeah this is how it is working and what  which would do is which would actually give us   the path of this particular binary so you can  say which echo and you can see it saves me user   bin echo instead of bin echo because if you go to  the root directory and if you do lsl you can see   that bin is really a directory which is pointing  at user pin and user is another directory here   right so anyway we're going to discuss about that  later on but what you should know about which is   that it gives you the path of the binary now you  might wonder that if all the binaries are just   going to be stored in bin then wouldn't this  command be useless because we will always know   well no right because which which actually  tells you where the binary is stored   and it does not it is not mandatory that the  binary would always be inside user bin or in the   build folder right it depends on a lot of things  how your environment variables are configured   where your linux operating system is looking for  the stuff so which allows you to just go ahead and   take a look at where it is exactly calling that  binary form so if i go ahead and do a [ __ ] bash   you can see that bash which is actually this  shell which you are using is located as a binary   right here so yeah this is how which command works  that's all for this video i'm gonna see you in the   next one really soon hey guys welcome back and  in this video we're gonna be learning about nano   now nano is a text editor for command line and  for the most part you're going to be using nano   if you want well that's up to you some people  prefer vim as well but i'm more of a nano guy   you can use nano to edit files within the terminal  now why is that necessary why you can use visual   studio or something like that well just like i  said you'll be working with cli a lot of times   on server as well and sometimes you just need a  quick edit right you do not really want the whole   vs code sort of thing to boot up that's just  not feasible and it's just not practical so a   lot of times you if you need just a quick edit  nano or vim is your way to go which are just   the internal text editors of your um shells so  let's start first of all if you are using ubuntu   nano would come installed so let me just go ahead  and ls first of all you can see we still have the   big text file so what i'm going to do is i'm  going to say nano and then i'm going to write   big text and one second nano and then i'm going to  say big text so here we go and right away you can   see that a sort of interface like this opened up  for us which is gnu nano like you can see that ga   it says gnu nano because nano is a utility nano is  a tool which is built on the top of linux kernel   which we discussed in the first video right so  hopefully you are able to link some parts now   and this is the screen for your text editor  might not be the best shiny screen but it is   super performant it gets the job done so you see  that it's basically again just like we had in   terminal you can browse this using arrow keys  right and you can just basically start typing   right so it is as simple as that it's just a text  editor you can remove stuff you can type stuff   everything works fine at the bottom you can see  there are a bunch of shortcuts which are listed   so you see this this key right here which is  denoted by this character this is basically   called a control this is a control key character  right so whenever you see this this means that   you have to press control so you see that we're  going to start off with this write out option   so you see that in a typical text editor you have  the option to you know just work a little and then   press ctrl s or command s to save a file we have  the similar option with nano but we have to write   we have to type control and o so once we do that  you can see it asks me the file name to write   and i'm just gonna go with the big text  only which is our original file and hit   enter you can see once i do that it sees me  wrote to 12 lines and that modified which   was appearing here got disappeared so if i try to  write it again you can see we get a modified here   and we again get the option to write out so  if i go ahead and do uh one second if i go   ahead and do control o it asks me to file name  to write big text that's it and that is all   now we have another command which is pretty  much uh exiting nano which you might might be   wondering that how do i exit this interface and  that is using control x so if you press control   x you can exit the nano now what you can do is you  can just go ahead and create a new file instead of   reading uh or editing an old file so i'm gonna  say this is hello world which is you know this   file does not exist and nano would automatically  create this file for you once you're done with the   edits and save this so you can see i open hello  world this is the name of the file it says that   it is a new file it knows that so i'm just going  to write hello world right here and then i'm going   to press ctrl o to write it out and it asks me  hey do you want to write it to hello world only   yep that is it i press enter and then i press ctrl  x to exit nano and now if i go ahead and ls this   and if i try to cat hello world this is what it  is i can also open it inside nano nano so that   i can go ahead and for example just add an  exclamation mark here and let's not just write it   out now let's not press ctrl o let's press ctrl  x directly so you can see that when you press   control x it actually asks you before leaving  that hey do you want to save this file because   you have some unsaved changes and if you press y  it's gonna save it if you press no it's just gonna   discard the changes and if you press ctrl c you're  gonna get back into the editor right and you get   the status that hey it is cancelled so pretty  cool stuff pretty cool stuff with nano this was   a little bit of introduction to nano basically  we're gonna explore more in the next videos   um trust me if you are able to master a tool  like nano or wim in a cli environment it becomes   very easy when you are trying to interact with  um configuration files on servers something which   you really truly do not have access to in terms  of gui right so yeah that's pretty much it for   this video i'm gonna see you in the next one super  quick hey everyone welcome back and in this video   let's just learn about how you can use copy paste  in nano so let's just go ahead and take a look   at our big file or maybe let's just go ahead and  create a new file so new file it is and i'm gonna   say hello world again in this one so i'm gonna go  back to the first character and what i'm gonna do   is press my ctrl key and the carrot symbol which  is this number six key so once i do that you can   see it changes to mark set that means i can now  go ahead and use my cursor in order to get the   amount of text which i want to select right so  it is your sort of way to select text so let's   say if i go ahead and go to this thing or maybe  just this thing you can see the last character   will not be um copied or cut whatever we do  right so only the characters before that would   have action so in this case w would not be copied  in this case o would not be copied but w would be   copied so the last character is left behind so  if i do go ahead and something like do something   like this now what i have to do in order to  cut this text is press ctrl k right so once   i do that you can see that the text is gone now  the text is truly not gone because it is in our   clipboard it is in that memory so what i can  do is press ctrl u to paste that text again   and as a matter of fact our text is still in  our clipboard right so i can go ahead go down   a couple of lines and press ctrl u again to give  that text back and you can see that there is no   uh space here as well so if i press ctrl u again  you can see that there is no space because space   was our last character and it was not copied so  let's just go ahead and do this again oops with   the control 6 key that is the control caret symbol  and this time i want to copy space but not w   so there we have it right and i'm going to  press ctrl 6 again which saves me mark on set   i'm going to go down a little bit and i'm going  to press ctrl k first of all oops control 6 mark   set and we want it up to w and i'm going to press  ctrl k now so you can see it's gone now i'm going   to say control u so it restores it back and then  i can just go back go down a little and press ctrl   u again and you can see this time it copied with  the space so we have all these spaces in between   right so this is how you're going to copy paste  in nano you can cut paste as well just like i   said for cutting you will obviously use ctrl k  button would not paste it here there's actually   a way to really copy it without you know just  going ahead and cutting it in the first place   but i use this shortcut which is the control k  first of all and then ctrl u to restore it because   inside mac os if you're running mac os there is  no alt key if you do have a windows keyboard if   you do have a regular keyboard just to copy  this thing for example once you have selected   by hitting ctrl 6 and selecting this thing if you  want to just copy this without actually cutting   in the first place just go ahead and hit alt plus  6 that is alt plus caret symbol once you do that   it will be only copied and would not be cut but  we press ctrl k in order to cut it then paste it   and it's still in our clipboard so that sort  of works fine so yeah that's pretty much it   for this video how you're gonna cut and copy and  paste with nano pretty useful stuff you're gonna   use it all the time when you're working with real  files so yeah that's pretty much it for this video   and i'm gonna see you in the next one hey everyone  welcome back and in this video let's just go ahead   and learn about how you can search for stuff in  nano because that is going to be extremely useful   as well in saving your time so i'm going to say  nano big text in this one and you can see that   we have opened this inside nano text editor  let's take a look at this industry word right   so if you want to maybe change this industry full  stop to index industry exclamatory mark what you   can think of is you know just using arrow keys all  the way to the industry and it is super super slow   right it works but it is super slow now let's  say if you want to go to this simply word now   it is a nightmare right you have to do the same  thing again and you have to do something like   this so what we can do instead is we can directly  jump towards inside nano and how we do that is by   using search in nano just like in your typical  text editor you're gonna use ctrl f or command   f to perform a search in nano you press control w  and once you do that you can see it's switched to   the search thing right here and what you can  do now is start typing for the word you want   so for example let's say i want simply right and  once i do that and hit enter you can see that we   came at the first iteration of the word simply but  hey i wanted this one not this one so what do i do   well you press ctrl w again and you can see that  nano is smart enough to keep your last suggestion   up so unless if you want to change the search  word you can just go ahead and press enter again   and there you are you are on the next word now  and you can go ahead and change it for example   let's jump to readable now this one so readable  hit enter and here we are and i can do something   like this let's just jump to lorium which is the  first lorem or whatever however you pronounce it   and there we are so this is another one this is  another one this is another one we have a bunch   of them right all the way down and there we are on  the first one so here we are so this is how you're   gonna search in nano and one quick thing you  can see that you can see that there is sort of a   uh you know sort of this character right here  which is um on both sides of the screen this one   and this one this basically means that there is  text on both sides of this particular line it's   not just um this much content right so if you go  back you're gonna get more con more of the text   one more quick shortcut is that if you are  anywhere on the line if you want to move at the   end of the line you press control e right and if  you want to move at the starting of the line you   press control a so control e moves you end of the  line control a moves you to starting of the line   and to be honest it's not just a terminal  shortcut it's not just a nano shortcut   it will work on your terminal commands as well so  if you want to move within the terminal uh between   and you know at the end and starting of the  commands you can press ctrl a and ctrl e control e   moves you to the end control a moves you to the  start control e control a e a stuff like that   so yeah i mean that's pretty much it what you  can do is probably if you want to go to dummy   and hit enter you are here and if you want to move  the end of this line you press ctrl e and i am   now at end you can also press ctrl a to  go to the starting and that's how it all   works so this was a quick tutorial on nano  search that's pretty much it for this video   hopefully this much information should be good  enough for you to work with nano in a better way   and yeah that's all for this one i'm gonna see  you in the next video really soon hey everyone   welcome back and in this video let's start with  bash scripting so this in this whole section we're   gonna be learning about what scripting is how you  can do bash scripting how you can actually work   with stuff and uh automate things with the help  of coding right so you can write a bunch of code   and execute it with bash and uh be done with it so  you're gonna be learning a lot of languages in the   back and learning path like node python you know  whatever you have chosen whatever route you have   chosen but you can also program with the help of  bash because bash is not only a shell it allows   you to actually execute shell scripts as well so  there are certain ways you can write code in shell   and to be honest whatever you have been doing so  far with commands this is nothing but code right   echo 100 for example is a code which echoes  something back ls is a code which uh tells you   what files are there in a particular directory  so we're just going to be using a bunch of more   commands than these in a shell script and would be  executing them using bash as our interpreter right   so let's get started with the bash scripting  we're going to learn about a bunch of things   in batch scripting and to be honest you do not  really have to just understand or maybe just mug   up everything because most of the things if they  are relevant to you you can always google them up   or maybe um just because we're gonna be  seeing a bunch of things and a lot of them   would not be relevant to your use case a lot  of times when you're working and developing   a shell script so you might be just using for  example two or three commands out of all the ones   which we'll be learning but nonetheless we'll be  creating more a little bit of more utility based   programs so that we can actually learn about these  things and at the end we can also look at some   code damn classrooms in order to actually build  certain interactive programs using shell scripting   so yeah that's pretty much it for the introduction  part of shell scripting with bash in the next one   from the next one we're going to be starting off  with building a little bit of new projects here   and there and learning about shell scripting  as well so see you then in the next video   super soon hey everyone welcome back and in  this video let's just kick start our bash   scripting so we're gonna take a look at some  quick commands and basically we'll be doing what   whatever we have done so far so let's just go  ahead and start with a simple script so i'm   gonna open this inside nano editor which we have  just learned about and i'm gonna start with a very   simple script i'm just gonna say this is my first  echo from a script right i'm going to press ctrl   o yup and i'm going to press ctrl x to exit this  now so this basically if i do cat script now you   can see that we have our code with us but i want  to execute it now how do i execute the script   is i want bash that is the shell which  you are inside to execute this script as a   um you know as a special piece of code so i  want this to understand i want this to take in   it as a piece of code and just not a text file  which is what happens apparently with the cat   so to do that what i'm gonna do is i'm gonna make  use of bash as the utility name just like we did   ls and you know ls or cat or less or rm things  like these these are all binaries right so we know   that these are the binaries which you can locate  with the help of which command so if i probably   try to do which bash you can see that it is in  user bin bash so there it is for you it might be   in bin bash it's fine if you can remember you're  gonna realize that bin and bash pin is basically   a directory which is mapped to user bin so these  are the same two directories so if we go back to   let's say our home directory which is i can do  with the tilde symbol and if i do ls we have the   script here so in order to execute this what i'm  going to do is write bash and then i'm going to   write script and hit enter and you can see that we  just get this as my first echo from a script we do   not get this echo we do not this get these codes  no space nothing because this is an actual output   now there's a better way to execute the script by  actually making it executable but we're going to   learn about that later on when you are learning  about file permissions and stuff like that   right now for now it is perfectly fine to use  bash like this so write bash and then specify   the name of the file so you want to execute this  file it reads this file and executes all the code   you can go ahead and edit this for example  and just go ahead and say echo this is a cool   line right and write bash  script hit enter and you can see   that even though you know this had a space  because this was not a code we just got this   is a cool line and this is my first echo so yeah  this is pretty much how you're going to start with   bash scripting this is as simple as it gets and  you have actually written a bash script yourself   which you can execute using bash script like this  right so that is all for this video i'm gonna see   you in the next one with some more things in um  bash scripting so see you soon in the next video   hey everyone welcome back and in this video  we're going to be taking a look at how we can   run a simple bash script and we just did that  in the last video but in this one we'll be just   um taking a look at more things which we can do  in a bash script so let's just go ahead and open   our new script right and this is a new script file  so first thing what i'm gonna do is i'm gonna go   ahead and say i want to declare a variable in bash  right so how do you declare a variable in bash   well you just go ahead and start writing the name  of the variable so for example myvariable and then   if you want this to be a variable you put an equal  to sign without any space here make sure you do   not have any space here and inside the quotes  what you can do is just specify this is a cool   string right and this is now a variable so once  you do that how do you make use of this particular   variable so you say for example i'm just going to  say echo i am about to say something in a variable   and then in the next echo i want to use this  variable but if i go ahead and just say my   variable like this what's going to happen is that  echo would really just say my variable on the   screen so you can see so not very helpful right so  what we want to do instead is oops nano new script   what we want to do instead is we want this to  be treated as a variable instead of a string   so how do we do that is we append a dollar  sign so if you want to get a variable in   bash that is if you want to read a particular  property if you want to read that variable you   use a dollar sign if you want to set a variable  you do not use a dollar sign so you do not say   my variable like this but simply my variable but  if you want to read it you say with a dollar sign   so if you go ahead and save this and try bash new  script now you're going to see that you get i'm   about to say something in a variable and this is  a cool string which was the value which was stored   in my variable right so this is how you're going  to create variables in bash and this is how you're   gonna basically use them in a statement like echo  as well so that's all for this video i'm gonna   see you in the next one really quick hey everyone  welcome back and in this video i'm gonna show you   how you can use bash scripting to read the past  arguments to a script so what do i mean by that   is that a lot of times you would have seen that  you are running if you are running a script then   you can pass certain arguments to it and arguments  is just basically a little bit more information to   that script so what do i mean by that let's just  go ahead and open this new script file and you can   see we have the code from our previous thing but  instead of using my variable as the echo i'm just   gonna say echo dollar one and maybe dollar two and  dollar three and dollar four right so what does   that mean well i do not have defined any uh dollar  one or dollar two variables so what does this mean   and if you think about it actually you cannot  really define something like this right so it is   an invalid statement so we are not gonna be using  this and i just put a hash in front of it because   hash is used to comment in bash so i'm not really  taking a whole video to just explain explain that   so what does this dollar one dollar two dollar  three mean then well you might have guessed by now   that it means the arguments which you are passing  so if i do a bash new script and hit enter you   see that we do not get anything at all except the  our regular statement but if i try to do let's say   cool and hit enter you see suddenly we see  cool right here right and if i go ahead and   encapsulate inside the quotes you can see it  does not really matter so we are good to go   then once we have done cool let's say i  want to say dude here and hit enter and   you can see that we get dude here as well  and if i go ahead and say that this works   hit enter you can see this works is also there and  then this too you can see this two is also there   but if i do this won't and hit enter you can see  that we do not get this want why because this is   dollar one this is dollar two dollar three dollar  four and this is dollar five and if we take a look   at inside our script inside our new script we're  gonna see that we do not echo dollar five we just   echo up to dollar four and uh yeah dollar five  is this one so that is why we do not get that   so this is how you're going to access arguments  inside a bash script and use them right so   yeah that's pretty much it for this video i'm  going to see you in the next one really quick   hey everyone welcome back and in this video  let's just write a quick simple program to um   enter a word from the user to get a word from  the user and print it out right so let's just   go ahead and first of all create a new file it's  getting a little bit messy so we're gonna see how   we can remove all of them together but let's say  this is user input right and what i'm gonna do is   i'm gonna say that first of all echo hello to  my program right and then i'm gonna say i want   to read the input of the user into a variable  so i'm gonna say enter your name please   right and now what i'm gonna do is i'm gonna  say read and then i'm gonna write let's say name   so what does this mean is that read is a command  which actually hauls the program for getting the   input and it's going to store the whatever the  input the user has written inside the variable   called name and you know that in order to access  this variable i'm just gonna say your name was and   after this i'm just gonna say name like this right  so this is how you're gonna make use of it and if   i go ahead and save this and i'm going to run this  using user input you can see that it says hello to   my program and it waits for me to enter something  so if i go ahead and write me whole and hit enter   you can see it says me your name was mahul  right and let's say if i want it on the same   line so how do we do that so for for doing that  what i can do is just move this echo statement   from this to something inside the quotes itself so  inside the quotes what's going to happen let's see   if you run this what's going to happen is  if i write mahul you can see that we get   the value directly because double quotes  in bash parse very variable values right   so you see that it started with the dollar  sign so bash knew that this is a variable value   so it's going to parse it if you literally just  want to enter dollar name instead of actually   getting the real value you should go ahead and  use single quotes so if i do something like this   and run this program again and if i enter mayhold  you can see that we literally just got dollar name   here so double quotes are gonna pass the value  of your variables but single quotes would not   so yeah this is pretty much how our  program final program would look like   and that is all for this video i'm gonna  see you in the next one really soon   hey everyone welcome back my name is  mahul and in this video we're going to   build on the top of the program which we left  in the last video and let's just create a new   program out of that but before that let's just  remove all this clutter which we have so far   so i'm gonna use the rm command and dash r command  and instead of just naming every single thing   one by one i'm gonna just go ahead  and put a star here the star right   here means everything in the current folder  now make sure you do not write slash star or   something like that because this means that you  want to delete everything in the root as well   so be careful about what you are writing  with rm because it is a destructive action   so let's just go ahead and do that and there we  have it our folder is clear and we are good to go   so let's start with our script again but this  time what i'm gonna do is i'm gonna just use   the read command in order to get a prompt so last  time you saw i did your name and then we did read   name right but name actually allows us to pass  in a placeholder as well a prompt sort of thing   so i can say read and i can say for example dash  p basically means placeholder or prompt username   and that's it so if i go ahead and run this uh not  really this because we also need a variable name   right here username so if i go ahead and run this  you can see that we get username automatically   right we did not have to write any echo statement  plus there is no line break as well which is   pretty cool let's just go ahead and edit this  even more next i want to write read the password   and i'm going to store this inside password  and i'm going to say echo uh your username   is username and that's it and i can probably say  your password was wrong for example let's just   go ahead and do that so bash script is going to  give me admin and password let's say if i enter   admin as well so you i can see that your username  is admin your password was wrong so firstly let's   just improve this a little bit let's say i want  to hide this password right so how do we do that   well in order to hide this password that is in  linux a common convention is when you're writing   the password instead of getting this as stars you  get nothing at all on the screen that is how linux   has implemented sort of the tradition way so what  you can do is you can say dash s here to silent   the input and once we do that if i run this  program again you can see that i can enter admin   i can enter password i'm all actually entering  password at this time but it is not visible to   you and hit enter so we get you know uh basically  nothing so we get echo from the same line which   we can improve by writing a new line but we get  your username is admin your password was wrong   and just to verify our changes i can actually  just echo out password as well for the time being   right so let's just go ahead and run this program  again and i'm just writing some password and you   can see we get the password but that was not  visible here so it's a pretty cool feature   and you should for the most part accept passwords  like this only right so this is how you're going   to build up a username simple username password  in the next one we're going to be taking a look   at some if else so that we can actually verify  if that particular user in fact had a correct   password or not so that is all for this one  i'm gonna see you in the next video really soon   hey everyone welcome back and in this video let's  just take a look at some if else statement so you   can see right here we have written a quick  statement that if then a square bracket   then in the quotes i'm saying username is equal  to admin then i want to perform certain actions so   let's say if i want to say and indentation is  not really required so i just want to say hey you   just entered admin as the username   so what's going to happen is that the syntax  is you write if then you write a square bracket   give it a space and inside quotes you write  the variable name and inside quotes as well   you write the actual string name right and you  also want to have a single equal to right here   now why do you want to write variable name  inside quotes that is because for example if your   username was empty then your expression might just  evaluate to something like this which is invalid   bash right without codes but if it has codes  then it will evaluate to this which is sort of   correct right so you want admin not really admin  your username to be here and let's try this out   so i'm going to say bash script admin and  something else and you can see that we get   this line hey that you just entered admin as your  username let's try to oops let's try to run this   again but this time with admin 2 for example and  any password and you can see that we did not get   this line this time right because our conditional  check did not match similarly what we can do is we   can um extend this with the help of and and  for adding more conditions so i can say and   and password is equal to admin as well so in that  case what i want to do i just want to say hey your credentials seems good right and that's  it so let's just go ahead and run this   and write admin and admin and hit enter you can  see that it saves me that hey your credentials   seems good if i run admin and something else then  i just get these messages nothing like that so   let's just go ahead and do that let's just go  ahead and get rid of these two commands now and   add an else block so what i'm gonna do in order to  add an else block is just gonna say else directly   and i'm just gonna say hey your login is invalid  and again just to close the if block we write the   opposite of the if that is fi and that just ends  the if lock so i'm just going to say bash script   now admin oops admin and something else and you  can see i get hey your login is invalid but if   i write admin and admin again we get hey your  credentials seems good so this is how you're   going to test for you know string equality in  bash and use if else for that particular part   and yeah that's pretty much it for this video  i'm gonna see you in the next one really soon hey guys welcome back and in  this video we're gonna be taking   a look at how you can exit your bash  script with a different status code   now what do i mean by that well you see when you  are writing something which is garbage you get   certain output on the screen but as a person  suppose suppose you do not understand english   then can you really tell me if  this command was successful or not   well you cannot right because let's say if this  output was in chinese or some other language which   i do not understand then i won't be able to tell  whether this command actually did its job or not   status quotes allow you to determine that  right status quotes are basically telling   you once the command is done once something  runs then you can read a particular number   which is the which is called as the  status code of that particular command   so if the status code of a particular command is 0  that means that command exited normally that means   everything was fine everything was expected and  the exit was normal if it is a non-zero status   code that means something went wrong either  you know there was a runtime crash or maybe   the command was not expecting those sort of inputs  or something went wrong right so as a back-end   engineer as a devops as somebody who's writing  shell script you're going to be writing a lot of   status code checks sometimes when you're working  with scripts just to determine if they exited   properly so how do you determine how this command  exited is by actually writing echo for example   you want to echo that out and then a dollar sign  and then a question mark you might have remember   that remember that a dollar sign is used to echo  out a variable value and a question mark in this   case again is a special variable which holds  the status code of the last command which ran   right it is not holding status code of every  command it's just the status quo of last command   and in our case it was this thing so we echo out  this special variable and you can see we get a   status code of 127 let's go ahead and just write  hello world here right hit enter and then let's   try to read the status score of this command you  can see we get a status score of zero in this case   and just like i said if the status quo is zero  it is fine the command just worked expected and   that is what really happened with the hello world  there was no error or nothing like that but with a   random command the bash failed and set the status  code to 127 which means there was an error which   means something went wrong so similarly what you  can do is you can take a look inside your script   and what we can do is once we are right here i  can say i want to exit with a status code of 0. so   this exit basically means that i want to exit the  execution of this program if we get your login is   invalid i'm going to say exit with a status score  of one right so let's just go ahead and do this   and let's go let's just go ahead and run this  script i'm going to write admin admin hit enter   your credentials seems good let's echo the  status code and we get zero let's run it again   but with wrong values and let's try to echo  the status quo and you can see it's one now   the fun part comes when you can make use of the  status code with other commands so if we take a   look inside the script you can see that inside  the if else we are able to check how you can   verify two conditions using these two ampersand  symbols right similarly in bash what you can do   is you can make sure that two commands run that is  not the number one thing that two commands run in   a single line so i can say echo one and echo two  and hit enter you can see that we get one and two   but most importantly this and double and basically  determines that if the status code of this command   was zero then and only then i'm gonna proceed  forward otherwise it's just stops right here so   how we can use this i can use this by  saying bash script and echo everything   went right and hit enter and if i enter admin and  admin you can see that we get status score of zero   which we have already looked at and we get this  echo as well everything went right however if i   go ahead and use this and enter wrong credentials  you can see that we do not get this everything   went right why because this ampersand does not  let it proceed further because this returns a   non-zero status code similarly just like ampersand  we have this or symbol right which basically means   either this should be successful or this should be  successful or both could be successful right but   it's not that both should fail so what do i mean  by that if i try to enter this and if i write the   right credentials you can see i hit enter and you  know we do not get this message why do why we did   not get this message is because this in ourselves  returned a status score of zero so it did not   bother to go here and check if it returns status  score of zero or not because this expression   in itself was self-sufficient because of the  status quo 0 returned by this particular part   now if i go ahead and enter let's say invalid  credentials you can see this returns a status   score of 1 which is what we did in the script  that is why we went over right here to verify   um uh that not really verified to run this  particular piece as well to get the status code   so i hope you understand how this logical or and  and works in a bash script with the help of status   quo it is a super important and super interesting  concept to be honest and uh yeah i hope you get   this understanding that is all for this video  i'm gonna see you in the next one really soon hey   everyone welcome back and in this video let's just  go ahead and take a look at if else syntax in a   bit more uh depth because we have already covered  refills but not really in a very satisfactory way   so i'm going to start off by saying for example  let's see if i have a variable with x equal to 100   and now let's see if i want to check if this  value is greater than or less than a certain value   so i'm going to say if x is greater than and you  see that i'm writing this dash and then gt greater   than let's say 20 then i'm going to say echo yup  the number is greater than 20 and i'm going to say   fi to end that so if i do that and run the script  you're going to see that we actually get here   and if i for example say less than which you might  have guessed is just lt instead of gt you're going   to get no output now you can also specify an else  if block so how do you do that is you say e l i f   right so elsif is just l f and then you can also  specify another condition so i'm going to say   like this so if x is less than 20 which is  not the case else if x is greater than 100   uh or maybe x is greater than 99 then i want  to have this happen and that's basically   yeah so you see that now we get a longer e up  because this time the second condition matched   and then finally if nothing is really happening  what you can do is just write else and because   else would not take a condition because this is  the final case you can just say echo no match   found right and let's just make this as 90 so  that the condition fails and if you run this   you can see we get no match found so this is  how the control would work inside if else if   and you can just go ahead and indent this  if you want but it does not really matter   so you have greater than less than you  can also check for equality with equal   so if you this is 20 then you can go ahead  and see that yup is what we get so that is   how pretty much you're gonna work with um things  like this in batch that is comparing numbers   and that's all for this video i'm gonna see  you in the next one really soon hey everyone   welcome back and in this video let's just  work on loops a little bit so just a quick   heads up instead of like creating a new file  every time with nano what we can really do is   we can sort of work within the terminal itself  for writing scripts for simple small scripts how   because you know if i try to do something like if  for example let's say a is equal to a and then i   hit enter you can see it's actually waiting  for completing my input so i can say echo   yes and then i can just say fi to make it done and  you can see that we get dss output so instead of   like opening nano every time and then using bash  script this is how we can do it now coming to the   for loops what we can do is i'm gonna actually  just go ahead and keep it in the file itself so   that it's much cleaner for you to look but what  you can do with for loops is you can start a   for loop basically by saying for i in a particular  expression where you in which you want to evaluate   things right and a loop is basically just running  an expression multiple times till the condition is   not satisfied so basic example i'm going to start  with 1 2 3 which are basically just three numbers   then i'm going to say do for every single  time echo welcome to code dam your number   is for example i right so you can see i'm using i  variable within the string and you can do that if   you're using double quotes and then done so if  you do this what's going to happen if you run   bash script you can see we get the output as your  number is one two three and three statements right   away similarly you can go ahead and increment  this as much as you want and it's just gonna work   uh just like that right now the next thing is that  instead of numbers you can also use strings here   right so you should be able to see  that the way it is actually working   is that it sort of works on the space of the thing  right so if you take a look you can see that we   got a space here then we got a space here then  we got a you know nothing else so it's basically   just picking up every element then looking for  a space then picking up every other element then   looking for a space and so on so if i go ahead  and probably try to include a space like this   then this should not break because  it should respect the codes right so   you can see it respects the quotes but if i go  ahead and remove the quotes from all the blocks   then it's probably not going to respect the quotes  because now it's just just splitting up on the   spaces right so let's try this now and you can see  that we get four statements now instead of three   now this is particularly not very useful if you  think about it if you do it in terms of numbers   so bash actually allows you to specify a range  as well so instead of like writing 1 200 here   what you can really do is specify for i in  range one and then two dots and then hundred   if you write an expression like this inside curly  braces what's gonna happen is that it's gonna just   create your range for you and it's gonna trade  like this you can see we got all the way from 1   200 right all right so this is one  way another way to use the same range   is to actually go ahead and specify how many  numbers you want to skip so for example if i   just want the multiple of tens or maybe not really  multiple of tens but multiples of tens plus one   so if you do that you can see i only get 10  statements here starting from 1 to 91 and on the   uh we are just skipping 10 numbers every time  so this how you're gonna work with for loops   for the most part right just like i showed you in  if you're not working with ranges it's just gonna   uh take up basically anything which is separated  by spaces so if for example if i have something   like file 1 and file 2 here and if i do something  like or actually let me just go ahead and   uh form a very uh smart sort of example  let's go ahead and do this so i'm gonna say   instead of specifying a static thing here i'm  gonna open read files right so read files would be   a file and then i'm gonna say echo reading read or  maybe like i or maybe we can just change this to   f for example for file and then i can say cat if  right so what's going to happen let's go ahead   and see what's actually inside script we can  see we have to read a file called read files so   let's create a file called read files now and  i'm going to specify file 1 file 2 and file 3   here and let's just go ahead and create file 1  which is just a regular file 1. similarly we're   gonna do the same thing with file two contents  and finally we're gonna do the same thing oops   the same thing with file three contents right so  now if we take a look inside the read files we   have this file one is this file two is this and  file three is this right and our script contains   this thing so if i go ahead and run the  script now you're going to see what happens   is this statement right here this evaluates to  this expression which is then fed in the bash   loop which then iterates on the space and then  you can read individual files like this right   pretty cool feature that's how you're going to  use loops in bash and yeah that's how this whole   thing is going to work out so yeah that's pretty  much it for this video that's pretty much how   you can use loops there are other ways as  well but we are not going to get into them   just yet because i believe that for the basics  part this should be fine so that's all for this   video i'm gonna see you in the next one really  soon welcome back and in this video what i want   to do is just tell you about functions in bash so  functions in bash is a pretty interesting concept   because if you know any other programming language  you're going to very soon realize that functions   in bash are nothing like other programming  languages right now what do i mean by that   that means that in regular languages for the most  part you are able to return certain values from   functions right but in bash that is not possible  so let me just go ahead and do a real quick   demonstration here so how you create a function  in bash and function for those of you who are   clueless is basically a block of statements which  you can run again and again depending on where you   like it is different from loop because loop has  to run a certain number of times but a function   only runs whenever you want to call it so i'm  going to say function let's say greet user and create a file right that's it so you're going to  start function like this you're going to have a   function keyword then you're going to have the  name of the function two parentheses like this   curly braces and curly braces end and whatever you  write inside this it's gonna execute so i'm gonna   say echo greeting user now right i'm going to  say sleep 2 sleep is a command in bash which just   pauses the execution of your code so 2 here means  for 2 seconds then i'm gonna say echo hello mehul   right you can write anything here sleep 2 echo  creating file slash or maybe like dot slash   greeting i don't know i'm just doing this just  for the sake of doing something and i can say say   file created right and i'm just gonna say touch  greeting and touch is just a command in bash   which is just gonna create a simple new file  and it's not gonna add anything to that file   it's just like creating an empty file so we can  go ahead and save this and i can take a look here   but in order to call it what we're gonna do is  we're gonna use this as create user and create   a file that's it we're not gonna call it like this  now if you're coming from a different programming   language this might seem a little bit weird  but in bash think of functions like a command   right in bash functions are not behaving to be  honest like a regular function you're going to see   in a different language it is more like a command  so this is actually a command and now you can pass   certain arguments to this we're going to come to  arguments later on but this is what it is right   so let's just go ahead and run this command first  of all and you can see we get a greeting user now   then we get hello mayhew for after two seconds  and then we get creating file and file created   and once you do that you can see we got a greeting  file and it is empty just like i said because it   would not contain anything because it has been  created by the touch command now let's just go   ahead and remove this or maybe not really  remove this but actually create a different   instance or not really a different instance but  let's just talk about arguments of a particular   function so how do you accept arguments in a bash  function well you might be thinking something like   argument r2 which is something which i thought  when i was first learning bash but this is not   how you do in bash at all in as a matter of fact  you do not write anything in these curly braces   at all so how do you get arguments well we have  talked about how we get arguments in a script   right we use dollar one dollar too right you  use the similar thing with functions so what i'm   going to do here is i'm going to say i'm going to  replace this hello from mehul to 1 and just like i   said function is sort of a command in bash so now  if you pass mehul right here you're gonna see that   this mayhew value right here this value actually  gets passed on as a particular argument to that   particular function which is present inside  that dollar one sign right so oops uh there we   go so let's just go ahead and run this bash script  again and you can see that i still get hello mehul   because that was passed as an argument i could  probably just go ahead and change this to mehul 2   and you're going to see the same output again but  this time we have not touched the main function   body just the argument being passed so yeah that's  pretty much how the functions are going to work   and one thing you might have seen is that there  is no return value why because the return which   you write here is going to be the exit code  of that particular function again acting as a   command how do i know that let's see so if i say  something like 32 and just go ahead and do this right let's just execute this now you're not going  to see 32 anywhere on the std out nothing is going   to happen but what is really going to happen is  the exit code of this command has been set to 32   and we know we have talked about exit  codes what they are so you should be   familiar with that let's probably let's just  go ahead and change this to um i don't know let's say 20 000 and it is not gonna work now  the reason it is not gonna work is because   exit codes are not okay let's see so this might be  a happy accident but i don't really think so oops   let's run the bash script again because exit codes  have a certain finite range a certain small range   right so if i go ahead and do echo this you can  see we get a 64 now which is basically um a value   which might have been rounded off to 64. right so  we did not get um this 20 000 or whatever we wrote   so this is this is the deal right  the exit codes in bash are basically   between 0 and 255 both included so if you try to  return a negative one it's just not going to work   because negative exit codes negative status do not  exist right these numbers exist and they would be   tried to map into the memory but they would  be interpreted in a different way so it's sort   of really useless to return anything from bash  scripts because you can just return a number from   0 to 255 and that is also the exit code which  is not the intended behavior of a return call   so yeah that's pretty much it for this video  i'm going to see you in the next one really soon   hey everyone welcome back and in this video let's  just go ahead and talk a little bit about package   managers in a linux distribution so package  managers is just a small software which allows you   to install manage remove all these external  softwares which you install from internet right   so first things first let me just go ahead and  exit this container and you can see i'm back into   my mac os so i'm gonna run this container again  and you can see inside this i see that nano is   not installed by default which we have been using  so far as our editor so how do we install nano   first of all what i'm going to do is i'm going  to say app get update right or simply apt update   apt update is a new version of apt-get it's not  really version but it's just a new way of updating   packages this command basically tells ubuntu in  our case it is ubuntu it tells ubuntu to hey go   ahead and update your sources for getting all the  new packages right so there are certain sources   which are going to look at when it's trying to  install a package from command line and if those   sources are outdated you're going to not get  packages or you're going to get old versions   now once you do app update inside your terminal  you might need sudo in front of it if you are not   already root right so you might need a command  like sudo apt update and sudo basically means   run whatever command i'm running in front  of as root user right because we are already   root we do not need sudo so once you're done with  app update what we need to do is say at install   nano and hit enter so that's that's basically  it it's just gonna take care of where nano is   what are the other dependencies which nano  requires if any and it's just gonna install   the editor inside your bin directory which is  already inside your path of the environment   and it's just gonna work right away right  just like this that's how it's going to work   so package managers in linux allow you to install  manage remove packages from internet and not have   any hassle of working with those dependencies and  compiling and building stuff you can also remove   a package by saying apt remove nano for example  and once you do that it's just gonna be removed   it's just gonna ask you for a confirmation and  that's it now you cannot use nano anymore right   so yeah that's that's pretty much it  for the package manager thing that's how   it works if you are using centos you have yum as  the package manager if you are using ubuntu or   any debian based installation you have apt as the  package manager right so these just these are just   simple handy tools which ease your job which is  your life a lot so yeah that's that's it for this   video i'm gonna see you in the next one really  soon hey everyone welcome back and in this video   let's just take a look at bash rc so bash rc is  a file in your shell which is the file which runs   when you start your shell now what do i mean by  that i mean if i go ahead and take a look at lsl   a which a this a right here denotes that you  should show hidden files as well right so   hidden files in bash are basically the files  which start with a dot and these files which   start with the dot would not show when you do ls  or lsl you have to do lsl a in order to show them   so once you do that what's gonna happen is you  can see that we have got this bash rc file so let   me just go ahead and open this right here and  see what's going on or i think we do not have   installed nano so let's just go ahead and  do that first of all and then i'm gonna   open bash rc so it looks like a lot of code but  in a nutshell it's just initializing your shell   with a bunch of options so what do i mean by  that if i go ahead and write echo say starting shell and save this what's going to happen  if i run bash again i get the starting shell   message right because we are starting  a new bash process my writing bash so   whenever you log in into your shell bash would  automatically run this file called as bash rc   and it's gonna be um you know it's just gonna run  directly all the commands inside your particular   uh file so let's just go ahead and edit this and  i'm gonna say this has set a variable called my   custom variable is equal to some number and now if  i run bash you're gonna see it saves me starting   shell but now i can use this my custom variable  right so you see that it's variable value would   already be set automatically now instead of like  just writing bash every time to get this there's   a much better way to do refresh these changes and  i'm just going to show you that so let's say if   i change this to 99999 you're going to see that  now if i do this it's not going to work right it   still shows me the old value why is that because  the bash rc for this shell has already ran so   whenever you make a change in the bash rc command  rc file either you can just log out or log in into   your shell again that is just closing the window  and opening it again or what you can do is just   go ahead and say source then the path of the bash  rc that is this right so you can see once i source   this file i still get the starting shell again but  we are not we have not created a new shell right   i can now go ahead and say my custom variable  and you can see we get the new updated value   so yeah that's that's how you're gonna work  with bash rc file for the most part you can   go ahead and write your initializing scripts  and everything into the bashrc file directly   and that's all for this video i'm gonna see you  in the next one really soon everyone welcome   back and in this video let me just go ahead and  talk about top command which is sort of useful   to you if you are somebody who wants to see  all the processes which are running right now   on your system so you just write top and hit  enter and you see all the processes in this case   only two the first one is bash which was the shell  and the second one is the top command itself right   so let's just go ahead and start some  processes let's say i have a script   oops let's just add update and app install nano  let's just add nano real quick i'm going to create   a script which just sleeps for a long time so  that it shows us in the running processes right   and i'm gonna send it to background as well  so let's just go ahead and create a script let   me just go back into my home directory  i'm gonna say script and i'm gonna say   sleep for a long time right and i'm going  to start this bash script but i'm going to   put an ampersand sign right here in  order to run this inside background   so you see once i run this inside background it  is still running but i cannot can no longer see it   so how do i see it is by saying top and you  can see this sleep right here which is running   right and we also see another bash shell which is  running because we executed the command using that   so this is how this sleep command is running right  now you can see there's a bunch of information   about this command and the most useful one is  the process id and the user basically which is   running it we also have cpu and memory usage and  it does not use a lot of memory so that's fine   but you get the idea how top works now to exit  the top you just press the q key but a really cool   sort of addition to top is the etch top it's  top command right and it's stopped by default   is not installed so what you have to do is just  say apt install h-top on a debian distribution   and it's a lightweight program but it's much more  beautiful and gives you much more insight into the   actual thing what is happening so you see that  we actually get the amount of memory which is   used as well at the moment we get the cpus which  are being used we get the swap space and we get   all the things we already got in top right so we  get what things are actually executing right now   so this is this is basically what's happening  right now and it is basically a fairly advanced   tool to be honest you can set the nice  values of processes and everything   and to actually understand what nice values are  you actually have to understand what processes are   in linux but we are not going to go into that  rabbit hole just yet because we want to just   focus on basics of cli so edge top is a good tool  you can edit exit edge top again using the q key   and top is basically a very slim trimmed down  version of edge top right so yeah this is a pretty   cool command that's all for this video i'm gonna  see you in the next one with an even cool command   hey everyone welcome back and in this video  let's just quickly talk about the kill command   which you're gonna be using a lot of times if  you have a shell which is stuck or a process   which is stuck and you want to just remove that  instead of just restarting your whole machine   so kill command allows you to kill a process  obviously but it also has a lot of other use   cases as well in sending signals to a process but  one such signal is actually killing the process   and there are multiple other signals like resuming  a process pausing a process you basically have to   understand the whole process linux uh cycle in  order to truly appreciate what what kill can do   but yeah for the most part we're just going  to be focusing on killing the process using   sick kill now sick kill is just a signal  right similarly control c is also a signal   right so let's just go ahead and do that first  of all let me just go ahead and open this script   you can see this is a long running script  so let's just run this inside background   with a command like this bash script and then  an ampersand sign so if i go ahead and do h   top now you can see we have been running bash  script and which is in further running sleep 100   3000 right so this is what is happening now let's  just go ahead and kill this pid 297 which is   oops 297 which is this sleep 100 so i'm gonna say  kill dash nine this dash nine basically means that   send a sig kill which is an immediate kill signal  to this process and that was 296 right and hit   enter and you can see we get killed this as the  message now if i go ahead and write edge top   you can see that we have killed the bash script  but this command is still running so let's just   go ahead and kill this as well so i'm going  to say kill 9 uh 297 hit enter and that there   we go now both of the commands are killed  and we have a nice little uh two commands   left with us right and you can obviously not go  ahead and kill any other command any other pid   that process id has to actually exist as well  so what you have to do is just follow along   and find the process id of the process which is  bothering you and write kill nine in front of the   pid right and kill it using that so it's gonna  save you a bunch of time when you're working with   stuck processors just like i said so that's why i  thought you should know about this so yeah that's   pretty much it for this video i'm gonna see you in  the next one really soon hey everyone welcome back   and in this final video we're going to be talking  about what should be your next step now once you   have done with the linux cli fundamentals you  should move on to the next technology which you're   learning whatever you are learning that is and  start with that so in case of for example if you   are going through the node.js back in developer  learning path the next technology will obviously   be nodejs basics if you're learning python then  choose that but yeah follow your learning path and   move on to the next technology you are well enough  well equipped with the linux fundamental basics   everything else which has been missed  out or you think has not been covered yet   would be covered in the whole learning paths  later on learning path modules learning path   nodes later on so do not worry just keep  on moving and all the best for your future   courses for your future videos on code dam i'm  gonna see you in some other course really soon   hey everyone my name is mahul and welcome to a  brand new course on node.js fundamentals this is a   course of the back-end development learning path  for nodejs and i hope you have been following   along from the starting if you want to become a  back-end developer we discuss a little bit about   how internet works then we get to know the  basics of front-end where javascript is very   important because of node.js because node.js is  literally just javascript running on the server   then we move on to the linux basics where i  teach you how you can work with terminals and   simple commands and basically to get  you familiar with linux in general   now we are on the node.js basics so let's start  with this this is going to be a fun course where   you will be actually learning practical hands-on  nodejs we'll be creating all sorts of applications   deploying servers we'll be learning about things  and once we are done we'll be moving along our   way on our no chairs back in learning path  so yeah pretty excited to start this course   with you guys that is all for the intro video  i'm gonna see you in the next one really soon   all right guys welcome back and in this video  let's just go ahead and start with the basics   of nodejs now i'm gonna be in this whole course  i'm gonna be using the node playground from code   dam if you're watching this on code dam itself  go to the code down playground section from your   dashboard and you should see this node playground  if you're watching this from somewhere else you   should find the link in a relevant place which is  basically codedum.com slash playground slash node   once you do that you're going to be presented with  a screen like this where you might also have a   browser window waiting for you so for  the purposes of learning right now i'm   just going to make terminal as full screen  because we'll be working with terminal for   the most part in our initial course and you're  also going to see a file named index.js right   now this file contains a lot of stuff so first of  all let's just get rid of this so what is node.js   first of all let me just clear that so what  is nodejs nodejs is basically the javascript   which you have learnt in the front-end courses in  the front-end learning path or whatever you took   and we took that javascript from the browser that  is which runs in the browser and took it to an   actual environment an actual computer environment  you see in browser your javascript is actually   running in a sandboxed mode under the browser  process that is the javascript engine which is   v8 in chrome but what happens on server on a real  computer is that your javascript still runs in v8   but it has a lot more permissions it has a lot  more flexibility it has got a lot more power   to work with for example your websites whenever  you visit a website you can see that a website   cannot really just upload a file on from your  system to their websites you know because just   they wanted they have to ask you first then you  select the file yourself and then you upload it   right similarly they cannot really download  anything anywhere on your file system you have to   explicitly tell them where you want the file to be  downloaded with the save as dialog box similarly   node.js allows you to do all the good things  in javascript but it also gives you more   power and more functionality because now you are  running it as a scripting language on the server   what does that mean that means that node.js can  now interact with your file system node.js can now   interact with your networks that is it can see it  can listen to the ports it can probably see other   applications running on your computer it basically  got all that power which uh javascript got all   that power which other languages had so node.js is  that and we're gonna be learning about node.js for   the most part how it differs from javascript  that would be the case so if you're somebody   who's new to javascript in general this course is  probably not for you you are way too soon in the   back end development learning path on code damn  i would say go ahead and finish the javascript   section of the backend development learning  path if you are new to javascript otherwise   let's start with this course so i'm going to  just start with a typical hello world here   which is you know a tradition so if i click on  run code you can see what's happening in terminal   is when i click on run code nothing is happening  except we are executing node space index.js so   node is a program which runs this particular  file which takes in this particular file   just like we know from our bash tutorials that cat  takes a file like this and echoes out the content   node is a binary again which needs to be installed  we'll see how to install node later on but in this   environment you'll automatically get that and it  takes in a javascript file and processes it just   to see what has to be done and then it goes out  the output so as cool as that right so yeah this   was a hello world program in node.js hopefully  you understood this video if yes let's move on to   the next one and we'll be diving into deep of uh  node.js basics and uh getting familiar with most   of them so that is all for this video i'm gonna  see you in the next video really soon hey everyone   welcome back and in this video let's just quickly  talk about dino which is a very common alternative   which has been popping up these days compared  to node so dino just like node is a run time for   javascript and by runtime i just mean that it is a  sort of software which took up javascript from the   browser and placed it on a server on a computer  just like whatnot did but with a couple of things   first of all dino supports typescript out of the  box that is number one thing then it also gets   security inbuilt with some sort of network file  environment restrictions and access depending on   how you configure it and it has got a bunch  of more features like it can ship a single   executable binary it has got a bunch of built-in  tools and so on so as a beginner what should you   learn should you learn dino or should you learn  node well you see that on a fundamental level   what dino does node can do that too right so dino  is not superior in terms of functionality which   a javascript runtime can provide you it  might be superior in terms of features   but node has been around for about 10 years and it  is still very well maintained and it's it is still   growing dino is a new competitor it has um you  know a long way to go for the most part right now   and no major company as far as i know right now  is using dino in production so if you are somebody   who's trying to learn node and if you're confused  of tino would be better choice compared to node   the first thing is that most of the knowledge  which you're gonna get from the node.js course   will be transferable directly into the dino world  as well why because at the end of the day both are   executing javascript and you will be learning the  syntax of the javascript which node.js supports   which is pretty much what dino does as well for  the most part and secondly node.js is more popular   right now compared to dino both in  terms of usability and in terms of   i would say general awareness as well so a lot  of people would know about node compared to dino   so if you are starting to learn node.js trust me  it's absolutely fine you can go ahead and start   with that node is not going anywhere anytime  soon so yeah that was a quick video just to   clear off um if you are stuck in that particular  dilemma that should you opt in for node or dino   and hopefully this has been useful let's start  with the node.js development from the next   video hey everyone welcome back and in this  video this is just a quick reminder that you   need a bunch of javascript knowledge so you can  see that on our front-end developer learning path   we already have javascript as one of the nodes  that is one of the nodes in this graph and if you   click on this you're going to have a bunch  of courses to learn about javascript right   my favorite approach is to start with javascript  basics like this and this course is going to take   you through all the basics which are needed  in order to learn javascript on the browser   the browser-based javascript then i would say  just go ahead and move on to do a particular   project maybe you want to do a tetris game or if  you want to build 10 plus projects in javascript   to solidify your learning go ahead and learn  about them once you are comfortable with syntax   then i would say you can come back to the backend  developer learning path which is the node shares   and we can start right here right so the reason  i'm doing this is because it becomes very very   easy for you to work with full stack once you  are done with the front-end javascript as well   and when you're starting off with node.js with  a little bit of knowledge about html css as well   so yeah just a quick reminder if you have  absolutely no prior background with javascript   this back-end development node.js course should  be the number two course the number one course for   you right now should be javascript basics which  you get from the front-end developer learning path   as well as from uh in the backend itself so if  you are skipping sections just don't because   sort of javascript sort of would be required  what with what content we are working on   in this whole course so yeah just a quick video  that's all for this one i'm gonna see you in the   next one really quick hey everyone welcome back  and in this video let's just go ahead and start   with module system in nodejs so what i'm gonna  do is tell you quickly about what are the common   way to create modules in nodejs so i'm gonna  start off by creating a simple index.js file   now in node.js there are basically two ways  to create modules the first one is common js   and the second one is es6 import syntax right  in both system or whatever you want to write   so common js is basically the most used module  import system in nodejs because it comes   in baked into nodejs itself and es6 import  syntax is something which has recently been   uh promoted a lot because of you know browser  support and a better specification and a better   nice looking nice looking um syntax as well plus  it supports a bunch of new features like tree   shaking becomes easier and so on so we're  going to be taking a look at es6 later on   let's start with the common js syntax so the  common js imports and dax basically means that   you have to make use of this word called require  now require basically allows you to require any   other file inside your file system now this can be  used to require known modules as well as this can   be used to require local files so let's start with  the local file let's say i have this util.js or in   common js we can just drop the dot js i want to  get this util and i'm going to store this result   in util analysis console.log what we get back from  util right i'm going to go ahead and create a new   file let's say util.js and what we're going to do  is inside of this file we're going to be creating   let's say a simple function add  numbers a b and i just return a plus b   right and finally i want to make this function  available to this particular file because right   now if i go ahead and run this you're going to see  nodeindex.js gives me an empty object that means   nothing is being exported from this particular  file how do we export something well in common js   if you are using common js what you can do is  directly go ahead and make use of something known   as module dot exports now this module dot exports  is a special this exports is a special property   is a special object on which you can attach  pretty much anything and it will be available   as an exported value so now if i go ahead  and probably run index.js again you can see   i see a 100 as the value and this value could be  pretty much anything right it could be numbers   it could be strings it could be my function  as well so you can also have sort of functions   attached here so if i go ahead and pretty much  just try to run this what you're going to see   is that we get all the relevant output just  like that so you see that you have basically   an object on which you can attach any sort of  property and it will just work out of the box   now what we can do if you can think about it is  i'm just gonna go ahead and attach add numbers   and say add numbers like that so what this  means is that add numbers is going to be a   property on this object which i can then go ahead  and make use of in files like index.js so if i do   util.add numbers you can clearly see that we have  a particular property which is available to us   for that particular thing so let's just go ahead  and try to run this and you can see that we   in fact have this as a function and if i try  to call this with let's say 5 2 and try to   run it right here you can see we get the sum  of these numbers as 7. so require is a very   simple syntax a very you know nothing fancy is  going on here whatever you write to module.export   is going to be available as a particular value  from that function and you can get the whole   thing out of it the whole module.exports object  from this required call and store it in any other   variable which you want and you can access it  just like you want now a couple of things here   is that a lot of times what you're going  to see is a lot of people drop this module   so what you're going to see is that if i go ahead  and remove this module and just to exports.abb   you know stuff like this this is also fine because  if i go ahead and show you if i run nodeindex.js   we still get seven right and just to verify that  we are on the same page you can see on the server   we also have export study same file now this is  completely fine and you know it just works as well   so why did i just tell you to use module.exports  well this is because when your module when your   single module like util is called you can imagine  something like this is happening so somewhere   somewhere unaccessible by you right so this  is a section which is not accessible by the   regular code you can think about node calling  your code something like this so it has a   bunch of parameters i don't really remember the  exact syntax this is an actual thing actually   so you have a bunch of parameters and then  you have module and exports available to you   and yeah around this your code resides so you  see that we were adding module dot exports   not property and this was available to  other guys right similarly exports is   also available right here for you to attach  properties but this would fail if you try to   do something like this if you try to just let  me just go ahead and remove this first of all so if you try to go ahead and do something  like this where you say a hundred bb   something else right and let's just remove  everything else so if we have something like   this we see cat utils.ts and if i try to run  probably just this thing right so if we try to   run this particular code what's going to happen  is we get an empty object even though we have   some exports specified why is that because  now you are overwriting the actual exports   object which was available as something where  you can attach the property so this is a new   completely new object however this thing would  work absolutely fine if you use module.exports   so if i run this now you're gonna see oops not  the util the index file so if i run this you're   gonna see that we get the correct output again  just to reiterate why is that think of module   as an object which has got an exposed property  right and think of uh think of exports   as a variable which is something like this now  if you try to do exports is equal to a10 what you   are really doing is that you are overwriting  this exports variable right so it no longer   no longer points to this particular object but  it is a completely new object but if you do   module dot exports then you're still pointing  to this particular object and that is fine   so this works this fails and you know what else  would work is if you just go ahead and directly   do exports dot a is equal to 100 why because you  can see it still points to module.exports you're   not changing the reference of the exports  object so this is fine that is why it works   right so hopefully this gave you a little bit  of more insight into how common js module system   works in nodejs and this is like really all about  it right unless you are trying to get into the   resolution system this is all you need to know for  the most part when you're working with common js   that you require the module like this you get  a full object if you want you can destructure   the particular property that's just fine but this  is just an es6 syntax it's not a common js syntax   you can destructure stuff and from the module if  you want to export something you just go ahead and   use module.exports so that is all for this video  i'm gonna see you in the next one really soon hey   everyone welcome back and in this video let's just  go ahead and take a look at the file system module   in nodejs now fs module is super interesting  because it allows you to work with the file system   in general so you can create remove add edit files  append to files with the help of this particular   module so you require it with the required  syntax which we discussed in the common js video   but you can see it clearly that i'm not really  specifying any dot slash or dot here because   you can see that node would otherwise recognize  this as something which you want to import from   your local file system right but we know that fs  is installed by default it comes bundled with node   so you can just go ahead and use it as it is  so the first thing is let's just go ahead and   create a function called create file fs has  got a bunch of utilities and functions inbuilt   so i'm going to say create file name and i'm just  going to say fs dot you can see that we have a   bunch of functions we can access so what i want  to do is create or not really create i want to   write file so let's just get let's just make  this as contents and i want to write file and   what i want to do is i want to say that hey the  name of the file the name of the file should be   this particular name which i am passing and the  contents would be basically the contents which   i'm passing right so you can see the arguments  basically mean that the first argument is the path   which is the name of the file or basically  the path of the whole file but in our case   we just want it to be a local file so we just  give it a name and the second one is contents   now with fs what you're gonna realize is that  there are basically two types of functions the   first one is the uh you know asynchronous versions  and the second one is the synchronous version what   is the difference well the asynchronous version  for example if you use this particular thing   and if you try to say file written and if you try  to read read it oops read it right here you might   fail that means it might happen that this file has  not been written to the file system yet so this   is asynchronous that means node.js will do it  later on it schedules it in a queue but the   write file sync guarantees you that if you are  here and if no error is thrown that the file is   written that means your this file written code  will only work um when this is complete now you   might be thinking that hey then why do we you know  anyway prefer right file what is the advantage   well the advantage is that when you are  working with asynchronous operations   a lot of times what happens is that a lot of  stuff like you know checking for the hard disk   space or maybe allocating a new buffer for  writing this file a lot a lot of this thing   can be offloaded to the operating system itself  which is not exactly what node.js would work on   so what happens for example is let's let's  compare this right file with the http request   because that might be easier to explain so let's  say if you're trying to make an http request   right and you have two ways the first one is async  way just like we have right fill with write file   and then we have a sync way which is  you know http sync async is just http   so if you do an async method what's going to  happen is that node can work on other things   while os waits for the network request right makes  sense i guess whereas if you are using a sync way   node and os both are waiting for the request the  so what happens is that you basically waste the   computation time which node can use to do maybe  some other tasks like maybe serving another user   because it's a single threaded thing and if you  are blocking the event loop like this with the   right file sync um you're basically blocking  the whole program so this was a quick little um   i hope the knowledge and analogy you were able  to grasp but anyway we're going to be using right   file sync here because it makes things a little  bit easier and predictable if you do not want   to have callback functions or promises so let's  just say i want exports export start uh create   or maybe let's just do module dot xpose anyway and  just expose the create file thing right now let's   just go ahead and say i am just getting create  file and i just go ahead and say create file   test.txt and i say hello world right now  we have this code if i try to run this code   we can see we get the file written and you can  see that we also get test.txt here which just says   hello world as simple as that right so yeah this  is how you're going to make a very simple function   fs has got a bunch of more functions i  would say read more about the documentations   you can also list the directories so i  can say for example let me just go ahead   and import the fs directly  here because why we should go and make use of all those utility functions  again and again so let me just go ahead and say   fs dot read directory you can again see we have  two possible functions that read directory and   read directory sync i'm going to go with the sync  one because it immediately gives us the output but   probably if you are you know going on production  or want to have a better performance you want the   asynchronous versions so if you do something like  this and run the code again you can see that right   here in the output we have the files of this  particular directory which is the dot which is   the current directory so we have three files we  got three results now i think fs also supports   promises so if you do a required fs and if you say  fs promises or maybe we should do something like   this fs and then fs is fs dot not really fs dot  promises what this is is that it is basically all   these things which are you know the asynchronous  versions of fs but instead of having callbacks   they are not promises so if i try to do fs dot dot  well we do not have an auto complete on that but   what i mean by that is if i do fs dot read  directory what you're gonna see now is that   it is an async function but let's let's do a two  string it is an async function but you can see   you can see first of all it says me that is an  async function so we can use our weight on that   and there is no callback option right so we have  to really await for this particular operation so   let's see if i do an async function like  this we're going to be covering async   functions as well i think we covered it in  the javascript part also but nonetheless   so if i do something like await fs.redirectory  and if i call it like this what you're going to   see is that now although this function is going  to be asynchronous it would be just working just   like uh you know a previous one where we had  read directory sync so yeah i mean just i just   wanted to put out the word that promises also  exist as a set of functions on the fs system   and you can use them but for the most part fs  is going to be good for us right so yeah that's   pretty much it for working with file system just  like i said there are a bunch of methods if you   just go ahead and console.log fs here you're  going to be listing a bunch of them actually   and yeah you can see we have a pen file we have  exist which checks if the file exists and for   the most of the methods we also have a synchronous  version then we have some file modifiers if stats   f-stat gives us the information about a file  when it was created when it was modified stuff   like that we have uh let's see we have read file  obviously so if for example if you want to read   the own source code of a file what you're going  to do is just say fs.read file sync and i'm just   going to say this is going to be indexed.js  so this is a program which can read itself   so you can see that we get a buffer and what you  want to do to convert this buffer into a string   is specify an encoding as the second option so  we want a utf-8 encoding and if i go ahead and   run this you can see we are actually reading our  own source code right so the most sophisticated i   think i'm not really i have not really tried it  but the most sophisticated infinite loop would   be to eval this thing now because you are reading  you're executing you're reading you're executing   again and again because i don't want to crash the  container i'm not going to do it but just an idea   so yeah that's pretty much it for this  video in the next one we're going to be   covering more about file systems not  really file system the module system   and how you can work with them so that is  all i'm going to see you in the next one   hey everyone welcome back and in this video we're  going to be taking a look at the import export   syntax in node.js which is basically the esm that  is the ecmascript modules now this is going to be   the future of the module system in node.js so this  is a must you should know about how this all works   so first things first the import syntax  is not gonna work if you try to work with   dot js extension so let's just go ahead  and create two files common.js and es6.js   so in ecommon.js let's just go ahead and write  a quick program just like we wrote the last time   and i'm going to say fs.readfilesync command.js  right every file would read um themselves so   let's just console.log this thing and there  we go nothing fancy nothing happening here   now if i go ahead and run this common.js you're  going to see oops we need an utf 8 encoding here   so if i go ahead and run this file you're  gonna see that we get the text just like we   did but if i try to copy this program and paste  it inside es6.js but let's just go ahead and do   one small change let's just change this from  required base syntax to the new syntax right   and let's just try to run this same program  but with es6 now you're going to see that   we get an error which says cannot use import  statement outside of a module now what does that   mean this basically means that import is something  which is used as a es6 module resolution system   we're going to learn about this but this keyword  this format is not possible to use right now   inside.js files so how you can use them you can  use them inside dot mjs files right so you have   to rename from es6.js to es6.mjs you see this m  this just tells note that hey this is going to be   a module file so you can use this is going to be  a es6 module file so you can go ahead and use the   common uh syntax here so once we have renamed it  and now if i open this and if i ls this here you   can see we have a es6.mjs file and now let's just  go ahead and run this es6.mjs and there we go one   super important thing here is make sure that your  version for node is above 14. if it is like 12 or   13 you need an experimental flag in order to run  this so you have to do something like experimental   uh i don't really remember the flag completely  but experimental mode or something like this   but if you're running node 14 and above you can  safely just go ahead and use es6.mj statically   and uh i think we did not change  this so let's change this to es6.mjs   and once we do that once you run this you're  going to realize that now we are talking so we   are echoing out the same file but we are using  the es6 module system do not worry if you do not   understand this yet we are going to be learning  about this whole thing how this works very soon   so let's start with the es6 module system from the  next video and we're going to be taking a look at   common ways you can import export from files like  these hey everyone welcome back and in this video   let's just discuss about es6 module syntax now  this is super important so make sure you pay   very close attention to this video and subsequent  videos which follow because this is gonna be a   game changer for you if you can really understand  how import export syntax and things work with es6   because to be honest you're going to be using es6  module system all the time when you're working on   front end or back end because even though they  are still experimental this is basically just   used with all the tools with back babel so  all these tools take care of that so let's   start i'm going to create another file called  module.mjs which is going to hold our utilities   inside obviously inside the es6 version so let's  just go ahead and create a function called add   which is or maybe not really add just square  which accepts a number and returns us the square   of the number right and now i want to export this  function with common js what we're going to do is   we're going to just say export module dot exports  and i'm just going to save for example square   right but this is not how es6 works with es6 what  you have to do is say export which is a keyword   and then you want to specify how this object how  this function should be exported the first way   to export is to have a default export right so  i can say export default square and stick with   me here i'm just going to tell you what this  means so what does export default square mean   this thing right here means that this  particular module will be available   directly from you know if i do something  like import if i do something like import   square from module so what's going to happen  is that if this is a default export i can use   something like this directly now why i'm saying  directly i'm going to show you in a minute what   i can do now is just say console log square of 5.  so if i just go ahead and run this code right here   we get an error that we cannot find in this  module let's see if everything's fine module   yeah so we need a module.mjs here because we need  to specify the full path inside the es6 syntax   esx module syntax why is that  i'll just tell you that in a bit   the reason uh javascript people who are  developing javascript chose to have a full syntax   is because traditionally when you're working with  html what we do is we specify script src file.js   completely right whenever you're loading a script  on the front end you never do something like   script src file or script src file.js and it's not  like both of them are equivalent so we are trying   to bridge that gap between browser and servers  or running node traditionally so in this case   if you are importing it from a module based thing  you have to use the full name this is number one   number two this is not the only way to  export things right this is the first way   another way is to export multiple things now how  do you want to export multiple things because   you can only have one default export per module  and if you think about it it makes sense as   well right because if you could have multiple  default exports then how you're going to expo   import those particular things because just like  i told you this is the only syntax you get for a   default export so if you want to export multiple  things for example let's say if i have a function   called cube with a num and i return num  times 3 that is not really times but yeah   so let's just go ahead and take a look at a  different export syntax this is going to be   not a default export now this is gonna  be something like this export square   and cube now what is happening here well obviously  if you know javascript you understand that this   looks sort of like an object syntax but trust  me do not think that this is a regular object   this might behave like a regular object you might  think but this is something completely different   what do i mean by that let's first of all take  a look at this so you export a sort of like   object looking i'm gonna say this is object  looking right but this is not an object   but you export it like this and inside your  for example inside your es6 file instead of   importing it like this now what you have to do  is you have to use the similar syntax to get   only the things which you want for example if  i just want to get cube out of this what i'm   going to say is i'm going to say import cube  like this you see i'm using these parentheses   this means that i'm trying to get an object which  is i'm trying to get a function which is not a   default export this is very important the moment  you write these curly braces this means that   you are never going to import the default object  number two is that the name of that object which   was exported was cube right and this is important  because this cube right here should match this   cube right here so if i change this from square  to cube and if i try to run this now what we   are what we are going to see is that instead  of 25 we now get 125 which is perfectly fine   but you understand that now i'm just getting cube  now what if i want to change the name of this   particular export right here for example this is  for example this is something like internal cube   and now i want to export this as the name  cube now if you think this is sort of an   object what you might think is we can  just go ahead and do something like this   right but straightforward you can see that it  tells us that this is an error with export and   yeah things would go wrong so what you really  want to do if you want to change the name of   the exports is you want this thing to be first and  then you have to say export this particular thing   as cube now this might be the moment when you  realize that hey this is not a javascript object   this is something else right because we do  not have an as keyword inside a javascript   object so this as just means that you want  to change the name of the exported thing   so if i do this and if i try to pretty much run  this again you can see nothing really changes   because well we had this internal cube named as  this but it is at the end of the day exported as q   if i change this to cube 6 for example then things  are gonna take a turn why because now i actually   have to rename this from q to cube six and if i go  ahead and run this now then you can see it still   works but if i just keep it at a cube we're going  to get a nasty error that there is no um export   named cube right so this is how things are  working this is how the export side of the   things work this is all for this video in the next  one let's just discuss about the import side of   things as well and then let's just take out some  time to discuss about the default exports thing   as well so that's all for this video i'm gonna  see you in the next one really soon hey everyone   welcome back and in this video let's just go ahead  and take a look at the import side of things right   so what you're gonna realize very soon is that  export and import are very very similar just like   you can rename and export like this you can also  rename an import so for example you can see right   here we have this let's say this is cube only for  example we have something like this and right here   if i try to rename this to something else so for  example i just want to say this cube this number   then what i can do is just go ahead and use this  like cube this number and i would not have access   to cube right here now this is not destructuring  i'm telling you again and again this is not a   regular object because in a regular object you  might do something like this this is something   else this is es6 import syntax that works in a  special way so once you do run it you're gonna   see you get still the correct output because this  right here is a different syntax altogether right   so once you have this particular thing done what  we want to do next is learn a little bit about all   these expo things right so there are a bunch of  ways to there are a bunch of more ways to export   things so the first one we discussed the export  default we're gonna get more into that later on   the second one is this object looking syntax  right which is again pretty cool the third one   is just exporting things as you define them so  for example if you have this function you want   to export it so you just say export function this  particular thing right anything you do not export   would not be available outside this module so i  cannot just go ahead and make use of square right   here but i can go ahead and make use of cube so if  i do cube here i'm going to get an error because   i do not have square with me so you can see we  get an error that square is uh you know it's not   something which is available in that particular  module because it has not been exported the   moment i export this and then if i run this  program you're going to see that it works   just fine because now this was exported as  well so this is another way to export things   now if you want to get all these exports  for example let's say if i have a   50 exports right here and if i want to get all  of them well this is a cumbersome way to you   know just go ahead and list all the exports right  here right so what you can do if you want all the   exports inside your program is you can say import  star as util or maybe anything which you want   any name would be fine here any name which is a  valid variable name so let's name this as util   from module.mjs now what has happened  you see we were importing things like   using the object looking notation but when you  do import star as util what's going to happen   is that it's going to take all these exports  which are individual exports for example if i do x   for example if this is const num is equal to 5  and if i want to export this i export it like   this what we have is in a nutshell we have this  module which when imported sort of looks like this   square is a function you know cube is a function  and num is a function uh num is a number   right now you can either go ahead and individually  import them just like we did in the last uh in the   last demo or you can import them all together like  this so now if i go ahead and console.log the util   object what we're going to see is something like  this you can see we got a cube which is a function   num which is a number and square which is a  function so now you can probably just fall   back to your uh what we did in the common  js thing that util.cube and then hundred   and once you go ahead and run this you  pretty much get what you were expecting for   so yeah i mean this is how the import sort of  thing works there is a similar syntax for export   as well and we're going to be finally taking a  look at default exports as well in the next video   that is all for this one i'm gonna see you in the  next one really soon hey everyone welcome back and   in this video let's just take a look at the syntax  which i was telling you about this import star ass   syntax but on the export side of things so let's  just go ahead and quickly create another module   so i'm going to say this is module 2.mjs and  what's going to happen is in this particular   file let's just go ahead and copy these  things and what i'm gonna do is right here   i'm gonna let's see i'm gonna remove all the  content and let's say this has got export function   um powerful right because i cannot really think of  anything at all so this is num power 4 and we have   got num here now my question to you is how would  you make um you know something like this possible   or can you make something like this possible so  if i want to import square and power 4 from module dot mjs can we make something like this possible  where we are getting square as well as power four   well you see that we are already exporting the  function power 4 from this module.mjs the next   thing we can do is probably you if you think about  this i can say import square from module 2 dot   njs and then i can say export square right  just like we did with the previous functions   well this is one way but this is a  boring way but nonetheless it would   work so let's just try this out let's  just say i have square and power four   just as a console.log statement so let's just  say and say node es6.mjs and we get that power   4 does not exist well that is because we named  it as power 4 not pow4 so once we do that let's   just run this again and you can see that both  of these functions are fine square and power 4.   just like i said it works but it does not cool so  how do we make this cool with export you get that   similar power of exporting something directly from  a file so what i can say square from module2.mjs so what's happening here and this  is basically this should be inside   the uh these curly braces which is again object  life but not object so what's happening here   well you see that instead of like importing  it first and then exporting it like that   i can directly export it from a file as  well and if i try to run my code again   you're gonna see that it does not make  any difference in fact what you can do   is probably go inside this file change the name  this square underscore underscore which means now   this is not a valid uh you know export right here  but i can say export square underscore underscore   as a square export right and this renaming works  directly we do not have to import it first and   then export it like that and it's just gonna work  so far so cool how about import star ass syntax   where we get all the files all the imports first  of all and then export it right and then in use it   you can pretty much do the similar thing  here as well so i can say export star   basically get all the imports from this file  first of all get all the exports from this file   as and then you can name this as a particular  variable which you want so i can say   m2 here and then i'm saying from this module 2.  now what does this mean is that if i go ahead and   log m2 here what's going to happen is we're going  to get an object which is going to contain all the   functions which we have right here and this const  as well so let's just go ahead and run this and we   do not have square now which is strange because i  do not want this anyway so let's just remove this   and let's just try to run this again so you  can see the first one uh this is basically a   module which is which is what appearing which is  what is appearing and the second thing is sort   of again like object like thing not really an  object but with the right properties right so   square underscore underscore is a function q is a  you know it's a function again a num is a number   so this is how you're gonna just make things  right so so yeah this is how you're gonna export   all the things right away right so this is how in  a nutshell the es6 module system works let's just   talk a little bit more about the default exports  because i think we did not give a lot of time on   that so default exports are basically simple right  what you have to do is just export a particular   value so i can say export default my name you see  that i'm not using const or anything right here   you just have to give it a value right no names  no identifiers nothing similarly if you want a   function to be exported you can rename this to  a function if you want a variable to be exported   you can rename this to a variable and it's just  gonna work fine and you are gonna get the default   export directly that means you do not have to  write anything right here what you have to do   is just write my default export or anything which  you want right here and it is gonna work like a   default export for you so if i go ahead and remove  this bad boy right here and by the way this would   work just fine as well so you just just so you  know you can import a default export add a comma   and then add your uh other regular exports as well  so if you do something like this try to run this   you can see we get function power 4 which is you  know i imported this as a default export you can   see that default export does not has any name of  its own it just has the value so i'm not really   doing export default constant x is equal to five  this is wrong i'm just doing export default five   right this would be fine if i do not use the  default keyword then i would be using you know   import x from module.mjs or um you know if  there's any other thing which you want to do   so yeah i mean this was a pretty much uh  sort of a basic burn down of things you will   need from the es6 module system and that is  all basically that i think i have covered   everything which is really really necessary  if there's any edge case or anything like that   that's basically you're not gonna need that  for the most part when you're working with   real projects but yeah that's pretty much it  for this video i'm gonna see you in the next   one really soon hey everyone welcome back and in  this video let's just learn about the http module   how it works and how you can create a server in  nodejs now we have been uh you know just going   ahead and ignoring this thing for a while but  let's just make a use of this now so what i'm   gonna do is let's just remove index.js file right  now and let's just touch a server.js file instead   so let's just open this and what i'm gonna do is  i'm gonna start by importing the http module from   node.js so you know we have talked about that  we have a fs module here we also have a bunch   of other modules which i did not really cover a  lot os fs you know we have i think path module we   have url module so all of these things are there  but the most common one is gonna be fs for you in   a lot of operations you are not going to be using  os modules as far as i can i can tell you unless   you are building uh systems only applications  with node.js and if you are using http server   you might be tempted to use http but we're going  to be learning about express in the next section   so wait for that so anyway let's start with a  simple very simple http server a raw http server   and let's say http.createserver this is basically  uh first thing you can notice is we are again   using the common js syntax just because i prefer  the dot js extension right now you can use the   es6 syntax as well it's not a problem the  http.createserver means that we want to open   a specific port for listening and what we want to  do is we want this particular port to listen to   incoming connections and by incoming connections  what i mean is for example if you visit google.com   that is an incoming connection so once there is a  connection established to a server you can pretty   much do two things with this you can either go  ahead and read what the request was that is what   the client said or you can go ahead and either set  up how the response to the client should look like   right so you have two options and what we're  going to do is say for example we do not want   to worry about what the client said i just want  to say rest.right and i want to say let's say   hello client over there and yeah that's pretty  much it i want to end the response right here   once we have this server with us i'm going to  store this inside our server variable once we   have the server with us what i'm going to say  is say server dot listen and then we're going   to specify a particular port for this thing  by a port i mean we're going to just say   which port you want to listen to now if you are  working on local that is on your local pc that   is inside your file system with vs code and  everything whatever you specify here you can   go in the browser and open this but because this  is a browser environment the code down playground   if you are using this just use the port called  1337 or better just go ahead and use process   dot env dot public underscore port right now  this is three three seven but if you want to   change this later on it would not be a  problem for you so if you just go ahead   and console.log this thing you're gonna see we get  one three three seven so i want to listen on this   port which is defined within this container if  you do echo public port you're going to get 1337   right but once we do that what we want to do  once the server is up and listening i want to say   hey we are ready to take requests right and yeah  that's pretty much it for a very simple server   so let's just go ahead and write node server.js  and you can see we get 1337 from the statement   and we immediately get that hey we are ready  to take some requests so once we do that give   it a couple of seconds and you can see that this  changes to a ngrok url here and you get the hello   client over there you can basically go ahead  and open this in a new tab as well if you want   to have a full screen for yourself and this is  an actual response from a node server right so   let's just go ahead and just modify this with a  bunch of exclamation marks and once we do that   we have to restart the server as well so we're  gonna run this command again and if i go back   refresh this we get our updated response right  here so this is how we're gonna create a pretty   uh small server in node.js and we're not gonna be  using http module for creating servers why because   you're gonna soon realize that if you want to for  example uh just determine that if the user is on   slash admin right so if the user is on slash admin  you want to serve him different content so you   have to do this by request dot path or request or  something else which which is a sort of a property   on the request object and you have to do a lot  of manual work yourself so instead of doing that   what we can do is make use of libraries like  express which simplify all this work for us   and helps us create better and efficient not  really efficient but better and easy to look   servers right away so yeah that's pretty much it  for this video in the next one you're going to   be learning about express servo how we can set up  all that stuff and create a create some websites   with no chairs so that's all for this video  i'm gonna see you in the next one really soon   hey everyone welcome back and in this video let's  just learn about the http module how it works and   how you can create a server in nodejs now we have  been uh you know just going ahead and ignoring   this thing for a while but let's just make a  use of this now so what i'm gonna do is let's   just remove index.js file right now and let's just  touch a server.js file instead so let's just open   this and what i'm going to do is i'm going to  start by importing the http module from node.js   so you know we have talked about that we have a fs  module here we also have a bunch of other modules   which i did not really cover a lot os fs you know  we have i think path module we have url module so   all of these things are there but the most common  one is gonna be fs for you in a lot of operations   you are not going to be using os modules as far  as i can i can tell you unless you are building uh   systems only applications with node.js and if you  are using http server you might be tempted to use   http but we're going to be learning about express  in the next section so wait for that so anyway   let's start with a simple very simple http server  a raw http server and let's say http.createserver   this is basically uh first thing you can notice  is we are again using the common js syntax just   because i prefer the dot js extension right now  you can use the uh es6 syntax as well it's not   a problem the http http.createserver means that  we want to open a specific port for listening and   what we want to do is we want this particular port  to listen to incoming connections and by incoming   connections what i mean is for example if you  visit google.com that is an incoming connection   so once there is a connection established to  a server you can pretty much do two things   with this you can either go ahead and read what  the request was that is what the client said   or you can go ahead and either set up how the  response to the client should look like right   so you have two options and what we're gonna do is  say for example we do not want to worry about what   the client said i just want to say rest.right and  i want to say let's say hello client over there   and yeah that's pretty much it i  want to end the response right here   once we have this server with us i'm going to  store this inside a server variable once we have   the server with us what i'm going to say is say  server dot listen and then we're going to specify   a particular port for this thing by a port i mean  we're gonna just say which port you want to listen   to now if you are working on local that is on  your local pc that is inside your file system   with vs code and everything whatever you specify  here you can go in the browser and open this   but because this is a browser environment the  code down playground if you're using this just   use the port called 1337 or better just go ahead  and use process dot env dot public underscore port   right now this is one three three seven but if  you want to change this later on it would not   be a problem for you so if you just go ahead and  console.log this thing you're gonna see we get one   three three seven so i want to listen on this port  which is defined within this container if you do   echo public port you're gonna get one three three  seven right but once we do that what we want to   do once the server is up and listening i want  to say hey we are ready to take requests right   and yeah that's pretty much it for a very  simple server so let's just go ahead and   write node server.js and you can see we get 1337  from the statement and we immediately get that hey   we are ready to take some requests so once we  do that give it a couple of seconds and you can   see that this changes to a ngrok url here and you  get the hello client over there you can basically   go ahead and open this in a new tab as well if  you want to have a full screen for yourself and   this is an actual response from a node server  right so let's just go ahead and uh modify this   with a bunch of exclamation marks and once we  do that we have to restart the server as well   so we're going to run this command again and if i  go back refresh this we get our updated response   right here so this is how we're going to create a  pretty small server in node.js and we're not going   to be using http module for creating servers why  because you're going to soon realize that if you   want to for example uh just determine that if  the user is on slash admin right so if the user   is on slash admin you want to serve him different  content so you have to do this by request dot path   or request or something else which which is a sort  of a property on the request object and you have   to do a lot of manual work yourself so instead of  doing that what we can do is make use of libraries   like express which simplify all this work for  us and helps us create better and efficient not   really efficient but better and easy to look  servers right away so yeah that's pretty much   it for this video in the next one we're gonna be  learning about express servo how we can set up all   that stuff and create a create some websites with  no chairs so that's all for this video i'm gonna   see you in the next one really soon hey everyone  welcome back and in this video let's just discuss   a little bit about how this get thing works and  what this really means and this path as well   so let's just take a little bit of detour to  the networking part of things and to be honest   if you're following the back and learning path  of code damn this is the very first thing which   we really do right so if you're following this all  the way from internet to node.js basics right here   you should have this understanding but still let's  just go ahead and do it really quick so you can   see that right here our request url is something  like this right which is a just a slash basically   nothing is written in the path you see the request  method is get so our browser when you refresh a   page or when you visit any page what happens is  the request method whenever you write something   like google.com and hit enter is always get by  default there are a bunch of other methods in   http uh standard not really standard in the in the  sort of rest convention which are post there is   also put there is also patch there is also delete  but the most common ones are the get and the post   right so these are the two most common methods  you're gonna see all the time so with express   what you can do is you can define certain behavior  on certain parts depending on what the method is   so you can say that hey i want to have a get  certain behavior on something and probably   let me just go ahead and copy this thing and i  can say hey something's somethings here right   so once we do that let me just go ahead and  actually restart this over here real quick once we   do that and visit slash something now what you're  going to see is that hey something's here is what   we get so this was defined as defaulting for the  get behavior right here right i can do a similar   thing for a post behavior so i can do on a similar  path but this time i want that hey if something is   being sent as a post thing that is this right  here is a post method then this should be this   is usually not visible right and let's just go  ahead and start this over again i might just go   ahead and do a nodemon here instead but anyway so  if i refresh this you can see that hey something   there here is still what we see but we never see  this is usually not visible so how do we make sure   that we see this thing well in order to see this  thing what we have to do is we have to perform   this request with the help of a method of post  right so i'm using fetch api to basically let me   just go ahead and remove this as well so let's say  i want to perform a fetch api request to the sport   uh this post and i want to wait for the response  of this particular thing as well yeah rest.txt   right so this is a little bit of front-end stuff  and you can see that we get this is not usually   this is usually not visible now if i go to the  networks tab you can see we see two requests the   first one is the get which was our initial paid  load uh page reload and the second one had a post   method in the post method the server said this  is usually not visible right why did it say that   because first we had we are using a post request  here and second we are using a post sort of   catch here for the route as well so we know if  the post request is coming we have to handle it   using this function what if you try to send a post  request to home page which does not has any uh   handlers so if i do that you can see we get a 404  which is basically not found right so you can see   express sees us that hey you cannot really post on  this domain because nothing is available similarly   if you try to visit any broken url you can see  you get an error that cannot get this particular   thing because your method was get similarly if you  try to have maybe a put method here you can see   we see an error cannot put which is basically  the method name if you try to do a patch here   you get cannot patch right here right  and all of these which are common http   uh request methods you can define them with  express so you can say instead of get you   want to have this thing on the patch right now if  you go ahead and restart the server what's really   going to happen is now if you go ahead and send  a patch request you see hello world and if you   try to refresh this right here without uh anything  you get cannot get right so that's how things work   in the rest world and in the web world basically  you use this particular identifier to define what   sort of method you want this particular function  to be called on you use this argument to define   what path you want this method to be called on  and you use this rest object right here to send   response right so i hope this gave you a little  bit of understanding of how different methods work   and how you can make use of express to set up all  sorts of things on same paths as well so you can   have a get method a post method a put method a  patch method everything on the same path as well   right so yeah that's pretty much it for this video  i'm gonna see you in the next one really soon hey everyone welcome back and in this video  let's just see how we can send some static data   to the front end basically instead of like  sending this hello world or stuff like this   i really want to send a html file right so what  we are going to do for that is first of all we   are going to import another module called path  so i'm going to save path from required path   oops and this is an internal node module you  do not really have to install it next thing   is instead of patch obviously we want kit and  instead of rest.send i want to say rest.send file   right because this would allow us to send an  actual file to the server and what we can do   is i can just go ahead and say path dot resolve  and right here i'm gonna write dir name and let   me just go ahead and finish this first of all and  then i'm gonna explain you in a much better way   so we have path dot resolve set to public  index.html which basically means what's gonna   do is in the current directory it's gonna look  for a folder with the name public right and it's   going to look for a file named index.html inside  this particular folder right so we have a public   index.html file with us let's just go ahead and  copy paste this uh sort of a template which i   got from the bootstrap docs so here we are inside  this index.html let's paste this right so this is   a not a very fancy template just some uh just some  regular html right here with some bootstrap loaded   so you can see that there are some links which are  going to break once we try to do this like this   pricing is not available with us we even do not  even have the bootstrap all these things available   so we're going to fix them later on but  for now let's just take a look at this   so once we have done that you can see  that if i try to restart the server   and reload this you can see that we get this html  file delivered to us although it is broken at the   moment but you still get the idea right that  it is sort of working so this is how you can   send static files not really static files this is  how you can send any regular file using rest.send   file as a response right you can even send  javascript file or maybe a css file if you want   but we have a better method of serving those we're  going to take a look at that later on but this is   how essentially we're going to start building a  very simple sort of thing which is delivered by   node at the back end so that's all for this video  i'm gonna see you in the next one hey everyone   welcome back and in this video let's just take a  look at how we can send static assets to the front   end as well so what happens that a lot of times  you don't really want to have individual routes   or maybe it's impossible to have individual routes  like right so for example if i want to serve uh   let's see if i want to serve this pricing.css do  you really think i should just go ahead and write app.getpricing.css and then request response  i should write this whole thing again   now technically i can do that and it will work as  well but this is just unnecessary right because a   lot of times a lot of websites use a lot of static  assets so what we have with express is a better   way of using these particular static assets right  and that is by just saying app.use and then we   can use express dot static and this function right  here allows us to tell that hey where do you want   to serve or which directory do you want yourself  to serve your static assets from so i'm just   going to say part.resolve dir name dir name is  basically just the current working directory name   and then i'm gonna say this would be public  right so we just want our public folder   to be statically delivered every time and one  quick thing is that you want this static asset to   be delivered on let's say the root of the domain  or let's say i want this to be on static right now   just to make things simpler so right so i have  this thing that means i want to use whenever   i'm using static this particular thing should  handle what should happen to this particular path   and what should really happen to this particular  path is that express should look inside the public   folder to check if there's a file depending  on where the user what the user has requested   and if there is then just deliver that particular  file so let's just restart the terminal one   more time and let's just take this  url and open this in a new tab   so you see we still get the html which is fine  but if i go to like slash static and if i'll hit   static slash index.html you see we get this same  html again right but there's a difference the   difference is this time this is solved by this  particular route if i go ahead and remove this   and restart it if i refresh this you can see  this thing still works but this would not work   because of obviously that this path no longer  points to any particular uh file or any particular   function which can handle that let's do one  more thing let me just go ahead and add a   secret dot txt file here and we're going to  create let's say this is a super secret file   don't tell anybody about this right and we will  be making sure that this is inside public folder   you can see it's inside public folder and we are  not adding anything here at all but because we are   serving all the files from the static thing  what we can do is just go ahead right here   and say inside static i want to visit this secret  dot txt and hit enter and you can see that we get   this this is a super super secret file right  out of the box so this is how static works   in express it is very useful for static assets  like images css you know javascript if you have   on your website and that is how you can serve  them whether you know you can just go ahead and   create a folder public static here and point this  like that so that's how you're gonna do it that's   how it works and that is all really for this  video i'm gonna see you in the next one really   soon hey everyone welcome back and in this video  let's just go ahead and take a look at how you can   accept data from front end to back end with no  chairs by accepting what i mean is it could be   any form submission it could be any field which  you want to get it could be any sort of behavior   right so first things first let me just go ahead  and quickly create that particular interface so   i'm just gonna have a really simple html body you  know nothing fancy although i should go ahead and   head here as well but yeah that's pretty  much it so let's just create a simple   input type text and i'm gonna say this has  an id of username and this would be password   and that's it button id summit and i'm going to  say summit right nothing really fancy let's just   go ahead and yeah of course this will not work  because we are not serving static assets from here   let's serve the static assets from the root  of the path right that is the root domain so   that we get all the benefits of getting index  html right away on this right so we have this   nice little form with us and yeah you can  also just go ahead and say auto complete   off if you don't really want to bother  your users right refresh there you go   so the next thing is that we want to receive  whatever the user is writing when i click on   summit i want to receive it on the backend so  let's just add a quick script here i'm going   to say this is script.js and i can do that by  placing the script.js inside our public folder   itself because this script this whole folder  is actually being served as a static thing   over this whole domain sort of thing so let's just  go ahead and quickly add a couple of eventlessness   on these buttons and things so this is first of  all summit so i'm going to say document.getelement   by id summit on click i should get the username  would be document.getelementbyid username i guess   we can just check and then password would be  password like this right so what should happen   is once i click this once we have the values this  this input right here should go to our server   so the next thing is actually defining  a route for that so i want to say data   and then i'm gonna define request  response and i'm just gonna say response   dot send okay you can also use json  here to send a json response and say   status okay something like that which is just  a fancy way but either one of them would work   and right here what i want to do is i  just want to console.log request.body   because this is the place where our information  would be stored information would be available   for us to parse right so we once we have this  route let's just go ahead and restart the server   here real quick and inside our index dot or really  script.js file what i'm gonna do next is let's see   is i want to have a ajax call made which is  using fetch so i'm going to say data right here   i'm going to specify the method would be  post the body is going to be json.string   efi stri ngi fy username and password right so  this should be our body and one quick thing is the   content type of the thing which we are sending  is json so i want to say this is application   json from front end so once we do that  this should be more than enough for getting   a response i want to say response.json we are  expecting a json response from server because   you can see that inside our server.js we wrote  this particular block right so we are getting   a json response from server as well so there's  that and then finally i just want to console.log   console.log what we really got that is the data  right so so much going on here on the front end   i hope there's no confusion here because we are  not really learning front end uh right now so   once we do that on the back end what's gonna  happen is we're just gonna get a console log   of request on body so if i go ahead and submit  this or maybe just refresh this first of all   and go ahead and submit this you can see that  we get our request.body as undefined right now   why is that you see express by itself does not  contain the parsed body and anything like that   but you can extend the functionality of express  to do that and how you do that is by installing   another package known as body parser so go  ahead and install npm install body parcel   and right here this package is going to  allow you to pass the body which is coming   so i'm going to go ahead and import this first of  all i'm going to say body parser is required body   parser and then just before our post request  i'm going to say app.use and you just have to   do it once just like we have done it for  static ones so i'm going to say app.use   bodyparser.json right and that's it this would  make sure that the request or body inside of our   express contains the relevant parts to json if  it is coming as a json object so let's just go   ahead and do npm or really notes over.js and  refresh this try to submit it one more time   and you're going to see that now we get username  as an empty object and password is an empty object   because this should be dot value right  not the node itself so let's just do it   one more time and submit it and you can see  now we get the correct username and password   and just so you know that it's different  you can see it's a different password right   so yeah this is how you're gonna receive and  send response to the back end using body parser   in express that is all for this video i'm  gonna see you in the next one really soon   so what is going on everybody welcome to the  very first video for our next js course and   in this course in this whole web series we're  going to be working a lot with next years we'll   be developing a lot of projects on the way we'll  be learning the ins and out of the framework so   if you're watching this course  on code damn you are going to be   updated with the latest next year's frame  books as they roll out currently it's 9.5 and   yeah if you're watching this on codedumb.com and  if there's any significant change the contents   would be added again to the framework if not to  the to the learning path if not then please go   ahead and sign up on codedown.com for watching  the same content all right with that being said   we're going to be exploring a lot just like i said  in this in this whole web series but starting off   with some prerequisites some requirements i would  say you must have for this um next year's course   uh obviously the first thing is that you know  if you are a react developer please and please   only then follow along with the course this  course is not for people who are extremely   new to react or who are extremely new to html  or css and you probably know this if you have   been following the next year's road map on code  dam which you can see right here with us so we   on the uh next year's roadmap we actually start  with the basic html and css skills then we build   some javascript skills then react fundamentals and  then we come to next js so this is very important   you must have basic html css javascript and react  fundamentals with you before you start working   with nextgs because for the most part nexus is  going to contain a lot of react code a lot of   best practices of react code a lot of react so  this is one thing i want to just put out there   if you do not have access to uh if you do  not have knowledge for the html css and react   you can always go to the next js mastery  learning path you can find all the links   and get started with those topics first so yep  that's what that would be all uh for the learning   path at least and for this whole course we're  gonna be building just like i said a lot of things   along the way so i'm pretty excited to start this  course i hopefully i hope that you are excited as   well so let's get into it and we're going to be  learning a lot of things in this whole web series   everyone welcome back and in this video let's  just go ahead and go over what next js really   is and why it is needed so next chase is a wrapper  to speak as of you know in in the in the simplest   terms i would say next years is a wrapper around  react framework which enables your react code to   pre-render which enables your react code to  run on the server what do i mean by that well   you see when you're working with the react website  which is just the client-side javascript code what   happens the process is that firstly your client  with down will download the code from the server   then that javascript code would be executed  by the browser and then you're going to see   the actual output on the screen the actual html  elements and divs and all that but if you take a   look at sites which are built with next shares  what you're going to see is that if you go to   view source you could pretty much see all the  content within the html document itself right   for example i can just search this text  pre-rendering right here and this is the   h3 tag which we are seeing right now right  this is statically generated and server-side   rendered react applications and this is what we  are seeing so you see that in this case in the   case of nexus the server is actually sending you  the html itself but in case of react applications   the server sends you javascript bundles which  is then executed by the browsers and then the   the output is displayed to the user now this is  one of the many benefits next year springs in but   this is the most important one right everything  else you know zero configuration fully extensible   static exporting let's just leave that because  that is also sort of pre-rendering only   css and js ready for production all these are  actually possible with just react as well but   with nexus with these two features basically  the pre-rendering one because this is just a   side effect of that but because of pre-rendering  it opens a lot of doors for performance for seo   for caching stuff like that and it is it  is awesome the only thing which nexus truly   does which which makes all the difference is this  thing that is server side rendering of react code   on the server so that your server actually sends  html instead of javascript bundles on your screen   so this is what next.js is about in a nutshell  and yeah that is that's why i wanted you to have   a basic understanding of react because in next  we'll be following certain practices said by the   framework we'll be following certain patterns  certain design patterns but for the most part   because we are writing react code itself the  principles the underlying principles remain same   so yeah that's pretty much it for this video  hopefully you understood the difference between   next and react and why it is needed  we'll come to performance benefits seo   you know stuff like that later on in the series  because that's technically not related to   the coding part directly it's more about the user  experience and the marketing side of the things   but that is very important as well so anyway  that's all for this video if you liked it   let's just move on to the next one really quick so  what is going on everybody welcome back to another   video in which we'll be starting off by setting  our next chairs project so first things first   what we're gonna do is on your systems go on your  systems and make sure that you have node and npm   installed and i'm assuming that you are a react  developer you have some sort of experience with   react so you should have that by default once you  do have that just go ahead and write npx create   next app and just go ahead and write the name  of your project in our case it would be hello   next you could have any name here you want and the  next thing is i'm gonna pass in a flag called dash   dash use npm now the reason i'm passing this flag  is because i have both yarn and npm on my systems   so i want to use npm that is why i'm using this  thing and for the matter of fact what this npx is   how this all is working if you want to dive  deep into this we have a dedicated course for   npm mastery as well on code dam hopefully you're  watching this on goddamn.com so you can go ahead   and check that out as well if you want to  learn more about how npx and everything works   so once you have that just go ahead and hit  enter and it should be up and ready in a   couple of minutes now mind you that we would be  using typescript in this whole um course because   typescript is a production ready technology it  enables you to write high quality code while   suppressing a lot of errors which might just slip  in so you get all those benefits of static type   checking and auto completion and jumping in code  here and there and refactoring and all that stuff   so it's a pretty decent deal so once we have  done that once the project is initialized   let's just go ahead inside the folder hello  next and let's see what's going on here   so if we take a look inside the files section  okay i think we did not really open that correctly   if we take a look inside the files section all right so you can see right here that we have  some js files and not a lot of activity going on   right we have some regular package json files  and everything and i'm gonna get to the whole   directory structure later on in some in the  next video but for now just stick along with me   and let's just go ahead and convert these  into typescript so it's as easy as doing this   with nextgs right just make sure your extension  is tsx for the files which actually use   jsx and you could go ahead and keep it dot ts for  the files which are you know just pure typescript   or just pure javascript right once you do this  it should be enough now if you're coming from a   typescript background you're gonna immediately  notice that we do not have a dsconfig.json here   but the thing is that next.js can  automatically take care of that   how awesome is that so i'm just going to go  ahead and create a file called tsconfig.json   i'm going to keep it empty this would be  handled by next js we don't have to really   mess around with initially at least and what i'm  going to do is we can see that we just have three   dependencies at the moment next react and react  on so what i'm going to do is i'm going to install   a couple of mores which would enable us the type  support and all the nice features of typescript   so i'm going to install typescript right here i'm  going to install the node types which is going to   enable us to write server side code and i'm going  to install the react types which is going to give   us autocomplete on the client side code for react  and i'm going to say this as save diff because   these are dependencies which we don't really want  on production because on the production nexus   would automatically be you know compiled down to  javascript and all that good stuff so once you do   that we are basically done to see our hello world  now you might see some of these errors but don't   worry about them these are all false positives  they would be all rectified once we fill up this   ts config so to do that we're going to go ahead  and write npm run div which in turn is going to   go to package.json and see that we have a dev  script which is going to run next if and next   f is magic it is going to take care of the server  initialization compiling your typescript you know   how to auto reloading hot reloading of code fast  refresh all that stuff all that good stuff out of   the box it's just magic so we go ahead and run  this and you can see that it says to me that we   detected typescript in your project and created  a ts config json file for you so that's very nice   of next js right and you can see that we get a  nice little populated tsconfig.json file with us   plus a next.enb ts file which is a typed file but  we don't really need to worry a lot about this   but for the most part you can see that our code  base is purely in typescript we don't have any   javascript yet but we can still go ahead  and visit this url that is localhost 3000   and we're going to see that we get a nice  little page creating us welcome to nextjs   we can in fact go ahead to index.tsx and change  this from next shares to next ts because why the   hell not and you can see without even reloading  with the help of fast refresh we get immediate   update to our page so we're gonna explore a lot  about what these technologies uh what what sort of   architecture next year's follows and uh what's  actually happening in the main app itself but for   this video i think this should be enough to get  you started with next year's hopefully you were   able to follow along till now if not let me know  in the discussions below i'm gonna get back to   you if you are stuck anywhere that's all for this  one i'm gonna see you very soon in the next video   hey everyone welcome back and in this video let's  just go ahead and explore our project a little bit   because we haven't really seen what's going on  here so i'm just gonna minimize the terminal for   you and i'm gonna close these files now what we  see it on our left that is the file structure it's   pretty interesting now the reason it is laid down  in the following sense is because nexus requires   a specific file structure which is not a lot  of technologies which is not what a lot of   technologies do outside there and it's sort of you  know some people like it some people don't like it   but this is what it is at least for now with next  years so what's going on well first things first   you see this public folder right whatever you put  it in the public folder is going to be directly   accessible on your root domain in our case you can  see we have two files that is favicon and versal   so if i go ahead let me just go ahead and bring  this right here if i go ahead and just go to   versel.svg in my url you can see right here i get  the versa because this file was put right here   right similarly for fabricon if i go to that url  you're gonna see we get our favicon right here if   you could just see it in the dark if i create  a file let's say robots.txt and if i say hello   robots you know stuff like that save that file go  to robots.txt what you're going to see is we get   the same file so it's basically a directory which  next chase uses internally to serve off files as   it is now if you create an index.js or anything  it would not be processed by nexus it would not be   executed as a node command by next year's it would  be served as it is right so you have to be careful   about this whatever you put inside the public  directory is directly accessible by anyone right   as as the raw source thing and a good thing is it  does not matter where your contents is as long as   it is in public directory so you can have a bunch  of folders for example a b then you can have c   dot txt and you can say hello there and how it  would be accessible is pretty much a b c dot txt   just like that right so it's just going to follow  the whole direct directory path and reach out to   that particular file just like it would work on a  file system so it's pretty neat because you know   now you have a one-on-one pairing on how you are  storing your files and how they are served right   most of the frameworks like express provide that  as well with the static express.static middleware   but the nexus provides that out of the box without  you writing any code or any configuration so this   is about the public folder in nextgs there's  another interesting folder you can see pages   which is basically the heart of our application  which is basically our source code would live   right so we're going to discuss a lot more  about pages um as we go on because this is   like the central part of the routing system as  well but for the most part this styles folder   is not really required so you can go ahead and  move the styles folder inside public as well i   mean that would just make your styles accessible  through a url instead of like bun link but   it won't really matter right because your css is  visible anyway so you can or you if you can if   you want you can keep the styles in a separate  folder or you can move them inside the pages   folder itself right so if you do that what's going  to happen is you can delete this styles folder   so to just get rid of a new folder and right here  instead of importing it like this now because you   have deleted it just import it like this right  and inside index.tsx as well just import the   home.css style directly so if you do that and  if you go ahead and go back on the page you're   going to see it pretty much looks just like before  right and yep that's basically it for the whole   structure so now you more or less have only two  folders pages and public which are a must to have   in a similar way well actually there's one way to  have pages as well so you can create an src folder   and then throw in pages inside that that would  also work just like it is working right now   but i'm not really getting into that so i'm just  gonna remove my src folder for now but the idea is   you must have two folders the first one is public  for static assets and the pages folder for your   source code which is responsible for running  the node code and rendering your react code on   the page as well we're going to discuss what  this api is later on it is something special   not really related to the rendering part but yeah  it is special so that would be all for this video   i hope you liked it i'm gonna see you  pretty soon in the next one let's get there   so what is going on everybody welcome back and  in this video let's just go ahead and explore   the pages directory a little bit now we are not  really going to explore all the routing part   just yet but pages provide a very powerful  yet simple to maintain routing mechanism   in next year's so what happens with pages is that  whatever file next js finds ends with dot ts dot   tsx dot js.jsx inside the next js folder inside  this pages folder it would create a path of that   or to or to speak in the in the reverse  way whenever you visit something which is   like yourwebsite.com my page next js is  going to find mypage.tsx basically resolve   that my page module inside the pages folder  and it's going to return that component   that react component to the browser enough  of talking let's actually see what i'm saying   there's just one exception to that and that is the  index.tsx that is index.tsx is actually available   on your root domain and not on slash index right  so if you go to slash index you're going to get   404 but if you're on your root domain that  is where index.tsx is actually displayed   so what we want to do really is let me just go  ahead and trim this down real quick because we   have a lot of code right here and i'm just gonna  actually just get rid of this as well i'm just   gonna say we have h1 hello world right here and  maybe i can just even get rid of that so we have   a very very small and very simple react component  with us here and if we go on the page you're gonna   see that is exactly what we get but hold on if we  go ahead and take a look at the view page source   you can actually see hello world written in the  html itself now this is not something that happens   when you're using react right just go ahead and  try out an application with create react app   create a component which says hello world and  display it and go to the page source and you're   never gonna find this h1 hello world tag there  so what really happened here is that this page   this component was actually rendered on the  server by next years and it was you know   crunched into the html and returned to the  client this way this has multiple benefits   in terms of seo and performance but the most  notable benefit you can see is the client   now when the when the page is loaded is never  waiting for any sort of javascript to execute   for displaying the content which increases  performance a lot for the client side right   so yep that's that's basically how the pages thing  work so if i go ahead and create a nice page dot   tsx for myself and if i just go ahead and copy  paste this whole thing and i say let's see this   is a super nice page hit save and if i go ahead  on nice what was that nice page here nice page   you can see i get it this is a super nice page  right out the bar out of the box i had to do   no routing i had to you know just write nowhere  i have to write like if i go to slash nice page   this should execute it is automatically handled  by next js and this is some sort of behavior   you cannot really change at the moment so you  know you just have to return a component here   you cannot just just return for example you  cannot just return to here because if you do that   you're going to see you get an error that the  export is not a react component so the default   export from your any file inside this pages folder  just ignore the api folder for now any file inside   this pages folder which is a javascript  file should export a react component right   as a default export and once you do that  it's just going to work just like that right   you can create as many pages as you  want nice page 2 dot tsx this is   also a super nice page right and if i go to  that we get this is also super nice page all   rendered on the server side this is also you can  also see this it is available in the source code   and as we create more and more complicated apps  you're gonna realize the importance and benefits   of this plus the fact that you do not have  to customize anything out of the box is just   mind-blowing i mean this the setup works right  off the out of the box it is typescript react jsx   webpack babel everything hidden away from  you nothing is available right so nothing is   actually visible but you can actually get finding  control of everything if you want by a file called   next.config.js which we're going to discuss later  on but you know this is this is something i love   about nexus it's simplicity to start and it can  grow as complex as you want when you want it   right just like it just like every framework  should be so this is all about pages introduction   to pages we're gonna learn a lot about pages and  routing and everything in the routing section but   that's all for this video i'm gonna see you pretty  soon in the next one hey everyone welcome back   and in this video we're gonna be taking a look at  a special file known as underscore document.tsx   now this is a special file because just like  i said when we create it it's not going to be   available at slash document.tsx but in fact it  is the file which is responsible for all the   other things in your document right so you see  that we wrote this here this h1 here inside our   index.dsx with a div but we did not really write  all this other things stock type html html head   you know all these scripts and everything we did  not write that so how did this came as a response   well that is precisely what document.tsx allows us  to control but for the most part we don't really   want to mess up we don't really want to you  know just just mess up with the next js things   document.tsx is used for um you know injecting  our own custom code injecting our own custom   scripts which we want to be available for the  whole application so what we want to do is just   go ahead oops inside pages create a file called  as underscore document.tsx and first of all just   like i said we don't want to mess up with nextjs  so what we're going to do is we're going to import   certain things i'm going to import html head  main and next script this is um i think what is   required from next slash document and what we're  going to do is we're going to actually export a   class this time not a function now bear with me  we're going to export a class custom document   why we are doing this instead of a functional  component is because we have to extend   our original document and why is that because  it implements certain methods certain certain   functionalities which are important for the next  js to actually use right i'm sure there's a way   in functional components as well where we can  assign this document somewhere in the prototype   chain but the best way the cleanest way is  to just make use of class based component   in a single file you know just just bite  the bullet and use it for once in your whole   application because document.tsx would honestly  be a very small file even after you customize it   so what we want again with class based components  we just need to have a single render function   and what we want to return is basically the whole  structure right so we want head right there don't   really focus a lot on these tags right now we're  gonna be making use of head again somewhere in the   next videos but i don't really want you to get  confused with this head right here so i'm gonna   keep that blank we're gonna write main and finally  we're gonna write the next script as well right   and actually the main should really go inside the  body which is a re regular html tag you know and   let's just restart the server once because it does  not really capture changes for a document and app   and if we reload now you're gonna see nothing  really changes but what we can do now is   that we can go ahead and inject something  like meta property custom and then value   i don't know yolo something like that right  and it's i don't know what's what's the   content yeah so here we have it refresh you can  see now that we have a meta property custom and   content yellow right now the point is that  this is actually available on every page   even on pages which are 404 right so you can  see that we get 404 this page cannot be found   but we still have the yolo property available  for us because this is the absolute base template   which is used by nextgs for rendering things for  rendering your page right so a bunch of things   use this file as minimal as you can number  one because this is a root file this is   something which can control your whole  application so you never really want to   mess a lot with the global files so just  just you know use this file if you want to   probably inject some sort of metadata which  is for verification purposes of your website   or i don't know just just keep the usage of this  file to minimal because for the most part you   will be able to customize all the titles all the  head stuff everything using um the actual you know   the actual pages which are available right here so  you can do all that stuff from here as well so you   know if you want to inject a particular script  you can use that this would be available then   throughout the web pages throughout the website  some analytics scripts anything you can do that   so yeah i mean that would be pretty much it for  this video and in the next one we're going to be   exploring another file called as underscoreapp.tsx  which is slightly different than this one   and we're going to be understanding how's that  so that's all for this one and i'm gonna see you   in the next video hey everyone welcome back and  in this video let's just go ahead and take a look   at app.tsx file in next.js so again just like  document.tsx underscore app.tsx is also a special   file so i'm going to go ahead and create that but  it's a little bit different than document.tsx and   a little bit simple as well to set up the first  reason is obviously because you can go ahead   and export a function directly out of it so what  should you write here well let's just go ahead   and try to return h1 hello from here right and  let's just start our server so we have a server   running on port 3000 and if we reload the page we  get hello hmm something's not right if we go ahead   on our index.ts6 page what we could see is that  actually let's just go ahead and rename this as   app so that we don't get really don't really  get that warnings but we see that we have here   on the index page so you know i am index page  and not hello if i write that hit save refresh   but we still get hello that's strange  if i go ahead and write here i am page 1   and if i go to slash page 1 we still get hello if  i go to 404 which is no page we still get hello   so what's happening well if you could guess this  app.ts6 is actually responsible for rendering   all of your pages right so when you are returning  a constant component that is just a single file   what's really happening is that you are  you are executing none of the pages here   so how do we execute pages well next js actually  passes two things here the first one is component   and next the second one is page props that is the  props passed to the component to this component   by next js internally right and because this is  rendering right now we can just go ahead and do   something like this so we're gonna write component  right here and i'm gonna just destructure these   page props now if we go ahead and take a look  you can see that we get the correct 404 page   as well as if i go to home page we  get i am index page and not hello   and everything is just working fine right  so basically this is the end point for   you know just just just updating the pages  in a way you want before they are rendered   now this is a little bit different than the actual  um you know the actual document.tsx page we have   and how is that different i'm going to show  you let's just write a very simple console.log   statement here which says hello from underscore  app right and what i'm going to do is save this   and go ahead and refresh the page so when  i refresh this you can see that in a node   console we got an event that is a console which  says hello from app right that means that this   code this function was actually executed on the  server as well right this is the node process   this is executed we see this console that  means node somehow executed this right   at the same time if i go ahead and take a look  in the console on the browser we get hello from   app here as well that means this is executed this  component this code is actually executed on this   on the client as well irrespective of i am page  one being on the page itself right so what we are   what you're really seeing here is one of the core  fundamental concepts of server side rendering that   is the content is available as plain html as well  as as soon as the javascript of that particular   page is ready in our case the javascript which  is of the component the hooks and event listeners   and everything when they are ready they are  automatically attached to your page right so   for example if i have something like you know h1  on click alert hello if i have something like this   now if i go ahead and refresh this page you  can see if i click on this i get a hello alert   but if i go to the page source you're going to see  i get no such information inside javascript right   here right it's just a regular h1 so what happens  initially is that i'm displayed i am page one   and then when the javascript is downloaded  and rendered completely event listeners and   everything is attached to it that is why we  get an alert now if i disable my javascript   and run this i'm still gonna see on page one but  there would no there would be no interactivity   so what's really happening here is that this code  this function is being executed both on the server   obviously for server side rendering and on the  client as well with document.tsx what's happening   is that things really execute just on the  server right so if i go ahead and write here   hello from document.ts hit save you're  gonna see that if i go ahead and reload this   we get hello from document.tsx but we get  nothing such message from on our console   why because you can clearly see that document.tsx  although it returns a react component although   agreed that it returns a react component but it  is actually forming the page structure the overall   page structure right so that means it is only  rendered on the server to create those html and   head and you know those those those custom next  year scripts and hooking everything in nicely   but it would not execute any javascript which  is available inside this page right away right   so if you have you know um component mount or  anything like that that is not really going   to happen because this is not a component this is  your actual root document which is being rendered   through this component file right so it's sort  of a uh i don't know it's sort of a lie as to say   that it is a component it is not a component it  is your actual document which is being rendered   so it won't really make a lot of sense if  you have component in mount here and there   right here because they are more suited toward  pages toward individual pages in our case it   could be index.tsx where you can have a use effect  which is you know once the page is ready that is   once the page is mounted you can just say hello  hello right or maybe you can just you know if   you go back to index you're gonna get that hello  right here or you can just go ahead and you know   just override that behavior for all the pages  right here so the fundamental difference being   between app.tsx and document is that this file is  used to create the overall structure and the code   in this file is never executed the javascript code  on this file is never executed on the client side   whatever you know the html string and everything  which we get from this file is put as it is   on the source code and it is not executed as per  say on the client side end so we have some uses   for app.tsx which we're going to discover as we  move on but that was mostly it for this video   and if you like this we have a lot of things  coming up so just hold on so that would be   all for this video i'm gonna see you pretty  soon in the next one hi everyone welcome back   to another section this is our styling section  for next year so we're gonna learn a bit about   how we can use css and sas in this section and  ways to implement styling with next js so it's   going to be interesting let's just stick along  and see whatever we can do with nextgs in this   video okay so we are in our index.tsx page which  is our main page for next js this one right here   right and what we are what we want to do is we  want to add some styles and effects and everything   to the page so first things first  let's just go ahead and actually remove   all the styles from our application and i'm  gonna for the moment i'm gonna actually let's   just go ahead and see i'm gonna actually remove  our app.tsx file as well because this one is a   special file we're gonna get to that later on and  there we go right so we just have let's just go   ahead and remove these two pages as well because  well they're just trash so here we are now we have   just have a single page right here and actually we  might need a server restart maybe because of that and let's see if we are ready to go  and yes we are so now we have a very   basic hello world with us no styles nothing at all  if we just take a look at the source code as well   we have some javascript and everything  but when you're gonna compile it   you're gonna see for production you're gonna see  that all this javascript is also removed right so   what we really want to do is try out the jsx that  is styled jsx in nexus which means css njs now   personally speaking i don't really like this very  much but i'm gonna still explain to you but i   won't really recommend as a person who has used  react to go ahead and follow this because um we   are already mixing the html sort of thing that  is you know the jsx part with the logic in our   react components the least we can do is keep css  separate in a separate files and given that nexus   actually has first class support for that as well  i'm going to recommend not to do that but anyway   let's just go ahead and start so i'm going to say  this is a simple div for us and i'm just gonna   write a real style jsx tag right here which means  that whatever i write inside this now is going to   be our css for this particular component right so  what i can say is i can just give it a class name   of title and i can say title has color of red  right hit save and you can see that our title   turns red but this is special because if i  go ahead and i'm not really sure if i can   just show it to you yeah maybe i can so  let's just go ahead and create a function   um let's say heading right and i just return  h1 props dot heading right here and i'm gonna   have props right here and instead of this i'm  gonna say heading um heading is hitting well   a lot of heading right there but what  i'm gonna do is just go ahead and move it right there oops i think i lost my uh copy  paste because of that but anyway that wasn't   a lot of code anyway so h1 color red there  we go so what i'm trying to show you here   is that this is still the same but if i try to  use h1 here now what you're gonna see is that it's   black it's not red whereas we specifically told  the h1 to be red here right so how does that work   well you see whenever you're using these style  jsx styles it's going to be component level styles   right so nexus is going to make sure that whatever  you write inside this is just limited in scope to   your component it does not matter if you're using  classes or does not matter even if you're using   you know direct style elements and how does it do  that well you can obviously always go ahead and   inspect this bad boy with the chrome inspector and  you can see immediately that actually next js is   going to add a class to every element inside that  particular component and instead of targeting h1   directly it's actually targeting h1.jsx and that  id of that particular um heading and then it's   saying color rate right so what happens with this  one well obviously you might have guessed it does   not have any class at all so it's just black just  regular you can go ahead and make this global by   saying global right here and if you do that and if  you refresh now you're gonna see that we have um   a global h1 as the color right so what just next  is what it just did is that now it's not really   modifying our styles it's just putting them as  it is on the page well this is all about you   know style jsx for the most part there could be a  bunch of things as well you can for the most part   it is used by people who want to have variables  with javascript inside css so now you can have   um you know just just red so you can say if math  dot random is greater than 0.5 then you want red   otherwise you want blue and once you do that you  know whenever you are refreshing it you're either   getting a red heading or a blue heading depending  on how the math not random plays out right   so that's that's the idea that you can go  ahead and use javascript variables inside css   but for the most part you never really need to do  that at all because css support is in itself very   good these days so personally speaking i won't  really recommend anyone to use style jsx that is   you know um css inside javascript unless you want  to use that and you have a legacy code base which   uses it but if you are somebody new just go ahead  and watch the next videos next few videos on how   to actually implement same functionality that is  component level um module based resolution but   using much better approach much cleaner approach  in which you can keep your components separate   so that would be all for this video i'm going  to see you very soon in the next one so what is   going on everybody welcome back and in this video  let's just go ahead and take a look at a cleaner   much better approach on adding global styles  and actually styles in general in this section   to our next js application now for doing that  we need to create at least for the global file   global styles we need to create a file called  as underscoreapp.tsx we discussed that in the   previous sections so it should not be a problem  so this application this app.tsx is a very simple   um you know non-customized app at the moment  but what we really want to do is just import our   global dot css right here now the naming  convention is again a little bit important here   first things first it is not necessary you name it  global.css you can name it main.css as well it's   just going to work just fine right so you can  see that we have a dot red class which gives a   color of red and inside our index page we have a  class name red assigned to a heading and we have   a heading right here so if we go ahead and restart  the server just restart the page and just refresh   the page we're gonna see that we get our heading  in red and that is because of the red class which   we have inside our main.css file right so this  is how the global styles are going to be applied   now you might ask me that what would happen if  you just go ahead and you know just just throw it   right here shouldn't that really work not really  because the way how next js guys came up with   you're gonna get this error it would say that  global css cannot be imported from other files   other than your custom app so what's happening  is that next.js is considering this import as a   global import it is it is considering that hey  if you want to import this as it is that means   you want to apply the styles everywhere and it  does not really let you do that because you know   components styles can overlap with each  other if you have overlapping classes   so it throws you an error and you cannot just  view your application so with that being out   that means that you know just importing css  like this importing main.css or style.cssl   you know anything like that dot css it's just  possible in dot underscore app.dsx but hang on   we're gonna see another way in the next video but  for this video what we have right here is that   you can go ahead and make use of the global  styles using a css import inside underscoreapp.tsx   only it would not work in a page it would not  work in any other file if it is not underscore   dsx so this is how you're gonna make use of you  know global styles and you can just go ahead and   play around with anything you like here it would  be available as a global style so that would be   all for this video i'm gonna see you pretty soon  in the next one hey everyone welcome back and in   this video let's just go ahead and explore how you  can import component styles um in your pages by   that what i mean is that whatever styles we import  are available only to your component so the first   thing first um we have seen that you know main.css  does not really work very nicely because we get   this error so what's happening is that nextgs has  actually created a way to import the files the   css files inside your typescript or javascript  components and that is only when your file name   ends with dot module dot css so you have to make  sure that you name your file as main.module.css if   you want your file to be available only to  a particular component the your global file   would still remain um you know just just the  main.css or global.css or whatever you want   but anything which you import in your component  in your page should be like this it should be   whatever the name for example in our case it  would be index which i'm just going to create index.module.css right so that's what we are  doing now so i'm going to say red again just   give it a more specificity just a little bit  of css weight and i'm gonna make this color   green right hit save and if i go ahead and just do  that what's going to happen is that if i go ahead   and refresh what we're gonna see is we don't  really get anything because because by default   you have to import it as like this now you  can go ahead and make use of styles dot red   like that right so now if you go ahead and  see you're gonna see that you actually get   the green color and you can see that it has  actually bound your style to a specific class   so how you have to use this is by using um  class name and then writing styles which is   what you imported from the css file and then  the name of the class which you're using right   in our case it is dot red there's a way to  make it work like this and like this as well   but it is not available natively inside next js  as of now so if you want to do something like that   you have to write custom configuration inside  next.config.js and we have some videos at the   end which are like covering the advanced aspect  of nexus which go over that aspect so if you're   somebody who's migrating this is especially useful  for somebody who's migrating existing code base   to have this feature you know just having an  import style which should be local to your module   to your component and this should work right away  so this involves the use of a babel plugin but   yeah that is possible but is available at the end  of the section end of this whole course basically   so yeah i mean for the most part this is  how you're gonna make sure you work with   um the css modules the css components in nexus  just import them like that and you're good to go   so that would be all for this video i'm gonna see  you pretty soon in the next one so what is going   on everybody welcome back and in this video let's  just take a look at how we can use sas inside next   chase and sas is basically for those of you who  don't really know it's sort of uh you know just   like how typescript is for javascript sas also  adds a lot of power to css and compiles down to   css only so next year supports sas natively you  just have to go ahead and you know just rename   we're not going to rename the global file we just  can rename the component one and what i'm going   to do is import it just like this and that's it  that's all we need really need to do i guess if   we could just refresh restart the server once that  would be awesome and if we go ahead and refresh it   we are probably gonna see i think we have  yeah i guess we need to install sas first   that's that's the only thing we need to do  because next year's won't really ship with sas   and i'm just gonna save it as a development  binary also because we don't really need sas   on production anyway so once we have that i can  run dev again and we should be up and running in   no time so if you go ahead and refresh it now you  can see that we get still the same behavior but   now with the scss that is a sas file the benefit  of this well to start with you can now nest   the styles so i can say this is color red and if i  go ahead and write a span here and i say i am red   and c so we can get red here and heading like  that and it just nicely compiles down to our css   but it is much more maintainable when you're using  sas while you get support for everything now the   sas variables um you know if you want to create  some sort of duplicate styles over and over so   you can write a function in sas you can loop  over stuff so all that stuff but for the most   part you're just gonna make use of the nesting a  lot so that is that is what it is sas ships out of   the box as well sas support shifts out of the box  as well with next js you just need to install the   sas package and you are done so that's that's  pretty much it for adding the sas support to   our applications as far as i'm concerned because  next js other than that inside of the css moduling   system follows the same thing as inside the sas  moduling system follows the same thing as css1   that is you need to make use of you need to end  your css files with dot.module.scss and so on and   so forth so that would be all for this video  i'm gonna see you pretty soon in the next one   hey everyone welcome back and in this video i  just want to take a little bit of time to just   tell you how you can organize your pages in next  chase so that you don't have a lot of clutter here   so how you should technically create things  is that inside pages just create a new folder   actually inside pages create a new folder with  whatever page you have for example this is my   page one right and now inside this page one create  an index.tsx file when you do that what's going   to happen is that your page contents are still  accessible on your domain.com page one but now   all the contents all the relevant contents in our  case it would be just tsx file and the styles file   would be available inside this page  one only so we can have a style start   module.scss right here and i can just go ahead and  say that you know red is a color red right and now   i can go ahead and just say export default  function page one is uh you know return h1   class name oops and then style start red and  let's just go ahead and import the styles from our styles.module.scss file right so this is all we  need and now we have a nice little page with us   which has the the view and the logic and the  styles part separated so if you go ahead and   view page one right here what you're gonna see is  that nothing happens because we have no content   there but once i write hello there we get hello  in red so that was just a quick little you know   instruction on how you can organize things i  prefer folders and actually folders would be   very helpful as well when you're creating dynamic  routes and stuff so just keep that practice with   you when you're starting off so that would be  all for this video i'm gonna see you pretty soon   in the next one so what is going on everybody  welcome back and in this section we are going   we're going to be exploring the api section of  nextgs learn about what that is how you can work   with that why is that useful and maybe just create  a little bit of small application around that as   well so pretty excited to start this section  and yeah let's just do it i'm gonna see you   super quick in the next video all right so when  we started the project you must have observed that   we have a api folder as well inside pages which  looks something like this now what does that mean   why is it different let's just discuss that in  this video so this api folder is special in the   sense that the files you create the typescript  or javascript files you create in this folder   should not return should not export a  react component what do i mean by that   let's say let's see so if i have of let's  say a file name that's randomnumber.ts right   what i have to do is just export default function  and here it should not be a react component   because for react components we have pages right  but for the files inside api folder this is   basically a rest api endpoint which you can use to  return um responses like json response for example   so what i'm gonna do is i'm gonna get two  parameters right here the first one is going   to be next api request type and the second  one is going to be next api response type   response right so we can get those types from  our next package and if you're familiar with   express you know what this request and  response are next js sort of also follows   a similar pattern but the thing is you have to  export a single function from a single file and   this this end point right here is automatically  available on you know for us at least it is http   localhost 3000 slash api slash random number  right so this is for us if you're running on a   different port that's a different story for you so  if i go ahead and save this file you're gonna see   nothing really happens because i  think we don't have the server running   so that's my bad but anyway if we refresh  this you're gonna see that it keeps on loading   now the reason it keeps on loading is because  we are not really returning any response at all   from this function right so let's just do  us do this page a favor and say rest.json   which is going to return a json response  i'm just going to say you know status okay   and if we take a look now refresh this you can see  we get a nice little status okay response from us   this is something which we cannot do with pages  right if you try to you know there's just not   any rest or request or rest here we cannot  really do restart rest.json even if you try   to do that i'm just showing you that  this won't work because inside pages   the next.js actually you know expects you to  return a component not just any api call so   this won't work inside pages but this would work  brilliantly when you are inside the api folder   so when you say rest or json again this  would look familiar to express guys   it could return a json response to you  automatically by just taking care of the content   type and the status score status scores would be  200 in this case so this should not be a problem   so once we have that in place um i think this  is a pretty solid intro to the api and uh what   we can do is just go ahead and instead of status  okay i can say number is math dot random times 10   and this would give us a number between um zero  to nine if i just flow it down that is right   so now whenever i refresh you're gonna see that we  get a random number every time um one three five   eight stuff like that so this is a random api  which is just returning us a random number inside   of a json response and yeah that's that's how  you're going to create a very simple api with next   js so it could have a lot of uses for example if  you're using jwt authentication in xjs you can use   an api endpoint you can deploy these individual  functions as lambda functions as well so they   can upscale and down scale independently right so  this is also one important benefit we can have you   can use the lambda functions for oauth login as  well for example sign in with google sign in with   facebook apple stuff like that so there are a lot  of good use cases uh i use these um on code dam   as well um for the oath login especially so yeah  that's all for this video i'm gonna see you pretty   soon in the next one we are we are gonna be using  this in a much more sort of organized way in some   sort of application so that's all for here and  i'm gonna see you pretty soon in the next video   hey everyone welcome back and in this video let's  just go ahead and explore the request and response   objects a little bit more because i don't  think we have done um enough research on them   yet so because we are using typescript we can  get all the benefits of autocomplete right at   our disposal so if i try to write request  dot you're going to see we have a bunch of   methods and properties enabled for us but  some of the interesting properties let's   just go over through them so the first  thing is request.body obviously because   you know if you are trying to let's just say if i  console.log request.body right here and let's say   request body is something like this so if you open  this and if we go ahead and if i try to copy this   api and let me just go ahead and fetch this  real quick with a method of post and body   of you know hello something like that right and  hit enter so you can see right here i received   on my node end the request body hello now this is  actually beneficial in the case that i'm sending   json data as the body so we'll have more tutorials  on that in terms of authentication and everything   but i'm just giving you an idea here  stringify and i have you know something as   username is admin and password is admin right  and if i just do one more thing that is just just setting up the headers as well so  that oops so that we have the content type   content type as application json because  that's what we want to receive at the back end   and hit enter what you're going to see is that at  the back end instead of getting a string which is   what we are sending inside the body we actually  get a parsed down object from the actual request   request.body so i can literally just go ahead and  say requestedbody.username and if i perform the   same request one more time it's going to give  me admin just like that which was the username   so this is the request.body we have a little bit  of other things as well so you have let's see   request dot cookies which might be important when  we are dealing with cookies so we'll we'll just   take a look at that request.headers is also  interesting if you are trying to get custom   headers out of a particular request then let's  see what we have request.query is also interesting   so if we have just like there and if i try to do  q is equal to one here what we're going to see is   in our request query this should be query  obviously so our query is q equal to one and   it is automatically parsed as an object for you so  you don't have to really parse it yourself right   then there are um for the most part this is what  you're gonna use requested url is something you   can use as well but for the most part that's not  that's all you're gonna make use of right so this   is how the request object looks like let's just  take a look at response object now real quick so   response we obviously have seen the json part with  this thing so it allows you to send json responses   but we have a lot of interesting things apart from  that as well let's start that so we have let's see   we have json obviously we have rest.send in case  you want to send um you know any other data which   is not json right so if you want to send something  like this instead of you know just json response   you can use this so rest.send is going to take  care of that again it's an abstraction over all   the real methods which we have but for the most  part it just works so we get three or four because   we have already loaded this page once but you  know it's going to take care of all the things   then let's just keep on moving um we have  rest.header which is also also interesting so we   can have you know x custom header and i don't know  we are open to hire people something like that   just to add a little bit of interest to your  application and for the most part we can just   use this refresh and if you take a look inside  your response headers now you can see that you   have a custom header now we are open to hire  people right pretty cool you can also use the   set header to actually set cookie so set cookie  could also be something like that and we can say   are you programmer equal to true right and if  i go ahead and refresh this now you can see   that it sets a cookie and now if i go  ahead and take a look at document.cookie   we actually get audio programmer as true as a  cookie which is set by the inside the browser   useful for authentication again all right let's  just keep on moving let's see what else we got so   we have obviously the status code with us  so if you want to set status code at 404 and   response you can do that so you can see inside  networks now we get a 404 as the status code of   our document you can basically do any status code  you like obviously just make sure you are playing   inside the rest status code so you can do 4013 i  don't know if you can do some ridiculous status   quotes yeah apparently you can but don't really  go ahead and try those can we do one three three   seven no not really well you can do uh i'm  a teapot i don't remember its status code it   was somewhere around 104 or something yeah no not  really anyway i don't really want to blow this up   so i'm just going to keep it a status code 200  which is 200 okay everyone knows that right so   this is again one interesting property which you  can set let's see what else is interesting here um there's also a method which i remember which  is rest.end right so rest.n can be used to just   you know it's pretty much like just just status  rest. but rest end is more explicit that you are   actually closing the response stream now hello  how are you so if you do that and if you try   to send more content down the line what's going  to happen is that you're going to get an error   from the server that cannot send set well you  get this error but the actual idea is that you   cannot really send any headers or body because  the response stream has been ended so anyway   that's pretty much it for how we're going  to interact a little bit with the rest   and request and response there's a lot more we can  do when we introduce middlewares and cookies and   stuff like that which would be very useful in  authentication and stuff but for the most part   this is how you can get started with the api's  endpoint so that's all for this video i'm gonna   see you pretty soon in the next one hey everyone  welcome to a brand new section in next year's this   is going to be a routing section in which we'll be  seeing simple routing and complicated routing as   well eventually as we go through and some of the  new changes which nexus brings in to the framework   so starting off this video would be on simple  routing you can already see that i'm on localhost   port 3000 and if i switch to my text editor  you're going to see that we do not have a lot   of files just the index.tsx and the underscore app  dsx file so this is how it looks like as of now   let's just go ahead and remove a bunch of  these things except for let's say a single   link right so i'm going to go ahead and remove all  of this and i'm going to remove the footer as well   and i'm just going to go ahead and change this  indentation to tabs because that's what i use   so here we are now we just have a single link  with our on our website and that is also using you   know just regular ah drift tags so first things  first inside simple routing understand two things   the first thing is that inside this pages  folder right when you create any file that is   a typescript or a javascript now if you're working  in a typescript project that would end with a dot   tsx or with a dot ts if it ends with dot tsx or  dot ds and if it is a you know valid javascript   file which is exporting a functional component  next.js would automatically make it a page   by that what i mean is that you can literally go  ahead and write here mayhold.tsx and just export   default a function which should be a react  component should be a react component p-o-n-e-n-t   i'm pretty sure i spelled it wrong but anyway  anyway let's just proceed so by what i mean   that it should be a react component that means  that it should return some jsx expression right   not really expression but a jsx element so as to  speak it could be just like you know hello or as   simple as just a string as well but it should  not be returned undefined right it could be   return null because null is a valid jsx element  but it should not be returned undefined so as   long as the default import in a file which is  a valid typescript or javascript file depending   on your project setup is returning a valid react  component that is is returning a valid jsx element   you have a page for yourself now once you have  mayhew.tsx what you're going to see is that   now if you go ahead and visit localhost 3000  slash mayhood it's going to say hello right so   i can just say hello from mahul right so that we  are clear that we are on mehul so you can see that   it dynamically automatically generated it right it  won't be mehul.tsx it would mean nothing like that   on any other page you're going to get a 404 it  would be just mehul without any extension anything   at all so this is how simple routing in uh inside  of this next js works that is you just go ahead   create a file export a function which returns  a react component and that's it you're done now   you can go ahead and visit the slash whatever it  is and it will automatically be there next year's   actually borrowed this concept from php so if you  have been a php developer back in the days you   know that php works just like this you just create  a file and you can directly go ahead and visit   that file and it will be just you know the output  would be served just out of the box so this is   how nextgs works but anyway nonetheless routing is  more complicated in than in php which has you know   brings its own benefits so we're gonna take a  look at that in the next video so that's all   for this one i'm gonna see you in the next one hey  everyone welcome back and in this video let's just   take a look at the link component which you're  going to be using all the time on your website   why that is important and how it works so we  have just like you see we have an index page   and we have a mayhew page right so you can see  that if i go to localhost 3000 we're going to get   something like this and if i go to close 3000mah  we get this content so far so good now obviously   in every case you're going to need some links on  your website so that people can navigate around   right on different pages now one option is  to have these ahrefs links like this but the   disadvantage to this and let me just go ahead and  show you if i have a link something like you know   mayhew because that is that is where our page is  located right so if i go to welcome to my blog if   i do something like this go back and if i try to  click on this pay close attention to what happens   here you're gonna see that the page actually  reloads right so you see that we have actually   created a conventional website which is reloading  when i click on a link right so it's fetching the   document again from the server you know all that  regular thing is happening but we can make use of   the dynamic nature of react that is we can make  use of the functionality that we do not have to   fetch the whole html of the page by that what  i mean is that internal routing could make sure   that the experience of the user is very smooth  between the pages in terms of page transitions so   there's not a jump but in fact a smooth change of  page which is which pretty much feels like native   application so how do we do that well we cannot  really do that with the regular anchor tag because   nexus does not know about this any much but what  we can make use of is something known as the link   tag from next link right so you have to import  it from next link and it's a default import   as of now so what you've got what you have to  do pretty much is just go ahead and wrap this   tag inside a link and give it an hrif of same as  you have in the a tag and remove the href from   the attack now why do you remove this because next  year's would automatically pass down this href to   this anchor attack and that is it you do not have  to pass any other tag and we're going to discuss   this again in the in the complicated routing  and that is like the nested routing but and the   dynamic routing but earlier you also had to pass  in something known as as which was your real link   but with nexus 9.5.3 onwards you don't even have  to do that the href would work just fine without   any changes at all so now if we take a look at  the the blog again the website again just pay   close attention to the state of the page so if  i click on this you can see it instantaneously   loads and it is not reloaded right so you can see  if i go back with my browser window browser button   i can just click and you know go back click go  back click go back it's instantaneous it's fast   right and that is made possible with all  the optimizations next year springs in like   you know preloading and stuff so we can cover  preloading a little bit but yeah i would really   want to have that in a separate video anyway so  yeah that was a quick little introduction to link   and how you can do simple routing with it we're  gonna make use of link again in complicated   routing but that's all for this video i'm gonna  see you in the next one hey everyone welcome back   and in this video let's just go ahead and build  a very very simple jwt based authentication   inside next.js so first things first what  i'm going to do is i'm going to go ahead   and actually install i'm going to say npm install  json web token right so because this is a this is   a package which would enable us to actually  do a lot of fun stuff with json web tokens   so i'm gonna install the types for this as  well as far as i remember they are available   so let's just go ahead and do that because that  would enrich our experience of working with the   package and yep so here we are i'm just going  to minimize this what i want to do is on let's   get rid of the page one for now i'm gonna  go ahead remove this and i'm gonna create a   very very simple form back back in 80s like that  input type text value admin let's just keep that   and password has value admin as well right just  give it a little br because i'm too lazy for   um actual css and input type summit value  login right we can give it a form method post and let's see i'm gonna say action is slash  api slash login right so once we do that   what we're gonna see is actually  let me just get rid of these as well once we do that and go to our home page  we get a nice little form with us which   is absolutely destroyed by my password manager so   let's just leave that but what's going to happen  is if i go ahead and rename this to login.ts   and if i go ahead and just do a console.log  of request.body so as to see what we are   getting let's just refresh this hit login and in  the console we see we get nothing because i think   i did not really save it let's just refresh  this one more time and we still did not see   anything but we were submitting i think have  we are not really submitting anything as well   so to do that we have to actually give the name as  username and password right and now one more time   if we try to login what we are going to see is  username as admin and password as admin which   is perfect right so what we really want to do  is we want to extract out username and password   from our request.body right first of all  i'm just going to say if request.body   is not available then i'm just going to say rest  dot status code is 404 and rest dot end error   rate and return because we don't want any further  processing otherwise we are you know inside this   then what i want to do is i just want to say  that our token in this case is going to be jwt   that is the package which we are going to  import now so import jwt from json web token   jwt dot sign and i'm going to say user name is  whatever it is and i'm going to say it is admin   or not on the basis of username is in fact equal  to admin and password is in fact equal to admin   right we're just gonna just set the admit  field to true if that is a a fulfilled criteria   otherwise not and for the key i'm just gonna  go ahead and just you know be lazy about it   and just write just smash my head on the  keyboard so this way we are just creating   a signed json token which we are returning  using an api and yup if i refresh this you   can see we get a nice little token for us which  is which is a json web token and if i go ahead   and copy this whole bad boy and go to jwt.io  which can be used for decoding json web tokens   which is basically a base64 only but you know  it's still convenient so if i go ahead and paste   it here you can see that this is the data which we  have and in fact this is an admin because username   and password were both admin but if we go ahead  and try to log in with something else oops oh   i think we made sure that this is always admin so  this should be actually default value not value   add main one two three and log in and then  if we go ahead and take a look at this   what we're going to see is that this is admin  false right and we cannot really change it on   the client side because jwt tokens are  secure so first things first let's just   move from 1980s to 2020 so i'm going to say that  on click let's just make this a button first of   all on click i'm going to say summit form and what  this summit form is is that it's going to perform   a request to our backend server so i'm going  to say my response from the api is fetch api   and what do we have login right i'm gonna  say method is post our body is json.stringify   username password and again because we are  in 2020 now let's make use of the react   state with us right so i'm going to say  a similar thing for password set password   and let's just import this bad boy and finally  we can switch back to value one more time this   is username and this says password nice and easy  right one last thing which you want to do is say   on change the event should set user name to  e.target.value and a similar thing should happen   for password as well that is set password awesome  so now once we have the response from the server   we want to convert it into json response because  our server is also responding us inside json and   then we can finally take out the token by saying  rest.token because that is essentially what we   get back from the server but an object which has a  key which is the token for us right so i can just   go ahead and say that if we have in fact a token  what we what we can do is we can just go ahead and   update the message message set message is used  for you state a string which is uh empty message   you are not logged in and i can just go ahead and  say we have a message in terms of h1 at the top   right and once we have set message  with us what i can do is i can   first of all go ahead and import jwt from json web  token again because we can use a single package on   server and client as well why shouldn't we so  i'm going to say my json is json jwt dot decode   my token right and i'm going to say json i'm  going to just say welcome to json.username   and ur and i'm going to just say json dot um let's  see i think we need to wait for this oh not really   this is synchronous as well but we can just uh  you know return it as a combination of object   whose key is string and the value is also string  so yeah actually let me just go ahead and remove   this welcome json.username and you are and we're  just gonna check json.admin is true an admin otherwise not an admin that's it right else  set message something went wrong whatever all   right so once we have that in place let's just  go ahead and take a look at our homepage now   so we are we have a message you are not logged  in let's just try admin admin as the combination   we get welcome undefined and you are not an admin  fair enough so lets us first of all console.log   our json what we are getting and  let's just move to console lists oops   console click on login and we get admin  as false and that is the case i think   yeah that is because we are not really  setting the headers um to content type   application json right here because we are  transmitting json data right so we need to   make sure the backend knows that now if i click  on login yeah that's the right response now so   we see welcome admin and you are an admin right  however if i try to do something like username   something login we get welcome username something  and you are not an admin similarly if i have admin   here but the password is incorrect we have welcome  admin and you are not an admin but once we do   admin admin we are an admin right so again very  simple dumb example of jwt tokens with next.js   api um just showing you a simple use case of  that because you know you cannot really fake the   integrity of jwt tokens unless you don't  really have the key from the server and because   the key is on the server you cannot change  response now on the basis of this what you can do   is for example you can have a secret dot ts key  and what we can just do is say export default   function right here i can say const token  from request.body request is next api request request and responses next api response   right and i can say you know just take  out the admin field out of jwt dot verify   import jwt from json web token i can say token  and key right and we can just for the time being   being lazy we can just import it like that and  i can just say as an object which is having gas keys and string gas values  right so i can just say or rather   boolean as the value right in our case so  i'm just gonna say if admin is true rest.json   secret admin code 12345 right  else rest.json admin false so once we have that in place what we can  do is we can go ahead and on the client   we can just implement um a secret like um the  following so again we can have a secret message   set secret and we can just make sure this is  empty at the moment and finally what we can do   is if we have a token obviously we can say await again this whole thing actually  so i'm just going to copy this   but this time this should be secret we have a  application json and now we are just passing in   the token for the further request so this would  be our token because we already have access   to the token and then i can say if rest dot secret  is available to us secret admin code actually   i can just say set secret as  rest dot secret admin code else said secret nothing available right and i can just say secret as secret   all right so now if i go ahead and try to log  in with admin admin hit login you're going to   see we get welcome admin and you are an admin and  i guess secret one two three four five but if i   make a mistake you're gonna see that we do not  have anything available as a secret so you can   basically just go ahead and store this json token  json web token and use it for further requests   um you know a very popular approach  for authentication stuff like that   so yeah i mean that's that's pretty much  it for this quick little demonstration   hopefully this would be useful this is not really  a nexus project we have next year's projects later   on down the line if you are watching this course  on code dam where we'll create e-commerce and you   know all those blogs and fun stuff but yeah this  is just a quick dirty implementation of something   with next js and next year's api routes so that  you get a idea about how things are working   and of course you might have seen  that you know most of the thing is   react only even with year's plus the only added  advantage uh the actual good advantage is that   you know you get all these all this html right  off the box from next year's framework so yeah   that's pretty much it for this video i'm  gonna see you pretty soon in the next one   hey everyone welcome back and in this video let's  just take a look at nested routing which means   that not only you can just send people on slash  mehul but you can also send people on slash mayhew   activities activities right so how do you do that  well you see that um the basic instinct would be   that if meihul.tsx gets us to mahul then you know  maybe mayhew activities.tsx would get us there   well it's partly right but the thing is  instead of having a slash in the file name   what we're going to do is we're  going to create a folder named mehul   right and i'm going to move this mayhold.tsx  file inside this major so now what's happening   is that whenever i access slash mahul we  would be inside this folder right and any file   that is present inside this folder  would act something like you know as the   just like which is acting inside this pages folder  by that what i mean is can you guess what's going   to happen or maybe can you guess how i can access  this major file on the browser well yeah i mean   to access this first of all i have to get inside  the folder which is you know this mayhew folder   and then because this file itself is named mehul  what i have to do is write mahul one more time   now when i do that then i can only get access  to you know this thing so i'm basically doing   localhost 3000 slash mail slash mail to get to  this particular file now how do i get it on just   but with you know as the folder structure well i  can just go ahead and rename that to index right   and now if i go ahead and take a look and just  go to slash mehul that is what you're gonna get   a default file just like earlier but inside  a folder this time now what advantage does it   give us over a single file the advantage now we  have is that we can have nested routes right so   now i can create activities.tsx i can just borrow  this from here and i can say my whole activities   and what i can go ahead and do is say  that you know we have this as activities and i can go back on the home page and click on  this and you can see that we are now inside the   activities page right directly inside activities  page which is you know just sitting with our index   page as well so that's how nested routes would  work and basically you can nest it to any depth   which you want but for the most part you're not  going to need more than maybe four or five levels   of depth that's that's the max you're gonna  go for a medium to large size projects as well   so yeah that's how nested routing would  work there's also something known as dynamic   routing which we're gonna cover next because  dynamic routing is more fun than nested routing   because you get access to a number of  routes without actually caring about them   so that's all for this video i'm gonna see you  pretty soon in the next one hey everyone welcome   back and in this video we're gonna take a look at  how we can create dynamic routes in next chase and   how we can just go ahead and work with that so we  have seen how to work with nested routes but what   if you want to have a dynamic route for example  let's say you have a blog on built on next year's   which we're going to create later on so there's a  dedicated section where we create an actual blog   built with nexus so in cases like those you don't  really know um the later on slug for the blog   post right it could be anything so how do you deal  with that well for that you have dynamic routes so   let's just go ahead and let's just say i go ahead  and delete this and i create a page called fruit   right and right here what i want to do is in fact  let me just go ahead and delete this as a folder   or yeah let's just keep that so anyway because  we'll need that will make things a little bit   more clear so we have a fruit folder and now  what i want is anyone who visits something like   you know localhost 3000 whatever then fruit then  apple then this apple should be displayed on the   screen or maybe we just want to do something  with this apple but i don't really want to   hard code all the fruits with all the files  because that would be waste of resources right   so to deal with that what we have to do is we  have to create a special file in next chase which   starts with a bracket with a square bracket to be  more precise right and ends with a square bracket   so here i'm gonna write something like name dot  dsx and this could be anything in between the   brackets right it does not really matter what  matters is that you create this file with the   opening square bracket and a closing square  bracket that is very very important and this   should be just you know before the dot tsx you  don't have to you know enclose the whole file name   in square brackets just the uh the part of the  file before the extension in square brackets so   once you have that in place let's go ahead and you  know just go ahead and export a regular component   nothing fancy here i'm just going to say  h1 hello right but what's interesting   about this is once you have this in place  what this means literally is that go ahead   on fruit that is fruit and capture anything else  you write and send it to this particular file   right by that what i mean is that for example this  url which you're seeing right now and this url you   know which is anything random are going to point  at this particular file only next yes is going to   use the logic from this file for serving both  of these routes and in reality all of the routes   like this what nextgs would not serve however is  just the fruit route right so if you just go to   the fruit route it's going to send in a 404 so if  you want to make it serve that route as well you   can just go ahead and create index.tsx file or  you can maybe just try to catch all the routes   which you're going to see in the next video but   yeah for this video what we have in place  is you you have a dynamic section of uh   routing in place and mind you that this would work  works this would also works but this right here   abc section 1 and abc would not work why is that  because you see now you have actually you have   two segments not one and you're just listening  for the one segment with the square brackets   right so if you go ahead and take a look at abc  and one two three here you're gonna see we get   a 404 we get a 404 on this page again this is  because two segments of url and would not work   right so how would you make um you know how  would you catch this thing well what you can   do is instead of creating this as a file let me  just go ahead and or maybe just keep it right   like that let me just go ahead and create  a folder which is name now now again just   like i said this could be anything and  inside this i create another thing which is   something like sub name now what's going to happen  is now we're going to start catching these guys   right because now we have a dynamic segment we  have first of all we have fruit then we have a   part of dynamic segment then we have another part  of dynamic segment which we can now catch so if i   go ahead and refresh it now you're going to see we  are able to catch it now but what this would have   resulted in is that we would have lost the ability  to catch the first dynamic segment now so anything   on the first dynamic segment stops working so  how do you make that work as well well all you   have to do is just create an index.tsx file here  because remember when you're accessing just this   name segment what next is looking for is basically  the index.dsx file either a name.tsx file which is   not really there because now we have a folder  or this index.tsx file which we looked in the   last video as well how the routing really worked  so once we have this index.tsx file you can see   when i go to fruit name that's it just the  namepad that is the first dynamic segment   it's going to fall back to the index.dsx file  so now if i go ahead and you know hello from   first segment and if i go  ahead and pick this first url   hit it you're gonna see we get hello from first  segment however if i pick this url with two   segments we're gonna get just hello which is  the message from our sub name component right   now what's the essence of this name and sub  name and why do we have named it like that   well it does not really matter but the essence  for the names is that you can use these properties   you can use these names to extract out the  route you are accessing that is these values   jd sfh whatever that is section 1 abc so you can  have name as section 1 in your code and sub name   as abc in your code right we're going to take a  look at how we can do that with the use router   hook but that's that's the essence of the  name that's why i wanted to tell you that   so yeah i mean that's pretty much it for the  dynamic part that's um as much you're going to   need for the most part this is what you're  gonna need for dynamic things right because   you won't be going a lot beyond this unless  you have very special use cases this covers   almost everything you're gonna need with next js  routing so that's all for this video i'm gonna   see you pretty soon in the next one hey everyone  welcome back and in this video let's just take a   look at the used router hook which i was talking  about in the last one and this hook is basically   you can think of something which you  can use to programmatically control   navigation and access these parameters stuff  like that in nexus right so what you have to do   is just go ahead and write const router is  use router oops not use reducer but use router   and i have no idea why the hell autocomplete  doesn't work for next js modules but that's   uh all we have and this is you're gonna import it  like this right so once you have the router with   you what's going to happen is that this router  contains a bunch of useful things right so if you   just go ahead and console log this router object  right here what you're gonna see is that if i go   to we are on the sub name right so if i go to the  console now what's going to happen is that we get   this object twice because you know it might have  rendered twice that's why we have two console lock   statements but that does not really matter a lot  so you see that this is this is what this router   object contains so it contains aspart which is  our real path of the location we have the back   which is which could be used to programmatically  send the user back in history we also have base   path you know some common things um we also have  components which is not you know something which   you should use directly but yeah it is there  we have events we have the prefetch thing for   pre-fetching the urls the interesting part is  this thing we have the query object with us   so you see next yes what's going to do it's going  to split it's going to sort of explode your url   your dynamic url on the basis of how and what were  the dynamic paths so you see that we have a file   structure of fruit then a folder named dynamically  named name and then a dynamic file named sub name   so next yes what it did is broke the query that is  broker url into two parts the name is section one   and some name is abc which it picked up from the  url so if you go to abcd what's going to happen   is you're going to get a similar thing in the  query name section 1 and some name is abcd now   right so you can pretty much go ahead and  write here anything and that is what going   to what's going to happen so what you can do  essentially is you can just go ahead and print out   router.query.name and router.query.subname  right here and see that these this sub name   matches with this that is the file name and this  name matches with this right so you can name them   anything else you can name it even name it mahul  then you're going to write router.query.mehul here   instead of subname so once you do that you can see  pretty much we start getting our messages here so   i can say hello to name and i can get hello  hello abcd and i can also name you know hello   there oops hello there there you are right so  you see that then we get there later on so we   have hello as the first and there as the next  one so this is what the use router does right   one thing which is very important for production  level applications is that you use routers   sometimes would not work as you would expect so  you see that on its first render the query object   is actually empty right the reason for that is  that next.js next.js is going to make the query   object empty if you do not have any prefetching  conditions by prefetching conditions i mean that   if you do not have any uh you know things like  get server side props or get static props in place   so we're gonna discuss about get static props and  get server side props in the later section it is   very important and very useful concept of next  year's but let's not get ahead of ourselves um   just just know how you're gonna fix that  is you're gonna know that in the get static   props video but yeah this is something which is  easily fixable so anyway that's how you're gonna   make use of use router now i can just go ahead  and you know just create a button here on click   which takes take me home which is something like  this right and what i want to do is when i fire   this when i click on this button router should go  to the home page right so now you have a couple   of ways to do that firstly you have a push and  then you have a replace now let's just go ahead   home and take a look at what both of them does  let's just go ahead and take a look at push   i'm going to give it just a slash because that's  that's where we want to go right so router.push   slash that's it so if i click on this you can see  that we immediately go back to home now what push   did is that it pushed the home on to the history  of stack of history right by stack of history   what i mean is that when i click on back button  i'll go back to the page so if i click it again   i'm on the homepage i click back i'm back to  that page what replace would do however is it   would replace that particular page from the stack  history altogether by that what i mean is that now   when i go ahead and click on this and if i try to  click back i would not go back on the same page   now you might think i'm there but let's just try  this with something like um you know let me just   go ahead and open this in a new tab and now let  me just go ahead and click this so i'm at the home   page we are using replace and if i click on this  back you see i came back to my new tab and not   the previous page because that previous page was  replaced in the history with the home page so this   is the difference between the router dot um you  know router dot push and router dot replace pages   so yeah that's pretty much it for what you're  gonna need for use router that's all you're   gonna need for the most part the router.query and  the dynamic pushing of the routes here and there   on buttons i would say personally try to use link  component as much as you can because it's good   for seo it's good for accessibility and people  can actually see that there they are about to   click a link but for places like where you need  programmatic navigation router is unbeatable   so yeah that's pretty much it for this video  i'm gonna see you pretty soon in the next one   hey everyone welcome back and in  this video let's just take a look at   catch all routes in next year's now just like  i told you how you can create you know just the   name and sub name and all that thing you can  have hello there just like that now how about   you want to go three levels deep right so you can  easily see that if you are doing it in the file   structure it can get a little bit messy as you  create more and more folders you know especially   in cases when you don't know the depth of the  link so in that case you can literally never   guess how many folders you need here so for that  case what you have is you have something known as   catch all routes by that what i mean is let me  just go ahead and delete this whole name folder   right and just create a single file inside this  fruit which is again starting and ending with   square bracket but this time  it would be something like   name but with three dots in front of it and if  you observe it carefully it's sort of like how we   um you know try to accept an number of arguments  in a function as an array in javascript   so if you have something like you know function  sum and you do something like this console.log and if you just go ahead and call this as one  two three four five what's going to happen   is that it's going to console log this as  something like this right so you have an   array of values which were passed so anyway  with this optional uh not really optional   with the sketch all route system what you can do  is you can just say export default function um my fruit anything does not really matter  a lot what we can do is we can just go   ahead and first of all make use of  router so that we can actually see   the routes which we are talking about so import  use router from next router and then finally we   can go here and just return h1 hello but what we  want is we want to console log the router to it   query right because this is where the magic  would happen so once we have that in place   let's just go back and try to refresh this page  and you can see that we get hello even though   we were three levels uh nested and in the console  if we check the router.console you can see we got   three values inside the name key now because  name was our destructured uh you know how we   destructure these values and we got hello there  and dsfd whatever it was in the specific order of   their occurrence right so the first one was hello  the first element is hello and so on and so forth   so i can go down and i can basically you know  try one two three four five six seven eight nine   ten and you're gonna see that you get pretty much  the same thing all the way down right so you start   with one and all the way to 10 in the specific  order that is that is like important thing   so yeah i mean this is how you're gonna catch  all the routes in a particular directory   or maybe you know if you are brave enough  just place this inside your root directory   the other thing is optionally catching all the  routes by that what next js really means is that   just like we saw that you know if you just  go to slash food it's going to throw you 404   but in a lot of cases you might just want this  file to cover this use case as well instead of   like manually creating index.jsx and then having  the same code in place for that as well so for   those cases what you can do is you can go ahead  and have another set of brackets just like that   once you have that in place if you go ahead and  refresh this you're going to see that now next   yes also catches the base of your um you know the  base domain inside this particular file itself   one very important thing to note here is that  you can see this time the query object is empty   it does not have the name key with an empty  array the object itself is empty right so   that is an important thing which you should  remember when you are using optional catch all   this might change this behavior might change  in future but this is how it is right now   so you can see now if you go to depth it starts  working just like you're gonna expect it to   so yeah i mean that's that's that's pretty much it  so that's how you're going to create dynamically   dynamic routes with optional path  length and be done with it and with   just have a single file to handle it i mean it  could be very useful for a lot of things right   so yeah that's pretty much it for this  video i'm gonna see you pretty soon   in the next one hey everyone welcome back and  in this video let's just take a quick look at   a 404 page you can create a next chase now there's  whole other domain for custom pages as well but   404 is the most common you know use case  of error pages so right now you see that   if i go to a domain or go to a path like this  we get this page now obviously your business   requirements might be different but to create  a specific a different 404 page all you have   to do is just go ahead and inside the directory  create a 404.tsx file that is you know just 404.   now remember this is this does not mean that  you can create files for different status codes   as well this 404.esx or 404.js whatever you are  creating depending on your uh project structure   this file name is actually hard coded into next.js  right so you just cannot create you know 405 and   if there's a 405 from error from the server  that would be sub no that won't how it work   so just go ahead and export default function uh  my photo four and i'll just return h1 404 right   simple as that now if i go ahead and refresh this  you can see that now i get a different 404 that   is something which i wrote simple as that you  know just again yet another react component and   yeah that's that's pretty much it for this video  because i won't really board you with something   which is not really required so that's all for  this video i'm gonna see you in the next one   hey everyone welcome back and in this video let's  just finally start with one of the most important   things in next year's that is the get static  props function now what this function really   is is to explain this i just have to go ahead  and create let's say a file um i'm going to say   maybe dynamic dot tsx why not let's just go ahead  and create a function which is just dynamic and   return h1 dynam nothing dynamic about that as of  now but what we're going to do now is we're going   to export another function from this file which is  not going to be a default export because obviously   we did export a default function but that is  going to be a get static props function so i'm   going to say export const get static props now  you can type this if you want get static props   if you want that's that's where the type would  shine and it would just correct us with the   things and you're gonna have something known as  the context for this function right being passed   to you now you can clearly see it throws me a  warning an error whatever it is that we need   to return an object from this particular function  right so let's just go ahead and do that exactly   i'm going to return an object but it needs  more than an object it needs a props property   which should be an object so for now i'm just  going to say my favorite number is 4 like that   right i'm not making use of this  context doing nothing at all   what this does however is before your function is  executed nextgs is going to execute this function   right here in terms of server right so this  function executes on server you can think on   execution on server right and this function right  here is executed obviously on client as well as on   server but for the most part you can think of this  that next yes it's going to execute this on server   take whatever the return value is take the props  from that return value thing and inject that   object as props inside your component right so  now if you try to say dynamic number is you know   props dot my fave number what's going to happen  really is because this object has been dynamically   inserted into this page you're going to see a 4  here so now if i go back and go to dynamic hit   enter you can see dynamic number is 4. if i go  ahead and change this to 5 and refresh you're   going to see we get a dynamic number 5 right  and you can clearly see that if i go to the page   source dynamic number and you can see that this is  this thing is actually present in the source code   itself you can see the 5 is here right it's not  injected on the client by some javascript magic   it's actually rendered on the you know on the back  end by next year's and is sent to the client but   but you can see clearly that next year actually in  checks my favorite number as five prop as well in   the page now why is that well one of the reasons  you can think of is that suppose if you are coming   to this page from another page  then what next chase really do   is that um you know it just it instead of getting  this whole html to to the client it will just get   the updated props and the template for the page  and would dynamically construct the page right   because that is much cheaper than you know just  completely navigating to a different page but for   the most part what you have to remember is that  you can see that the get static props is actually   helping you to have dynamic content on your page  now you might say that this is not really dynamic   but what if i told you that you can actually  require the file system here right which is   the node thing right so if i have something like  um i don't know let's just say we have a public   robots.txt file right i am a file something  like that now if i go ahead and say   my favorite number is if it's fs dot read  file sync that is synchronously read file   and if i go back a directory into public  robots.txt and i want to read it in udf mode   and just do that what's going  to happen if i refresh it now   we get no file or folder because we might  just need to have path here as well well   things might get a little bit you know ugly  for setting up the context but but don't join name i think it should not be directly named  it should be process.cwd and once we do that   what's going to happen is it's going to start  from the root directory so we just need public and   yeah things like that let me see what's really  going wrong what we are missing path.join   it's fine it's fine as well my favorite number  is txt right so now you can directly see that   i get imf file i can go ahead inside this i  can edit add some more dots hit save refresh   we get dynamic content again you might think  that this is not truly dynamic and that's fine   but what's fascinating about this is  that just what i'm going to show you now   with props it actually accepts a revalidate  parameter as well that's it for this video   in the next one we're gonna see a revalidate  parameter which is extremely useful in next years   and especially inside the get static props thing  so that would be all i'm gonna see you pretty soon   in the next one all right everyone now we're  gonna take a look at the revalidate parameter   in xjs and what this parameter is is that  it allows you to do something amazing   what happens when you use a page page like  this what happens is that when you push it   to production when you create the next shares  build what's going to happen is that it's   going to create a static it's going to create a  static export of this particular page you know   just like with the contents of this and be done  with it right next year's now whenever you visit   the slash dynamic it's just going to pick up that  particular file which is it has statically created   from the file system and throw it on you  it does not bother what's in that file   nothing at all but when you specify a special  parameter called revalidate and with let's say 10   what's going to happen is that things become  interesting now in 10 seconds if there's a request   to the server in every 10 seconds if there's  a request to the server next yes is going to   try it's not saying that it would it's going to  try to recreate this page based on updated data   by that what i mean is that it's going to run the  get static props function on the server for this   page and try to update the the static file which  it has for this particular page and this only   works on production so i cannot really show you  on the local host for the demo because revalidate   is useless on the local host because um you know  get static props on local host always runs right   just for you know development reasons because  it would be very hard if it's just running once   so on production let's just take a look at this  this website this nice little website you can see   i can refresh this as many times as i want and  these numbers right here are not changing right   because if you take a look inside the source as  well you can see 448 is actually a written number   right here inside html and it is actually stored  on the as on the server as a static html file   but let me just go ahead on this github issue  now and focus on the 448 you can see that i have   already given it a thumbs up let me go ahead and  remove this so it's 447 now if i try to refresh it   you can see it's not updating it's very important  you see this this you can see that after some time   it updates to match your number right and that  is that is great because the guy who has actually   created this page the repo when it was built  next you do not have to redeploy it to update   this number that is you do not have to recreate  the whole static all the static files next js   already did that on the basis of this revalidate  parameter so this is what the revalidate parameter   usually would do that is it would help you to  refresh the pages which you think might change   but not as frequent right the best example for  this could be blog post so you might want to   throw in a revalidate there but maybe of 60  minutes or two or three hours right because   once you have the static built of the blog post  it might probably won't really change especially   if the blog is very old so yeah that's how  the evaluated parameter works in a nutshell   um and that's how it works really so that would  be all for this video i'm gonna see you pretty   soon in the next one hey everyone welcome back  and in this video let's just take a look at   another function which is very important which  works very closely with get static props and that   is get static parts now let's just go ahead inside  this fruit and let me just go ahead and name it   very simply just name and let me just go ahead and  paste it right here um let's just get rid of this   and let's just make this math.random why not  right we have the props and we have let's say oops   we have let's say hello props dot my favorite  number nothing fancy the most boring application   on the planet right now but what we are gonna  learn about is not very boring because we're   gonna export another function from this file that  would be named get static paths and we can type   it with get static parts right here right which  is going to help us with some of the types so it   returns an async function one more time and you  can directly see it's complaining us with um you   know a return type of something like this so what  do we really have to return from this function   is an object first things first this object  should have paths within itself firstly   so we have a parts which is an array we're  gonna see what should go inside this array   and then another another property a segment  property which is a fallback right so i'm gonna   specify the fallback to false first of all now  there are a couple of things which we need to do   first of all in this in this before we actually  learn get static paths the first thing is that   whenever you implement get static props inside  a dynamic file that is you know a file with the   square brackets around it you have to implement  this function anyway get static parts right   get static props would work fine on its own only  inside a page like this which is a standalone page   right dynamic.esx is a standalone page if  you have a dynamic page you have to get   you have to use get static parts and  it will make sense why you need that   you need this function because this function  specifies when the static props should run right   now first things first get static props runs  at build time right it does not does not   run at runtime by that what i mean is when  you're gonna push this application to production   before anyone sees your application live getstatic  props would be run for all the pages and you know   all the html files would be computed all the json  files would be computed and they would be stored   on the file system that is why it works perfectly  fine for you know static files like this   you know with with no square brackets with them  but with files like these they have a problem   because static props runs at build time you  cannot create infinite number of files obviously   right so the second solution is to specify to  get static props that is is to specify to next js   on which files you want to run this static  props on right i hope this makes sense so far   so how do you do that well get static parts  exactly does that and it takes two values for this   we're gonna ignore the fallback false for now just  bear with me um this parts think what this is is   it contains the information um on which particular  routes you should run the static props on   so what do i mean by that i'm going to say  params is an object right which contains in our   case it will just contain name because name is the  dynamic part and i say that name is hello firstly   another object is name is world and not really  like this inside a different object itself right   so you can clearly see what's happening here uh  let me just go ahead and see if i can make some   space i don't really think i can but anyway you  can clearly see what's happening here i have an   object params with a name of hello another object  with the name of world and i have a fallback of   false this is important to remember but you can  forget about this for now so what would happen   is that when you push it on production nexus is  gonna visit these two particular urls it's gonna   it's going to say let me just go ahead and  fetch localhost 3000 fruit hello take the output store it on the disk and i'm going gonna go ahead  and take the output world and store it on the disk   and done that's it case closed start and done  any other route any other route which is here   it's it is going to be discarded as 404 let's see  so now if i go to fruit and hello you can see it   works fine if i go to world you can see it works  fine but if i go to one you can see we get our   404 which is the ugliest 404 ever but we can just  delete it and if i refresh this you see we get 404   on a page which was supposed to be dynamic right  so how does how why did that happen let me just go   you go through over this thing one more time why  did that happen you can see that we are very well   inside the dynamic segment itself our page file  name is also dynamic so this should technically   render this but it did not do that because we  have a get static paths get static paths when   has a fallback of false defines that this paths  array would be the only thing that would be   permissible so as to speak so if i go ahead and  replace this hello with one now if i go ahead   and try to visit this url what you're gonna see  is this works now right because i just added it   to be permissible but you're gonna ask me that hey  mijo doesn't that really defeat the whole purpose   of the dynamic thing well i mean it might for you  but for some cases this is this is better right   for example again here you can access access  all the node stuff that is you can make db   calls you can access file system you can do  whatever you want to do and finally you can   create this object on the build time to have  a number of parameters have a number of things   and they would all be fetched and dynamically  their static equivalence would be created right   but what i did not really tell you about is the  fallback option as true by fallback true what's   going to happen is that this thing is still  going to happen you know when you're building   build start when the build starts next yes  is going to visit this hello right here   next chest is going to visit this world right  here but it will not be done right what's   going to happen instead is that if you have  a fallback of true here it is still open to to any other url as well right it is still  open to any other url but it would not   statically create the html content of it on the  build time right so if you go ahead and visit   this later on what's going to happen is that  it's going to try to run this on the server now   this is happening on the server now right this  is not happening as static nothing is nothing   happening on the static part this would run on  the server that is inside the get static props   it would fire this function for this particular  um slug or whatever you want to call you can   see in the context you can see that we have the  params property which is containing the you know   this particular thing so you can have  context.params.name in our case and this would   be name for us so you can fetch make a db call  whatever it is and if the result is present you   can return a valid object next chase wouldn't then  use that get static props just like it has before   to inject it and show the page so in this case  it would be call the get static props on servo   um you know render the page and then in background  next js would add this to the paths list   and would store it locally on  the file system for faster access right by that what we mean is the next time  the next time you visit this url right here   the next time you visit this url right here  what's going to happen is directly send the output   from file because we have already done all of  this and we have stored it on the file system   for faster access only this particular  specific page if you change another page   if you change it to another page hold  this whole of this thing repeats again   right so yeah i mean that is how git static  paths in next chase work that is how the   paths property work that's how the fallback works  one last thing if you have the fallback as true   what's going to happen is that next js is not  going to wait for this get static props to finish   by that what i mean is if you are visiting this  for the first time what's going to happen is next   js is immediately going to serve you this page  with the props being empty right and it's going to   you know just just um fill this props  object later on so how would you know that   it is waiting for get static props to run  on the server well you have to first of all   import the router like this you have to say  something like if router dot is fallback that   is it is loading on the server you can just  return h1 loading something like this right   and be done with it so now if i go ahead and  visit a page something like hellofroot1 you   can see i get loading for a bunch of seconds for  this page url as well for this page url as well   for a bunch of second and then once the props  are injected you know the props is available   to us this is fallback property becomes false  automatically next year's handles that for us and   we render our actual component now when you are on  production the first time you would visit this url   you're gonna see loading and then hello but the  subsequent refreshes you're gonna directly see   hello right because next.js now has the output  from the file system itself so you do not have   to wait or you do not have to see loading again  but in development you're going to see loading   every time because just like i said in development  next chairs for development purposes would fire   get static props every single time right so that  means that it would also become true every single   time and you're gonna see loading every single  time but don't worry about that in production   you're just gonna see it for the first time  and on the subsequent dynamic builds of this   url you're just gonna see the page statically so  yeah i mean that's pretty much it for get static   parts that's all you really need to know about  this know about this that the first thing is   it is absolutely necessary when you're using  dynamic routes the second thing is about the   fallback property what false means what true means  false really restricts your domain of this thing   and true means that anything is allowed but that  would have to go through to get static props   and yeah i mean in case of false nexus would  pre-render all these routes and you're gonna   not get is fallback for the pre-rendered routes  but for anything else it's going to you know just   send it to the get static props and wait for it  and if it is false that is the fallback is false   that just means that you are fixed with the number  of routes which you have here and this is fallback   never run anyway for any route because if it is  not present here then you're going to get a 404   so yeah whoo that's basically all you need to  know about get static paths get static props and   dynamic files there's one more thing which is  left that is the get server side props which is   essentially having your own server call on every  route and is usually said to be you know something   of a not really a bad practice but something  which you should avoid if you could avoid   so yeah that's pretty much it for this video i'm  gonna see you in the next one hey everyone welcome   back and in this video what we're gonna take a  look at is the get server side props now there's   another function which is known as get server  side props let me just go ahead back go back to   the dynamic thing and i'm going to export const  get server side props and get server side props   is the type for this and again we have the  context with us which you can monitor for more   values right you can see we have a actually um  interesting things this time with this but anyway   what we have here is that again we have to return  the actual props right and you could have pretty   much my favorite number again as math.random it  does not really matter the thing which matters is   that get server-side props is going to run  always right which is why it is usually um   you know just said that if you can go ahead and  make your code not use server side props that   is better the reason for this is that get server  side props is called always on every page request even on production right so just like we saw  that next years could actually create static   bundles out of these files stacktech.html pages  that is not going to be possible when you're   using it server side props on on a single page  right so if you're using git server side props on   this page next js is not going to create a static  um dynamic.html file on its file system to serve   it faster because you never know what you might  return inside the props that is the whole purpose   of get server side props it adds a layer of  dynamic rendering on the on the react framework to   be honest this is what we wanted this is what we  always wanted with next years right that it allows   you to render server side javascript dynamically  this is the essence of server side javascript   right but when we have finally discovered it i'm  discouraging you to use it why is that because   when you use get server side props you are calling  a node server on every request that means you   get no caching benefits that means your request  would be slower to the clients because it has to   uh you know go all the way back to your server to  be executed so this is pretty much in cases where   you absolutely cannot afford to have even  the slightest delay like you know instead in   um inside of get static props static props we can  have a revalidate parameter here right revalidate1   which is going to have some sort of static data  but within a certain time frame it's going to   update that but with get server side props  we do not have anything like that so this is   very much useful in case you want to create  a real-time dashboard or stuff like that   where latency would be absolutely disaster on  page updates or page refreshes something like that   so yeah i mean that is pretty much the  whole purpose of get server side props   i would say to almost always never use it unless  you absolutely need it because you lose a lot of   static optimization benefits when you use  that so yeah it exists as a tool as a thing   if you need it that is great but try to avoid this  in your application logic try to figure out the   logic where you can use this where you can avoid  using this get static props is the best you know   and you can even use it as a dynamic thing now  with the revalidate parameters so that's awesome   but yeah so that's pretty much it for this video  i'm gonna see you pretty soon in the next one   hey everyone welcome to another next chairs course  in this course we'll be learning about advanced   sides of next year's so if you're somebody who's  new to nexus and do not even know what next year   says this is probably not the course for you you  can start with next years by going to learning   paths and opening the next year's mastery which is  going to give you access to a complete breakdown   of how to begin with next shares and spoiler  alert next is almost like react right so if   you have been a react developer you're good enough  to start with next year's but again this is not a   starting course this is more of an advanced side  of course i'll be skipping over a lot of details   which we have already covered in the basic courses  so do not expect those details in this one so   let's get started without wasting any time from  the next video onwards we're going to be picking   cherry picking some difficult to understand  topics and i'm going to be breaking them into   simpler concepts so that we are able to understand  how that thing exactly works so that will be all   for this video i'm gonna see you in the next  one pretty soon hey everyone welcome back   and in this video let us just go ahead and take  a look at environment variables and how to manage   them in next year's application i have already  created an app so i'm assuming you already have   you're already inside an application so this is a  very simple application hello world you know the   server is not running let's just do a yarn dev  here real quick and if you go to localhost 3000   you're going to see the website would work just  fine now what do you want to do first of all is   you want to understand what environment variables  are exactly what happens now is that let's just   take example of development and production right  so if you are developing a particular application   you would have a lot of software's either local  or on an infrastructure which is not supposed to   receive very high volume of traffic right we also  call this sometimes a staging so development work   happens either on either locally or on staging  production work happens well on production servers   which are you know uh configured for high  loads and high availability and all that stuff   often times when you are iterating and  developing and doing all that stuff   not only is it uh a better choice to have a  separate server but sometimes it is actually   impossible to have production server access  because if they are guarded by uh firewalls   or you know if uh your main application is part of  a network which does not permit outside connection   so there could be a lot of reason so the way you  manage those external resources is that you keep   your application stateless about them that  means your application code this code right here   does not matter if it's react or you know no chase  logic or anything which we'll see in a couple of   videos on server side props and all that stuff  your application code should not be aware about   where it is running right that is the  goal and how do you make sure of that   you abstract away the important details the  important information of production or development   in certain environment variables  which come from the environment itself   just like the name suggests that if you're  running in a development environment   that means if you're running on a local system  or a less powered machine you're testing stuff   the variables a few variables are filled  in by the environment not by your code   similarly for production so for production you  might have a large i don't know like um 16 gb ram   1tb ssd mongodb i don't know if that is  even a good configuration for a database   like that but you can have an instance  for that right on a development you might   want because you know you know that traffic  won't be a lot so you might have a 1gb 50 gb ssd right so how do you convey the  connection points that is the connection   url because you know if you're connecting  with [ __ ] you're gonna probably do   something like mongoose.connect if you're  using mongoose and then mongodb localhost   and then the port number and then basically the  you know the name of the database so how do you   do this well you can see right here this is a  stateful path that means your code should be aware   it's it's not technically stateful i'm actually  using the wrong word it's more about that your you   have hard-coded uh your um you know environment  sort of here so what you eventually want to do   is you want this to bring you want to bring this  from environment that is process.env and then you   probably want something like um mongodb connection  url right you want to do something like this   so how do you make sure that when you ship this  code on production when you ship this correctly   this environment these environment variables are  automatically populated so you do that with the   help of next year's internal support for local  and production and development environment and   let's discuss all of that so i'm going to go  ahead and explain that to you by starting off   by creating.env.local file and the moment i do  that you're gonna see if you're using vs code   you're gonna see this gets dim and the reason it  gets dim is because this is automatically added   by next shares in the git ignore file and there's  a good reason for this now i'm gonna come to the   reason later on let's just discuss about what  this thing does first of all so let's just   say i'm gonna add a secret variable right and  i'm gonna just put this value as codedam.com   right so secret variable is now a code that holds  a codename.com variable value but how do you   access it well i actually just showed you how you  access it so what you can do is uh right here you   can say console.log or maybe let's not do here  because that might confuse you so let's just do export function gets our site  props and you can just return   this has empty and you can just console.log dot process.enb.c variable right now if you go  ahead and take a look at this actually if i go   ahead and uh you know refresh this you're gonna  see that you actually get undefined now the reason   for that is because nextjs does not use javascript  to include these files these variables they are   done before next year starts the server which  is a good thing why because well you know you   remove the overhead of including the environment  file with javascript so that means if anytime you   are making a change to your environment  file you gotta restart your server right   so that's that's one thing so once you do  that and refresh it then you're gonna see   now you get coded.com as the console.log now  remember that uh you know we are obviously   working right now dot env dot local file but just  a couple of quick points if you try to do it here   a few observations you will be able to make  so let's just do uh you know env value just to   separate that and i'm going to do process dot  env dot secret variable right now you know that   because you're using next js this guy this  function is going to run both on server and   on client right why because servo means server  side rendering and client well means hydration   right because next react would try to hydrate  the tree in order to have you know see if we   have any event listeners or anything unless you of  course opt out of that manually but right now it's   enabled so what nextjs does is that technically  on the browser you have nothing as such process   but nexus would polyfill that for you and this  would be available as an object however this   value right here will not be accessible on browser  of course of course you don't want this value to   be accessible on browser right because we will be  storing stuff like db host um you know production   dot mongodb your whole string and then db username  and db password so you of course don't want that   to be available on the browser but anyway let's  just confirm if that is the case or not so i'm   going to go ahead and refresh it here you can see  the env value which we get in the node terminal   remember this is the node terminal this is  the back end it's not the front end is correct   coded.com but if you go to the console here on  the front end i think i have some search term   you can see on the front end it's undefined right  if i refresh it again you're going to see back in   gives us the correct value the front end does  not so there's obviously just like i said a   good explanation why nextgs will not pre-fill or  you know just supply the variables to front-end   now with that being done of course there could be  times when you want uh variables to be available   on front-end as well right because let's say  you have a client-side api and you want to   have a token or a secret key for example a  common use case i can think of is recaptcha   so the way you do that is you do include next  underscore public right and i think that's it   and then whatever you want to name this this  is a mandatory syntax this is hard coded into   next year's framework so you have to include that  there is no uh you know magical reason for this   you just need this because the framework says you  to do that and i can say my first browser variable   and you can give you know underscores there i just  did not feel like that and you can say some value   yeah i'm bad at not only just naming variables but  putting values inside them as well so once you do   that now you can do a process dot env dot this  thing and of course just like i said you gotta   restart the terminal because well nexus needs that  and once you refresh this you're gonna see once   the page compiles you get some value on server  obviously because that's a environment variable   but you also get some value on client right so  that means whenever you prefix your variable   with next underscore public underscore your  variable gets exposed on the browser front   so this is how you work with what this is  basically the introduction to environment   variables how you work with them in xjs and  how the dot e and v dot local file populates   variables inside your node process and inside  the browser in the next video we're going to be   seeing a little bit more on the management of  the environment variables and some conventions   you should keep in mind so that is all for  this one i'm gonna see you in the next video   hey everyone welcome back and in this video  let's just go ahead and take a look at a little   bit of management of this dot enb local file and a  couple of other files which are interesting to us   now what nexus does is that it comes hard coded  with three files dot env.local.env.development development and dot env dot production   now talking about the convention what you can  think of is that these two files these files   as templates right now these files can consist of  you know non-secret variables as well if you want   because you can ship them on um you know version  control that is git or github whatever you want to   you know do uh it's not like you you can  ship obviously you can ship.env.local as well   but the convention the good practice is  to ship these two files and to have only   the secrets which you know not are not really  secrets but only the variables which you can   afford to make public or to make accessible  to anyone for example some stripe client key   right which you can access both on server  and on client on the browser so that could be   inside this particular file this file however  what next chase recommends is that you should have   specific values and should be available only on  your local systems for example database passwords   right for example stripe secret key so stuff like  this this should not be on the version control   system this should not be uh you know in the  pro in the deployment pipeline this file should   be individually present on the production servers  as well as you can create it for yourself on your   local systems because you know when you're working  on local just like i said in the last video   your staging passwords would be different  from production service passwords right and   your uh for example stripe mode stripe would all  obviously be operating into the development mode   so you're gonna have a little bit of different  values so that's better to have different value   depending on different environments however  let's talk about how next year streets   if you have all these three files present so i'm  gonna go ahead and create dot enb dot development   and dot env oops dot env.production here and  i'm gonna create a new variable i'm gonna say   uh specificity check zero right dot local get  zero development gets one and production gets two   so if i go ahead and right now just to uh check  here and say specificity check what do you think   would console log zero one or two let's see so  you know obviously you can make sense of that   you won't really get the production console log  because well we are not running it on production   so it's it's more of a choice between 0 and 1. so  if i refresh this page you're going to see that we   get a value of 0 and why is that because whatever  variables whatever values which are present in   the dot env.local file will override anything  else right they will override the development   or production depending on where you're running it  so of course if it does not has this dot env.local   does not has this and if you refresh restart the  server again and refresh the page you're gonna see   that you get one which is the uh fallback value  right so you get the one but the moment you add it   something else it will fall back or it will  consider enb.local as the primary store   how you gonna ship this env.local to production  you won't right you won't ship this file to   production you would either just code it once and  leave it right there on the production server and   if you want to update it you have to manually  update it or a better way for production is   to you know probably not have dot env dot local at  all and maybe use something like uh for example if   you're running aws lambdas you know that you  know you can specify environment variables   directly from the interface so maybe you can use  something like that it depends on how you want to   execute it on production but on development  well nexus is going to do that job for you   so what about this dot erv dot production and  development as you might have guessed by now   next just detects what you are running where  you are running next yes right now if it is   development it's going to include this file if  it is production it's going to include this file   and how does it detect that well it uses process  dot env.node enb variable which you can see in   the source code of nexus as well i just open the  node modules folder and just search for dot enb   and you can you know i won't really want you to  make sense of this but this is pretty much a place   where i believe it's trying to figure out the name  of the file right so what you can see is that it   tries to play with the process.dnv.nodenv  it might have set this variable value   depending on how you are building the project as  well right if you're building it in a production   mode it's going to be set as production if you're  building a development it might not be said at all   so so on and so forth you don't really have to  worry about that but yeah that's pretty much it   on uh how you're gonna set some environments and  get started with that stuff in next year's so that   will be all for this video i'm gonna see you in  the next one hey everyone welcome back and in this   video let's just go ahead and take a look at and  take a good look at actually what gets server side   props is now we have uh you know you might have  some experience some knowledge of gets oversight   props what it does and all that stuff but let's  just get into depth of what exactly this does   so first things first what exactly  this server side prop function is   well you see that the architecture of next  shares is as follows next year says that hey   whatever page you want visible you want to live  on your domain for example if you own codedam.com   then if you want to have something which the user  can see something meaningful which the user can   see on abc and 123 or maybe like let's just keep  it abcdef for now what you got to do is you got to   go to pages directory and create a file called  abcdef.jsx or js right now what happens when a   person visits this url is that internally if this  is not a static build assuming there's a next   year server running if this is not a static  build nextgs is going to check if this file   if this file has a function called get server side  props now this might be a little bit misleading   because it does not check that for every single  request when you're building your application   it's going to mark certain routes which uh have  this function right so when you're building an   xjs app what's going to do it's going to see  that okay abcdef uses this get server side props   therefore i'm gonna be a little bit more  careful whenever somebody visits this   and how is next year's careful is that whenever  somebody visits this it's gonna not immediately   surf the html page to the user it's gonna  first of all run this function whatever it   this function includes whatever instructions  this includes and then it's gonna render the page   right i hope that's clear if you do not have this  for example if we have a route let's say this was   dynamic right and this is static if we have  this route which has no get server side props   so what's going to happen when you build  the application nexus is going to mark as   uh you know server side rendering it's going to  mark the dynamic page a server-side rendering   and it's gonna just say mark as uh static  completely static completely static or you know   i'm assuming that there is no get static props  as well here so mark is completely static there   we go so whenever somebody was a static nexus is  gonna immediately throw uh the already generated   page or already generated html file  uh which your server already has right   but with dynamic it's gonna say wait a minute we  also have a javascript some node.js logic to run   so let's run that first and then let's just go  ahead and run the whole generation of the page   again in javascript right so you are running a  lot of lot of javascript when you are using it   server side prompts on every single request so  what happens exactly is that you always on a   particular request on a dynamic request you always  run javascript before actually rendering the page   it's very similar to how you know back in the  days php would work so if you have a php file   what you're going to do is that you know you're  going to have some php syntax like this and then   maybe you can connect to db fetch rows and then  display data right that's how you're going to   do in php similarly if you want to do a similar  behavior in next chairs what you can do is you can   um you know right here inside kits oversight props  you can have this function as async first of all   and then you can say something  like uh db is await connect to db   right rows db.fetch rows whatever this is  just dummy data and then finally you know   send the rows to your react component as props  then you receive the props right here and you   know you destructure the rows from props and then  maybe you map it and render it and all that stuff   when that happens next js is gonna execute this  particular javascript piece piece of javascript   and it's gonna create static html out of it and  then it's gonna send it to the client right on   every single request this function is executing on  every single one of them so that's that's that's   powerful but that is also resource extensive  right because now you are running node.js on every   single request if you are uh you know coming from  express background or express shares you know that   what we do usually is express uh we usually  throw express dot static and then you know   just serve static files directly and then maybe  if you have a api route for example app.app.post you know something like that then your application  then these static files might be able to make a   request to this particular api but next chase  follows a little bit of different convention if   you try to go with server side rendering and that  is okay exactly the point of server-side rendering   right that you render the output dynamically so  you can get true server-side rendering with next   shares truly in what that means by using get  server-side props but again just like i said   server-side rendering comes with its expense that  it is in fact server-side rendering and nexus is   gonna run this for every single request um unless  of course you introduce your own caching layer in   between for a cdn or something but that's that's a  different story right uh but that's how it happens   now the internals of how this happens we're  going to be pretty much like seeing that from   topic to topic that is what happens what is  in the context variable but if you go ahead   and just just try to explore this i think we won't  really have a auto complete without typescript but   uh let's just go ahead and console.log it right  so that we can just see some common properties   and if you go ahead and refresh this page  now and we get serializing props returned yeah anyway so you can see we have a bunch of data  with us but interestingly you're gonna see right   here the first thing which we have is a request  right so so yeah i want to dive a little bit   deeper into these variables and the values so  let's just keep it in the next video i'm going   to see you in the next one really quick in which  we're going to discuss about a little bit about   these past values all right guys welcome back  and in this video let's just take a look at   what all information we are getting at with the  get server side props and mind you that gets   oversight props is like the most powerful function  in xjs therefore you can pretty much expect   this function right here to give you access to  literally everything you can imagine on a single   request right so let's see the first thing  which we saw is the request variable which   again is is a sort of an incoming this is  an internal nodejs http.incoming message   uh interface but you're gonna see that this  pretty much follows a little bit of express shares   pattern we're going to see that so everything  you need about a request that is the url path   for example the raw url the raw http information  you know we can also see you have the socket   right here if you want to send a reps response you  have all the headers which the request url made   you have raw header information which is  also something and you have the method you   have the url you have the you know connection  upgrade all that stuff information as well   so you have basically everything right here in  terms of raw node.js request processing right   so if if you try to do something  like i don't know context dot request   dot uh not really request we're gonna do it with  response so let's just see that first of all   so response is again something similar to um what  you're gonna see inside of a typical nodejs server   so if you are if you have ever ever created a  http notice server you're gonna see the first   two things you get is a request and response  parameter right for every single request so   if you try to do context.response.end like this  and that's it if you try to go ahead and do that   and if i refresh this page right here  you're gonna see we pretty much get a very   not so good request ending right so if i  refresh this well we get 200 as the status   code but that's pretty much it we don't really see  anything else so you could pretty much just set a   context.race.status as 403 as well refresh this  and nope this should be status code not status   refresh this and you can see you get a 403 right  here you can set it to 418 that is i'm a teapot   i like the status code but yeah you're going to  get that so you can see this pretty much is an   actual servo right this this you get a server  level control inside this function it does not   matter that you're running a react app below it  right if you try to do uh you know nasty stuff   here you can do as much as you want so you  can even have a you know context.rest.json i don't think if they have a json let's  just go ahead and try send json.stringify something cool right if you do something like  this refresh uh not send is not a function   so maybe like i don't know write not really send  rest not right refresh and we have a fail request probably not i just restarted  the server and now you can see   it looks pretty much like a json response   from the home page of a nexus application right  so that might seem weird if you're if you had the next css just you can just send react as  the stuff that's not true right you can   use get server side props to truly um get  a server like experience from nexus as well   so anyway that is something some sort of fun  which you can do with next year's parameters   let's just keep going there's a lot of more  stuff here which next year's brings us so idly   if you think about it request and response are  the only two things which you need right so if   you console log the request you're gonna see you  pretty much will have every single information   every single thing you need so let me just  go ahead and refresh this again real quick   and you can see that you will have cookies you  know you're going to have request.url right here   you're going to have method you're going to  have headers you're going to have everything   but working with this in a raw fashion is a little  bit cumbersome so what nextgs does is that it   gives you access to a bunch of other things as  well so the first thing let's just keep it to the you know this this sort of way as well because  i will not be able to miss any property in this   one so we have already covered request right and  response which are the two biggest sort of objects   on the screen right now but we also have a bunch  of other things right so we have uh this query   which is an interesting thing this query would be  automatically populated by nextjs depending on how   you are splitting your route right so let's see  what let's let's take a look at what this means   so i'm going to go ahead and rename this index.js  to dynamic.js right and this dynamic word could   literally be anything this could be code dam  as well so i'm going to go ahead and take a   look at code down just make sure this you know  that this could be anything so once we do that   what next chase is going to do is it's going  to serve this particular file on every single   route one level down right so i can have page  one and that is served by this code down.js   and the reason i hope you know is because this is  a dynamic route because it's in square brackets   again hard-coded deep into next year's that  is something you have to follow for now   page 2 also lands on the same thing page 3 also  lands on the same thing but interestingly if you   take a look in the console you're going to see the  query parameter now gets populated with code down   now you don't necessarily need this because  you can extract you can technically extract   this information from the url from the request.url  parameter as well because if you go to url you're   going to see this as page 3 then you can have  your own regular expressions and run against   that to extract the parameters but why do that  when next chase is doing the heavy lifting for you   so you can literally just go ahead and do context  dot query dot uh context.query.codam and you are   pretty sure that this value will be present 100  why because you know that the file name is the   square brackets codename and next.js is not  going to run this function for anything which   does not match this routing pattern i mean that's  that's exactly the point of routing pattern right   so you need no validation nothing here you know  that this will work and this will have a valid   value if it does not that's a nexus bug not yours  so anyway you have something like this and this is   actually interesting because if you go ahead  and give it a query parameter you're going to   have query is 2 right here now if we take a look  you're going to see right here that we probably   okay yeah we are losing the context  that's why so refresh and you can see   that query right here interestingly gets all the  stuff that is your dynamic segments of the url   as well as the actual query parameters  which are the question marks   uh which are the syntax followed by question  marks right however the patterns right here   only get the dynamic patterns right so  here's an interesting finding which i   did the other day and that is if i try to  change this to code damp the query parameter   the actual query parameter because you know this  question mark and stuff is actually called query   parameter then it would actually just drop  the query parameter at all from the query   right so this is likely a bug i don't know  maybe i'll report it but now if you technically   want to extract this two you have to do it  yourself right because the request.query.codam   um favors the actual um sort of dynamic route  before the actual thing which it should have   supported but nonetheless this works fine for  anything else if i have an underscore right here   you're going to see we get a code down under  score at 2. so that's fine but yeah that's   something to consider so yeah we have a bunch  of different attributes as well params just   like i discussed would only contain the dynamic  segments of the url not the query parameters   we also have preview i think we do not have a  preview here which is an interesting property   or maybe we do i don't know preview do we have a  preview no but we're gonna discuss about preview   and preview data and all that stuff later on as  well but that's pretty much it that should get   you started that should get you familiar with get  server side props at least one use case which i   can tell you which i also use at codedam.com at  the moment is that you can generate sitemap.xml like this right so you can generate sitemaps  on nextgs websites and return the response   as xml you might think this is a static file but  this is actually a dynamic next.js file which is   server-side rendered because obviously if you're  not using server-side rendering you can pretty   much just return html react response nothing  else you can only return json and all that stuff   without being inside api folder you can only  return that if you're using its oversight props   so anyway that's pretty much it for this  video let's just keep it to this one   that is all and i'm gonna see you in the next one  really soon hey everyone welcome back and in this   video let's just go ahead and take a look at what  return value of get server side prop looks like   so you're gonna see that we return an object with  just props which is a little bit boring but you   can make it a little bit more exciting by having  a bunch of more properties so not only props you   can return a different form of value as well so  what you can do is that instead of returning props   if you return something like redirect and then  you can specify a bunch of mode parameters   this route will actually perform a redirect  on that particular url which is pretty cool   and which is something you can do with a custom  next.config.js file as well which you're going to   see later on again but this is one way to go  about so you can say destination destination   as uh i don't know like google.com and then you  also have to specify permanent now this permanent   is an option which is basically uh responsible  for setting http status code on your browser right   your browser considers 301 that is 301  as a status code which means that will   permanently map inside its memory that this url  always maps to this one and 302 is a temporary   direct so if you set this to false it's going  to perform a redirect with 302 right so let's   just take a look at that first of all so i'm going  to go ahead and refresh this page right here and okay so we are not actually returning the value  at all so let's just go ahead and refresh it now   and we have a little bit of problem i think the  server died anyway let's refresh it again and   now you can see that we are redirected to google  but if you take a look it actually it actually   responds with 307 not 302 but anyway you get  the idea right but if i switch this to true   it's going to perform a 301 redirect so if i go  back and refresh this you're gonna see now well   again i'm actually wrong it's three zero eight and  three zero seven back in the day when i remember   uh it was three zero one and three zero two this  at this i mean these are also like these are   also these will be also valid redirect permanent  and temporary but there might be a little subtle   difference in the rest uh guidelines depending on  um i guess the method and the data which you want   to continue but anyway the point being that  this means permanent redirect and that means   now chrome your browser whatever unless  you clear cache or anything it's not gonna   look up for the server right before it actually  hits that free direct so you can see it saves me   from this cache now so even if i go ahead and do a  false right here and if i go ahead and visit this   url you're gonna see that it redirects me with  308 only and even if i go ahead and remove this   all together with the props which should now  technically render content and if i visit this   you're going to see i'm basically screwed right  unless i clear my disk cache so that's what   permanent and temporary direct means and that  is why you should be careful about them because   by mistake if you set a permanent redirect to a  url and people started wizarding them and if you   wanted to make a change you would not be able to  go ahead and refresh cash on their browsers right   so you might end up in a bad state so anyway  that's one way another way is another thing   you can do is have a not found right here so once  you have now not found as true this is basically   similar similar can speak similar to 404 as the  status code and the typical standard next year's   template so if you go ahead and actually of course  i can't really use that url unless i clear my   cache which i'm not interested right now so i can  just go to page one so now you can see we get a   404 and a 404 status quo so these are like you  know you just you can just go ahead and uh let's   say fetch from db and you see that hey that does  not exist then if no record exists then return not   found right something like this otherwise you're  going to continue and return props right here   and just like us just like it you know demonstrate  with props you can have something as a prof value   return you can and whatever you return as a prop  you can grab that right here so you can say create   prop start something right so if i have  create this you're gonna have create one   next app as the title of the page right so if i  refresh this you're gonna see record is not found   yep sure so if i refresh this you're gonna  see we have the title as create one next app   right so yeah that's in a nutshell how uh nextgs  get server side props method would overall work   like just like i said it could be an async  function you can be pretty much fetching   data from different apis feel free to use fetch  here you know you can do data is equal to await   fetch something like google.com and remember  because you're running this inside note context   this is perfectly fine you're not gonna have any  same origin policy stuff so you can have then t   t dot text and then you can say slice 0 to 200 for  example and now you can just go ahead and say pre   and then props dot google first 200  yes something like that you know i   don't know i just completely made  that up very quickly and i can say yeah that's pretty much it right  so i hope that works let's see   right so it kind of works right because you can  see right here you get the first 200 characters   from the google home page which looks fine so  anyway that's that's how you're gonna make it work   and yeah that's pretty much it for this video  i'm gonna see you in the next one really soon   so what is going on everybody welcome back and  in this video we're gonna be taking a look at   get static props in next year's big big thing um  you know a lot of power for next year's comes from   this method so i'm gonna get rid of get server  side props we might probably see how we can use   both of them together later on but for now let's  just focus on this bad boy called get static props   super powerful method and super powerful concept  as well which you know borrows a lot of learnings   from the architecture of client cdn and then servo  right so um you know if you are in the in the loop   there's also this neat framework called remix  although it's paid it's premium but remix does   not follow this approach remix follows the  traditional approach next js has come with uh   sort of a new thing i won't really say it's  new gatsby also uses it but it's a model   where essentially what you're trying to do is a you are trying to build pages on build time  right so what does this mean first of all   this means that you as an  application let's say you have   uh 20 static routes right and 35 dynamic routes  dynamic means that you have those in this form   now these 20 static routes are simple right you  just have to create an html and json payload out   of them and just store them on the disk  whenever somebody visits and just bam   them with that static files that's simple this  dynamics section what happens is that assuming   that these are not server side rendering what  you can do is you can build them ahead of time   for example let's say you're running a e-commerce  store simple e-commerce store with 35 products   right and you have a database which contains  these 35 products so instead of using get server   side props and just fetching the product  again and again for every single visitor   in individually what you can do is that just build  them ahead of time sure it might take you you know   a couple of minutes on your continuous integration  deployment servers but it will be worth it   why because you have now uh complete static  builds of those dynamic sort of pages as well   that's one way another way which is interesting  and where the power of get static prop lies   incrementally or you know lazily build pages right  or rather build a website which consists of pages   here what happens is that out of your 35 dynamic  routes ahead of time ahead of time that is on the   build time you build zero pages right and whenever  somebody visits let's say your store slash let's   say this dynamic route is actually store slash id  right so whenever somebody visits store slash one   you run get static props just like you would run  get server side props right so you would run get   static props like get server side props but  how get static props differs from this is that   it is intelligent you can tell it to store this  result now because you know let's say you had 35   million of these routes right it's not feasible to  build 35 million pages upfront so you can say that   hey we're not going to build anything at all and  whenever somebody visits it then we'll just build   that page and keep it in the cache or keep it in  the memory so when somebody was a store number   uh let's say 999 you build this page  again get static props gets called and   you know it is saved for other people so now when  somebody visits store 999 again what happens is   that this is served served scrved immediately  as uh you know a static build static page   so cool because now a single visit a single  visitor has to pay for that cost of building it   once because you know if this is involving a  lot of database calls and here and there this   might take a couple of seconds and once a single  visitor has taken that load on himself or herself   a million other people who visits this page  will have immediate results right because this   page has already been built so that's how in a  nutshell you can make use of get static props   in the next video from the next video onwards  we're going to be learning about different   ways how you can block rendering how you can  fall back to a loading sort of rendering we're   going to discover you know just talk about all  the stuff from the next video onwards so don't   worry about that so yeah that's pretty much it  for this video i'm gonna see you in the next one   really soon hey everyone welcome back and in this  video let's just discuss about get static props   but technically so we have seen get static props  how it works internally and on a theoretical level   but let's just see what this function consists  of so first things first i'm going to go ahead   and rename this back to index.js because there's a  major difference when you're using getstatic props   in a dynamic versus a you know just a string  based route so what i'm gonna do right here   is just gonna return props uh something like  this and i'm just gonna console.log context   now surprisingly what you're going  to see right now if i refresh this   you're going to see if i go to the console we have  only locales locale or whatever how you pronounce   it and these three props present or these three  values in the context present where are the   requests and response and you know all that good  stuff query and patterns where are those values   well you see when you are using get static props  in a string based route that is you know in a   static route what next chase is going to do is  it's going to automatically on the build time on   build time it's going to generate a static  html static html plus json payload of this   particular page so that it never has to execute  javascript again right and how it can do that   well because you know you have just have a  single route and given that next guest is not   providing you with request response for adding  any dynamic stuff and adding any funky stuff   depending on how you are accessing it  with with what headers and what cookies   uh next years can safely generate a static html  and a json payload right so if you are looking for   adding any dynamic stuff here that is  probably not the best option the best option   again would be get server side props however  let's not you know let's not get completely   discouraged on this because there is a good  option there's a good way to get this stuff   which we're going to see later on but for now  just realize that get static props is pretty much   um a place where you can perform db calls you  know network requests without being course binded   any sort of stuff require require files which  is js common js syntax or dynamic imports   whatever you want to do you can do all that stuff  right here right and once you're done with that   once you return it as a props of something  true again once you do something like this   you can access this uh just like usual right  so this is this is more like of a you know   you are generating a page but it requires a  little bit of dynamic stuff i can give you a   quick example for this is that for example let's  say you are creating a page where you want to show   number of registered users you have right so  you can create a db call here await get db and   you know you can create a db call and you can  fetch user count the weight db dot total users   right something like this and then you can return  this user count like this and you can just have a   user count here sure it will be generated on the  build time and we generated once but you know when   you are building it again or we'll see another way  when you're building it again you can pretty much   you know just go ahead and show the user  your total number of registered users on the   uh without actually hitting the  database on every single request right   so if you have a million visits on the  website you just have to hit the database   once when you're building it and that's it why  because rest of the visits are automatically   served directly from uh the cash or the  the static build which is already there   all right now comes the interesting part that is  the re-validate option so next js comes with a   very very interesting option called re-validate  what does this mean this means that the seconds   which you supply here let's say i have 10 seconds  right here the seconds which you supply here   this will attempt to create this page again in  at most 10 seconds let's see what that means so   let's say this is one two three four five  six seven eight nine ten right these are 11   12 13 14 15. these are let's say 15 requests which  are coming on our websites right so these are   i will say these are requests request right and  let's say this is the time at which those requests   came so i'm going to say this came at zeroth  second this came at uh i don't know fifth second   this came at six second this also came as six six  six this came at eight this came at ninth ninth   this also came at nine this also came at nine this  came at 10th this came at let's say 15th 15th 15th   all right so what's happening now is that once  once we build once we build this particular page   let's say the build process is done we  have created a single page we're gonna have   version right so we're gonna have let's  say version versions as one two three four   five as the incremental versions of the things  right so the version one is the build version   of the page version two is when the page is again  built thanks to this revalidate parameter version   three is again when it's built next version right  so let's see which user will see which version   so what's gonna happen on the first  that is the first visitor because it   he or she visited at the zeroth time they're  gonna see version one the fifth second we'll   also see version one because we have ten seconds  as the parameter here the six will see one   uh this will also see one one one one one  everyone would see one up till this point   now what's going to happen is that this  person right here which arrived at the 10th   second is also going to see first version right  and all these versions are shipped very very   fast to the end user why because they are already  generated they are already built of html plus json   so you know they are just sitting on the disk  just to be served right and if you are using   versal or anything like that they are better they  are on cdn's so all of them would see version one   but something would happen here something will  happen right something magical will happen at   this point because 10 seconds has passed and next  years has just released received a request what's   going to happen is that next year's backend  will start creating the new version of the page   that is it will start calling the subway dv it  will get user count again it's gonna create the   page again it's gonna uh you know update the  html and json so assuming that it happens at   let's say it completes at 12 second let's see if  you have a visitor at 11 second if we have a 12.5   12.5 visitor at 11 second right let's see i'm a  little confused with the spacing and everything   but let's say this is the point where it gets  completed right so this visitor would still see   the version one why because this is not ready  yet however once it's ready now we are shipping   version two so this person would see version two  this will see version two version two and so on   right so i hope this gets the point across this  parameter right here this is interesting because   what if the request never came after the ninth  second let's see what happens in the in that case   well you see that next year says that hey  i would attempt to revalidate the page   once at most in this duration so what does this  mean is that it is saying that i will at most   generate only one page in 10 seconds it's  not saying that it will generate one page   every 10 seconds there's a difference it's sync  it will generate one page at most uh you know   in 10 seconds so this means there is no timer on  the back end which is running every 10 seconds   and it's triggering a page update nope that's  not that's hap that's not how it happens this   revalidate parameter you can think of something  like this it can say that hey i reval last   revalidate re-validate is let's say utc timestamp  zero why not let's say uh once we have this fifth   this request coming up right here so we're gonna  have last revalidate as still zero right because   well this request does not make any change  but next year is checked on this request   then again on this request this request on you  know on the ninth request till the ninth request   last revalidate validate is zero and you can you  can just go ahead and maintain a now counter as   well now five now nine right so next year  says that hey now minus last is less than   10 so i'm gonna skip now minus last is less  than 10 so i'm going to skip now minus last is   less than 10 so i'm going to skip  right now what if the next request   comes after an eternity let's say at hundred time  stamp so what here what happened here nothing   nothing happened here that means nobody requested  and no page got generated as well no page got   refreshed as well because nobody visited this  route next js never checked the last revalidate   and the now counter that means it never took  the difference to check if it has to revalidate   and that means this function never got called  so now at this particular point next js is   gonna still serve version one to the user but it's  gonna see now is now minus last is greater than 10   therefore revalidate and for the next request  onwards or assuming that that completes perfectly   it's going to say last value date is 100 now is  102. so you know 102 minus 100 is less than 10   so i'm going to skip so i hope you understand how  exactly this revalidate parameter is working and   how uh you know this at most statement  works this is super super important   to understand because um you might think if  you have a smaller value here you might think   uh you know you're bombarding your server every  single second or something but nothing like that   is happening right in fact if your website let's  say if you are running a news website or you know   some life counter this is actually a pretty  solid uh you know a way to go about because   let's say you have 10 million or like not really  10 million let's say you have 100 000 people per   second requesting this page so if you have server  side props gets oversight props that bad boy is   gonna perform a hundred thousand requests on  your database every single second which is   bad right which is bad bad depending on you know  what your server configuration is and how you have   configured load balancing and everything however  if you are live with 100k requests a second   and you have get static props  with one second revalidate   oh boy you are in luck because now you just  have one request per second on the database   super awesome consider this you  are designing an architecture   where you are getting a hundred thousand  requests a second versus one request a second   and uh you know at most people will be delayed by  a single second of information here right so if   you're maybe like if you're creating a website  or a life counter for cricket or anything i   mean that's a pretty solid deal right because you  know you can afford to have a single second delay   versus whenever somebody is visiting or refreshing  your page they get pretty much you know your   server gets pretty much down because of so much  load so i hope that puts things in perspective   a little bit how this is helpful how this works  and all that stuff we're going to be discussing   a little bit more on get static props and the  additional function which it brings in in the   next video so that is all for this one i'm  going to see you in the next one really soon   so what is going on everybody welcome back and in  this video let's just take a very quick look at   a get static props example before we move  forward so i have created this simple simplest as   couldn't get more simple user count uh probably a  bad name but i have deployed it so anyway so this   is a math.random variable and you just display  it on the home page right on the index.js and   this is deployed on versailles right we're  going to come to deployment in the end but   i have deployed this on versal and  i have also opened this in the local   as a local server now one thing you have to  remember when you're developing with nexus   locally next chase is gonna run get static  props every single time on every single run   so if you refresh you're gonna see this  math.random value changing every single time right   as you would expect because well it is running  on every single one so this value gets updated   every single time that's why we are getting a  different value however on production because   we have revalidate parameter it's gonna well run  once but it's gonna revalidate the page at most   every five seconds just like we discussed in  the last video so now if i refresh this you   can see well if i refresh if i keep refreshing it  you're gonna see the value is not changing right   however if i refresh it after five seconds  for example the value updates and now it's   gonna stay same for at least five seconds then  it updates and it's gonna stay same so you know   you can see how this is pretty much working and  that's pretty much all i wanted to show in this   short video so that is all for this one in the  next one we're going to be discussing about get   static parts again just like i said which is  again a little bit of extension of get static   props itself so that's all for this one i'm gonna  see you in the next one really soon hey everyone   welcome back and in this video let's just go ahead  and take a look at get static parts right so this   is an indi additional method which is sort of  handy with get static props and actually mandatory   and i'm going to tell you why this is required  consider that if you have a route something like   um i don't know shop id right and you're trying  to implement get static props on that well   first things first you need the id  parameter to fetch the stuff right   to fetch that particular information against that  so first thing is that we need patterns somehow   in get static props second thing is  that you know next year's like i said   likes to run get static props on build time  right so if you even if you get you know some   sort of way of using these patterns and then  you know doing this doing data fetching using   patterns you know if you want to probably  build a part of your website on the build time   there is no way next js can know what what  ids this will take right it might take one   two three four five till 100 it might take some  strings and it could be anything right so you need   next shares you need a way for for informing next  that hey i want maybe i want these these pages   built on the build time and then maybe we  can fall back to this particular approach   which we talked about that you know people will  come and then we'll build and store it and then   we'll just make that happen so in order to make  that thing possible we have a function called   get static pages right so this  export function this get static pages   is a function which is going to  allow you not really pages or spots   right it's going to allow you to provide that  information to nextjs that means you're going   to return certain value from this particular  thing and precisely we're going to return   parts as an array this is going to be a value  it will contain information on what all pages   you would want to be built at build time  right ahead of time and anything else which   is not present inside this will either 404  or will be built dynamically depending on   a bunch of other parameters as well but first  of all let's see how you can make use of this   so this will be an object an array of object  right and right here you're going to specify   you're going to start writing patterns and  then params will also be an array of object   patterns p-a-r-a-m-s and params right  you're going to start writing here   and yeah the biggest requirement the  biggest biggest requirement is that you   need this route to be dynamic so i'm going to  shift this to id right and now you can say id   which should match the name of your file or the  dynamic part of the segment which you're targeting   and then let's say uh product one right then  you can have an id of product two for this one   and then maybe like id of product three for  this one right so you have all these parts   available to you and if you just leave it  like this what's gonna happen well you have   to specify another parameter called fallback  let's say you have a fallback of false so in   this particular configuration when you push  it to production when you run next build   what's going to happen is that on the build  time next years will run get static props   with product one well not exactly product one but  you know you get the idea i'm gonna tell you you   can extract you know patterns from this context  as well so it's gonna run it with something like   patterns id product one right that's that's  more like it with a bunch of more options   it's gonna run it with product two  it's gonna run it with product three   this is gonna spit out some html plus json this is  gonna spit out some html plus json this is gonna   spit out some html plus json right next test is  going to run all this on the build time remember   this is all happening on the build time and we  finally store all on disk cdn whatever right   and then serve it immediately whenever somebody  comes this is because of fallback faults right   if you have if you have fallback true something  interesting happens well we all obviously we do   the same thing again but this time actually let  me let me just discuss fallback falls again but   i guess we did not complete it so now if you come  to a page which is something like shop id or like   product id product 4. if you come to this  and remember we have fallback false this will   go 404 not found why because you mentioned  that hey i don't want any fallback for any   non-supported page right that means you're on  your own you're going to get a 404 automatically   now if you have fallback true something  interesting will happen on this point   when somebody visits this this route next chase is  going to see that hey i don't really have an html   plus json payload for this particular route but  you know get static parts actually told me that   the fallback is true so maybe i should go ahead  and ask get static props what's up so when you   visit this what's gonna happen with fallback  true is that nextgs is gonna load the page   with uh you know you can get the nexus router use  router you can import the nexus router use router   you're gonna have a router that is fallback  property set to true and i'm not really   entrusted into this into explaining this why  because first of all this has already been   explained in the basics course and secondly  there's a better option now with next shares   so right now as long as this is true on the  client side right now uh react uh not really react   next js uh get static props is executing right and  the moment it becomes false that means you're here   get static props has executed and you have the  data from the props automatically and this will   be stored again you can think of it getting added  sort of getting added like this so that it does   not have to build again right that happens to  fall back true so let's take a quick example   on this so i'm going to go ahead and return a  loading right here and i'm going to say loaded   here this could be like h1 only why not and  we have product one two three four which is   perfectly fine i think we just need to import  the router import use router from next router   i think this is a default yeah not really  right so once we have that let's just go back   to the browser and go to product one hit enter  you're gonna see we get if i refresh this we see   loaded because we already are generating  product one automatically if i have product two   we see loaded which is fine product  three and four will also show loaded   but if i go ahead and visit product 5 you're going  to see that if i refresh this for a split second   i get this loading right you can see  that that does not happen with product 4.   product 4 loads immediately but product 5 right  here we get a split setting split second loading   why because if you go to xhr and refresh this  you're going to see product 5.json actually is   uh loaded a split second later i'm not sure if  i can show that let's toggle to slow 3g and see   so now if i refresh this you're gonna see i  get loading for a little bit longer let's hope   actually it's downloading the whole js bundle as  well in the development so that's why it's pretty   slow but what you're going to see eventually is  that the product 5.json is dynamically generated   when you have the fallback true and it does  not wait for it being generated it's just gonna   throw something down the wire right so  that's something the client can see at least   something which is kind of bad if you want to have  a full blown experience on the first load right so   you can see it shows loading for a while and then  we make a request and then it shows loaded right   so how would you make this uh a seamless  experience in terms of uh you know for example   if you take a look at product four product four  loads immediately just like we discussed right   so how would you make it same for product five  well there's a new mode called blocking right here   and what fallback blocking would does is that  it will not send any response at all unless   the get static props has executed right so now if  i refresh this on product five hit enter you're   gonna see we no longer get loading anymore and  the reason for that is that you know this actually   runs uh the static props first of all and then  sends it down the wire that means is fall back   is never true so the pro of this pro of  blocking is that no flashes flashes of uh   loading or loaders or you know missing content the con of blocking is again of course the first  visitor and only the first visitor right because   you will be storing it on the disk and all that  stuff the first editor will have a little delay   that's it which is not a big of a con to be honest  if you think about it so that's that's pretty much   it so in most of the cases you would probably  want to use fallback blocking unless this is very   very slow right unless this is very very slow  you would probably want to use always blocking   so yeah i mean that's pretty much how  uh get static parts work very simple   method not really have a lot of bells and  whistles just parts and fall back mainly   and the fallback also i would highly recommend  if you do not know upfront all the parameters you   can set it to blocking a very common convention  is to have empty parts here and have fallback   blocking so that means now every single page  route would be created on the runtime and then   stored that means it will not be created again  and again and then stored and will be refreshed   depending on your revalidate parameter so  i hope now you can see all the parts coming   together and building together right so that  is pretty solid infrastructure and framework   which next year's provides you out of the box  so yeah that's pretty much it i think a lot   of knowledge a lot of concepts a lot of things if  you are learning it especially for the first time   so take some time you know visit this  video again if you want and you should   be done with it so that is all for this video  i'm gonna see you in the next one really soon hey everyone welcome back and in this video let's  just go ahead and take a look at what preview mode   is in next js right so we have looked on gets  oversight props and get static props and the   get static parts method but there's also something  known as preview mode in nextgs which kind   of sounds like what it does but let's just go a  little bit deep into what exactly it is and how it   works so in order to do that what i'm gonna do is  create an api function let's say enable preview.js   right so you know in apis you know how this works  you just export a function like this and you would   be able to set the response status code and all  that stuff in an express like way right it comes   with a express like json sort of method attached  to the response object and so on so instead of   you know you can do all that stuff but inside of  your api response if you do something like res dot   set preview p-r-i-p-i-v-a-e-w data and you  pass in an empty object what's gonna happen   is that next year's is gonna set set some cookies  right so this method internally sets some cookies   on the response so let's see what that is so if i  go to the browser and if i go to api slash enable   enable preview and hit enter you're gonna  see of course we get the response back   but if you go to the dev tools inside the  application cookies you will be able to see that   there are a couple of cookies which are set you  can see the first one is next review data and the   second one is the pre-render bypass right if you  take a look you're gonna realize that this looks   awfully familiar to a jwt token right so we have  two parts here the first one is next preview data   and just like i said the second one is pre-render  bypass next preview data is a jwd token right so   you could probably just copy this next review data  is jwd token and this one right here pre-render   bypass it's just a random hash right random  idea random hash whatever you want to call it   right so what's happening here well you see  if you try to decode this data right here   if i try to go ahead and take a look here you're  gonna see that the base64 encoded part which is   the central part if you do a b2a of that not  really b2a a to b you're gonna see you get   something like this right which again looks like a  bunch of encrypted data and actually i'm not sure   what this data is exactly right i'm not sure of  the encryption but the point is that you can pass   some data right here so you can write something  true and if you go ahead and refresh this   the stuff which gets set as the cookie inside  this next preview data is actually that object   something is true right so if you do a to b  here i mean you won't be really able to see   it because that is using some sort of encryption  even in the data parameter but you can see it has   got an expiry date with it uh not really this is  not expiry it's just the time when it was created   right so let's see if this is correct and yep this  sounds about right yeah so what's the use of this   well you see that preview mode preview  mode can technically be used to   have the development like behavior of get static  props now what do i mean by that let me just   elaborate on that so if i have export function  get static props right and if i return a prop of   props off you know number as uh math.random and  let's say i have fallback as blocking right and   this is this is not the place to put it it  should be export function get static parts return   pages is this and fall black fallback is blocking   so once i do that i can use props  dot number and get rid of this   right and now if i go ahead and refresh this  particular two for example and we have some errors extra keys returned yeah this should be parts  not pages refresh and now you can see that every   single time you refresh you see you get a new  response now the reason you get a new response is   that get static props is called on every single  page refresh on development this is important   right even if you have a revalidate parameter  here for example revalidate uh 10 seconds   you're gonna see that you get a new response  on every page load now the reason for that is   you're running in development mode if you push  this to production and let me just go ahead and   clear the cookies first of all let's do it from  devtools so that you are you are able to follow   if you want to i'm going to go to application  cookies and i'm just going to clear them off   right so if you go ahead and refresh still  refresh it you're going to see that you get a new   different response on every single payload page  reload reason for that is that get static props   this is called every time in dev mode so preview  mode is kind of like dev mode on production   what does that mean that means that get static  props will be called every time as long as   preview mode is enabled all right  so let's see what that means by   actually uh you know deploying this on production  and i'm gonna set a revalidated parameter to like   60 seconds so that we can have a little  bit of space in between of uh seeing things all right so i've just deployed this url on a  versal domain and what i'm gonna do is just go   to a random id right so if i go to let's say slash  two and if i keep refreshing this page for example   you know just leave that first blip but now if  i keep refreshing this page you're gonna see   that it pretty much stays the same value  right i'm refreshing it again and again   and it stays at the same value the reason  for that is that once it generates uh you   know match.random number for the slash two route  that is uh that how time on it would pretty much   not run this function again right because  nexus says that hey i've already generated   um the particular page for that particular route  so let's just use it directly from the cache   from the disk it would it would generate it  if i keep on refreshing it and it hits the   60 second limit which we have already discussed  in the previous video but it will only generate   it once at most once every sec every 60 seconds  now let's say this was something of a blog post   preview right you're editing your blog post with  a cms like ghost or something and then you want   to preview it so this is a this is a difficulty  right with next yes because even if you try to you   know if you're trying to set it too low then you  are just hitting the um you know your server too   much if you get a lot of traffic on your blog even  though if your content does not change that much   if you're setting this too high well you cannot  really work with with a sort of draft preview mode   from your cms so to fix this we have the preview  mode which you can use this is like one use case   so what i'm going to do is i'm going to go  ahead and hit this enable preview api url so   let me just go ahead and open the cookies part as  well so right now you can see we have no cookies   and if i refresh this it stays on the same  particular value now let's just go ahead and   hit api slash enable preview hit enter and you're  going to see that it immediately sets two cookies   next preview data and pre-render bypass which  we have already talked about now if i go back to   slash 2 right here what you're gonna see is that  on every uh let me just keep that open is that   on every refresh we are getting a new number  even though this is a production domain right   even though this is a production domain we are  getting a new number on every refresh and if you   can observe the page response times are a little  bit slow because it has to like you know run this   function again render the tree and then pass it so  once you have preview mode enabled it will always   always always run this function right now the  beauty of this function is that the beauty of this   feature is that if you do not have the preview  preview cookies for example if you are a visitor   of the site it will just work as normal right so  you can see uh just that was just an update to the   page but if you keep on refreshing  it you're gonna see you get nothing   but the moment you try to enable the preview  again and go back to to keep on refreshing   looks like we did not enable  the preview mode refresh yeah so here we go needed a hard refresh so once  we do that and now if you return to two again   you're gonna start seeing different numbers  again because this is just like i said renders   it automatically every single time irrespective  of what configurations which you have here   so yeah this is like preview mode could be useful  if you're developing a cms-like application   where you want to have specific access uh you  know real-time access to specific pages um but   that's yeah that's pretty much it if you're not  developing some sort of dynamic content which   is linked to a gui in terms of editor or something  this will probably not be required but nonetheless   you should know about this so that is all for  this video i'm gonna see you in the next one hey   everyone welcome back and in this video let's just  take a look at what dynamic imports are in next.js   so dynamic imports is pretty important and  interesting feature of next year's which you   might encounter a lot of times if you're  if you are working with npm packages and   things which are browser environment specific  right which require browser environment so   what that means is that first of  all dynamic import means that you   are importing a piece of code on the runtime  dynamically right so the first thing is that   obviously it will not be included inside  the html of your page it will not be   server side rendered on the first load  right so the first communication for example   let's say i have a div right here and if i have  dynamic h1 here and if i have p hello world let's   do a quick uh you know demo of this so i'm going  to have a dynamic h1 i'm going to explain you the   syntax for this but just bear with me for  a while here so let's say if i have dynamic   h1 as the component and we would  also need dynamics from next dynamic   dynamic right so what you're trying to do  here is that import this dynamic h1 on runtime   so if i do something like export default  function h1 and then just to h1 hello world   so what do you think would happen so if you take a  look at this you're gonna see you get an h1 and a   p just like um you know you would expect to get  right and if you go to let's say the sources or   maybe like yeah the networks tab you're gonna  see that this one.js file is the actual chunk   of this dynamic h1.js right so what does this mean  is that for example if you had something like um   let's say a compute which is like an expensive  compute right i don't know add it.fill or maybe like not add a dot fill at a thousand  dot fill zero dot map uh or dot for each x   console.log x right if you had something like  this i mean this is this is ridiculous but just   to give you an example and if i go ahead  and refresh this now you're going to see   if i go to console if i go to sources if  i go to network you're going to see inside   the one.js file well if only if we could just  look inside the cival but let's see if i could   if i do a console.log you can see that that  bit of uh you know code execution is present   inside one dot js which is a different  file right if i go ahead and remove this   as a dynamic import if i go ahead and import  this in a regular way from let's say like this   right if i do something like this and hit refresh  you're gonna see that there is no one.js anymore   there is just this uh console.log not  even 0.js i think inside index.html   will get probably yeah inside index.html you can  see index.js you can see the single file which   ships with the whole uh bundle of stuff right now  this is obviously not the production build but   inside production build as well you're gonna not  see any different uh request with dynamic import   although it will render it on the server you know  if you go ahead and take a look refresh and go to   page source you're gonna still see hello world  right here it is still rendered on the server it   is server side rendering but there's a big but the  javascript bundle of this the rehydration you know   the when the react downloads the chas and tries to  add all those click handlers and everything that   piece of javascript is only downloaded um when it  is required right so what's the use case of this   well one use case could be that let's say you  have a user panel right and let's say you have a   or maybe like not really user panel but  authenticated panel and you have non authenticated   panel right and you do the stuff so  you know leave the uh compute part   already like even if it is a lot of javascript  that will also be good for us so if you have uh   authenticated here and non-authenticated what  you can do in react is that you can say hey   if user is authenticated then show him this  panel otherwise show him non-authenticated right   something like this you can do something like this  and the way it will work is that if the user for   example on server let's say the user is considered  always authenticated let's say if the user is   authenticated you're going to always show this  component and if the user leaves your website you   can always keep on showing this component and you  will never show the non-authenticated component   how does this help this helps in the way that you  never really download this non-authenticated panel   bundle right so that's a huge um data saving  if this is a big file if this is a big js file   so yeah that's pretty much it on the dynamic  import without dynamic import with server-side   rendering there's also a variant of without  server-side rendering we're going to take   a look at that in the next video but i hope  this gives you context on how dynamic imports   exactly work how the split split the files  into different chunks and how they are   still server-side rendering but with a different  approach right that is um the javascript which uh   enables the dehydration and everything in the  component is downloaded differently from the   main bundle so yeah that's pretty much it for  this video i'm gonna see you in the next one   really soon hey everyone welcome back and in  this video let's just go ahead and take a look at   server-side rendering disabling of a server-side  rendering in in the dynamic import section   so what happens is that just like i told  you that you can pretty much in the last   video initially i told you that you can  pretty much use this feature to render   you know browser-specific things right and one  very good example which i can give you right now   is that if you're on codedam.com if you go to code  dam you're gonna see that you use this practice   you know this practice panel when you use this  you're gonna see that the monaco editor which is   in the center of the screen this editor which will  fire up really soon in the center of the screen   this is not server side renderable right monaco  editor is highly sophisticated piece of technology   from microsoft and this is not server side  renderable right so if you try to render it on   server side it'll throw a lot of errors where you  would just have to bang your head against the wall   so the only way to use modules like this in a next  chase project is to go ahead and disable server   side rendering completely on them and the way  you do it is by passing another second argument   called ssr and setting this to false now what this  would do is that this would completely disable   uh the server side rendering feature and act a  lot like how regular javascript behaves right so   now if you refresh this you're gonna see you get  that flash of uh you know loading content and the   reason for that is because the bundle for that  particular the bundle responsible for displaying   that particular dom node is loading right so  now you can see inside one.js you're gonna see   hello world right here right which is the react  code the react equivalent of displaying this right   and if you go to page source you are not going  to see that h1 tag right you see a div opening p   and a div closing although we have a dynamic  boy right here right which is just sitting here   there is also another attribute which you can plug  in and that is the loading this loading right here   um basically allows you to pass in a component  which you can show while the page or while that   particular piece of component is loading again  super handy so you can go ahead and say something   like dot dot loading right and once you do that  if you go ahead and refresh this you're gonna see   that you get a slash uh that flash of loading  again and if you try to make this h1 it will   exactly match the uh you know the dimensions so  now if you go ahead and refresh this you can see   it server side renders but the loading component  i'm not sure if you go one level deep and   try to you know have a dynamic import  here as well you might want to try that   that will be interesting to find what happens but  you can see that pretty much they would expect you   to have a static available component for loading  right that's fair so yeah that's how pretty much   dynamic imports overall work right you have  loading component you have ssr with you   and you can specify pretty much anything here  right to load it dynamically on the runtime   if you do specify ssr as false it will completely  disable the loading at all nextgs is not going to   look inside this file at all it will not render  this file at all on the server right so that   means if you're using anything specific like  window dot um a lot something like this as 10   this is absolutely fine right if you refresh  this if you refresh this you get an alert of 10.   however if you try to do this without an ssr that  is ssr as true you're going to see that if you   refresh this right here you're going to get an  error that windows not defined and this error is   not from the client this error is from the server  right because even though it is dynamic import   next js tries to render it um for the first flash  of loading right and when it's trying to render   it for the first flash it encounters this and this  is an error but the moment you switch it that hey   i don't want this at all and if you refresh this  well next yes just doesn't even bother looking   inside the file now obviously this is bad this  is bad bad and you should always try to avoid   anywhere writing ssrs false why because you kill  all the performance benefits um for the user that   means now they have to download the javascript  in order to view the page right which is bad so   just use this whenever it is highly necessary just  like the example i showed you monaco in our case   monaco editor which codem uses is not server  side renderable so we have no option other than   uh you know just disabling ssr on that  page for that particular component but   yeah that's pretty much it for ssr hope you  know a lot more about dynamic imports and   how server side rendering works with that and  how you can have a placeholder sort of component   for a while as well so that is all for this video  i'm gonna see you in the next one really soon   hey everyone welcome back and in this video let's  just take a look at the next image component which   is again a very interesting component from nextgs  and like one of the most exciting features for me   at least when it came out so what image component  is is that i'll just show you an example real   quick let's just go ahead and actually let me  see if i can grab a screenshot and if i go ahead   and grab the screenshot for this and place it  somewhere inside public let's say right here   right so if i have a screen oops if i rename this  as screenshot right and if i go ahead and take a   look at for example public and then if i do ls lhs  of screenshot you're gonna see that this actually   weighs 111 kilobytes right fair enough let's  just go ahead and use an img src of uh you know   screenshot.png right here right and if you go  well let's just get rid of all the stuff right   and if you go let's just remove this and if you  go ahead and take a look you're gonna see that   it pretty much just embeds the image just like  you would expect it to right now the problem   right here is that there are a bunch of problems  first of all if you use something like s3   or you know some other provider which is just  raw file provider and not optimize images then   you waste a lot of bandwidth right so this is like  a huge problem second because of this your images   images are heavy uh you know not scaled therefore  slow for user right this is also a big problem   right and third one is that you are lacking images  for different different dimensions and you know   accessibility and all that stuff because right now  you can also see that we are not specifying width   and height attributes so that means there would  be a you know cumulative layout shift cls which   which stands for like i don't remember the exact  spelling cumulative layout shift which just means   that how much your page is shifting within a span  of let's say i think it's 50 milliseconds or 500 i   don't remember but the more the page drastically  shifts the worse the score is for the cls factor   right so there are a lot of optimizations which  can be brought in inside images when they are   embedded and images are like a heart of almost  every website there are a lot of images um pretty   much anywhere on any website right so what next js  did is that it gave you the option with nexus 10   to have all these problems fixed with a drop  in replacement of the image component from next   so if you import image from next image and if  you try to embed this like this with an image src   what's going to happen is that if you save  this you actually have to specify the width   and height as well but yeah you have to specify  so let's just give it a width of let's say 1280   you can also use numbers and a height of 720  right you can technically disable this as well if   you don't want to give this but there's a pretty  good reason you should so if you refresh this now   you're going to see that first of all your image  is resized according to dimensions which you gave   right and observe that this is actually  a you know optimized version of image   as well how do i know that let's go to  networks tab clear this out refresh image   and right here if you go to headers you're  gonna see that the content size let's see   let's see if i can save this um on the desktop  as the image name so if i go ahead and do ls lahs   of desktop image dot webp you're gonna  see this is in fact 28 kilobytes right   so what happened is that next year is detected  that well this browser can support vp format and   we want you know uh an image which is not um that  large we have already specified the dimensions one   two eight zero seven twenty why not just compress  it a lot right and just make sure this is good   so you got an image dot pepe format directly  from the png or jpeg whatever you're using   and it is much smaller right this is 28 kilobytes   28 and that was one one one kilobyte right the  original one so you got all that optimization   automatically out of the box in fact if you  take a look you're gonna see that it uh you know   specifies a bunch of options as well and  one another another one interesting option   is that it lazily loads images that means if  the viewport height is not you know if the   viewport height is not that much that means that  the image is visible it will not show that image   so if i go ahead and create this multiple times  a bunch of times you're going to see now if i   refresh the page you're going to see in the  networks tab inside a maid section we have not   loaded the image yet right the image is not  present but if i scroll down a little and make   the image visible you can see that immediately it  loads right just before the image is visible right   so if i close this refresh this close this refresh  this you can see it's not invisible right now   and it is now visible right so that is  pretty cool again that happens because of the   uh next js optimization and there's  also native browser support as well   for this such such behavior but i think it's very  limited right now to chrome only but anyway this   is how this works right it also specifies it also  gives you um you know a 2x version basically a lot   of optimization out of the box so you can just  feel free to replace all your img with image   given that you have width and height otherwise  there are a bunch of other dimensions as well   other other sort of properties as well so  you can specify layout fill and right here   you can still get that exact same behavior which  you pretty much get but i guess in this case   the width and the height are pretty bad  for the container but anyway you might   want to customize this with css  now so yeah i mean whatever happens   what you can think about what you can do is you  should always use the image component because it   optimizes it scales it makes your images  work much much better on a nexus website   one caveat of this is that you need to have a next  share server running that means you need to have   a next chairs you cannot really statically export  this why because if you go to networks tab you're   gonna see it request a particular uh you know  api endpoint which is specific to next year's   framework and this endpoint will not be available  if you are not running a nexus node server on the   back end right so that is sort of a caveat but  this is also um you know fixable in a way which   we'll discuss in the next video and i'm also  going to introduce to you with next.config.js   file in the next video so yeah stick along so  that is all for this video i'm going to see you   in the next one hey everyone welcome back and in  this video i'm going to introduce you to a couple   of things the first one is obviously we're going  to continue with our next image component and the   second one is the next.config.js file now this  file you have to create it will not be present by   default but this is a hard coded file again the  name is hard coded into next year's framework   and whatever you export from this file has special  meaning to next year's framework right and it   shapes the behavior of the framework and of course  this file is just read just like environment   variables this is read on the boot so if you're  making any changes you gotta restart your server   so what i want to do first of all is i'm  going to show you that this is fine this is   absolutely fine that you're referring an image  with a relative path but what about if you want   to embed an image which is from a different  domain right let's say if i go to courses and   well this will also be a nexus embedded image but  let me just go ahead and try to extract out the   real image out of it so if i go  ahead and do a decode uri component i will be able to see that right so this  is like the raw image which is hosted on s3   so now if i go ahead and try to embed this like  this what you're gonna see is that it saves me   invalid src prop because the hostname  creatorassets.codam.com is not configured   under images so what does this mean is that if  you are trying to include any image which is not   absolute path right or which is not relative path  not absolute then you have to you have to add   white listing for that particular domain and  how you do that is that you go to next.config.js   create an images key and add that to domains right  so in this case it will be just created.codam.com   now remember this is important if if you are  hosting your website on codedam.com as well   right so let's say if you are hosting an image  on codedone.com itself and your website is also   running on codedown.com if you use a direct  absolute url you still have to whitelist   codedam.com that means even if your website is  deployed on codedown.com and if you're using   like this you have to whitelist it right if you're  writing any sort of domain name here you have to   whitelist it otherwise this will not work it will  complain it will throw an error in development   and in production i guess it will just it will  just crash i don't remember the exact behavior   but it will not show you the image right  so once that is done you know for this of   course we just need the creator dot co down part  and if i not really creator but creator assets   right so if i go ahead and replace this and  if i go back right here and if i restart the   server you can also see it tells you to do that  so now if you go ahead and refresh this what's   going to happen is now it is loading that from the  remote server it loads it first of all inside its   own memory optimizes it for the first time and  from the next times onward it's just gonna you   know just make use of all of it from the cache so  again super helpful super powerful um in terms of   resizing and uh you know just having the best  possible image served to a particular client   highly highly recommended to make use of um you  know the behavior which image tag provides you   it also comes with a bunch of other attributes  i did not go through every single one of them   you can pretty much just take a look at the  documentation if you want but the most common   ones i have just listed you're going to just  need width height and src you can also specify   the loader which is an interesting bar you can  specify the loader which you want with the image   component and what do i mean by that that means  that right now you can see that well it just   fall backs to uh you know the local host so if  you can observe what's happening here is that   it takes your url it takes your url right here  copies it and pastes it pastes it right here right   so this is the image url and then it specifies  the width and the height as well if it wants to   uh this is quality parameter so what you can do  is that let's say instead of having this hosted on   nexus the image optimization service let's say you  have bought it from some other service provider   right let's say mjx or whatever you pronounce it  right then you can also specify a custom loader   for that and the way you do it is that you create  a function you create a function called loader   and it's going to accept some arguments it's  going to accept some props and the props are   src width and quality right pretty much which are  passed um inside our this loader which was before   right i just have not copied the url but what  you're going to see if i console.log src width   and quality and if i try to return for example  http uh my custom service dot com slash url uh url is equal to src what you're  gonna see now if i specify this   as the loader for this particular image you're  gonna see if you refresh you're gonna see it   tries to load your service from a url like this my  custom service url and then that so you can have   all that custom logic of caching and everything  on your own services as well if you want   if you don't specify this this fall backs to  the internal next share service this is useful   if you're developing an a completely static site  where you don't really want the next share server   running on the back end right so that will  help you save a bunch of money if you don't   really want to run a node server just because of  image compression so yeah that's pretty much it   for the image tag basically we have  covered all the important stuff   you can figure out other details of the smaller  details on the way as well but that's all about it   so that is all for this video i'm gonna see you in  the next one hey everyone welcome to a brand new   course on redis plus no chairs this course will  be interactive 100 interactive that means after   this video you would probably have a task not  a video you have to complete then another video   few videos tasks videos tasks so make sure when  you're attempting this course please go ahead   and attempt all the tasks in place because that  will help you build the muscle memory you need   when you're learning to code on your own coming to  redis this course will focus mostly on redis plus   node.js however we will look at the integration  with nodejs part a little later first of all we   will understand and really work with redis in  a first few sections in the last few sections   we'll create full-blown projects with node.js  which uses redis as well we'll be using this   code dump playground for this whole course  and you can use this by going to codedown.com   playground slash node or you can go to  codedam.com go to your dashboard here go to   playgrounds and select the nodejs playground here  this playground comes with a built-in support for   redis you can write redis cli here and you will  see that you are taken into the redis console   so i'm super excited to start this course with  you we'll be covering some fundamentals first and   we'll be moving on to no chase integration very  soon that is all for this video i'm gonna see   you in the next one hey everyone welcome back and  in this video let's just go ahead and take a look   at what exactly this is why you would ever need  it and how you can work with it so first of all   what is redis redus actually stands for a remote  dictionary server which is a fancy name for a key   value database right so what a key value  database means you know if you are working   with javascript we do this all the time with  objects for example so object can be sort of   as a key value database but a javascript object  in fact is a little bit more richer i would say   than rather redis in the structure but are  less richer in data extraction and retrieval   so you know you can have a key one value one key  two value two right you can have the structure   similarly you can have the same structure  key value stored inside redis right   redis is a database just like you would consider  mongodb or mysql with the exception that redis is   a simple key value database which stores that  also if you want to get a little bit technical   redis is a nosql database right because it does  not contain tables and columns and rows and you   know the stuff which you actually get in sql based  database so technically that is a nosql database   now with redis there are actually two more terms  which go or actually just a single mode term which   goes with it right so we don't really say that  this is a database we always almost always say   red is is an in-memory database so what does this  in-memory database right here means this in-memory   database means that your data whatever you store  in red is actually stays in memory that is random   access memory your ram right so i've heard about  you having four gigs of ram in your system or   eight gigs or 16 gigs so that ram somewhere when  you're running radius and you're storing data   that data is stored somewhere on that ram not on  your hard disk and why is that that is actually   a choice redis has made to make it extremely fast  right if you take a look at databases traditional   databases like mongodb or even mysql those  databases try to keep things which are actually   hot that means they are accessed very frequently  or they try to keep indexes inside memory right   rest of the stuff goes to disk whether it's ssd  or standard disk redis keeps everything in in   memory because it wants to be fast it wants  to retrieve data super fast that is one of   the criteria of using awareness where you want  performance where you want flexibility you want   the ability to scale it to a lot of load so you  want faster access there now technically redis   also has options of writing it to disk so you  can technically take a redis in-memory database   and write it somewhere to disk but usually that  really defeats the purpose of traders you want   temporary data to be stored by radius which if  even if it gets lost you don't really have to   worry a lot about for example typical example is  rate limiting right if you have a rate limiting   system in place and even if it fails for one way  or another you know that you know bad actors would   be limited again pretty quickly from pub sub  to rate limiting to caching of database queries   all sorts of stuff so we'll be taking a look at  that but first we'll start with the redis basics   so that is all for this video i'm gonna  see you in the next one really soon   all right let's talk a little bit about redis  versus in-memory storage of the language   itself and why you would need that because i  think not a lot of people cover this aspect   so let's say you know like i said you can create  a rate limiter we'll see how we can do that but   let's say for now you have um you know an array  of blacklist blacklist ips which you blacklist   um if they are hitting your apis very often right  and you know not really an even an array if you   want a faster access you create an object and  then you you know just have an app.get some api   some api for example and then for example  let's just say you perform some action and then   somehow you are able to request your ip blacklist  this ip right and if the next time this comes you   just check if request or ip is blacklisted then  you just say you know return error whatever so   this is fine this is completely fine and you can  see that when your program this nodejs program   is actually running on on a computer on a cpu  on a system you'll realize this blacklist ip is   technically an object which is somewhere in the  memory only right it it is obviously not inside   the hard disk because the program is executing  right so the v8 engine has compiled the javascript   and it is running and it's executing somewhere  in the memory so it obviously makes sense that   this blacklist ip of request.ip access here it's  not only just synchronous but it's actually faster   compared to any other solution right because your  code is technically sharing the same memory space   where it is the data is also stored so why would  you ever want to use redis right you could just   create your own key value database right in a  single file so you can pretty much create and own   your own redis inside of node.js well there are  a couple of reasons why would you want to do that   first of all red is is used in scenarios where you  want to make your code stateless right number one   making your code stateless is super important  for scalability i cannot stress this enough   if your core is stateless you can pretty much  throw it on any container any aws lambda for   example let it run and don't really worry about  if it crashes or you know if it returns response   because it is stateless you can throw away that  container recreate it and you will be good to go   if your code has stayed you lose out on so many  things like you have to for example websockets is   a good example of this your websocket connection  is always stateful so your backend server should   always be same as what initially got connected  to the front end with http this is not the case   because http is a stateless protocol similarly  you want your code to be stateless as less state   as possible and in this code you can see that  this is a huge state let's say i have a server   which is running seven instances of this index.js  right so we probably have you know nodeindex.js   ran seven times and then the traffic is load  balanced over those seven uh servers so obviously   this logic will break out like you know anything  because now randomly any sort of node process   would be assigned this http request and some might  have blacklisted that ips some might not have and   you'll have end up in a chaos right red is what  it does is that it takes out the centralized part   of the state so you can say uh you know redis  redis dot get stored we will see the syntax but   the idea is that you take out the state away  from application code and store it um somewhere   if you are coming from front end and if you are  especially a react developer which i can relate to   you will kind of realize that redis is you can  you can think of redis as a context api for react   right so you take up your state to a higher level  in in your hierarchy and you separate your uh you   know ui or in this case your application logic and  your global state so redis kind of acts like this   right number two which is you know this is an  this is an enhancement second most important   reason of using red is is there might be a lot of  applications which are disconnected to each other   right you're just working with the single  application right now but what if the same black   listing of ip addresses is also used by let's say  some other micro service which is running with it   let's say this handles payments and let's say this  handles registrations right or maybe like this   handles another file handles registrations and  this handles forward password right so you want   you technically want if a person is blacklisted  from registering uh because they are trying for   you know they're just brute forcing  their way into registering a lot of users   you also want them to blacklist for the  forgot password right so you want this   assume that this is into a different file right  so you can say this is some other microservice   right so you want these two files to share this  blacklist ipstate right and how do you do that   of course you know they are not running inside  same server they might be running as well inside   different servers so you want to take this radius  out of the system you want to take the state out   of the system and create a centralized global  place for all the state code and the stateless   logic can go directly into your application layers  right where you can just pretty much go ahead and   focus on the business logic instead of worrying  about how you would scale the code so these are   two very solid reasons i would recommend you  should use redis in your projects people kind   of abuse redis for pretty much everything but i  would say that if you do not need redis for your   projects you probably are good enough um you know  just not using it for your personal projects or   um you know yeah so that's that's that's that's  the thing you can implement pretty much the   caching and you know database caching and all  that stuff whatever i talked about more or less   inside your programming language as well but the  real use case of redis comes in these two cases   so yeah that's pretty much it for this video i'm  gonna see you in the next one where we'll actually   get our hands on dirty with um actual exercises  which i recommend you to try out and also with   the video course so that is all for this one  i'm gonna see you in the next video hey everyone   welcome back and in this video let's just quickly  do a hello world in radius because that's how we   get things done in developer world we start  with a hello world but what what i want to   do in this one is actually tell you how  you can use go and playground along this   whole course as well so go to codedam.com slash  playground slash node or you can go to code damn   the official website go to dashboard go to  playgrounds and open up the node playground   note 12 right or whatever your version is showing  this playground right here comes with an inbuilt   support for redis as well as mongodb but we don't  really need mongodb in this uh video at least so   you can write redis cli and hit enter and you  will get into that is cli if you see this prompt   you mean that that means you are in today this  now you can go ahead and install redis on ubuntu   if you're running an ubuntu-based system debian  based os by saying apt-get install redis or if   you are on a mac you can do brew install  mac uh not really mac brew install redis   but i would recommend you to learn from code  dam and then when you are moving on to your   own projects later on then use your own systems  because you can mess around with these containers   you know you can just remove and delete and  i'll do all sorts of stuff dangerous stuff here   and because this is containerized your you will  not really affect any other system except for   this small little container now with that being  done let's just go ahead and take a look at how   you enter into redis server right how you entered  into redis instance so what happens with redis is   that it comes with two things the first one is  redis server so you have a command called redis   server and the second one is redis cli right so if  you hit enter you're gonna see we actually get an   an error that it could not create a server tcp  listening on 6379 because address is already in   use right that means we are already running redis  server that's why we got this error at the end   so that's completely fine if you do not get this  error that means you have just started radius over   and it's going to stay there all right so now that  our reddish server is running what we can do is we   can connect with a server by writing redis cli and  we'll be using this command a lot to get into the   redis server for the first um few uh sections  as well as in the hands-on practice exercises   so you are into this prompt and this is a ripple  for redis now so whatever you execute hit enter   it will be executed immediately so let's just go  ahead and say hello world like this and you can   see we got our hello world from radius one quick  thing this command could be lower case as well   it's just your you know your choice i prefer  to write redis commands as upper case but   it it could be your choice if you want to  write lowercase commands that's completely   fine so we did a three hello world here and  that's like hippie pourray of hello world   so yeah that's pretty much it for this video  let's just go ahead and move on to the next one   where we will do a little bit of more stuff and  finally also take a look at how we can integrate   nodejs with redis by the end of this section  so that is all for this one i'm gonna see you   in the next video hey everyone welcome back and in  this video let's just quickly go over through some   common operations in redis starting off with get  and set so like i said redis is a key value store   database so that means you have to set the key  and the value and then you would have the ability   to get the key value so on a very raw level let's  just log into latest cli first on a very long raw   level what happens is that in redis you can set by  saying just set and you know the autocomplete here   will really help you so the first argument you  specify after writing set is the name of the key   which could be anything like code damn and then  separate it with a space this would be a value   like awesome right and technically speaking  you don't really need to give quotes to the   value if it's just a single word but i would  highly recommend you to do that because   it clears you know it it kind of gives the  indication what is the key and what is the value   right so you know you'll see a lot of okays from  datas redis loves to say okay right all the time   so this means okay means that this key has been  set now how do you know that that key has been set   you know that by saying get the key name right and  you don't really have to specify any value in this   case because obviously that doesn't make sense now  set and get are the fundamental building blocks   of freddy's right and these are the few these are  the two things on which basically everything else   will be built uh you know more or less because  the fundamental meaning of reddish is to have a   key value store there's another interesting  variant of set which i want to talk about which   is called set nx so set nx basically just means  set if non-existent right so what this means is   let's just say set an x key value so i'm going to  say code dam and i'm going to say go damn and i'm   going to say wow right and you saw that we got  an integer 0 as the output what does that mean   that means if i just go ahead and say get code  down now you can see our value is still awesome   it did not update to wow why is that because set  nx only sets the value if the key is not present   right take a look at set here for example i can  say set code damn one two three and now you will   see that if i get code down it has been updated  to one two three however if i do a set nx of code   dam 456 you'll see it still does not work and the  reason it still does not work is obviously because   code dam is already set right if you try set nx  with let's say redis as the key and value being   awesome you're gonna see and i would want to keep  that consistent with what i said so you're gonna   see that you actually get a one and then you can  say get redis and you'll see you get awesome right   so set nx has a use case trust me this is not  just any additional feature it gets a lot of   use and rate limiters and a lot of custom  applications these are the things you should know   about in redis right you don't really necessarily  have to memorize their syntax or their you know   functionality to the metal as well you just have  to know what you can do possibly in redis and then   you can always look them up on google right all  right let's let's also take a look at one of the   other variants of get so let's say i have a key  set as name and i'm going to say this key has a   certain this value has a certain structure in the  sense that the first two letters are initials of   the name and separated to the dash and the next  two letters are two letter word of um country   code of that user right so for me it will be mahul  mohan and then india so let's say i want to get   the name obviously i can do that and i'll get  this full thing but let's say i just want to get   the first two initials of of of the user right not  really get the whole thing well you know you might   argue that you know you can get the full string  and then trim it in your programming language   of your use but let's let's be honest here you  might want to skip a few steps if you can just   get that thing done in the database itself  right because that thing will cost you some   cpu cycles within the programming language as well  so why not just get it done on the database layer   so what we have with redis is another function  called get range get range and what this does   is that as the autocomplete says you specified a  key a start and an end value so let's just take a   look at one by one so i'm gonna give it a name i'm  gonna start with zero and end it with zero we got   an m if i started with zero and edit with one you  see we got an m so you can see this redis index is   actually inclusive of both right you get the lower  bound as well as the upper bound so get range mm   zero to one gives us that we know that the format  is you know initials and then country letter code   so we know that it would probably be 4 5 not  really 5 6 will be our answer for the country code   right so you can now store all sorts of stuff in  virus and just go ahead and do a get range of name   five six and you'll be good to go similarly you  can use set range here so you can say set range   then you can say name then what you want to say  is the offset and this is just the starting point   right the ending point aurelius will automatically  calculate from your value right so i'm going   to say i want to update i n to let's say us for  example and hit enter what you're going to see is   now if i try to get name you'll see that the mehul  mohan dash has become us now right so you have   just updated the part of the key without actually  getting the whole key and then removing that and   doing all that stuff so you you don't really  have to necessarily do that let's just go ahead   and set another key so for example let's just go  ahead and say key2 as maehul is awesome hit enter   and now you get we get okay that's completely  fine but what i want to do is now i want to get   multiple keys like this together so how do we do  that we say m get instead of just get m stands   for multiple here and i can say key2 which is  fine it just gives me one key but you can see   we got a number in front of that key right so  that means you know we we can sort of return an   array in a programming language structure right  if you can think about it it'll map to an array   so key2 for example then also let's say i want to  get name i also want to get code damp and let's   say i want to get some random key which does not  exist hit enter and you'll see that we got all   the keys in the order which we specified that's  important so that you can directly map the usage   and for the key which does not exist we get nil  right or null in in a programming language we'll   see that how integration works with node later  on but you get the idea then just like m gate   exists there also exists m set which kind of gets  confusing honestly but you know if you get the   hang of it you can get used to it which is key  value key value key value right so you can say   key one value one key two value two key three  value three right that's why i prefer to write   values in quotes because it kind of you know  right now we just have key one key to e3 as the   names but if they're different it kind of gets a  little messy to read statements like these what is   being said so if you hit enter you still get okay  and you can see that your key one or you know   why not let's just do em get key one key two key  three exist as value one value two value three   right so that's pretty cool and finally you can  also delete these keys right so like i said you   can see that we have got a hotspot of keys right  now so one way to go about is to actually delete   them one by one which you can go ahead and do like  dell and just write you know the key which you   want to delete so let's say key one in this case  key one gets deleted and you get an integer of   one which is the number of keys deleted right so  if you do a dell key two key three yeah that's it   hit enter you get two two keys are deleted if you  try to delete key two again for example you'll get   zero that means key two was not there in the first  place so that's why so you can do that or you can   also use a command known as flush all but before  that i'll actually show you one handy command   which lists all the keys and you'll use that all  the time so this key this command is called key   and star nope keys and star right so this command  right here lists all the available keys in your   redis database right now you might say why is  this useful very useful when you're developing   applications with redis and you just want to get  a quick glimpse of what the state of redis looks   like at the moment so you can just have an open  different open server terminal and just take a   look at what redis looks like for now so you can  see that key star gives us all the keys and now   i can go ahead and do a dil del of name redis and  code dab this will work just fine but instead of   doing this what you can also do is write flush  all and this will just remove all the keys   from redis right so you can just go ahead and take  a look at key star now and you'll see that there   is no key now so yeah that's pretty much it for  this basic redis tutorial i hope you get a hang of   got a hang of how redis works looks like how you  can manipulate get set multiple get multiple set   delete list all the keys remove all the keys do  all that stuff and this should be enough to just   you know enable you to play around so for the next  few exercises try to complete them on your own try   to set complete the challenges which are given and  yeah that's pretty much it for this one i'm gonna   see you in the next video hey everyone welcome  back a very quick video on conventions on redis   key structure um you're going to find that you  know you can pretty much name redis keys a lot   of stuff you know like in variables you cannot  really use column or hashes and stuff like that   in red is that is allowed but a convention  in red is to follow i mean you know you can   break conventions that not that's not a big deal  but the convention to follow is you have a key   something like um you know name space  one colon namespace 2 colon and so on   so for example let's say we are oops for  example let's say we are trying to go ahead   and i don't know create some key for a blog post  so that we can cache that result later on so what   what that could look like is blog then maybe the  url of the of the slug let's say uh my awesome   post and then the id of the comment let's say we  are caching that in redis so let's say 23 right so   i'm going to say set blog my awesome post  23 as the value this is so awesome blog post   for example right now in node.js all i need  to do is let's say if i'm trying to get uh   this command from commands right all i need to do  is extract out first of all the post id and then   comment id like this from request.body or whatever  sanitize it super important make sure to parse it   that you know the user is authorized and is you  know enabled to see that comment make sure you do   that stuff redis is not going to do that for you  and then you finally can create a constructed key   constructed key like this which  follows a convention which looks like   you know uh like i said blog then your post  id then your comment id you know it's it's   it's just a convention of course you can go ahead  and make use of underscores of course you can go   ahead and make use of slash of course you can go  ahead and make use of hash here it's your wish   but you'll see that in a lot of code bases if  you're working you might see that this is a column   so first thing i don't really want you to get  confused what this is this is a valid key name and   second thing this is the convention which kind of  is followed in redis world so yeah that's pretty   much it for this video i'm gonna see you in the  next one all right guys welcome back to another   video this is super power of redis which we're  going to be discussing about in this video and   honestly i love the fact about radius that this  thing exists in redis and that is the support for   temporary keys this makes so much sense and  this is so awesome because now you are able to   offload the timer aspect of your application  to your database layer what does that mean   this means that in redis you can go ahead and  set keys which are temporary that expire after   a certain duration it could be seconds it could  be minutes it could be hours it depends on you so   what we want to do in order to do that let's say  i go ahead and say set um code damn is awesome   uh you know awesome forever right because we know  that code down will be awesome forever right but   yeah i don't really want to expire this key but  let's just say we want to expire this for some   reason so what i can do is i can say expire  and then i can say code down in 60 seconds   so that means this key right here will be expired  in 60 seconds and what do you do meanwhile well   you can do a keys of star to see that the  key still exists that's one thing you can do   you can also write ttl and then the name of  code down right so you can say code damn and   you can see it's still got 45 seconds to go  right 42 seconds to go 40 seconds to go 39   38 and you can see the death approaching right  so there's that so what does this mean is that   once this timer will hit what will happen  you know as long as this timer is working   is it has not hit zero you will get awesome  forever but the moment it hits zero in 20 seconds   about you will see that this key is automatically  removed without us writing dell code down and even   if you write dell code down right now it wouldn't  really crash or anything you know this is just a   background feature which can just delete  the key so you can see ttl five three two   one boom right okay you saw that we got a minus  two here because minus two means that the time   or the key does not exist right so if you just  go ahead and do dtl of some random thing then   you'll also get minus two because that key  has been deleted if you do set a key like   key one and hundred and then do a ttl of  key one which technically is not expiring   you will get a minus one right so there's that  otherwise you will get the duration in seconds   um how much the key has to live now what you  can do is instead of using set and then using   expired you can do it in a single statement as  well by saying set set ex and then the key name   so i'm going to say code damn you know you can  just omit the quotes for that go down i'm going   to say this just for 10 seconds and the value is  awesome forever and hit enter and you can see we   got an okay and it's just gonna expire in d ten  seconds let's see if we can make it four three two   one ah it's gone right so now you get nil once  it's gone so yeah that's one cool part of redis   and what you can also do is just go ahead and  set the redis key again if you want to convert an   expiring key do not not expiry so you can say  set ex for example go damn 50 and then let's say   awesome forever right will be awesome forever for  50 seconds so if you go ahead and take a look at   this right now it's awesome forever tdl is close  to 44 right but i don't want it to expire right   this is a pretty cool message so i can say expire  and then code down to hundred right and now we   will see that the ttl oops the tdl for code down  ttl basically stands for time to live i'm sorry   i did not actually elaborate on that so if you  were confused ttl is time to live so now you   can see the time to live of the key has been  increased and if you want to remove this timer   altogether you can just set this key again with  the same value right so awesome forever and there   you go now you can see the ttl has been changed to  negative one that means it will stay here forever   like you know like i said like we all know like  you all know goddamn is awesome forever so that   is all for this video we're gonna be having a  lot of interesting use cases of this timers and   working with that very soon but yeah that's  pretty much it for this one i'm gonna see you   in the next one hey everyone welcome back and in  this video let's just quickly go ahead and take a   look at you know just some theoretical stuff that  how does actually expire keys right because this   is interesting and you know if you think about it  it's pretty cool thing right you can offload that   timers and that part to redis which is a  database layer so if you think about it   redis was built to operate on millions even  millions and hundreds or tens of millions of   simultaneous keys together right so if you have  tens of millions of simultaneous keys like set ex   and you know you're working with them you might  think that you have also have tens of millions   of timers intel internal small timers running  within uh the system which sounds bad right but   that's not technically that's not technically how  redis works so if you have a set ex for example   go down and 100 you know not really go down 10  and 100 what's gonna happen is actually you know   we are not touching anything right now nothing  is going on nothing is happening i'm not really   writing any command we are not technically  touching this key right so redness evaluates   whether the key is expired or not on a need to  know basis there is no timer running actually   what's really happening is that internally under  the hood radius has stored that the scored dam key   has to expire on 3 p 3 a.m to m 2 8 minute and  let's say 15 seconds let's say we started at 5   second right so that time stamp of expiry is there  on this key and the moment you access it via get   or maybe like you know wire listing all the keys  by key start whatever you do the moment you uh   try to access this key read this before actually  sending this key's value or you know what the key   is it'll actually try to see if the timestamp is  expired or not if it is it will mark it as deleted   remove the value and get on with it right now this  sounds super cool in theory but actually this is   cheating right redis is not really getting rid of  this key it only gets rid of the key if you open   the box which sounds good but it's actually bad  for your system memory right if you think about it   if you're storing a large string here with  an expid of a few seconds you almost want   that expiry to clear not because the key was meant  to be cleared but because you wanted to free up   the memory so for that also redis also randomly  not really randomly before six red is version six   red is randomly used to just ping up keys and say  hey are you dead so that's that's a little funny   but let us just go ahead and poke around random  keys are you dead are you dead are you dead and   he'll just clear off the keys which responded yes  but with red six there's a there's a better better   um i don't know this they're just following some  algorithm which sorts the keys um according to   their expiry times uh but yeah they have a little  bit of structure there but the rest being assured   that redis will always work as you intend  it to like you know set ex would always   work like you wanted to it's not like somehow  the key would magically pop up even if you are   uh you know even if redis does not expire it in  memory but this is you know just a little bit of   theory you should know how set ex and how it is  under the hood works because that these things   like keep the interest going right in the in the  in the framework in the library in the software   so yeah that's pretty much it for this video i'm  going to quickly see you in the next one make sure   you're doing all the challenges and labs that's  pretty pretty awesome and important um and you   can do that only on goddamn.com so yeah that's  pretty much it i'm gonna see you in the next one   hey everyone welcome back to another video in  which i want to show you an actual integration   between nodejs and radius now first things first  you need to make sure that your redis server   is running one way to go about that is to just  write redis cli and you'll see that this thing   appears um which means that your redis server is  running on the local host at least the next thing   you should be in a node.js project obviously i  am and you can use code on playground as well   codedown.com playground slash node and you're up  and what you want to do is you want to install   something known as ioredis right and let's assume  cr instead of npm so i'm going to say yarn add   iodis and what io data is is it's  one of the packages of a node which   enables you to communicate with this client  right there are multiple packages there is redis   there is node radius i guess there are a bunch of  them but i recommend ioredis and i also use that   on code dams infrastructure so that's that's that  all right so once that is done what you can do is   you can go ahead and start working with this  bad boy so you can say constructis is required   iodis first of all right and if you just  console log this thing you will see in   the console that you get a good object with  yourself right but this is not how you do it   this is actually initialized with new so you'll  say a new redis instance which gives you access to   uh you know a redis client which you can now  interact with so what does this mean this means   that you can go ahead and say for example host  is localhost which is true in our case and port   number is for example 6379. and how did we  get this we got this because if you observed   if you write ready cli that's what you get  right now this might be different depending on   you know if you're trying to use some aws radius  elastic cache or some external third party one so   you might have a different domain or sub domain  here but the standard where is sport is always   6379 but for some reason if you are running it  on a different uh port then you should mention   that here there are a bunch of more parameters  which you can specify here but i'll just leave   it to you you know to you if you want to have  authentication and all that stuff that's on a   little bit of need to know basis so you can refer  documentation to that now one quick thing about   this redis operates is its messages on tcp right  so this is actually tcp communication which is   happening here so your node process is going to  establish a tcp connection to your rarest process   redis server your node server and redis server  so all the communication happens that way right   and that's completely fine that's how http  works as well http works over and this is a   bi-directional communication obviously so  you can say something to redis redis can   also say something to you which is especially  useful in pub sub mode we'll see that later on   but uh there's that so let's just go ahead and  start working with this you can add listeners to   this you know in in the sense when redis is ready  or when redis is available but you necessarily   do not need to do that because um this library  will automatically key you your messages anyway   right so we can start working with like redis dot  set key one and then value one right and that's it   so if i go ahead and for example run this right  here we got a console log oops value one is not   defined because this is not in quotes key one  value one let's just go ahead and run this again   and you can see that we got this and we stay  at here because redis is still running in the   background that connection is established so  we probably need to close that down so for   now let's just do a control c here and go to red  cli and let's just go ahead and list all the keys   i'm going to do a key star and you can see  that we got a key one which we just saw   set here with our node.js code right so let's just  go ahead and exit this out and i'm gonna go ahead   and actually show you how you can quit your edits  client as well but before that how do we get this   how do we get that okay response with us right so  if you go ahead and say set for example key2 value   2 you see that we get this ok from redis which  is an affirmation that's everything went right   right in this case we did not get that so how  do we do that well you see that this action is   actually asynchronous just like an http request  to a remote server is asynchronous this is also   asynchronous because well at the end of the day  you are talking over tcp right and redis might   very well be located on a remote server so it  makes sense to make it asynchronous so what   this returns is that it also returns a promise  this also expects a call back right so you can   do either so i'm going to go with a promise i'm  going to say value here and i'm going to say await   and i'm going to actually console.log value i'm  not sure if we are running the latest node here   probably not so we might need to throw it in async  function um boot for example i don't know and   we'll just call this right and what we can also  do once we are done is we can say redis dot quit   so that it quits our node.js program so once  we do that i can hit this and run this command   and what's going to happen is that we run this  actually let me just get rid of this console log   let's run this and you can see that we got this  okay which we always expected right so we can say   okay yeah otherwise nope you know or we can just  leave it like this so that's that's one way to   go about if i try to get this key instead for  example redis dot get and i say key one that's it   hit the command you can see that we got value  one as the output in this case right which is   pretty cool so you can pretty much mimic all  the commands of this uh redis from this library   and i will highly recommend you to check out the  documentation as well on the side for ioredis and   how the common operators common instructions would  look like we will learn a lot more about working   with this library in the next few projects which  will be building so that is all for this video   i'm gonna see you in the next one hey everyone  welcome back and in this section we're going to   be starting off with some projects so i have set  up a very simple node share server on code down   playground and we're going to be taking a look  at how we can incorporate redis into this one   so first things first i'm just going to walk  you through the project very quickly in this   video what is being set up and what is there so  it's a very simple node.js application which just   serves the index.html page and gets the number of  stars of a particular repository right and then   just shows them here on the screen so we will be  using github api on the back end to make that call   and on the front end we will be just calling  our backend server right so we call the data   endpoint with the method of post and you  can see we are using express in node.js   and we have configured it to use json and  we are creating an api endpoint with data   extract out the repo which is you know  what is passed in this input field   we make a request to the github servers to get the  number of stars which you know the endpoint has   and then we respond to it now this is obviously  not a production ready endpoint because it lacks   try catch um error handling and stuff like that  but you can take care of that later down the   line as well i'm just gonna go for a little bit of  simplicity at this point so that's why we're gonna   keep keeping it like this all right so with that  being done now we want to set up redis into this   infrastructure right and actually before we do  that let me just go ahead and actually show you   how this looks like so if i go ahead or actually i  can just do it right here by just go ahead and do   that there so if i go ahead and write facebook  react and hit on go wait for a few seconds um   actually we need to refresh this because the code  was changed facebook react you can see that we get   starts for facebook react this much and then  milliseconds this whole operation took was 471   right let's just think of something else  so um i don't know let's just think about   google angular i hope this exists or maybe  like no wrong url so maybe like angular angular   because most of the companies keep it like this  yeah so you can see we took about 458 milliseconds   for this request as well all right so let's see  if we can do better so what we're going to do is   integrate redis into this api endpoint so  that we can cache this thing right and the   way we're going to be doing that is i'm going  to be importing redis from require iodis right   and we can see that we do not have iodis installed  at the moment so let's just go ahead and install   ioredis and actually what we can do instead  of um you know just requiring it right here we   can create a separate file we can say for example  redis client dot js like this and here we can say   redis is equal to require ioris then we're going  to be saying redis dot reddest.createclient   because that's what we wanted to do so we will say  you know this should be something like redis and   this then this will be something like red s oops  let us is equal to redis dot create client and not   really create client this should be registered new  redis because create client is for a different uh   syntax for a different client right so once we  have done that we don't really necessarily need   to pass any configuration because by default host  is localhost and port is 6379 and you can verify   that the redis is running by writing redis cli  and yes it is running so that's perfectly fine and   what i'm going to do is just say export default  radius right here right so that means we are just   not really export default because uh we are using  uh common js right now so we're going to be using   module.exports now what we can do is instead of  doing it like this i can just say redis client   and now we can do our magic right so i can just  go ahead and say console.log redis just to see   if everything's working fine nodeindex.js  and looks like something is not working fine   so node index.js there we go so we can get the we  get that it is object so that's completely fine   now what i want to do is i also want to say that  how do we cache this how do we cache this response   so to do that what i'm going to do is  actually check if this if this repo   exist in redis cache first of all before  making a request i'm going to say if redis   somehow dot get this repo somehow then i  want to just you know use the cached version   so to do that let's just go ahead and take the  value out of the radius i'm going to say value   await redis dot get repo let's assume that we  are storing um you know it in the same fashion uh   key is basically this this whole thing  so one thing i would want to point out is   please please please please perform  validation before putting in arbitrary   arbitrary user data as key right you don't you  always never really want to do put arbitrary user   data as a key as any operation without actually  validating this right so i'm just going to skip it   here for um brevity but you should go ahead and do  that so i'm going to say if value does exist then   that means means we gotta cache it right  i'm just gonna go ahead and return it   right in there so i'm gonna say status  as okay and then stars as um you know   response not really response just value we can  actually include another field called let's say   from and i'm gonna say remote right and here we  can say from we can say redis right so there we   go now if we do not have value then of course this  will happen and then we'll get to this point and   that's that's all fine and good but we also  want to make sure that if it the key is not   available we cache it so how we're gonna do  that is we're just going to simply say await   redis dot set and then i'm going to say repo  i'm going to say response dot star gazers count   right and we're going to only do that if response  dot sarcascount is not equal to undefined   because for not valid repos this field will be  undefined right so i'm going to say if this is   not undefined then set it and then return it  to the remote right so there we have it now   i'm just going to go ahead and run the server by  nodemoreindex.js and what is going to happen next   is right here let's just make a little bit of  more modifications i'm gonna also say source   source right here and i'm gonna say data dot from  right so that tells us where it is coming from   so i'm gonna go ahead and write angular  angular let's start with that and actually   refresh this first so i'm going to write  angular angular right go and we can see   that looks like something is crashing in  our api and that is because it looks like   we just returned it it should be returned let's  start json right we want to respond it like this so if we go ahead and try to do this now you can  see we get stats for angular is this millisecond   is this and source is reduced you can see we  got our source from redis let's say if i try   for facebook react go you can see we got  our milliseconds as 500 and sources remote   right and this is the count let's say let's go  to the github top repos and see if we can get   these up and running so i'm going to go ahead  and paste this and i'm going to get this to go   815 stars 454 milliseconds source remote right  but now if i go ahead and press go again we see   we get a drop in the response time and that's  that's a you know consistent drop you know it's   it's not like uh it's just one time thing you can  consistently see that we are close to 300 350 250   that range but if you're doing a fresh repository  and that is not from redis you're gonna clearly   see that we are closer to 400 500 range right  once you get to radius the milliseconds drop   let's just take a look at bitcoin a very hot thing  these days so we're gonna go ahead and take a look   at that and you can see we get 472 so it's close  to i would say 50 reduction and that is after   the actual request that is you  know this request right here   which actually goes through a remote server it's  not even through a you know small server it's   a powerful server running on the cloud right so if  you do it on your systems it will be much more in   terms of the difference right so that's one way  you can integrate it but the setup can obviously   be improved a lot it's not perfect and we're going  to be seeing how to improve that in the next video   make sure you're attempting the exercises because  i will be creating a lot of exercises so that you   implement it yourself so do that and that is all  for this one i'm gonna see you in the next video   hey everyone and welcome back and in this video  let's just go ahead and improve a little bit of   our setup so that we get a little bit of more  clarity on how this is working and we can   improve the setup as well so first thing i want  to do is i want to actually get a sense of um   what is the total time which reddit stakes versus  fetch takes right here because you can see both   are async and this right here is a little bit of  um you know not so good metric because it also   includes the api endpoint of hitting this api from  my browser to the server right so what we want to   do is we also want to have a time start here which  is something like date.now and then there if this   value i'm going to say time end it's also date.now  and i'm going to just go ahead and say time for retrieval and probably the spelling is wrong so  i'm gonna just say red and i'm just gonna say time   n minus time start right so this gives us a little  bit of millisecond information on how much time it   took similarly we're going to do the same thing  here and we're going to be having this uh time in   statement right after we have a response right and  just for the sake of it you know just to make sure   we are not calculating the reddest part inside the  you know this part inside our calculation i'm just   going to reinitialize it again so timestar is this  time end is this and then we just do a time for   retrieval as time and minus time start and we can  go ahead and show that on the front end as well   so what i'm going to do is actually actually just  let's just go ahead and put it on different lines   because that becomes a little bit of messy  otherwise and i'm going to say time for retrieval   is data dot time for red right that's what that's  what we named right so there we go now what i want   to do is convert this one into pre so that we get  a nice output and refresh this so now if we try to   go ahead and write angular angular for example we  see that we get the stars we get the milliseconds   we get redus and time for retrieval is essentially  zero right which does not really help a lot   and that makes sense right because redis is super  fast in the sense that you cannot really measure   that in terms of milliseconds you need a smaller  resolution like microseconds or nanoseconds or   something like that but rest assured we can we  can say that this 330 milliseconds is just the   round trip of this front end calling the backend  api and then back and returning the response   right so we can know that all right with that  being done let's just go ahead and try to   implement a new repository try to see a new one so  i'm going to go ahead and copy this one iptv.org   or whatever it is and let's see what we get here  so you can see right here we got a second of   response out of which 220 milliseconds actually  went into this api call right here you can see   right so technically our backend only took about  800 milliseconds for this whole round trip but   it appears like 220 milliseconds were wasted and  getting to github and getting that data out so if   i go ahead and do that again you can see we kind  of get a similar figure which we would have got if   our time was zero so there's that you can see  that this definitely saves a lot of time and then   of course you know this stuff is variable because  of network effects right now with that being done   what i want to do is actually we want this to  expire right because if this is not expiring then   you know this is a problem because repositories  gain or lose stars over the time right so you want   to maintain an updated database so what you could  do you can take a couple of strategies here the   first one you can do is uh probably just go ahead  and make use of get ex here so the syntax would be   similar to what you see inside of redis cli so if  you do a set ex not really get ex but actually set   ex so you can see you get key seconds and value  so instead of doing set you know what you do   is you do set but with key and then seconds to  expire so one thing you have to remember about   using ioritis is that whatever you write here you  know mostly this will work whatever you write here   in small case will be a command of redis like said  ex for example writing said ex would be a command   and then all the arguments which you pass will  be passed one by one into the data server right   so let's just say i want to set it for 60 seconds  and then be done with it so what i'm gonna do is   i'm gonna go ahead and start our server one  more time because this is already running   let's just go ahead and refresh this and pick up a  new fresh repository so i'm gonna go with this one   now because we haven't really picked up that one  before and once we go ahead and hit go you're   gonna see we get a remote retrieval but the next  time you're going to see that we get a reduced   retrieval that means it's in redis but we have to  hurry up now because we have actually set this to   expire in one minute so let's see let's just go  ahead and take a look at this ttl of this key   and you can see that it's actually going to expire  in about 38 seconds right all right so now you can   see that you are not just caching the responses in  the eternity so you are actually revalidating and   you know invalidating the cash after one minute  so that's a start that's all for this video in   the next one we'll be doing some more interesting  stuff so stay tuned hey everyone welcome back and   in this video i want to share another way where  we can you know just help improve performance   overall and this is not really you know any any  any sort of specific method but just something   intuitive which clicked to me so you can see right  now it is all working fine and good um you know   you click on this you get a remote response for  the first user and then you can just click on this   and you'll start getting redis responding you for  you know for the next 30 60 seconds whatever it is   but if you see if you if you see what's happening  here is that's what's happening essentially is   that for the 60 seconds you are responding  with you know the data which is there but   that one user gets that response which is uh  you know long in terms of retrieval time right   so what you can do um again this kind of defeats  the purpose of redness in the sense that you are   making a request again uh but at the same time  this could be useful if performance for users   is much much more important than for example say  hitting this endpoint again and again right if   you don't really want to hit this end point again  and again that's absolutely fine you should just   return it right here but if you can't afford to do  that what you can do is pretty much you know just   return from here and then just perform and perform  in a request right so you can say response await   look that you have already sent the requ response  to the front end right so this is just extra stuff   which we are doing right here so what we can say  once the response is available to us we can say   if response uh the strategies are count is not  undefined we can just go ahead and update the   redis uh with the new stargazers count right  because now whenever this means that whenever   somebody is actually visiting and continuously  visiting not only we are just actually keeping   the same correct uh response time which is zero  milliseconds or sometimes one millisecond but we   are actually also updating it and then extending  the duration of that particular thing right so in   this case what's happening is suppose you receive  you receive one hit on this every second that's   about 60 hits per minute right if you're receiving  that end point you don't necessarily want the data   to stay uh you know stay stale for 60 seconds and  then refresh and then stay stale for another 60   seconds so this approach right here will help you  with low response times number one because you are   still uh you know we retrieved from remote first  time and then we are always retrieving from radius   but at the same time this will also help  you to maintain correct data so your data   is not stale right um well i don't know if  github actually caches this so let's just see   if we can break this out so if we go to this  repo and if i start this repo right here we   have 651 650 so if i go ahead and click ok yeah  you can see that even though our source order   was reduced all the time but still our response  got updated it would not have happened unless it   would have hit remote first and then you know  back to that is so this approach will do that   right so i just wanted to share this real quick  with you and that is pretty much it that's all   you would need in a in a in a setup like this now  of course you can improve this in the sense that   you know you can create wrappers around the code  um which just cache them do something like that   um so one way we can do that is we'll explore  that in the next video but yeah that's that's   the essence of how you're gonna be doing stuff  right so that's pretty much it for this video   i'm gonna be seeing you in the next one really  soon all right everyone welcome back to another   nodejs plus redis project in this project we'll  be learning about how you can create a simple   rate limiter with node.js and express but in this  video i just want to walk you through over how the   project works and looks like so the front end is  pretty simple you can see we get and hit an api   endpoint we have three buttons and we have an  output for showing what the api is returning   we just set up a few listeners on these three  buttons and the function which is called is this   hit api every single time one two three and  you can see what we are doing essentially is   just performing a fetch request to api 1 api 2  api 3 depending on what button we are heading   the method is post and then finally we just  convert it into json whatever response the server   is sending to us right then finally we append that  to output in our text and that's it so if you go   ahead and take a look actually this is calls in a  minute not really just calls so we're going to be   changing that so if you go ahead and take a look  inside the back end now you can see our first line   is pretty simple first route is simple because  it's just returns us this index.html document   then our three endpoints here which are three apis  api one two three all three say response okay and   calls in a minute as zero right and one more thing  this should be actually api two and three not just   api one all along so once we do that and also  on the back end what we want to do is actually   change this to from just return to rest.json all  the way down to every single api which we have   all right so with that being done let's just go  ahead and click on this hit api one and you can   see we get a response okay called zero and we  get all the way down so what next task would   be to increment these calls and introduce radius  and i have rate limiting and all that good stuff   so i'm super excited to do that in the next video  let's just go ahead and take a look at that in the   next one hey everyone welcome back and in this  video let's just go ahead and take a look at how   we can integrate rate limiting with redis on an  express app and on any any single api so we're   going to be doing it raw bare bones metal uh but  obviously you can use a package in production you   can use any npm package you want but i'm going  to show you how you can do it in redis itself   so first things first for rate limiting let's  stick to just api one and then we'll extend it to   basically all the apis the first thing i want  to know is the ip address of the user right   so what how you determine an ip address of the  user is in a couple of ways it depends on if   you're using remote proxy or not so stuff  like that depends right so if you go ahead   and actually console you know just get the ip  from either the x forwarded for so this is how   you use it if you're sitting in front of a remote  proxy like nginx and i know we are in fact sitting   in front of nginx for this container codename  runs in so we will have a right ip from this or   you know you can have a request.connection.remote  address as well as the property if you're directly   sitting across the internet so you can use  these two things and you'll be good to go   now the next thing is let's just go ahead and  actually take a look at our ip i'm going to just   ip dot slice 0 to 5 so that we just know that it's  working but not really expose the whole ip address   so i'm going to go ahead and hit api in point  one and you can see that it kind of you know   gives that ip feel that's fine all right so the  next thing i want to do is once we have our ip   address what we want to do is we want to somehow  say that you know this person has visited this   api route and for for the sake of my ip address  privacy i'm just gonna go ahead and use the first   let's say eight or maybe like nine characters in  the ip address right so you will get my ip address   like this but ideally you can go ahead and  use the full ip address right so you can go   ahead and do that that's completely fine so  what we're going to do next is we're going to   be storing this thing inside redis and we  already have a redis client with us which   we did in the last project so there's there's  that and what we want to do is we want to say   first of all await redis dot increment and then  we pass in this ip address which we have right   and the property of increment is that if the key  does not exist it'll create it it'll set it to   zero and then increment it so you finally get  one right if it does exist it just increments   it by one so that's pretty handy so you can just  go ahead and say const uh you know request and   just console.log number of requests made so  far and that could be just requests right   so there we have it now if i go ahead and  refresh this well we did not really need to   do that but anyway if i click on this you can  see we get number of requests made so far one   two three and it will go on and on so we can  pretty much pass this like this and you can see   now if i go ahead and you know just press on this  you can see our calls are now getting incremented   which is progress right which is progress but  this is still not calls in a minute thing right   but we'll come to that but for now we can  work on this right so we want to say that   hey if you're making so many requests request is  greater than let's say 20 then i just want to say   return rest.status is 503 and you know json  you know response error uh calls in a minute   and then negative one you know whatever or maybe  like request as well why not right so now if we   go ahead and make it all the way to 20 you can  see now we start getting response as error and   calls has you know whatever the calls  goals amount is right so this time now your   your expensive function calculation can  go here you know your database calls   whatever you're doing that could happen  here at this point because now you have just   stopped the person from actually using your  service right you have rate limited them so   that's how you do rate limiting in a basic sense  but this is obviously an incomplete solution so   we're gonna be taking a look at how we can enhance  this in the next video that is all for this one   and i'm gonna see you in the next one really soon  hey everyone welcome back and in this video let's   just go ahead and take a look at how we can go  ahead and implement the functionality to actually   make sure that you know there is a cool down thing  happening after some time so that's pretty simple   if you have used redis so far you would understand  now that the only thing we need to do is we need   to just make sure that we are updating or  renewing the expiry date on redis right   so you can say await redis dot expire and then  you can set expiry to this particular key so we   know this is ip and then let's say i can say it's  60 seconds right and we do this only when request   is equal to one that means on the first request  whenever the server arrives we're gonna do that   so that means whenever the ip address or whatever  it is makes the request for the first time then   we set the expiry on the key to be 60 seconds and  then it will stay that all the way um up to you   know if this window expires then your account gets  reset otherwise you just stay there right and you   can also go ahead and say let expiry time and what  you can do if request is equal to one like this   otherwise what you can do not really expiry  time but dtl otherwise what you can do is   set ttl to await reds dot ttl and then ip  and then you can pass in the tdl like this   and you can also pass dtl right here  right and you know you can give this ddl   right here so now what you can do is basically  you know you can give ttl to 60 here instead of   instead of assigning it to this value but you get  the idea now you can go ahead and say right here   response calls and then also ttl that is how much  time there is left for this particular application   to work and what you can do is go ahead and  refresh this and hit on this all right so now   let's just go ahead and try to hit api one and  you can see we got a ttl of negative one which   is not good because we are not clearing our  radius cli so let's just clear our redis   store and run node mod again hit refresh hit api  one and you can see we get dtl 60 then on the next   call it's 57 56 so it's expiring you know it's  going down but if you take a look if we go all   the way to 20 now we start getting errors right  because now uh we are not executing this part but   we still see that tdl is about 50 it's 42 now so  it will come down it will come down all the way to   60 all the way to zero and once it does then your  client will be able to make more requests again   right so this code right here is now safe from  more than 20 executions per minute right now   of course depending on your requirements you can  play around with this number 20 and 60 right here   depending on what you want maybe you want a per  second um you know throttling or maybe like per   10 minute or per hour throttling it depends on you  but that's how you're gonna do it right in a very   simple way you can see we have still four seconds  to go and now if we hit enter you can see we got   tdl60 again and it goes on and on right so that's  one thing to go about so yeah that's pretty much   it for this uh video in terms of how you can set  up tdl we will in the next one probably take a   look at how we can clean this up a little bit so  that is all for this one i'm gonna see you in the   next video really soon hey everyone welcome back  and in this video let's just go ahead and take a   look at how we can create a middleware for our um  rate limiter because this looks ugly to use and   you know it's not really feasible as well so let's  just go ahead and actually just go ahead and do   uh something like raid limiter dot js right and  this file will consist of our function right here   which we can use as a middleware so first things  first what this would be is it will be a function   which would be in the form of an express  middleware so rate limiter would probably look   like request response and next that's what express  middlewares provide you request is this object   which you get response is this object and next is  basically a function which if you call the next   middleware in the chain will be called otherwise  it will not be called so our functionality would   remain more or less the same so i'm just gonna  copy and paste this whole thing right here   right we will also get our redis like this so  that we have access to our radius client this will   again become async so we have a rate limiter right  here and we will finally say module dot exports   rate limiter so we get the ip address first of all  we check the request by rate limiting you know by   incrementing it in redis um we can see that if  this thing happens it's fine otherwise this is it   then what we can do is we can check you know  just copy our copy out that logic and then   make a little bit of modifications  so oops we say if this is the case   then do this otherwise just call next that means  just call the next route right whatever it is   with that being done what we want to do is we  want to make this rate limiter a little bit more   flexible in the sense that instead of doing all  of this what this rate limiter would do is it will   actually return as a function itself right and i'm  gonna tell you why that is a good way to go about   all right so now why i did that i did that because  this way we will be able to provide some of the   features some of the functionalities which might  differ from api to api right and you don't really   want to mess around with the actual code code so  let's say this is a this is let's say a second   window uh you know seconds window not really a  good name but i'm bad at naming things so there   we go and then let's say allowed hits so these  are the two parameters which are also required   so what i'm gonna do is i'm gonna put the seconds  window right here and allowed hits right here   right so what we are doing is basically making  this dynamic in the sense that hey if your second   window second windows expire or if it does not  expire and you're allowed it's exceed that thing   then you know you're you're bad right and you  can also set your ttl like this so there we go   this looks good to me at least um let's  just try to take a look at this and see   if we can use it as a middleware so i'm going  to go ahead and import this rate limiter from   this file rate limiter which is available  right and now inside express i'm just going   to put it like this and i'm going to say  you know what we need to do seconds window   is basically let's say 10 for this and allowed  heads is four for example right and then we do   something like this or you know because this is  not an end point we're going to be doing this   right here all right so now once we do that  hit refresh what's going to happen now well   i think our application is crashing that's  why await data.increment is only valid in   uh all right looks like we are doing a little  bit of problem here first of all we want to get   rid of all of this so your expensive function  calculation goes here and second of all this   should be async not this one i mean you could keep  that one async as well but that's not required   so once we do that what's going to happen  is the following so now if we go ahead   and take a look at our index file hit api one  you're gonna see oh and i made a big big mistake   can you guess what it is these functions orders  should be reversed this should be actually here   because the first call you make is actually with  the arguments right then this returns a function   to you which actually is an express middleware so  that is something which should not have happened   on a live course but you know just just to  share failures along the way that's how you   learn right so function request response next  and you can say rate limiter this is real rate   limit of function so you call this function  right here by these arguments this returns you   a middleware which technically if you know about  this is using closures to store these values and   that's how it happens so once that is done  let's just go ahead and see if we are good to go   yep hit api one and we are still facing some  errors request is not defined so all right that's   because you know we have removed some code so we  can use request.request and we can inject this   um through the middleware so i can just go ahead  and say that you know before calling this request   and then i can just set it to request right so  that that's a little hack not really hack you know   express middlewares modify the request object all  the time and then you can access that inside here   right like that all right so with that being done  we are closing enough on uh making sure that our   api works just fine so if i click on this we still  get another error ttl is not defined and that is   again something we can hook into the request so  i won't really recommend doing this on the top   level but probably somewhere inside you know your  own custom object somewhere so that you just don't   uh you know just populate the global scope of  the request object so now if i click on hit one   you can see we have a you know small tdl and  we are now getting errors so that's one thing   another thing is now this solution is pretty much  reusable across different apis right so that's   pretty cool so you can have a seconds of five an  allowed hit of two or maybe like just one so you   just want a single request happening at a five  second interval that's how you're gonna do it   right so if i go ahead and refresh this again hit  api two you can see that you know we go ahead and   do that and of course the first request we got  is bad because we are not returning the correct   values from the backend that's why so if i hit on  this again you can see we have a ttl of five now   and it errors out after one single request so  yeah i mean you can pretty much do that on api 3   as well i hope you get the idea and that's how you  create a very simple rate limiter with reduce so   that is all for this video in the next one we'll  be exploring some more fun stuff about traders   we'll be seeing what is possible i'm gonna  see you in the next video and make sure   you're attempting the challenges the labs doing  it yourself as well as we go on in the course hey everyone welcome back to another video in  which we'll be discussing about atomicity and the   nature of redus so redness by default you should  know is single threaded and what do i mean by that   that is a very important thing you should know  if you are trying to work with redis in high   load environments and what does single threaded  mean and achieve so for example let's just say   let's just go ahead and create a function a  dummy function which just does await let's   say red s dot increment and let's say some key  with a value of one or whatever right so you can   see that this statement right here will increment  the key right now you can go ahead and write it a   bunch of times in the statement and assume that  this is running on server one right which is a   which is a server somewhere on the cloud let's say  there is another function dummy two which is also   running but this is running on server 2 which is a  completely different function from dummy one right   so these are two complete completely different  functions which are running on different servers   now the question is if we take a look at  this method right here at a single method   at the single call what you'll realize  is that redis dot increment is actually   um you know returns your promise which  you have to wait why because this   communication happens over tcp right so  let's say server 0 let's say server 0   is our server which hosts redis right host  redis instance or cluster or whatever it is   so whenever you call this what's going to  happen is server 1 is going to communicate to   the connection the established tcp connection to  server zero and say hey i want to increment this   key then it's it's also going to say hey i want to  increment this key here i want to increment this   key increment increment and so on right and so on  here as well but the server 0 which is actually   writing these operations to the database and  reading from database and performing all sorts   of stuff is actually running on a single thread  by definition what this means is that redis   is never parallelly executing two operations at  once inside of an instance mode right so if you   are running a release like this and if red is you  know receives two operations it technically you   know not even theoretically it technically cannot  run two operations at once because it is a single   threaded language not really a language a single  threaded implementation of the database you know   what else is single threaded node.js node.js is  also another example of a single threaded language   now you know node.js can obviously handle a  lot of traffic and http and it's built for io   but that's that's for a different day why that  works but you know with redis what the point is   that all of these operations are always happening  sequentially right irrespective of where you are   you know how you're calling them what you're doing  these operations on radius machine are happening   sequentially that means no two operations will  ever be running together let's see why this   is important this is important because let's  say for some reason redis was able to process   operations on two threads right so you know  depending on um what the redis call looks like   let's say our key starts from zero let's say this  this call right here gets finished we get to one   right at the same time somehow server two also  makes a call right and let's say this call ends   in key two becoming two right now let's assume  that this request and this request right here um   arrives at radius at the same point right  therefore now what's happening is that   you're running two instance you know two  threads of radius so these are two threads   t1 and t2 it is technically possible that there  might be a race condition in the sense maybe   redis tries to increment this key right with this  operation as well as this operation now if redis   was supposed to be running on two threads you  know under the hood under the hood at you know   we are talking like very bare bones right now  on on you know assembly level so under the hood   i'm not you know my assembly is not very strong  but i do remember you have to copy the value   from memory to register inside of inside of cpu  so you do something like you know copy it from   eax register to you know from memory address to  register eax for example then you increment it   you increment the register and then you store  it back to memory right my assembly again like   i said it's it's it's wobbly but this operation  right here is not fundamentally atomic right   a lot of good stuff can happen in between this  is the assembly code which redis will be running   under the hood so what could happen is technically  let's say there's a you know t2 is also working   here so let's say you copied this you know  memory to eax for example in t2 thread and then   once it does it let's say it copies value  of 2 right now this right here does that   the same thing but this also increments it and  stores it back now you have a problem because   the second increment which was supposed to make  this value this was supposed to make it three   and then this was supposed to make it four  this value is now old right it's still value   so it will also make this three and  effectively you have missed a redis command   right so now you have stored just you know stored  an older value although this should be four this   is why redis does not use multi-threading at least  that's what i can make out of there might be a lot   of good other reasons as well but you get the idea  that there might be as a developer you have to   be very careful how you're dispatching operations  right if you're using multi-threaded mode in redis   so that's why i believe redis does not stick  to multi-threaded or at least you know it stays   single threaded mode so that we don't really run  into these conditions so yeah this is this is um   a quick you know overview you know basically  an underlying overview of why it is is single   threaded and why it is good to be single threaded  you know it's not always bad to be single threaded   so yeah but yeah obviously one one huge advantage  huge disadvantage which you can see right away is   that redis cannot really use your multi-core cpu  now because at the best it will be just confined   to a single core system you know a single core  of the system so that's because it runs on a   single thread same problems with no chase right  so these these things are pretty much common   so yeah that's pretty much it for this  video i'm gonna see you in the next one   hey everyone welcome back and in this video  let's just go ahead and take a look at   key matching with patterns using redis now  this might seem awfully familiar if you have   used maybe either regular expressions or if you  have used any sort of database before as well so   you know you would be able to relate to it so how  does that work let's say we set a key to code damn   and let's say this is code down blog and let's say  this is go down dot com slash news right the value   let's say another one is code main which is the  main website and this is goddamn.com right let's   say another one is code damn creator people  who create good damn courses creator.com.com   right so this should be a good enough start for  us now what we could do is we can go ahead and   actually extract out some of the keys you know we  can extract all the keys like key star so that's   one way to go about another thing you can do is  you can actually pattern match these things right   let's let's just say i said a random key as  well something right so if we do key start   you're gonna see that you get all the keys however  you can just restrict it to getting code damn keys   so how do you do that let's say we do code damn  and then star right so you see now we are just   listing keys with start with code time right  that's the pattern that this should be code down   and then any key followed by you know any number  of characters once you do that you have other   options to proceed for example let's say we want  the keys which have code damn and let's go ahead   and set one more key oops let's just go ahead  and set one more key go down and let's say uh   i don't know mamma mia i don't know let's just go  ahead and set it to one two three right and now   what i can do is i can try to list keys  all of them which start with code damn and   actually start with m or b right so if i  go ahead and do that you're going to see   that we got nothing because we have to have a star  operator there as well so it starts with m or b   and then anything in front of it right similarly  you can have keys code damp which have only four   values for characters to be precise out of out  of uh apart from this you know this uh colon so   hit enter and now you're only getting keys which  have these four characters so you can see that   you know although i did tell you that you  could pretty much just go ahead and keep   uh keys name as anything this these these sort  of identifiers will actually help you narrow down   a few keys right so you can kind of like  make this a checklist that don't really keep   question mark or start or you know these  square brackets as as your key name right   although there are ways you can escape them  as well but that's what i would recommend   you won't really need it that much unless you have  a specific use case but you should know about this   so yeah that's pretty much it for this  video i'm gonna see you in the next one   really soon hey everyone welcome back and in this  video let's just go ahead and learn about list   in redis and how they work so list in red is if  you're coming from a python background you know   the term sounds familiar it's basically  and a bunch of elements in a specific order   so what you can do is you can go ahead and create  a list by saying l push and then the key and the   value so the key would be the name of the key  which is the name of the list so let's just say   this is fruits for example and the value is [ __  ] not really [ __ ] but actually mango so mango   let's do an l push of fruits with an apple  right and let's do an l push of fruits with a   banana let's say right so now how do you see  what's the list well you can see that by saying   l range and then the name of the list and then  start and stop so if you want like start and stop   to be 0 200 then obviously only three elements  exist that's why you get only three elements   now one interesting thing you can see is that we  were using l push that means if you consider this   as a list for example this is the direction you're  always pushing at this end of the list right at   the left end so that's why the name l push you can  see you start with the mango then you push apple   to the left that means apple comes here before  mango and then banana comes here before apple and   that's what precisely happens if you do an r push  of let's say fruits and let's say um strawberry straw right and now you go ahead and do an l range  again of fruits from 0 to 100 you'll see that   strawberry is actually at the other end right  so that's how you push to list that's how you   get the you know total elements  in the list and that's how you   write push and lift push so this was a  quick introduction to lists in the next   video we'll see how to work with list even  more with some some of the more features and   functionalities and a bunch of use cases so  i'm gonna see you in the next one really soon   hey everyone welcome back and in this  video let's just go ahead and take a look   at how you can remove elements from a list and  what are the different ways of doing that so   first of all let me just go ahead and quickly  create another list so i'm going to say l push   fruits [ __ ] mango flute [ __ ] again mango  banana let's say orange or range and let's say   um i don't know let's keep it that right so now we  have a list of three items now let's say i want to   remove this list right remove some element from  this list so one way to go about that is doing an   l pop so it obviously means that you are doing a  list pop it it might seem like that but that is   actually that stands for left pop so that means  it's gonna remove an element from the left that is   the starting of the list right so we discussed  that a list can be pretty much created and removed   from either end so if you actually do a let me  just go ahead and show you the list first before   we remove it so if i do an l range of fruits 0 200  for example you're going to see we have orange at   the first then banana then mango so if i do an l  pop of fruits you're going to get orange so that's   because that's the first element from the left  right that is from the starting if you arrange   this in a in a sequence where you just move this  in a column instead of a in a row instead of   a column you'll see that l stands for left makes  sense similarly if you do an r pop what's going to   happen it's going to remove mango because that's  the right most element right and now l pop or both   will remove banana because that's you know the  only element left in the list so there's that now   this is interesting let me just go ahead and do an  l pop again of fruits and you're gonna see that we   get banana but if i do it one more time you're  gonna see we get nothing right and obviously it   makes sense because the list is empty so that'll  similarly that will happen on our pop as well   but in redis what happens is that redis gives  you another method and you know another function   call you can say whatever another command which is  known as blpop and br pop and what these commands   are you can see in the helper you have to specify  the key and then a timeout what these commands do   is that they basically allow you to block  the operation as long as that element is not   available right so it will not return you nil  immediately let me just go ahead and show you that   so you see bl pop for example fruits  and then a timeout of zero so if i do   that you're gonna see it stays there and the  reason it stays there is because it saw that   okay i don't have anything to return that  means i'm gonna return nil but because you have   specified timeout of zero that means i'm gonna  wait forever i'm gonna wait until someone pushes   to this list and once they do i'm gonna give it  to you right so if you had another node.js program   for example in the background running which  probably might have connected to redis and pushed   to this list and if you did that you will see  that later right so you you will see that element   popped here but for now if you go ahead and do  for example bl pop of fruits not be a lop but bl   pop of fruits and then let's say you specify a  time out of five seconds so it'll gonna wait for   five seconds just to see you know if somebody  gives you anything and if not it'll return you   now right so it's kind of like a fail safe so that  you don't really end up into deadlock situations   um so there's that again it also has a  complementary method function called b r pop   that is again blocking right pop so fruits  you know if we just go ahead and actually do   something like um i don't know let's see l push  fruits hello for example and if i do br pop fruits   you're gonna see if i specify a timer of zero the  first element you get is the key name the second   one is the list and why is that because you can  have multiple key names multiple keys specified   here so you can have a list l push of let's say  list one is hello one and l push of list two is   hello too and if you do a br pop of list one and  list two you're gonna see oops you're gonna see   that you get list one hello one and that's it now  the reason why it stopped there is because br pop   is made in such a way that whatever number of list  you specify here it's gonna return it's gonna try   to return the right most element because of the  br and it's gonna stop there right so if you   try to do this again you see that list one is now  empty because it only had single element hello one   but if you do it now you're gonna see you get the  output now from hello two that is now you get the   output from list two so basically it's just going  to scan all the list which you specify and return   the element whichever is not null as fast  as it could right and obviously if you have   specified a timeout it's going to just wait on  all of those lists now if you think about it   it is actually very very you know it could be  actually a sophisticated logic in your programming   language where you might have to involve timers  and watchers and everything and redis provides   you on a database layer right it provides you  this functionality out of the box this is why   it is much more than just a key value store  although it's advertises itself like this but   things like these can be used to implement highly  efficient cues right and they are actually used in   a lot of production systems but you might see them  being used um as an abstraction right so you might   have a service which is using redis under the hood  uh performing all these low level actions and they   might be just exposing a simple queuing api to you  so aws does that for a lot of its services um i   hope i know that a lot of other services can also  make use of this functionality as well so that is   all um again if you try to do this it's gonna just  hang on and just see whenever something gets added   to list one or list two and it's gonna return that  so yeah that's pretty much it for this video i   hope you understood how you can push and pop and  blocking pop from list in redis and that is more   or less the majority of things which you'll do  with redis like you you can also just trim and   get elements at a certain index but you know you  can refer to documentation for them all the time   so yeah that's pretty much it for this video  i'm gonna see you in the next one really soon hey everyone welcome back and in this  video let's just go ahead and learn about   sets in redis so set if you have a little bit  of mathematical background you know consists of   only unique values so you can create sets  in radius and that is a pretty cool thing   right because now you don't really have to worry  about duplicated elements and uh you know all that   stuff you can just throw a bunch of elements at  radius in a set and redis will make sure that   you are always having unique elements in there so  that's a pretty cool thing if you have a use case   which requires unique elements but the input kind  of is arbitrary right you cannot really determine   beforehand so how do you do that just like list  you just start adding stuff right you don't really   declare that this is a set element and not stuff  like that you just say s add which is the command   for adding something to set so s stands for set  and add stands for you know adding something let's   say i want to have a favorite languages let's  say favorite lang and add javascript to it right   i'm gonna go ahead and do s add again and favorite  lang let's say python for example i've added two   elements to the set and what i can do is now  take a look at what this what the list consists   of so for that i'm going to do go ahead and say  s members and this will be favorite line right   and when that's once i hit enter you're going to  see this is python and javascript all right so   if you try to add something let's say another  thing uh favorite lang and why not let's say   c plus plus that's also a good language  and you see that every time it returns to   a single one right apart from you know you  would have seen a list that it returns you   uh you know the number of elements but this time  it returns you one and the reason for that is that   one means that the element has actually been added  to the set right if you try to add another element   which has the same you know the same name as some  element before in the set you're gonna get a zero   that signifies that hey it has already been  added right so i'm not really gonna add it   again to the set and s members favorite lang  would just reveal that hey you just have two   uh three elements here one thing you have to  remember is that this is an unordered collection   of you know strings or whatever you're using so  don't really expect any particular order to be   maintained here right you can also get the  length of this instead of just getting all   the elements by using s card and card again  is mathematical term cardinality of a set   which means the size of the set right so it might  seem very familiar if you have done set theory   or anything like that so the names are similar  um again you have a bunch of more methods like   set difference set intersection which might  be super useful if your application requires   that right because um otherwise you will be  writing it yourself in your coding layer which   almost always is gonna be a little bit inefficient  compared to what you know redis is providing you   up front right because obviously redis is  written in cc plus plus is if operating on a   lower level and would be most likely faster  than your implementation right because   people have been writing and maintaining the  source code for years so that's one thing and   uh you can do a bunch of other stuff with redis  as well i would recommend if you just learn these   stuff on learn these things on need to know basis  right if you need this on for your project you   should just know that sets exist right and then  go ahead and take a look at the documentation   if you want to make a difference how you do  that and go ahead and do that no need to like   you know just cram this up um beforehand because  the important stuff is you know about trellis you   know about sets exist and you know about how to  work with them on a bare bones level that's it   once you are above that you should be good  to go and figure out everything on your own   so yeah that's again pretty much it for this video  i'm gonna see you in the next one really soon if   you're still watching this video make sure you  comment down in the comment section i watched this   video till the end also if you are not part of  code dam's discord community you are missing out   a lot on events which we organize on a weekly  basis to code you already know the drill make sure   you like the video subscribe to the channel if you  haven't already and thank you so much for watching