Essential Software Development: CSS Specificity & JavaScript Riddles Explained

Transcript (Auto translated can have spelling mistakes)

if we look into the software development the most of the developments are happening right now is in the web based applications so most of the things which people are developing in order to manage uh their things and stuff like that mostly in the verb so this is one of the easiest approach because there is only a single point of update is necessary because other applications if we look into the softwares like something something which is from the Adobe uh like you know like let's take the look of uh Photoshop itself so the Photoshop and all we have to update in our system uh whenever the new updates are coming and things like that if we built a software that is basically uh from a center point the all the updation will be manageable easily and things like that so um in this particular way the companies can easily manage their day-to-day activities even if the teams are been distributed uh remotely and uh sort of things so here when we look into the web based application development there are many different steps we have to look into like uh CSS is something which is which is in the uh Dome uh that gives the uh idea how you can build um and style the uh applications and uh uh many other things basically it is a stylesheet and it will give the look and feel of the application to the user and and also we have to look into the JavaScript mostly it will be in nodejs or angular or react or view or there are many Frameworks based on these Technologies and Architectural ideas and even the test cases and test scenarios like MOA chai and there are so many things which is especially we have look into uh types script which will actually a JavaScript pre-processor we give some type definition to the um you know typescript it will spit out the JavaScript code uh in the that we can execute in other application which is basically not just kind of things and sort of stuffs like that so uh JavaScript is one of the important concept and typescript and the EB where we save the data and things like that that also we have to look into and cloud-based applications like you know maybe the um the storages uh something will be an easy to and there will be Cloud watch there will be uh uh AWS lambdas and SNS sqs and there is thir party applications similar to OCTA and uh uh there are many other things like that and if we are using some kind of uh AI in the the back end we have to use um um some Terra torch or uh things like that which is in the llm models which train the uh JavaScript uh U architecture Javas I mean the application it will make more intelligence to the applications and things like that so um this is the an overview of the web based application and what other the things as a developer you have to look into in order to build uh something which is actually uh which is actually a full stack application that can work into the um that can serve uh an Enterprises need uh so we have to look into different uh architecture and there is different uh stakeholders will be there like dashboards and authentication methods will be there and uh people who are working into that like you know back end there will be somebody and front end there will be somebody and cicd there will be somebody and uh you know there are so many other so here in this particular video what we are going to look into some of the important questions which generally comes in the interview process and uh these questions can actually help you to score well and and even to build better applications so in that order I have I have ched some 5 six problems or five six uh questions which which give a better probab ability to win uh uh an interview and uh it will make you basically a better developer so so like let's have a look into these kind of questions so what you are right now seeing on the screen is uh one of the um it's it's just a browser based notepad like uh which will not spy on you or anything that sort like you can just download that extension from my website which is ww. ira. and if you really want to use this particular extension so however I'm going to use this because of course I built this particular thing so the first problem first statement of the problem which I'm going to look into is the specificity of the CSS so this CSS has a specificity so uh like you know most of the time which I have seen this is like you know uh uh there are some style changes which I have to do and I have no idea where is this particular style treat is coming from so in at this kind of scenario in this kind of uh situation it is good to have a look into specificity of the CSS here uh what you are seeing here is like you know there is a style is been specified so the elements the red so this color will be red and the dot blue the color is blue and H1 the header and the specified color is yellow and here is the element which I have to color which is which I have given H1 ID equal to red and class equal to Blue and what is my color this is the question so this is a little bit tricky here like you know the red is been defined as a red and blue dot blue is defined as a blue and H1 is defined as a yellow so here uh the answer will be red the color of this particular element will be red why it has been happening it is there is a there is something called specific specificity of the CSS that is what causes this particular Behavior so if we need to really look into the specificity of the uh cses these are the things which we have to look into see the universal selector which is like a star that has a specificity of z0000 so this which means that this has the least specificity uh of the uh element and uh the nest specificity if the element is one this will be the next specificity and uh if this here this particular zero if this is one this uh Nest it will go to the nextest specificity and uh in the same like you know here it is the nest specificity and uh um um you know here uh it will be the nest specificity so um also like uh these are the uh these are the elements the specific spe of the elements has been defined in this particular way types selector has like P div and H1 this has the specificity over here one so and also one of the other thing we have to look into this is this you know if this can be two if the element definition is this way and if I Define in this way this will be Become Three this can be become uh three come on man this can be Become Three so this is how it is been defined and if I give the diff and diff and diff and diff and diff and diff so here 1 2 3 4 5 6 1 2 3 4 5 6 7 so specificity will be 7 so this is how the specificity is goes on this is one of the interesting problem or interesting concept uh which help helps you to Define better I mean it helps you to uh design better uh applications this is one of the important concept which you have to look into and here the constant object modifying the constant object this is another problem is one of the interesting problem which we can actually look into after the I mean after the introduction of es6 in the JavaScript uh most of the the peoples are familiar with the variables like you know like uh let um V and con like you know the constant is the the constant variable is generally immutable if I Define constant X = to 5 which means that this x uh is actually immutable across the across the programming code and let will actually die inside uh uh you know curly braces uh if I Define something inside the curly Braes let x equal to 5 uh the X will die inside the uh curly brazes and I cannot call this outside the curly brazes this is how the Le is working and V is like you know V is a global variable but uh uh we can also or um we can it is mutable uh um um mutable variable across the browser so see the here the here x is an immutable variable but if you look into this particular stuff constant person equal to name Sally this can be again redefined person do name equal to J so what does it mean uh so the constant is not immutable this constant object uh is is is mutable basically I mean I can redefine the value of the name again as Jane and I can again Define as something else and so this is true so the what it does is means like you know it it it will never make the object uh uh immutable this particular constant keyword if I use uh with the uh an object it doesn't make this particular uh object immutable so this is what something which I have which we have to understand and this is one of the interesting problem or one of the interesting concept uh we have to understand like people will say that the I still don't understand JavaScript yeah it's a is in a way it is true like um it is very hard to understand JavaScript and you know there are many other concept which is not there in other programming languages which is there in the JavaScript and that can be uh a little bit tricky as we goes on and uh there are many other stuffs happening in the case of JavaScript and here the uh another function which we can look into JavaScript is that immediately invoked the functions iif this is this is how the I is been defined the function console. log is to hello so what is happening here the function will be immediately AOK here when the function has been loaded it will be immediately AOK and U and why we how to use something uh like this means like you know uh if if I Define something inside this function uh that like you know let uh X = to five or something I can use this or I can again Define function inside this function and these functions I can call inside it that functions will live only inside this ifu only I cannot call this particular function outside of this I um so this is why the immediately invol functions are been used and it has a lot of use cases across the programs which if we if we really write the code we can actually understand those kind of things so this is the I and um this is import aases uh so how do we look into this like you know um so let's say like let's say uh we know that the what is the NES the definition for the NES we could say in this particular way nodejs is uh C++ library on top of that uh Vite engine on top of that there is an npm uh which is which is the uh um JavaScript uh JavaScript libraries manager like you know not package managers and uh this is how the and there is a lot of JavaScript which is been managed with the npm this is how the node structure is basically is and if we look into the npm structure the npm is kind of a binary tree I mean uh so this will go from one Noe to another node and another node this is how the npm structure is being actually uh you know organized and when we uh let's say like um um let's say there is a function in uh uh aios and there is a function in uh fs and we have to really defend like you know the the function name could be similar so we really have to Define this function is from the fs and not the function is from the axio even though the uh same functions are been there defined in the um axos or FS like you know for example the in order to FS to run there are other dependencies are needed that is also is being managed with the npm and that also will be installed in the uh when we run some command in the npm so the FS uh we have to I mean the the the tree structure we really have to Define from which function is being called from where and this is one of the important thing that's why if there is a let's say there is a cal function which is residing inside this multiply and there is another C function which is residing inside this add so I can uh I can take this Cal as a multiply from the file multiply and import the Cal as ad from the file ad so this will be getting this um this ad will get a global scope across this uh particular uh um uh particular a particular script and we could use this add across I mean this this this will actually make multiply will never make a problem to the add like you know we if if we add the Cal uh if we import just Cal uh from multiplay this will actually override and create a lot of bugs and things like that like it will be really hard to debug Al this is the the import aliases so using this alas names will actually help us to write the code in a very better way so this is one of the another thing uh where we have to look into object spread and reference issue so we know the uh I I think you might be uh you you will be I mean you might be aware about the um shallow copy and the Deep copy actually so here objects spread and reference issue how does it happens like you know for example I have defined an object which is called person over here and another uh person which is actually I have uh created the another person object using a spread operator in the JavaScript here uh using a spread operator I have initiated the object person to the person two so so here the person two also has the um has the variables which is been there in the person so here person do name equal to S and person to address. City equals to Los Angeles so here uh what would be the output of this this is interesting to look into like console.log person one. address. City and console log person uh address. City what would be the output the output which comes is LA and LA but if you look into the person one it is the Hilton what is happening here this spread operator actually um uh taking the value back to the uh person one this is like a uh this is like a deep copy what is that it is happening it's not a shallow copy so this is one of the important problem like you know deep copy and shallow copy and the object spread how it's behave in the object spread this is one of the important uh thing we have to look into while we are building stuffs into the JavaScript and uh uh also this is this is also very important uh thing like you know here we are using an arrow function in order to define the show my name here uh you if if I call like console loog to object one do show my name it will give if because it is been defined here and it is been returning return do uh this.

name so this keyword will actually only work in this function definition which never work in the arrow function this is also an important uh stuff to look into and these are the things which uh I mean the if you if you are aware about these kind of things and uh these sort of stuff you know that will actually uh make you a better uh JavaScript uh programmer thank you for watching