Shadan Khan

Help me understand more about your background with you. Uh, Hi, dear. I am working on front end technologies. I have 5 years, uh, 5 plus years of experience. I have done various projects. I have done, uh, ERP project. I I am right now, I'm On ecommerce website in, uh, in ERP, I have done, uh, lots of dashboards. I have done in, I have done, uh, work in React JS, JavaScript, HTML, CSS, Bootstrap, jQuery, and, Uh, library. So, uh, and right now, I'm working in, uh, HP, uh, project, which She's, uh, for ecommerce side. In this project, uh, I have done, uh, work for, uh, work in ReactJS, Redux and JavaScript as well. And I'm using Material UI as a UI interface in this, Uh, HPE project. Previously, I was working on ERP project. In that project, I have done 50 plus dashboards. In that dashboard, I used Hi, chart and, uh, for data tables. In that, uh, data tables, That project was for Sedan International Saudi Arabia company.

Uh, basically, React JSA and Redux Redux is a management storage tool. Suppose if we want to change anything, in another component. So it is very hard to get things from, uh, in React JS. So that's why, uh, some developer developed the Redux. Redux means you can store any value in the Redux store. After that, if you want to use that, uh, value, you can use it from wherever you want in the in the application, uh, vice versa. We are, uh, uh, now we got to That thing also in the React JS, but, uh, that is not appropriate as compared to Redux. And, uh, if you if you go with the Redux, then you need to prop drilling. Prop drilling means you need to pass your variable into different different component. After that, you can change it. But in the Redux, there is no need to change or you there is no need to drill or prop drilling in 2 different different sprint component, we just directly put that, uh, variable there, and you can use it with the help of you with the help of you selector, if you want to dispatch anything, you can dispatch it. And, uh, based on the dispatch, you can take any action on it. That is

Uh, in HTML and CSS for web accessibility, we need to use YRI. YRI means, uh, web accessibility point. If we are giving any array comp, uh, attribute to the HTML of that time, we can assure that it it is a correct format for accessible person or unable person can read that properly. If we use tab or enter anything, then it will, uh, tell correctly. If we are using, uh, like, dev or some unsymmetric text in that case that, um, that accessibility will not work. That accessibility work only in, uh, um, in semantic text. So whatever HTML five is using, like, uh, header, footer, nav mark address video audio, these new decks, to, basically, and, uh, that as well. In, uh, in this in that case, if, uh, we also need to give a hyphen label, hyphen, uh, click, those value, also, we need to mention there. Based on that, it will work fine, and, uh, we can ensure that the accessibility is correct, uh, or it is good for

Uh, in this case, what we can do it means, uh, how do you build a system to share a state with in this case, what we will do, we will make, uh, one Redux uh, middleware, in that Redux middleware, we need to put that in first, we need to create 1 state to, um, we can see store, uh, folder in that store folder, we can create 2 files, 1 for 1 for action, another phone reducts, uh, reducer. So what we can do, we can write our go all the code. If if it is for action, then we need to write all the code in action folder if we want to write. Uh, if we want to, uh, get the value, then we need to write all the code in reducer in that folders. If suppose we want to get some username, uh, that username is in authorization dot g s, then we need to write that code in authorization dot g s only. And in the Redux, we can also create same file name with the authorization dot j s, all the reducer actions, we can write to over there. And if we want to call it, then we directly recall 1 file in that file, we just need to create 1 file in both places. Mode, uh, in, like, uh, next uh, in index.js index.js, in that file, we can call call all the proper files, uh, from, uh, that folder, and based on that, we can directly pass 1 file. So wherever we need to dispatch or we need a reducer with the user state. Directly, we can use that file and we can get it. Based on that, it will be easy for us to maintain the things.

I will choose Material UI because Material UI is better. Uh, uh, Tailwind is, uh, CSS is also better, but, uh, in Tailwind CSS, we need to write our own HTML as well. But in the Material UI, we are there is no need to write our own HTML. They already provided its own components. Based on that, we can call the those components. And, right, the code, if you want to change it, we can change it in material UI as well. But in the live, uh, the live, tailwind CSS. We need to write to our, uh, need to write CSS directly in HTML. So which is, uh, sometimes not good as compared to material UI. And material UI is also answered by Google, then that is also a plus point to the material UI. Based on that, if, uh, as you can see, uh, there are lots of developer are working behind this. So if we got any updated that directly, we can use

Yes. Uh, no response or not. Uh, because as you are seeing that in style, uh, we are using inline uh, with 800, it means that if we want to, uh, overlap or override this value, we can't override because we are using that, uh, with Uh, 800 in this in in line CSS, which is not good if we are using any CSS external or we can see in Uh, in the file in file, so we can make it responsive based on the direct material you at the rate media. Based on that media, we can give the value, whatever value, whatever max width we want. So based on that, it will work fine. But in this Yes. That is that will not work because we cannot, um, we can cannot change this value or we cannot override this value because if will give anything in the CSS that will not override because in div, it is taking only, uh, directly in in line, which is not a good practice Uh, yes. As well as not good for our code to make any application, um, responsive. If we want to make any application responsive, in that case, we need to give Uh, terminal CSS only. Uh, why? Because in external CSS, if we want to change anything, we just need to give the class name to that file. And, first, we need to use the media queries. Based on the media queries, we can give the value. Like, edit media, screen, and, uh, um, only screen, and max with uh, like, if we give 767, uh, after that, whatever class we are giving there, based on that based on that class, we can give the width sir. And change it. In most cases, there is no need to take specific width away because which is not good. We just need to take Uh, but as a 100%, it automatically fixed to the screen based on the screen size or revolution resolution. Sorry. Uh, so there is no need to write any thing in in line uh, because that is not a good practice and, uh, which is also not

In in this case, uh, if you will see the code, in this case, we have 2 option, uh, in this in in this case, we have 2 options. Uh, what we can do, we can do first thing, if we want to make this code with the Exceptional error, so we can use it dot catch. After that, we can put the logic there. Or in the other case, what we can do, we can, uh, take this, um, data. After that we can use if or else condition. Based on that condition, we can handle the exceptional errors. And that's it for this fetch because in this fetch, what we can do, fetch API endpoint dot then Response after that, then response data, console dot log. If we are getting anything, then directly, we need to write dot catch. In that catch, we can give the, Uh, exceptional error. Whatever error we are getting, we can pass or throw error based on that. Or if you if we want to In different width, then just we take the response. After that, we can use if, uh, if condition and check if we are getting correct status. Based on that status, we can show the value to to the user or to the, um, uh, customer whoever, uh, seeing that.

First, we need to create 1, Constructor based on the constructor, we can use sorry. Prop in that prop, uh, we can take the value. If we will directly use it, then this is not good and it will Reduce the speed or, uh, we cannot optimize it. So first, we need to create 1 constructor. Based on that Actually, we can pass this product to, uh, name. Uh, is that will help us to optimize, optimize the application as well. But now we if, uh, in this case, uh, as you know, it is a old syntax if we change the syntax to the React 17 or React 15. So based on that, what we can do, we can use, Uh, React base, um, use selectors, uh, means, uh, React hooks. In that hooks, we have lots of thing to reduce or Optimize the things, sir, like, uh, lazy loading. React dot lazy loading. Based on lazy loading, we can give suspense and a loader that value, it will give boost our application and optimize as well. If we are using any value for currently or we are seeing that value not changing, then there we can take directly use memo. Based on their memo, we can reduce the application optimization, and application will Fine. And application will give the speed as well. Uh, this is recommended by React as well in the current and present scenario.

As, uh, as you know here, uh, they are mentioning that the speed of you want to optimize any speed, then, uh, I will recommend it that we need to write our own code. If we there is no need to write any third party Library, like, material UI because in material UI driver, what will happen if we we want only some future? Like, we want buttons. We want In input, uh, we want, uh, models. In that case, what will happen if we will install it, then we will get all other things as well, like dialogue And, uh, like, um, table, menus, all those things, which is not required for our application, then in that case, what will happen, It will, uh, impact on the speed optimization. That's why I will suggest to you that we can you directly use the simple HTML CSS JavaScript And React JS, so what will happen, we we can write our own code based on that. Uh, we if we want to optimize anything, we can optimize it directly our own. So it will it will speed up the our application, and it will, uh, good to, um, uh, write less code as compared to as compared to

Suppose, we, uh, we want to, uh, uh, like, we are making 1 banking application. That application, uh, we want to add or subtract direct, uh, while a user is withdrawing or, uh, or depositing amount, so in that case, we have one structure in the structure, we just see that if user is putting some values and we was just, say, send or save after that, it need to be update in other places as well, like, uh, in the bank, uh, not in the front page. It need to be manage it in the ATM, in the bank account, in, uh, in, uh, we can say, in other application, like, right now nowadays, uh, we are using many third party application as well. So what we can do, we can make one Redux in Next. Js, basically, just for back end. So if we anything we will change and we will push it, uh, then directly Nextiva will be automatically update all those things. So but if we want to show those thing in the front end, then how we can show we can show it based on the redux. If we will, anything, uh, we will update directly, we need to dispatch the that action. The reducer will work. And after that, once the things will update automatically, that will update our clean without any refresh refreshing thing. That's why it is a single page application, and it is other as a web progressive application as well. Yeah.