good morning everybody today we are gathered here on the virtual for the platform the title of today's webinar is web technologies classic versus modern approach to web development and the guest speaker of our today's webinar is completed b tech at gc dahood and completed his computer engineering and he started his career as a phd developer at sphinx solutions later he started working as a lead developer process fast llc which is in columbia south california and currently he's working as a php developer in umrah city vancouver canada so he have enough knowledge about the today's topic so without wasting any time i would like to uh tell jeremy to start the session okay uh thank you uh apoorva and nikon uh so let me start my topic uh which is about uh uh web technologies so i think um most of the listeners will be from the computer field like doing a computer engineering or maybe computer science or bca so let me start uh like uh what i'm gonna talk about so my topic is web technologies digital project manager uh digital uh classic versus modern approach to web development so let me just uh give me intro about me so i'm jamin pandya uh i right now i work as a software developer at umbracity.com and uh i have previously worked as a lead developer for opsins.com and before that i was working with the consultancy company in amdabad which was which was providing it services so i was working with the swing i.t services ahmedabad as a php developer and i did a bachelor's of computer engineering from gec dahl so then let me give tell you about my skills and expertise so i mostly work with the php and different frameworks of php like why i symphony wordpress and i have also worked with the javascript frameworks uh like node and react also i am like uh experience with the database side backhand side mysql ms sql file base third-party apis jquery bootstrap and the normal thing which is html and css so i think uh i should start with the talking about like how the internet works like to know uh like uh what how the www and internet and osi layers and browser works so like when you send a link like what happens like when you open a mobile and open a browser and like go to any website so what will happen that is one of the very basic thing to understand to know more about the web technology so how it works so like uh that is a www world wide web which is a software application and that is internet which is the physical layer which is like there are cables like cables connected everywhere like uh like cables in the antarctic uh atlantic and pacific oceans which connects uh like uh um europe to uh america so how those those things are connected like we make any request like we now use mobiles we think they are wireless but none of them is wireless like when we like open our mobile and uh open any website on our mobile what what it does that it will just send a request to mobile tower but mobile that cellular tower is connected with another cellular tower and it is also connected with the whole uh double uh internet with those cables not with uh wirelessly only thing like right now just uh a new product from elon musk which is on going to be totally wireless which will be providing a satellite internet otherwise we we are only using all of those internet which is like wired internet and uh but yeah let let me talk more about uh what matters to you guys so if if you are in india and you want to get a job in your field so there are like different options like there are best options and there are easy options so based options for them who can like learn very quickly and who are very very intelligent like who can get into iits or very like who has really good cpa and everything but most of the guys are not that good so what they can do they can do the easiest thing to getting to get the free job so like what is the easiest thing so you do not have to learn the whole computer engineering like you do not have to focus on whole computer engineering like the os that the theory of computation a lot of subjects the digital data design and all those subjects you just have to focus on maybe one or two subject from your whole engineering like four six or seven uh it has seven stars so that is maybe i don't know uh at the time i was uh like uh getting education there was only one subject which was uh uh it was called vid i don't know the i don't remember the whole uh full format but it is about website so like uh so so what i'm trying to say is that uh like to get into computer field the easiest way way to get into computer field is to have knowledge to build websites so website so like uh how websites are made so they are basically made of different websites if you see any websites they are made of html css javascripts font and assets like images and videos there can be how that request is processed is another thing but what website is made of if it is a static website then it is totally html css javascript fonts and assets images so how can you learn those things so those are the easiest things to learn like html css and there is another things like uh bootstrap and material design and javascript so this is these are so so first you have to know what is html what is css and what is bootstrap so let me give you i can create anything for you so which can like uh so let me create a small project for you so you can uh know like how you can do things so okay so i'm just creating a project for you simple project for you so let me get this window also here okay window okay so okay let me do this left and this has a right so i i'm just like creating a small project uh so you can learn how one can create so i have just created a basic basic small thing like a small website which you can use so i'm just opening this website in here okay let me just i have to okay so this is just hello world html5 wireless page so easiest thing to learn html css bootstrap so let me show how you can do this html so this is a website and when you run it this prints hello world this is html and all these things so this is created by this html so this html is just a simple uh [Music] way which brings this hello world this is boilerplate html5 boilerplate and this thing so let me just give you brief info about like what is uh happening here so these tags like many of you have if you have like uh projects or anything you may have made up html project or anything so this is just a head if you know that this is where we define styles or where we define meta tags or title info it doesn't like uh get printed here but whatever is in the body part it will be painted here so here what whatever i will write will get printed there are now uh new ways like uh where we can just uh have it like wherever we write something here and it get can get reflected but i'm just giving up overview like what is html and css so uh the css thing so what is uh css is for uh html is to print something on the website so if you have to write anything it is html and if you have to like style anything then it is a css so let me say so it is uh it is css so if you you can color them and you can just do many uh many things like uh from this html and css so you can color like you can give a background so there are a lot of properties you can use background color yellow and you can use so that is also another thing so let me just do that that is also another thing which is a bootstrap so what is bootstrap so this is a css framework so html is to create elements create elements means create elements on the website so if you go to like google.com to hear everything these these all things are element these all things are element you can right click and inspect element and check like how this html and css is built like what they are using what they are using to style it and everything so like let me create a simple uh thing for you so so another thing is a bootstrap so let me open it bootstrap so what it is bootstrap is a css framework so right now it is not it was very popular it was with the time it was very popular it is still it is very popular but right now uh the css has got so much powerful so much powerful with the flax and the grid that one do not need frameworks like bootstrap so if you see just uh if you want to apply bootstrap in your project then you just have to copy the link and copy the css vs in that and you will be able to use bootstrap into their project your project now if you see our styling has changed if you see let me just roll it so okay let me remove anything from here so if you see there is this font is different but if i do this and just uncomment that css now i will see a different font now the text is touching the top and everything so here let me i can also so this way so here it is uh saying that body margin zero so so one can also do inspect and see like what style has been applied what style is has been applied so style means that css what css has been applied to that particular tag particular element then he can just go to particular element and just see here in styles like what thing is applied and check it so this is what to use to build css like with that css you can build things like this this i can also like recently i just made a website for our company and so here i did all those things with the css and javascript so like whenever i scroll and things come they are built with css and javascript so one can do many things with these things and go to different things and do many things so that was like push up so so let me tell while people use bootstrap so bootstrap makes it easy to create things so okay so let me give you an example what can bootstrap do so there is another thing which is like really cool about car dash so which creates six new so it is i don't know at mac yeah uh this one is called so let me show this like if you are developing website or anything then you can use like things like this to be more productive like here i am saying that with the class plus is uh many times uh class is always defined with the dot and uh id is defined with the hash but let me just show you and i'm saying that i need six news with the call dash to class so it will create six new one two three four five and six so now if you see when this is one two three four five six are in uh like uh in one row in one row by default this view if we remove this if i remove bootstrap then if you see then those are in like different rows different rows but if i uh if i let me just do something so i do not have to make one title php minus [Music] okay so i i just started server so i do not have to close that uh dialog box again and again okay so here i am so here i have created this so if you see i don't know whether you guys can see let me let me say style if you see uh like here you can see that i have given a body a style which is a css of padding 15px padding is like for uh uh inner padding is for you know like uh inner space between any element border if you go to computer you can see that this is a border and the element space let me give this border border 1 bx solid red so you can see how his border that is another thing this is a box model uh of css which is very basic thing of css and there is a margin 15 px so border margin and this is very so if i do this i go to like so if i go to this then i can see everything for that element like how there is a padding 15 px there is one border there is so i can see that but if i go to that i go to this line this is a bootstrap css and i uncomment it so bootstrap css has been applied now what i can do with the bootstrap css that i can just roll it and now i can go to this tab and i can so now it is in one row like bootstrap is famous for me it's grid system so grid system is basically like uh how you want to put elements in your website how you want to do uh do those things so you can define uh like a different thing like call md there are call md to call sm dash let's say six called as x uh called x x uh extra large excel call that uh called as extra like that or maybe let's say one so i can define things like that so let me define it for all callers and leaders okay let me do three and six then that is that can be also assembled called as sm that's four four call access twelve we are call access you can define it for different one thing what what it does bootstrap makes websites and everything responsive for us so you can use so here i can see and i can say from my knowledge that uh right now call md4 is apply call immediate call sm column d three is applied because like what happens that uh normally bootstrap grid uh grid is like uh a row start to end so if we see grid system is means uh this is so here it tells that you should consume 33 percent of the weight you should consume 33 of the weight 33 of the beat i can also change it like right now it is consuming call sm 4 but let me say you should consume 6 and you should consume 6. now there will
be 3 and there will be then you should consume 12. so we are right now small screen so it will be like this so there are one two so i am saying that these two will consume 66 so by default bootstrap is well like bushtrap is divides any row into 12 similar 12 similar uh bit divs but when you uh change these classes like call sm6 call sm6 you are telling that take half of the six means half of them so let me so here is the grid system is more defined yes before uh like version four they were talking about like uh when there was no flags and grid they were like uh really promoting this uh thing layout yes in the layout there is a great okay so they were promoting this grid really well so here they defines like one of the three columns one of the three columns one of the three columns like how you can make three columns like now they have changed it for version four and version five how we have to define things but uh you can use it like how extra small it is access small as sm medium md large lg and extra large excel so how those things work like here one can how you can create news like that like two in first row there are two things and second rule that if you want to have three things how you can create things like that this can be done here so so this this is a bootstrap which helps you create uh many different things not only this there are components bootstrap components which can be used for the styling like a simple alert or there are like link colors many things you can use it in the bootstrap like so if you want to do projects so you you should use this kind of libraries which can help you to create uh things which can be done like you have productivity you do not have to create something from the scratch and so you see many times like you want to create something and you think that how do i create so you do not have to create from the start you have to search for it like whether that that solution is already available whether i can use it or not so you can so this this is about the bootstrap the same way there is it is about material design so material design is the same as the bootstrap but it is from the google so let me material designer material design google so it is the website material design so when you use android so you know like if you are using android then you are using material design so all of the icons and everything they use like if you have stock android mobile like oneplus or any of the real me or something like that then those mobile has a stock android and those stock android has similar design like this so here it is for android it is for waves so let me go to wave so here you see so if you go to render you will see same kind of things same kind of things if you go to wave then also you will see things which are like similar which are having similar attributes so you can use these things in two way so they provide these things and you can use those things and these are mainly css framework and also they provide javascript support to handle any css functionality like here those uh like if i go to navigation drawer okay so here if uh like i click on something and it it should react then it cannot be done from the css to do that you have to use the javascript so this all library provides css file one css file and another js file which supports those different things like opening a model window uh like clicking uh tab tab functionality here we are saying tab functionality like me so yeah this is a tab bar so all these things like provided for in the [Music] like material design also in the uh bootstrap both have different design terminology if you see like both design is different here material design is having a different design like they approach design in different way than the bootstrap so you can use you can also use the combination of both of both of them to there and that is a javascript so you should not confuse it with the java so javascript is a totally different thing uh than the java like it is totally you used in websites where you write something uh javascript like um so let me i can give you a simple example so you can javascript is used for different things like to get anything from that document like we call it document no document object model so the whole html is called document object model so you can use the document object document now we have query selector before we used to have like uh do not have a query selector all those things so we were using uh jquery and all those things but jquery is now no more we can use playing javascript like the document dot query dot selector dot row here i'm just writing row but i am having classroom row and then say dollar row dot query selector so if you don't live query selector all if you see like it says six so it says one two three four five six we have six new but let me uh do something so i want to select new with dot co sm dash six so i want to select only use which has a class called as sm 6 so this is two so these are classes uh call 2 column d3 call sm6 call sm6 uh call access one so these only selected things which has these classes so this selected this i can also do many other things like array dot from so this is a javascript so here i can use this which is an array like if you let me show you that this is an array let me first finish it alley man next [Laughter] you're going to say so here it writes like uh console. uh like console.log which uh is used to log anything and this is called console so when you right click inspect element this opens and there is a console and you can like print anything so it is used mainly for when you are developing anything and you have to check anything then you can do a console.log and you can see so it is also used to change those html or anything whenever you want so if you want to do let's say new name you can do this with that also like you can play with the style so like let's say ldman dot style dot set property and you can use any style and you can apply it so like let me so choose style like let's say color color and make it red okay what do i use wrong color and unexpected identifier so let me paste okay let me just copy this here so i can just better work with that saved we have to use a type but i don't know now they are not using any more but i am just used to it so i am using it command and okay so this was my mistake so you should use ids which will help you do things like here it should be this not that so clear so here you can see so you can apply those script here also and when it will load so let me show see like how it works so when it will load so here it is one two but when you apply it inside your html at the bottom and when you are loading it so it will just directly whenever they execute that javascript then they will change it so you can do many things so you can also change like let me change one property i think which will make element dot style dot i think which is justified content i think display flags and just divide one display max sp5 content center okay so so i can do different things like i can apply css i can apply anything i can change content i can here like let me show you what i usually do so here let me apply a class which will make things different document.query element and apply classlist.ad another thing like if you guys have any questions regarding what i'm doing or anything you can ask me you can ask your teacher so i can just do something for you like if you're any so i can explain you because like i have a lot of things but you can ask me okay so this uh so uh for overview that javascript is uh something like uh where you have to just uh like which helps you to create uh these things and uh change the content of it and to understand those websites so there are many things like dynamic websites so i this is one is the very static website which is very specific which we are just one page we are using two three javascripts and these things this is a state equipment so what is dynamic dimension website is like where data is coming where data is coming and that data is uh like dynamic like facebook feed your facebook feed is dynamic whatever you like um social media websites all those things are dynamic so whenever you like open it whenever you like open that facebook.com that will be a different
thing on that screen so same as the news websites and everything they change it uh daily they use another thing which is like uh software like content management systems but um this thing like facebook and all other things they use really very big architecture they have lot of micro services which is said between different platforms and with those micro services they create so they have really huge architecture so in simple if there is a website let's say romanto or anything so what they use like they use server side languages and databases and server side languages so whenever you make a request so on the base of time on the base of who you are so like uh let's say when you go to facebook or like whenever i go to [Music] google.com so if you go to google.com here it is simple google.contest google.com but they are showing my image gmail email same as you if you go to your google.com in your website then they will show you the your image so how how do they do so they how do they do so when you go to google.com and you haven't done anything so there will be a signing button so what happens when you sign in they authenticate you with the data they have for you like the sign in options like your email and password they validate that email and password in their database and check whether that information is correct or not if it is correct and then they will allow you so once they will allow you then whenever you sign in they will create cookies they will create session mostly they will create a cookie and here on our cases they will have a cookie which will be saved on our browsers and on the base of those those cookie will save info information like let me show you some of the information if i can get it network okay so uh so if i open this www.googie.google.com and
response headers so here they have set cookies they have set all those cookies and everything for us in that cookie they have information about like uh our profiling profile id information and all those information and those information is used to like get information whatever saved for us so so this is a cookie so they have saved this information like companies like uh google and facebook and things things like that they use very secure things so so they think like not encrypt but they keep that data in a way where they have saved uh things so these these are just ids by which they will get data what we have saved what they have said what we not what they have saved in our local so they use cookies and things like that so there is another thing which is client server model and request response model so so what any device any device like a mobile device or laptop or anything or every browser is called client any app is called client uh if you are like uh not using uh if you are using zender to standard data then one one is client and another is server where one sends the data and one receives the data so like when you join uh network so you become a client when you join a network and whoever creates a network is creating a server in simple like if you uh want to understand what is client server model uh then you should understand like how gender works so in gender like whenever we have to send photos or anything what we do like someone will create a network and other people will join that network so whoever creates a network that only one person can create a network which is a server and many person can join that network so those are clients so basically clients are both can send and receive data from each other there is a request response so whenever we like go to any website we send a request we do get response in that response like let's say here if you see we get response like this html like when we say index.html they will get this index.html but what that index.html says so once they load this index.html this index.html says that you should also download things like you should download this css plus normalize.css main.css this js file
so they call it that document test them to download other things so it can look like so it can create functionality like it can apply css you it can use those javascripts it can use those images so we make one request we get a response and in response they say that you have to also make these many another request so you make another request and you will get a response so if it is another html request then you will get a response for that and it may also tell you that uh you should get uh another you should send another request to get another data so like let me show you like how those request response model works like it is network so here i am only asking to download index.html but when index.html comes then they say download normalize.css
so here we have say download normalize.css then we have said download main.css then it downloads main.css
then here we have said download bootstrap.min.css then it downloads bootstrap.min.css then it downloads dash with modernizer.min.js so we have to find it where is main dot modernizer.min.css js so here it is modern ming.js plugin.js main.js bootstrap bundler yes
bootstrapinder.js analytics.js so let me check where is analytics.js this analytics.js and then there is another request this request so here analytics.js has
asked to make another request let me just show you like what is happening so if i remove this you will see that whole thing from these will be removed so like let me just do it so here analytics.js now fivecon.ico let me check you extension.youtube.html so who is calling this okay this is not this one there this is my extension maybe grammarly or something what i am using my extension so this is js from them so they are like uh whenever a browser is opening they are making their own call because we have enabled them so they are making their own call and just downloading things so so what they will do so they will check all the inputs in the website like uh text area and everything and they will just apply their javascript code to that input and it will help them to have a like grammarly check for them so let me start here we do not see but let me go to somewhere where we have a input like uh let me say okay jason normally when uh like things like this load but i think it works on google.com those extensions have their own css and javascript and whenever we open any dock html then on the basis of that javascript they will just like apply to those things and it will just check for whatever the changes make and they will apply any spelling error or anything like that so grammarly does that so those css and js are maybe from those extensions so that's so so that's the request response model so whatever i'm saying it is about request response smaller so like whenever you request thing it tells us to download another things we download everything until we like find everything feel that that page is processing and processing so that request responsible so let's let us come to uh server side languages so what is server side languages so server side languages are those like when you make a request so here we are making a request so let me just change something index.html i will refactor this file and right now i am running a php server so if i make any changes then there won't be any problem and i cannot i have this file but i have to go to index.php it will render same thing but what php does that php provides us to do things dynamically so it provides uh like functions like this eco bed y dash and b so we can equal things so we have a date now also you can do in php things like that you can also do things in jx now people do a few things in javascript like node.js and everything but this is
this is a server side language so what happens that it goes to a server and server what serverless so server will check that and uh what is code in the php then they will transfer it to a html they will create a html and they will send that html to browser so browser do not have to browser will not know that uh what happened at server just server will transfer interpret and compile all the code into that's the interpreter interpreter not the compiler they have interpreter so it will interpret all the code and it will create html from them and they will show you that html so there are different kind of server side languages like php node.js ruby python.net so dotnet was not open source but uh they have become open source now but uh so that's why like uh like when i started creating website in maybe 2013 or something so there were only php like maybe 33 of the websites were made in php it's still high but not that much now there are different languages node and python they are like uh pretty good and they are creating very like fast websites so so people are using them also they are using php but uh now it is not like 33 of the websites are from php now it will be 10 12 but not 50 30 so these are several languages like from server languages what you can do so you can do things uh which like here let me say here i am having one so here what i can do like here i can do php i can create a loop present six series is the 76 and i can now let me put something let me say okay not i will not what i will do so let me go to php update function so this is a php date documentation so i'm going to documentation of the particular function so here it gives me options for that date function so let me check one thing page predate i don't know why they are not in here okay it's w saturday night not w so much f okay so here f stands for the whole month so let me go to f y zero one okay i've been moving from php to javascript and javascript to php so what happens that in php the dot dot has a concrete determination operator but in javascript you have to use plus plus like in javascript if you have to do this then you do not use dot you used plus so okay i can also do something so here i am printing a month and what i can print maybe i need a day what will be the day of the okay so here i'm printing the month name and the day day name of every first day of uh the month so like in 20 let me go to 2021 so you can do things like this when you go to like uh yeah here i have created so here our javascript change our html code what is the normal format like okay 0 1 y dash m dash d y press m dash b okay i also have to do okay let's say this okay we are coding but unknown well formatic okay line 4d line 49 so this is your warnings and errors we get when we uh do this so let me check because i have to do this here so let me do this one okay so here it says that there is none so it is about dollar i let's say dollar i greater than 9 then you do not need it but if then you will need zero january thursday okay let me 2020 why does m sd let me just okay zero three okay let me give you a single example marge and okay dollar i okay function a non-well-formed numeric value encountered in number okay it's asking for timestamp okay let me march and friday so yeah it was my mistake it is asking for timestamp and i was providing a date so yes it shouldn't be like that okay so it should be like this this is a php function and which equates let me just look for now okay it is just a painting right now let me do something else which can say so i can have done it uh if else but uh let me say time new date time i can use functions like this so so basically what was the idea that i will create a simple html where i will show like how you can use this server side language to the net like you are just creating a one day but in different levels you are having a different data so let me so like how select me just to see sorry dollar i so you will have a different dollar i my idea was like here we have 1 to 11 let me say less than and equal to so we have 1 to 12 so i can print it 12 months name uh let me just check the php function which i can use okay so i need a timestamp okay uh do you guys have any questions uh because last time what happened that we didn't have any uh time at the end yesterday sir yeah once you finish i'll ask oh already done second manager okay okay so so i was going to talk about the classic and modern approach so what is classical so the classic approach was where we were using languages like php so this where we are creating html and javascript together but and we were like interpreting all the html and we were just giving that html to uh to website but now the approach has changed so what happens in modern approach that we do not send any more this um we do not interpret html we do not mix it html server side language with html so right now the approach is state class state class approach and api approach state class is another thing and stateful is another like state state class is like server is not knowing whether one is logged in or not so here when we open google.com then when we
send a request server does not know whether we are logged in or not a client a browser will say that i have this data and based on those data it will send a request in that request it will say uh this is the user id and this user has been logged so they will have a user id now what will they do the server side language will query data it will ask a database to have a data for that thing and query that data and generate uh like create that data into a json format or another format like external format json format or maybe another uh one and they will send it to the client so when we send this html so if we see we have a lot of space remaining and everything but when we send the json or things like xml or anything uh we can compress them and we can also send them like do minification and everything and we can send it so it will be like very small like 1 kb 2 kb 3 kb here if i just load this website this is like a very small amount but still like it will load a lot of thing like the main document is 3.6 kb so so in new websites what happens like let me show you one of that one [Music] extracted this was like my college project back it was very old so here it just lowers everything for the first time and once it has loaded everything then rest of the thing whenever we come it will come it will be just the uh javascript and all those type of thing like it will uh send a request but it will be like this chunk of js there won't be too much thing so this is just uh images which will be obviously loaded if they were not loaded again so if we go to about and if we come back to team it will load it but here if we see like it it will be used from cache or something like that like here if we have data gmt etag server so we can use cache and thing yes catch control public max is zero must leave validate so it says do not catch it max's is zero otherwise if max is not then it will be catch so so we have like previously we have to like download any library like whatever we have to use we used to download that soap library that crud library and things like that but now we have package managers like php has its own composer node.js it has its own npm uh javascript has its own yarn yan package manager then ruby and every other language like python has pip ruby has their own i don't remember the name but they have their own so they have their own package managers so in classic like ui made with server side language what i said like html and uh php all those are like spaghetti code what we call spaghetti code which will be that like server side but now what happens that are at server side there will be only a logic code where we run like uh different uh where we get data from database we will format them in particular format based on our api documentation and we use it previously we were using jquery now like we are almost like people are almost not using jquery anymore like yeah websites are using wordpress are using jquery bootstrap was using jquery but now they are going josh because like javascript and css booth has been improved in a way that they do not have to use uh jquery or bootstrap um now we were like used to develop like deploy code manually like what was happening that uh when you finish your code one has to make a chip then that zip will be like uploaded to the server then you have to unzip it and make a backup and everything and then like something breaks or anything on the website you you forgot to make any change and that can like just break that website and you will not know what what what was the fault or thing but now what we have we have continuous integration and continuous deployment so what happens that so whenever you finish your code so like you have to know about the version system which is a git so what happens that in gate that it stores code and it also versions that code so whenever you like make a push of your code on the base of configurations at your vcs provider like github or gitlab they will make continuous deployment and integration like they will test those builds whatever you have sent and they will just deploy it and create it so uh the things like this and uh that can like uh modern they can really improve your webcam so you do not have to worry about like uh small issues you will be facing every time and every time now everything is automated so you do not have to worry about many problems and you have to focus on only on your problem what you are solving so yeah uh that's it so uh like now uh if you have any like questions or anything you can just ask me hello okay so what else these are about the package managers which is composer npm sorry sir that was uh connection disturbance okay yes one question is uh what is difference between java and javascript so so java is uh like it is javascript is for html so like javascript is only used uh when there is a browser so to use javascript one needs a browser browser like uh it can be anything like you can have a browser technology in any application but uh that javascript to run javascript when there is a browser engine like uh google has its own v uh google ad has its own webkit engine and maybe mozilla and safari has uh their own engine chrome has its own one thing chromium on the base of chromium there are different uh browsers so ah and java is another thing like java to run java you need a compiler from java so which is like jut or something which you need to download it from oracle website and then you have to run that uh on your machine so java is like there are enterprise level language for java so which is used to create softwares like these browsers or mobile applications and many things uh i used to build in java but though they are very different javascript is only for websites and java is for booktop applications and things like that but now you can use also javascript can be used to create desktop application so there are now frameworks which support but those frameworks need to have a background which help you to create uh those applications okay sir one more question is uh what are the advantages of json okay yeah so uh so jason let let me show you like uh what can you do with the json so here all these data here all this data so if i download it from like he if i download any website data from server side language i can download it in html whole html but what other things i can do i can just pass it json and use javascript frameworks like react angular and things like that to uh like use uh those information provided in the let me show you an example of json so here this is an example of json so let me go to network then xhr okay so here this is the uh this is a react website so here if i see i have send a request like i have sent a different request but for this if you see i do not have created this html so like if you see let me show you so if if i refresh it then you will see that this is a loading then there is a this loading then there is this loading but if you see it was loading and the data come so what happened that when i made a request to whole website then it loaded uh that whole website but what happens that on each of the part there is like a loader so the data at that part is not loaded it will be loaded once the website is fully loaded so it will send another request to load this data so here i will send this request misinformation uh right now because of maybe it will not uh like work when i go to directly but if you see a response so in response i will send the data like here i have signed the data that here they face uh face mark use cause lung cancer so here uh the data is provided type is provided and link is provided and fact checker is provided so i will provide this data here and i will use this is this if you see this is a distance this is a response this is json i can go to uh json link and validate that data so what happens json makes your website speedier so you do not request data when you load it first time but you make uh request simultaneously so here i have made a request submittation like here there are four requests misinformation one two three and other are css but let's uh see these four and we will see let me show you so to show this let me this one okay we are loading and okay here this these things are loading but as soon as we get this data those graphs gets built so here in two we are getting uh data for this whole graph like record cases comparison so here we got uh yes record cases comparisons canada brazil russia china and here this tells us series like canada record cases x and y and on the base of that i will build a data at client side so i just did not create whole html this whole html like previously we used to create whole html at server side and uh sending that html at client chat this is a high chart we cannot create this one we have to create a local so i just used this json so this way what happens that website is like uh we do not do all the processes in one request at server what we will do so when we load a website so based example i i think it would be twitter like if i go to twitter so what what twitter does so they do not load anything and so they just load a symbol now we will load these these and then they will load things one by one one by one one by one so now you can see like now they will load so so in json what happens whenever create a website like that we send the data in json then we use a javascript framework like react and angular to use that data to add html elements dynamically to the website okay sir uh one more question as we have sir computer engineering student so yes they are uh really interested how's the career path further for computer engineering students and regarding canada also oh because so i i would suggest if you are like computer field uh like uh what what you should do like uh you should learn uh things like this like coding a simple website coding and all those things creating websites few websites and creating your own portfolio and things like that so you can get initial level job at anywhere in india like in um um maybe bangalore any place so you can get a simple job and once you are comfortable then you can like maybe in our sector that is growth is really good then other sector then you will be able to make like enough like 20 30 000 within two three years so one can make uh 30 50 000 like uh if you are good at coding you will be able to make like 50 60 000 in three or four years but uh yeah and another thing about canada i will say that uh before coming to canada and if you are not prepared for like if you are not having a job experience from india then here it is only like jobs which are only other jobs which are not a field job so one has to do those fields because what what will happen like when you come to canada uh for study or anything then you have to pay fees or anything so you will just spend time in doing those things so you will not be able to learn give a time to learn those things so i would suggest to give time when you are in india to learn those things even establish yourself like have a one or two year or three year experience and come here and then if you like i also come here as a student but most of the students from my class they're doing jobs which were like normal like uh in jobs in the walmart or different stores or anywhere but i was doing job in a company before i was as i was a student also and i was doing a job incoming just because i was having experience so i would suggest like whoever wants to come to canada and you are doing computer engineering or something like that just take two or three years experience in india and then think about coming here it will be beneficial to you otherwise if you do not have any experience uh from india then it will be very hard to get a job once you are like uh once you finish your graduation and even it uh job can help you getting pr easily yeah okay thank you sir thank you jamin sir for your valuable time and we have a very interactive informative session we have started with bootstrap with javascript okay json we just learned your screen okay then dynamic websites responsive websites okay we go through this all topics and these are the modern topics and thank you very much sir uh we would also like to thank you our computer department uh holy mam mrs for their continuous support and encouragement to our department so thank you sir and we will look forward for more one more session in future also thank you yeah yeah sure okay sir you may have to can i stop by yeah yeah sir you can stop thank you you
2021-05-09