 So, let's get started. We are going to talk about how initial designing helps all team at HOSTA deliver facts quickly. This is Basavaraj Chandra. So, I work at AgriTech startup, where you are going to take. So, we are building software solutions to that farm split. Let's talk about how the usual process works, okay? We have this designer, who is also going to talk about the asset designs, you will find. And for each design, we have a data database, okay? So, they have XTML file and CSS file, and then JavaScript file, right? They have to go through this, okay, they have to come, I mean, read this again. So, as I mentioned, what happens next, I'm matching the face, okay? So, what does this all about? They literally measure the complex values, or the color, score, and what what. How do you do it this way? How many of you? Eight. Let's have an example, okay? So, this is a sketch design, and one of the examples, okay? So, we are talking about heading, okay? There are actually two different kinds of heading. First one, section header, okay? Right, section header. And process is, I think, four weeks, okay? So, when you go inside the designs. And there is one more kind of header, which is parameter, you see, file, you have to add three developers, so there's a big one. Three developers, they are coming with parameter, okay? And the font size is 26, okay? And this is how we are going to see this, okay? They're going to match it with our designs. So, this is my, so let's see one file model, and we want our design, so couple of my work ethic says, let's change the section header, we'll put it in here, okay? We do it, that's, let's save it, what we need to do, something. How come that modal, styling, header, change? So, they are fixing one thing and doing something else. So, and you might have guessed it, right? Cs is for those two, you know, writing. So, we're going to write the modal, styling is also using that section header and styling is called modal heading and that's why it is broken, okay? That's why this is what we call it as styling, so this is what it's like, okay? And then you have small t, they've got that to visualize it, okay? They continue it, they have separate three who is writing CSS and there is separate three who is writing JavaScript, right, the whole logic takes. And then the things are little bit, you know, fine, but you know, small t, the middle is the middle thing. So, when the middle is going under, then there are, there are no chances of creating the fine graph, okay? So, the CSS was going huge and it was going down the path of all of the page and as you know, CSS is very good, okay? That is, you know, when it would become, when it would be going to a point. So, that's why I say CSS is hard, okay? So, that's the thing, I find it very hard and there is no way to not, he says, answering the question, can I modify or delete the code without creating anything? It's difficult to answer in that kind of situation. And that's the question is to be optimized as far as you could. So, that's what he indicates. You should not, like, break other things when you're doing something. And let's see, how do we make it simple? So, last year, we had this tree man face, that we shifted to B4, obviously we got it in real, okay? We had to go through, it is declarative, common invasive energy, we have a lot of problems and stuff like that, okay? So, the next thing, it's the stand-up, so if one man has died, how do you say, and how do you react? So, those are the code for our stand-up, that is, CSS in JS, CSS in Java, so, think of it, so, they have got that HTML, they get to the aspect, and that means, it's not going to be based on the code. CSS is not going to be just important, and all the files will be stored in JS, okay? Let's see the state, that's about that. Okay, so, how do we react? We just have to, what thing do we install, that's, and we also have the next thing. You import style from style code lines, and there is this style, got vehicle, and there is tactic. I don't know if you can see, this is tactic, so if you know tactic, that is, CSS can fit it, so they are like, a new way of calling a function. So, label is actually a function defined on style, okay? So, we don't have to record that, and it's already taken care of as a class, okay? And when we get out of that, there is a standard label, and that's a normal react-com, so, that's a normal react-com, so you can use it in any other react-com, okay? So, how do we react it? So, we do a react-com, so you want, basically, you want to label it, color, add, arch in field, and form size, that's what it is, okay? So, this is how you have to write, or, and I know label is a normal react-com, okay, so that's nothing new. So, the one thing about this is, if you see the CSS, and writing is that it can be written, it's normal strength, okay? If you know how to style with normal react, whether it's in any of the libraries, you might find this font, attach, size, every font size, like the kind of thing, but this is very similar to the normal case, like any normal case. So, what is style-com that you guys have done it, but they have to get the same text, very similar, so if you have your own CSS called the CSS site, oh yeah, they do some more CSS, if you have your own CSS and CSS files, you can just convert it into style-com, I mean, they can work easily, so, my decision path is very new, okay? So, how does this all work? So, the style is actually injected inside the head section, so you have a head section called the head, the style is injected into the head section, and there is this random cases class which is injected, and as it's random, okay, it won't clash, you won't find two classes in the same class, okay? So, you are not out of your local scope, so you are not out of that side effect, okay? So, this is a local scope, okay? And so, this all is, this all is done once the component is loaded, so once the component is connected to the screen, it just adds the random class onto the header and it just starts, okay? So, we are talking about CSS in here, right, component here, CSS is called dynamic, okay? So, let's see how do we do that dynamic, okay? In font size, okay, so there are two categories, okay? The font size, initial data certificate, now it takes half, and UXM, let's say cross for AG size, so let's say AG size is an object you expect to run, I don't know if it's right, I don't know if it's not going to come and then any component extracts it, okay? So, we are expecting some AG size as a graph and we are putting it as an option thing, okay? So, we are getting, if we don't find anything, just go in here, okay? And we have written graphs for g.fonts of AG size and this is high, there's not a high. All of these 10 components, they have g support, so the g is nothing but a model and it comes from many things, so even on this graph, you don't have to say anything, okay? And so, we have a team object where the font size is defined, so you can imagine this, okay? You can imagine team as a object which has fonts defined as well as the responses that your company makes up, like this we have design assistant graph where we are talking about design system, okay? And that's how we are getting that, let's move. Let's see how we take this into action. So, this is how we are going to do it, and we are going to get our object render. We are going to do this, so we get font size and we are going to get what, I like any AG size as a graph, okay? So, we are going to go AG size graph, we are going to make the font size, okay? Let's see how we add AG size, so we do AG size equal to 10, we do medium, and then it shows little, right? It is not enough, okay? We are going to do a little difference. This is super cool, right? Now, we are not talking about the point B, 25, right? So, we are talking about the major difference given that we are going to use this graph, B, we are not a friend, so we are not happy. Now, I like this. This guy, like, we, my time energy created is over, and then we have the font color as I, we have differences, we have buttons, table, and we put the, as a team is team, which is not good, okay? So, one of the advantage is that we have team, we only want our team, because of our team. So, you can have your personal team, you can override teams, you can change the, I guess we, so we are going to talk about that, if there's no mistake, okay? So, we can use this in this mode. Second thing is, as we are going to look at the information we do with this, right, build the list, and all the things, and that thing. So, the thing is, when you are writing, don't go to the button, yes? You're not worried about limits, okay? You're just focused on that button, yes, right? So, that is what is the solution, and yes, it doesn't support the list, right? So, that is what you need, that might be cases, when you want to style, let's say, body tile or something like that, you can use those to style it, but you don't make sure that you're going to produce it, because you're going to have it on your list. Let's not go to something like that, and we can produce it like this, with this. So, one point I want to do, because I'm going to talk about this in this, something like three things, like the new project, okay? So, this is something, okay, opportunity. So, I'm trying not to go to the one that comes up and says, hey, there is a certain person in the project, and it's too early to be able to produce this one. Okay, so, new body tile, new designs, you know? Other than that, we have companies that are designed to reuse the components, but they can have their own difficulty. But, let's see, what are the other things? So, no, we can't, like, see this one together again, right? So, that is not usually the case, because we have, like, some of the other stuff to do, we are going to do the same thing again, but I know it's important. So, the other thing is, and here is this, so, this is what we have, like, this is a subject, it's actually a new project, right? So, they're like, going into the project, yes, I think we're going to start with the project, it can come in place, okay? You might be knowing the problem from the project, you have to be getting the resources, if there is a path, you have to accept the kind of business that you want to be able to have, I think, you need to be able to understand all these. So, if you have a developer who has the same kind of coffee, they can ask and they might be able to report to you, and you also could, like, you can send me a copy, that is for the best, okay? We have actually been looking for some road, I think it's really, like, looking around, and getting the resources, like, opening the Instagram, also, and a lot of, it's going to be a lot of workplaces, so, yeah, worksplaces, and this is what the boss is, and really, it's really, like, sort of really, like, projects tend to grow over time, and there is no place for projects that can be used, elsewhere, in the process. For example, just being a generic testing tool, you have to burn too many packages, and the other thing is, just, that's all. That is not used in other projects, where it's like, right, it's like, one good point. This is like, yes, but it's what we need, it's what we want, we have some projects, and it's important, we need more money, okay? That's all. And that's not what we are going to do, because we are coming to the end of the year, so, yeah, it's fast, reliable, secure, difficult to manage, and it's like, take my face, and we're going to burn it all. What is, yeah, it works just overall, so it says you organize your projects using reusable packages, not really present for us, with the dependencies on the way, we're not going to get it, but see, when they're already ready, yes, you can see, we can repose our React, Apple, Compute, we'll find out how this is going to be on there. Let's see the second thing, the second one, from the second one is, you have to add a flag, box spaces, experimental, because they do say that there's a window, because they want to take the paint back from the community, which is pretty simple. So, this command, first thing, set up the flag, okay, this is set up, this is the one thing, one thing is that you have to do, so this will add box spaces, experimental, true, individual, Yarn, RC, file, if you're the first one there, okay, so this is not the normal package that we're just going to do, we have name, we have version, we have dependencies, it's a change that we're going to make, okay. So then we're actually going to change this here, you know, taking it with consideration, because the box spaces thing, I can just last up, so you are saying that anything from that I can just hold up, is now a box space, so 3D-tizer independent activity, independent box space, okay, so it has its own dependencies, you don't worry about that, this is what it says, it's really defined as a I can just, it's got these spaces in the same space, the second thing is private, true, so you're not going to make the main app as a way that we're thinking, because you'll have some blueboard or some business-specific code if you're actually the main app, you're not going to publish that, it was like, use it anywhere else, so you're not going to make private, true, okay, so, private, true, and box spaces, packages, but you can have your own expressions, it is just a regular expression, independent space, some one more code, one more code, but you can not publish it, the records that are defined inside, so such as, record one and record two, here, they are considered as one more code, they have their own activities or JSON files, they have their own dependencies, so look at it, I think yes, we have top-level, applications or JSON files, that's what we're seeing the changes, you might be wondering right, where is the load modules folder being created, right, so here is the load modules, so it will just go straight to the top, it's not that they use a package, that makes sense, right, you don't want to have, when you're talking about react to be, inside, record one and record two, that makes it fast, you just want to publish it, up to the top, and that's why it is fast, and then one more thing, only if the local and root dependencies, differ in size, we find local folder associated with that fact, it's only when the version number varies, you will find like, more versions coming to the, in the results, okay, and this is all the, complex, that's all, we have demo, demo for this, so for that, you don't know what this is, if the experimenter flies, everything is going, let's, have a look at it, hold it, is it visible, or just, it's not visible, right, there is demo, okay, so let's see the app on the load, let's see the, top-level package on JSON file, okay, so we have, workspaces, packages, packages, that's that, packages, let's start, so, if you see packages is a folder, where you will find all the folders, you can have multiple, multiple, multiple, multiple, so I have, let's see, okay, so you are saying, anything is a package, it's now configured to be, the app, so, and we have our, product, so let's see now, is, okay, so let's go, let's see, the style has, there is a package on this, so let's see package on this, so it says it has its own dependencies, for its time, common, and it has a new version, name, okay, and then this is, make, which is, so you see, in this, it's, nothing, but it's just exporting, okay, so it's exporting the label thing, so if you go to label, so, so we have some sizes, if I do that, I go to label, HD size, medium, small, and sizes, we find like people at medium, large, this is what it says, so, my label is, we put standard label, we are doing, other, we put on the, see, so this is how we do, and we're exporting my label, let's see what we'll be using, so, inside our app purchase, we have my label, HD size, HD, we want to put it, how are we importing it, we just look at the, I want you to focus on this, because, so, if you're importing my label from site, it's not an Indian dependency, we do not install it from the event, it's just a local thing, right, so, you're not a different worker, you're not flash, it's style, flash, look, in the searcher, whatever, okay, so just inspect, you don't know, who has written this, try the folder, okay, so that's super awesome, so here we do, I have got HD size, and HD, so, it is bigger, right, you just try and make it, that's not give anything, and then see, report, that's the report guys, okay, and that's why you give me, the Indian thing, okay, so, it does support all the, what we're doing, this will mean that, you have, that's the code setup, so it won't take anything, it's just, just organizing some of this stuff, so let's, you go ahead, so this is how we, you know, write it and, we add the style component, which is not, it's nothing new, it's just hacker or, style component, you know that style is for them, they will import buttons, this is all, this is all for, at least, okay, there is this, dogs, eaters, and, you can play around, you can just play around, work and what you say, okay, let's go, what we're doing is, first thing, use style component, so we use style component, you know, that way, I'll write it, see, it's that style component thing, and you follow, Yarn office, so, Yarn office makes your code easier for sharing, and to do your thing, so you can, now writing, you can share, you can delete it, it creates, our own platform, code slash, code slash, so, this is super awesome, this is what I like the most, you're not trying to import, and you'll get one from, you know, code slash, code slash, and you know, it gives you flexibility, you know, moving your code base, from one folder, from another folder, you never know, it's something, it's something, now you're gonna make, turn this, directly, you know, you know, so, it, and then, for the same, because you're writing, forwarding, forwarding, you're going to make, from this rate, you're not, your thing happens, you're going to use, for the fast charge, and, that's what I guess, thank you, that's tough, but it's tough for you guys, so, last, is my favorite, even if it's, you know, most of the time, right, so, it, it helps you, faster, because you're just, you're doing this, most of the time, I think, you're not, whatever, but it's so much, the best, most of the time, this is my get-up, you know, I think it's over, and I'm saying, I think, I think it's over.