We're in the prong booth now with Danielle Rabibo. What do you have to show us today? Hi, it's nice to meet you. This is the Pocket Plug by Prong. It is an iPhone case with built-in prongs in the back that slip open that you can plug into any wall, any outlet, wherever you are. You never need to carry a cord with you ever. So this is a case that is also a battery charger, a battery source, and you plug it in? No, it's not a battery. It's just the prongs that pop up that you can charge. Oh, I get you. Just straight free. Oh, okay, I got you. We do have one coming out soon that will have a battery in it as well, which you can check out at prong.com for updates of when the new model is coming out. But this one is just with the prongs popping out. So instead of having to carry your nine-pin connector cable and a charger block and all that, you just stick it right into the wall? Yeah, I mean it's great for travelers. You know, if you're at a restaurant and you realize your phone sign, you just plug it in or at the movies or if you're a student in a classroom, you just plug it in during class. Nothing else to carry. It's beautiful too. It's black and red and all snazzy, cool looking. Yeah, we have a bunch of different colors. We have blue and black, white and pink, and all black, all white, and then red and black. And how much does the case cost? On our website at prong.com it is $69.95 for an iPhone 5 and $59.95 for an iPhone 4. But today at Macworld it's $50. I love that you guys can sell stuff here. That's awesome, way fun. Very good, thank you very much. And again, I'm sorry, prong.com. Yes, thank you so much.


Welcome everybody to this workshop on building user adaptive interfaces with media preferences. I'm Adam Argyle. I'm super stoked to walk you through this today. It's marked as a beginner workflow today or like a beginner task, but let's just say the beginner aspects of this is that you'll be going for a ride and I'm gonna take you on this ride. You're gonna copy and paste code and see it react in the page sort of update with your changes, but just know that this is jam packed with various things to learn about today about CSS and just building on the web. We are entering a new type of web where things don't just change to the screen size, they change to my operating system and the preferences that I've made on that and the way that those flow into our page can get us into this new era of user adaptive interfaces. And so we're gonna program our entire, all of our code today is in this premonition that we want to be building for user adaptivity. We want the choices of our users to be reflected inside of here. So, okay, that's what we're doing. Here's kind of what we're building. I like dark themes, so that's why we have a dark mode user settings page down here. And if I go into like a mobile view, you can see it go into a mobile view, right? Okay, so nothing too surprising here. This is basically kind of like responsive design, but what we're gonna get into is sort of these really small details and decisions that we're gonna make from the ground up that put the user first. And so let's talk a little bit about like user preferences. Like your device that you chose was a choice. It's an option for you, whether you were on mobile or desktop, these are things that you bring to the table. It also comes down to like, what language do you have set on your device? What language do you, in direction do you like to read? And these are all things that should play all the way into your page. You're here to just consume some content, right? Like we're in this era now where the page can bend to me instead of me bend to the page. And let's look at like some more of those things that we can do here. So we have like device viewport. We've talked about that before. This is like, we have 10 years of like device viewport reactivity in our layouts and stuff. Device orientation, so we're rotating it. Font size has been something that's been around for a while, but it's often overlooked where the user, they can choose a font size in their browser and you have a choice as an author to collaborate and not use it or to build upon it and sort of work up from it. And so that's what I mean. We're gonna be using relative units today. And for one thing is font size. We're gonna be making sure that that user's font size is respected in our application. Online, on offline, network connectivity, color scheme. You know, this one's really popular right now, light and dark, users land on the page and they don't know what theme it was originally built in and it's not the brand theme. It's now adapting to me as the user. We have interface animations that can know whether or not you like motion or not, right? We have that option in our interface. Let's use that in our pages. We have input like, are they on a keyboard? How are they even interfacing with this page? Are they on a Nintendo Switch? If they're on a Switch, they don't have a mouse. So how are they gonna fill out and use your experience? We don't wanna make sure that we are listening to that. We have document dimension, a direction and writing modes. We have the display mode. So whether or not they're even launching in a browser or from an app experience and then things coming down the pipe or we have like reduced data. So are they browsing in a reduced data saver state? We can change the page. We can change the page based on how many colors their device can display. So if someone's visiting from a older device, we don't wanna show crazy colors there. We want to show just the ones that it can display. There's like where WebSafe was there and now we have colors that go really vibrant these days and these really dynamic screens. And so a user is bringing capabilities, like a device capability to the table. And we wanna make sure that the user doesn't have to think about that. And our application is just showing itself in the best light that it can. And those are just a few of the things that we can look at today and a few of the things that we can look forward to in the future. So we have media queries that's a little breakdown. If you don't know what those are, you can check it out there. User adaptive is what we're talking about now is this concept where a user is visiting our page and we are adapting to them. And we're gonna do that in a lot of ways. So what we're gonna build is we're gonna build this form where it's gonna look like this in the beginning. It's just an HTML document and we'll go over that in just a second and we're gonna transform it into something that's responsive, is liquid and has all these nice animations in it so that you can build a settings page or build a form. I feel like most experiences in the world eventually push you into a form, at which point, hopefully that form is easy to use because that's sort of the money making moment where somebody either creates content or buys something or they don't. So we gotta make sure our forms are good and work well out of the box. So by the end, what we're gonna have is a light and a dark theme just with some CSS custom properties. We're gonna have animations and accessibility. So we're gonna make sure that this thing can be keyboard, mouse interacted, mouse interacted and that the motion and the colors are all accessible. It's really cool stuff that we're gonna work on. We're gonna make sure it is layout is adaptive and we're gonna do this without media queries. We have one media query that checks to see the device orientation but otherwise we try to do this very intrinsically and this is sort of an advanced layout topic is intrinsic layout but we're gonna be implementing one of those today so that it's responsive without a media query just sort of folds into the space if it can or not. So it's sort of you're agnostic to the device anyway and then we're also gonna use relative units and logical properties. Relative units are units that we can use to respect a user's preference and build up from there and logical properties are a way for us to not care about the direction of the document whether someone's reading right to left, top to bottom, bottom to top. We just wanna be agnostic to that. I just wanna lay it out with how it looks for me now. Logical properties, let us do that where we can define the space with the way that it looks and my language and my computer right now but anyone opening it up in a different language and a different writing mode, different direction they'll see it natively and naturally in theirs with all the spacing appropriate and it's just really cool. So what you'll need is just a browser doesn't necessarily have to be Chrome and let's dive into the next section here. This is getting all set up.  So I have the repository here you can find a link in the code lab. I recommend though using CodePen. So if you just follow the CodePen link and click the fork button right down here at the bottom right, that will just make a copy of this entire project and you'll get CSS live reloading, HTML live reloading all that stuff for free. You only need an account on CodePen if you wanna save it. So if today you just wanna kind of follow along in the workshop, don't even make an account just fork that CodePen and start working along with me and everything will be fine. If you want to though you can work locally download the code. I used Veet as a build system and it's nice and fast and very minimal and shouldn't put a whole lot of files on your computer. And yeah, that's a couple of ways to get started there. I wanna talk briefly about the HTML and we'll get into that because this is not an HTML lesson this wants to focus on CSS. So I had to kind of not do some things with y'all in the workshop and one of them was write this HTML. So I'm providing what I feel as a reasonably semantic document form that tries to include as much as it can without any styles and we'll briefly go over some of that stuff but that's about the HTML and about kind of getting set up. And hopefully you have had enough time now to open up the CodePen, hit that fork button and you're just ready to go. You're ready for like what's next. So let's check it out. Our next step here is adaptive interactions. All right, so our form, our document needs to be interactive. Now CSS can kind of facilitate some of these things but HTML gives us a lot of these for free. And by the end of this we're gonna make sure that we have a form that is gamepad and keyboard ready, mouse and touch ready and screen reader or similar assistive technology ready. And we're gonna do that by so I'm gonna kind of skip over some of the writing in here in the CodeLab in favor of filling in some of the gaps. Like this is a very advanced and beginner type of lesson. So I'm gonna try to like I packed a lot into the writing and I'm gonna try to fill in some gas audibly here. Like one of the things is this works across all modern browsers and we'll get into sort of when those moments are that you're sort of pushing out an older browser like IE because we're gonna do a lot of our color manipulation in CSS calc with HSL and that just that syntax doesn't work good with old IE. So anyway, I'll try to cover some of those things as well but there will be a push and a pull between the document and our coding here. Okay, so for first one, we have grouping inputs and so you can see that we have settings here is in this kind of weird box and notifications are in this weird box. And those are grouped and that's where grouping those with the field set. That's an element for sort of grouping like typed inputs and I've already got that set up for you so you don't have to do anything there but by using things like inputs and H2s and these sort of other semantic HTML elements we're able to get keyboard navigation for free. We can tab between these but we did have to go modify it a little bit. So there's a little gift there that shows the experience beforehand and after I like to add this CSS down here of outline offset of five pixels and that's just to give this a little bit out put a little bit of offset. So here I'm gonna copy that and just paste it right down at the bottom or CSS. So this is our first old copy paste and now if I tab through you can see that there's a little bit more space around our elements. It's not quite so shrink wrapped. So there's things to try here now that that's there is you can try connecting a gamepad and moving through this you can try using your keyboard. So I'm just hitting tab. If you know how to use a screen reader go ahead and try to use a screen reader and just see what the basic experiences that we're trying to build upon here. Okay, let's talk about a mouse. So a mouse can even be getting like more affordances in a form through just a couple of proper HTML attributes. Now I've already written them in the HTML for you but the way that they work is like right now if you look at the layout even with no styles it's hard to know which title and description is with which checkbox but since we did some proper labeling here and I'll scroll down here and we said that the input was four and the label was four certain input input we're able to hover over our label here and that will highlight the appropriate checkbox. So I don't know if you can see that down here but as I like highlight and you can see this in your demo too is if you highlight the right label and stuff you'll see the appropriate and associated checkbox kind of toggle a little bit in its style and I think that's really important for users to know which one visually right with a mouse like which checkbox is associated with which label and you can create that connection there just in the HTML and then you also get the affordance of you can click the label itself to toggle the checkbox.  Some things that note about a screen reader so screen reader is essentially someone's coming here and they can't see well we have icons which really are only good for people who can see and so one of the things that we do in the HTML here is we put aria hidden equals true on those so I'm putting an icon inside of a picture element and by putting aria hidden on those pictures we now no longer tab through the icon and the label and this item here. We can sort of say hey this is visually hidden I want this to be available for mouse users but screen reader users they don't need to stop on this icon it's just not gonna do them any value right? It's just sort of a necessary stop along the way. So for user experience purposes we can just sort of say it's hidden from you and now as they tab through and they're working through our document without sight they'll skip over the things that were made for sighted users so kind of just cool little things that we're doing in here for this user adaptive form users are coming here they bring their own tools to the table and we wanna make sure that we're handling all those as good as we can. So our HTML has set us up really well for that which is using input sliders, some check boxes and a couple of these little attributes on our elements to connect them to the rest of the thing. So let's move on to our next section into the kind of exciting section the first one which is adaptive layouts and by the end of this we're gonna have a spacing system we're gonna have a flexible and responsive alignment in spacing and we're gonna have a responsive layout we're gonna use logical properties and I'll talk briefly about those and we're gonna write a media query or two just to sort of like finesse those edges. Okay so for spacing let's jump into our first copy and paste task here which is this root copy paste so we're gonna copy and paste all of that and I'm gonna put this at the top of my style sheet but honestly you can throw it right at the bottom if you want it's not that big a deal and you should see no change cause all we've done is defined some custom properties that create a spacing system.  The REM unit I do have some links oh look it looks it's right here mindful of a user's preference if you're curious how the REM is mindful of a user's preference follow that link and study it and you'll see what we mean and so by using a quarter REM here that's our smallest unit half a REM is our extra small small and I kind of liked this naming cause that way a designer or someone could come up and be like that spacing between those two elements can you make that extra large and then you can be like well yeah that's exactly what my custom properties named how did you know maybe that maybe that would happen to you I don't know I hope it does it'd be really fun anyway okay so all we did is paste some variables we haven't used them and so they're pretty much null at this point they're not doing any value so let's add our first set of page styles now these styles here are kind of what some people might call a reset and that's not necessarily far off but it's not a full reset and you can see essentially what it did is it took all the space out of all our elements and that's because right here we're selecting every element we're setting its margin to zero and it's box sizing to border box that might not work for your app but it's gonna be how we start this one we're gonna be using a lot more gap in our layout today and so we're gonna start by zeroing our margins cause we're gonna have container owned spacing where as margin is a child owned space we set the document to a hundred percent height so block size is a logical property for the vertical it's like the way that your paragraph stack in this case it's the height of our document block size is height in Latin anyway and inline size would be with and we'll see that here in a second so then the body is said to min of the block size so essentially we're saying like hey HTML document fit the viewport and the body should fit that HTML document did you know that there's two nodes between you and your other elements anyway so that's what that's doing then we have some padding here we have padding block start and padding block end and they're each using one of our custom properties so we're using some light spacing on the top and bottom of our body block start and block end we'll go over some more logical properties in a second okay so that's essentially what that pasted it was just sort of like giving us this baseline shrinking all of our elements and putting some padding on the body let's do some light typography as well so I'm gonna take this set of styles here and paste them underneath the body selector here if you want you can consolidate these like take the font family here and put it up into the previous one it's not required for today what I want you to really be focused on is what user-centric choices am I making in this code snippet so when we pasted what was our intent and I'm hoping that that's the primary thing you take away from today is a lot of these things are rooted in our user we're thinking about our user so often okay so here's one font family system UI this font family will come from whatever system they've chosen so if they're on their favorite Linux machine they're gonna get a Linux font that looks exactly like their other system apps if they're on macOS they're gonna get the beautiful San Francisco font and it's gonna look like all their other apps essentially you make them not think they're gonna be reading content as legibly as they've been reading it all day because you didn't change it on them you gave them just a sans serif system UI there's even way more cool powers that come with system UI but we won't get into those I set a couple of font weights here on those headers I don't change their size we're just gonna use the native font size and I set this small to have a line height of 1.5 and that's this guy here and that's because by default it was just so shrunk and it was just too tight on the content so anyway that's what those are for let's talk briefly about logical properties okay so logical properties I mentioned is an agnostic way for you to talk about a web layout or a box really it's about a box is a box needs to have content in it right we always talk about CSS is all about boxes and when we talk about logical properties we want to talk about a box that's not necessarily about ourselves so I like to think about it if you ask someone and you wanna shake their hand you could ask for their right hand which would be a physical reference or you could ask for their strong hand logical properties are like asking for a user's strong hand and not assuming that they have a right hand which is really important when you need to do layout that can go top to bottom, right to left or top to bottom and right to left you have to think about these boxes in a way of flow as opposed to appearance so instead of saying it's the left side of a box we'd say it's in English or Latin it'd be the inline start of a box so it can be kind of initially confusing because no one talks about boxes this way but over time what we're gonna have done is aligned everyone in the entire world on how to talk about boxes because we have a way to talk about boxes that isn't about us it's about the box so I strongly recommend getting into these they are a small change to this the syntax that you write but the output is drastically different you're making a much more accessible and international document with your spacing using custom or logical properties so there's also other things about this that you probably would have been getting trained on like you might know what flex start and flex end is or like flex direction row and column these have all been training you with logical properties you just didn't really know it and so that flex start is the same thing as inline start this is thinking about like the way where your writing starts if you were to write by hand that's your writing on the inline direction in English and then your paragraphs stack on top of each other anyway so you have blocks of paragraphs and you have inline you write inline so if you think about it anyway that helps me think about it maybe it'll help you let's get into some CSS today our layouts are all done with grid so I love flex box I think it has tons of merit and but it just didn't end up being in this layout and there's no particular reason I think it's actually just that I needed more sized boxes like I had icons and stuff I'm like I'll just make a column at this size and stick an icon in there anyway grid and flex box are both great at micro and macro layouts but today grid is going to do all of them and then here's a screenshot that shows all the DevTools overlaid at once so here let's check that out that's just fun so if I hit command shift C I'll open up the DevTools and we can see over here on the right I've got sort of grid tools and I can toggle these on and toggle all of them on and start to see all the spacing that shows up in between all my elements here so if you haven't used the grid DevTools they're really nice for that and that's how you interact with them you sort of go into your elements panel and turn them on you can also go over here to the layout panel and toggle them from here but they're all on the list you just turn these on really cool so I'm gonna pop the tools out there I'm also just while we had that open I'm going to open up the DevTools again I'm gonna hit command shift P and I'm gonna go to light theme and I can emulate CSS prefers color light here and just sort of show the light theme I can also do that down here in the rendering panel and I can toggle light and dark from here so we'll be going over some of these things later once we do more color but I just kind of wanted to show that right now while I had the DevTools open all right I'm gonna close that out just to cancel out some of the emulation and go back into our layout so I'm actually gonna pull up the CSS here so that I'm looking more at the styles because we're about to paste a lot more code so here's the layout for our main element and our main element is the primary element around the entire layout so let's paste that at the bottom all right so display grid so what did we get right off the bat here we set display grid with a gap of large gap we put the content in the center and we put a little bit of padding on there the padding is so that when we shrink down we get some of the padding and then the spacing here is really only between this header and these content items here so grid by default creates rows we put some space between the elements in there and we centered it all okay let's check out what's our next one our form our form has our coolest layout also the most complex layout it's the most algorithmic of all the layouts and the most intrinsic and the one we're talking about the most and the one that I've said and the most times with right okay so but if you notice we now have a responsive layout without a media query and how does this layout know to kind of fold up or fold down these additional content boxes well let's talk about that so max width is the first sort of quirky aspect of this layout and what this form needs to do with max width is say how big it can grow to it's not normal for CSS and layout for you to do that but with this grid layout we did need to do that and the reason is we're using this repeat auto fit min max algorithm and it needs to know the absolute largest that it can grow to and a hundred percent is just not a value you'll like not a good value for it it doesn't understand 100% when something is shifting like this 100% could mean just the width at the one vertical and so you had to be explicit with max width we also have two different gaps here we have a row and a column gap and that's so that this gap here in between these two sections is different than this gap here this gap here is larger than this one and in one little definition here we can say the row and the column spacing and so when this thing is folding on itself it has a different amount of space when it's going here and it does here it's just super cool grid is so rad we align the items to flex start and that's so that they don't get stretched we can see that here see how the bottom edge of these isn't the same if we didn't have stretched there those would be the same and then let's get into this algorithm okay so we're saying for each child so this form has two field set sections that we want to be responsive and we're gonna say repeat auto fit min max so we want to auto fit these elements at a minimum and a maximum of we'll say a maximum of 35 characters and we can see here that that's essentially this size that they are they're saying I don't grow beyond 35 characters that's my max and that's what gives this next column the availability to auto fit is it's there's a maximum there and then the minimum is so that we can shrink super squishy and I know that sounds kind of funky but like min max has this issue where sometimes if you set min to 10 characters you wouldn't get 100% flexibility at certain small viewports and anyway there's articles written about what this is doing exactly and why it's so tricky why does min max with a min function included here with like 10 characters 100% and it's just this little algorithmic edge case where when you're getting into a small viewport you want 100% and not 10 characters and that's essentially what we're doing we're saying take the minimum it's either 10 characters or 100% and in this case it's 100% we want that to fill that space so anyway that was our trickiest layout and I'm gonna move on to our section so here's our section, paste this down here look at our HTML so it went form and section so each the form element that we just gave that responsive layout is actually having a responsive set of sections oh right there's sections not field sets because the field set is the border and the section has a header and a field set right so cool this section layout gave us gap between our header here and here and here we can just kind of show that here pop open our dev tools get into our section grid and so here's that section grid we just made here's that form grid that we made and we can see as we respond here the difference in like gap that we see in the middle there versus the horizontal gap and that's because that one definition that we did we can get up in here to the main and see how it's responding and then we can just see all three of these altogether really quick just to see what are they doing and why did we need so many layouts and you can see that just putting space between items often means you need another container and you need items to be wrapped in something so that's where a lot of that came from all right I'm gonna close out a dev tools get back into here and check out our next layout which is on the field set so I'm gonna grab this field set pop down here and paste it and we can see that we dropped our padding around the edge here we went to a display grid which was kind of similar to what it was before but then we're gonna get some ability to put a gap in there notice our gap is one pixel and that's really interesting here if you can see the one that like hairline between each of these that's actually you looking through a gap into the background of the field set so normally you might use like a border bottom and then say if it's not the last item don't have a border bottom because otherwise you'd see like a double border down here but with gap I'm actually using gap as the hairline and I thought that that was just like that's how designers think at least that's how the surface feels or it looks like it should feel like the item should be able to swipe on us anyway whatever this might just be me thinking about it too hard but I had a lot of fun making a hairline design choice with CSS grid gap I thought that was really nice we have a border radius which is using some of our custom properties for spacing so notice our spacing is just sort of like medium and small and large and medium and then we're staying really consistent by using our custom properties and it's gonna be one of the key things that has our layout looking so harmonious is that we used a limited palette of these spacing items so anyway we also said overflow hidden because we set a border radius and we're about to set a color background on that later and we're gonna want that color to be contained in that border radius okay let's check out field set item let me make sure I grab all of that field set item this is the only class or one of the few class names that we wrote and a field set item is for each of these items that sort of has an icon and has a slider and all these items inside of it and we set a display to grid here and look our grid template columns our first column is spacing large and that's actually creating a column here for the icons and then the rest of the item is this 1FR so it's sort of a flexible amount of space and then a fixed size for the icon which I think just makes a lot of sense right you're like here's the space for the icon center that icon in the space and then give the fluid space to the rest of the content there we add a gap using our spacing we add some pacing or padding using our spacing nothing too confusing there I thought that was really nice let's look at our field set item picture and these are for each of our icons and we're setting the block size and the inline size this is again like height and width except that it's agnostic to height and width that will always be appropriate to the writing mode and we're using our space XL so we're taking that icon we're giving it a very clear height and width we're giving it a clip path of a circle at 50% which we'll see later it prints a circle it will clip the element into a circle almost like border radius but I like the syntax a little bit better plus we're gonna animate it we use display inline grid and we place the content into the center great let's check out field set item and we have a cool selector in here using the is pseudo selector the functional pseudo selector here is it has great support these days and I'm here if I pull this out you should be able to see the full selector excellent so we're saying field set item if you have a direct descendant that is a picture or a direct descendant child that is an input type checkbox place them into the center and we see that here so this item is placing itself into the center and these icons are placing themselves into the center they're sort of like claiming center ownership on their own and that's what self is good for because not everything well and that's why it's the direct descendant you can go look at the code then not everything is always a direct descendant and needs to be centered and so this way we targeted just those two elements that need that nudge let's look at our field set item SVG so I'll grab this I'll paste it under here so these are gonna be the actual icon math values that are being used to draw the actual icon so we've created a column and we created a firm box and now we're gonna size we created the box so that we could put a circle around it and put some shape around it like here let's preview over here right so we have this circle around here and as I interact with it it grew that's that clip path and that's that outer box that we're working on right now but now we're gonna work on the SVG inside and we're gonna set its block size to var space medium so essentially we're setting the actual icon size right here and the other things we're creating a box that had space around it so that the icon could be in a circle and that's just yeah this is we're just burning right through it okay so now we have small stack and the reason this is small stack is this was just like a little utility class that created a grid and added gap and I often call this grid just for gap like sometimes I use grid I'll set display to grid just to use a gap gap is that good and here's a kind of good example of it so small stack went on top of numerous elements in here and it's basically just to add an extra small amount of gap between items you can go check the HTML to see where that was but if I delete it here and see that yeah it was mostly up in here oh we're taking the label and the sliders and the labels in these content here and we're putting space between them and we're setting them into a block direction so we could see that those stacked again all right let's look at input type checkbox and it's getting a height and width and see this is I thought this was nice because checkboxes are awfully small even for an abled user with a mouse and you can change the size of them so I have essentially changed the height and width of them right here and make them much more clickable and they render really nice so I don't see any reason why we shouldn't always increase the size of our checkboxes to be easier to use like that okay and at this point we've already done this a little bit we'll just like open up DevTools and look at your various layouts like look at what we have so far okay and all we've done is created some CSS custom properties for spacing and then a bunch of layout work where we took the HTML and we started putting the elements in the right spot and putting space between them and look how far padding and proper gaps will get you that's the majority of the work at least in this case and we've just taken this document and this document will now work in all these other different languages and writing modes because we're using logical properties and grid which will automatically do the sort of directionality work for us at the end of the day so again we're taking this like document that wasn't very good at adapting to users and we're layering in all these different choices to make it more and more adaptive to more different use cases and different types of users it's just so much fun okay so let's check out this one this selector says if the width is greater than 540 we wanna increase the padding on our main like layout and if it's above 800 we're gonna increase it even more so it's essentially a mobile first type of strategy I'll just paste this down here and we can see the spacing on our body changed right there and here if I come back to this layout you can check it out a lot more so here's our body element or here's our main we can see the border around the side here if I open up Vizbug I could even get that main with the padding yeah okay I'll hide Vizbug there so here's our padding at mobile and as we grow you can see we're now at 32 so we're using another one of our custom properties and as we grow even more we've grown to 48 so those are using rems and Vizbug is just reporting the calculated size here but it's nice to see the padding as it's changing and as you resize there so kind of cool little use of Vizbug for a second so that we could see our responsive padding it's like this particular set of CSS it's like gain more space around yourself as there's more space in the viewport because that's an important decision for this main to look more airy and sort of lightweight is to have it sort of start in a condensed mode like it's in a mobile phone and then we're gonna add more space to it as we grow so let's do that again with our form so here's our form let's go up to our form element now you don't have to do this either but I'm gonna here's a custom property that got made called repeat I'm gonna add that to the top of the form element here and then I'm gonna update our grid template columns to have use of our new custom property or actually here I'll just grab the custom property you can copy and paste that whole thing if you want to oh here I did it already I'll just paste and what we did is we replaced auto fit with number of columns and so or we will be doing that here in this media query so by default it's trying to auto fit elements in there but what we've said is if it's landscape and the min width is 640 which is essentially like saying this is a mobile device in landscape I specifically want two columns even if they're kind of difficult for you layout engine like I want them to be that way and so what we're doing is we're pivoting a custom property in that one media query situation that changes the grid template layout to be specifically a two column layout as opposed to sort of an intelligent auto fit so we're grabbing the reins in this one use case which is users on a mobile device going landscape are going to want to see two columns let's make sure it's two and that's what styles are there I thought that was a good user centric choice to make that like it kind of gets annoying if you want to use something in landscape and it still only has like one in the center you're like well I have all this space and it turned out that that layout did not auto fit in landscape and almost all the devices I tested so I went in and I kind of made something more specific and said this is what I want at this point so anyway here's another one we have so this is our field set item we're toggling some items or some values in it in a media query I'll just pop this down at the bottom with our other media queries here pull this out so we can see it okay so this one is if we shrink here we can see that we have like a kind of smaller space here and as I grow you see we gained more space here as we continue growing we gained more space so this is just sort of this concept of like a compact versus a minimal layout and all I'm doing is toggling spacing in a media query you can see in our media query that we wrote here it's just changing padding and changing grid temple columns using our additional custom properties so we're just kind of growing to an Excel growing to a double Excel to gain more visual space and I think just on a desktop you need that air you need that white space to feel elegant and to feel like it's not cramped we're on mobile we're sort of we're accustomed to cramped layouts and they're not so bad so anyway again that goes into this concept of where I'm trying to like build things kind of condensed by default and then I expand them into a more airy and lightweight layout and spacing scenario with media queries as our viewport grows all right so things to try we've kind of retried some of this but if you want to you can check this out on mobile check this out on a desktop and really what we have here is yeah we have a compact and minimal layout that's responsive and intelligent enough on a mobile device to sort of make a smart decision about going two up into two columns okay cool so I'm gonna move on to our next section because that's essentially it for our layout our layout is doing a lot of intelligent things already and we've just used CSS grid to so much of its power we used a lot of really advanced grid layouts there so if some of those felt a little far away for your current skill set don't worry I hope that like using them and seeing them and having me give a little bit of a verbal breakdown helped with those and let's move on to color color is kind of equally intense it has a lot of complexities that can happen inside of there but don't worry I'll try to walk you through today so that by the end you at least feel equipped enough to know why and how you could make a user adaptive color interface like something that adjusts to their preferences so we're gonna have something that adjusts to light and dark at the end something that has color scheme derived from a brand so I think that's just a really primary use case is that a designer will have decided on a brand color or you know you'll get a red or a blue and then you need to build a theme off of that and we're gonna do that today and you'll notice that if you look at my color scheme here in the preview it is kind of a bluish tint to it and that is not by accident if I click on the HTML and I come to the brand area here here's the hue I can change this hue if I hit shift up and down and you see it turning green you see it turning purple and here it's using that hue as a base across so you look now it's kind of pinkish and purplish I'll go back to 200 this is sort of what I mean is you're pivoting off of a hue off of a base brand color and you're building very dark colors from it and very light colors but not necessarily white or black you can make really elegant themes if you try to reserve white and black for the moments when you really want a dark shadow or you really want a white highlight pop and so those are some color tips for you here and we're gonna build that into our system today as we try to avoid using white and black and opt into basing everything off of a hue and build up from there and that's why we get this nice blueish tinted cool dark theme and we'll get a very nice, well here let's just see Command Shift P, let's emulate light see even this has a little bit of a blue hint to it they are very light gray but also very light blue gray and I think most users might not notice but they will know that there's a harmony here and so let's build that harmony I'll show you how I did it and we're gonna build accessible colors so like if I launch Fizzbug here and I grab the accessibility tool I can hover over all of these different colors and know that they are accessible, right? Great, passing, passing 12.45, 7.27 Okay, buy Fizzbug and hello colors let's go back to Code Pen and start setting up our brand channels so I go through a little bit in the workflow here that we assume the color is pound zero AF so I'm actually gonna let's open up DevTools again Command Shift C, I'm just gonna click something come over here to the styles, hit color and I'm gonna paste that color and so there's the blue, here's the blue, that's our brand but what I'm gonna do is I'm gonna hold Shift and click that color swatch and convert it between RGB and HSL and all that sort of good stuff because I want these color channels for free so that's what that task here is is grab that hex, go into a DevTool find the HSL color channels because we're going to be building up color using those channels specifically in HSL which HSL stands for Hue Saturation Lightness and it makes for a really great way to sort of build custom themes because of this syntax the way that you can talk about the color and compute on the color starts to make a lot of sense okay, let's get started then on adding some cool color to this let me grab, I wanna actually grab the custom properties out of there and again, you don't have to do that I'm gonna come back to the top and put them here with the rest of the custom properties and these are global custom properties, right we have spacing that's being shared everywhere and we have colors that are being shared everywhere but we did make one local custom property earlier, right which was the repeat we set it there in the form we could have like some like form repeat and sort of like made that look like it was stuck into a component but anyway, I like putting things at the root for global ones and if you can try to name your local custom properties to make sure that they just don't mix in with the global ones as you read them anyway, whatever I've put our three color channels here into the color space let's see how it's time time looks like it's getting towards the end I think so let's see so if I've got my color channels there and I popped down here and I'm just gonna paste the branch here so again, I'm just creating a custom property and setting those different channels we can see that I use the hue, right that I create right here is just 200 I divide a 100% into so this is gonna be 50% saturation and 50% lightness and so that's gonna give us a nice light desaturated brand color and that's what we're gonna use in the dark theme so anyway, we'll kind of build up from there I'm gonna grab these two so I like thinking about colors in text and surface so here's our two text colors and here's our four surface colors and if you look at them they're all based off of the hue here and then I'm just sort of setting absolute values I'm saying, hey, this is a kind of saturated and almost white kind of saturated and then definitely still on the light side so this is this third channel here is lightness and then on my surfaces I'm like, okay and they're still in the blue family they're still slightly saturated and they're very dark so as long as you have about 50% and 60% difference between your lightnesses here you can build accessible color schemes fairly confidently and I would definitely still say to measure but that's just a healthy tip to sort of keep lightness very stark between these colors and you'll make sure you have something that's accessible okay so I'm gonna grab this next media query here which checks for the user's preference so here's our first user preference media query this is prefers color scheme light and I'm just gonna update the route so if they do like a light theme I'm gonna update that brand color to be fully saturated so notice I'm not dividing it by two like I was previously we'll grab all of our text here's our text ones stick those next to brand grab the surface paste those surfaces in there so essentially we have light and dark custom properties ready to be used they're just not being used anywhere so let's go use them so the main one that I always like to use here is on the body we're gonna give the background of surface one and the text color of text one right so text one on surface one is an accessible color combination and we want to use them let's paste it I put that in the body selector there and we can start to see our page is coming to life because I prefer a dark color scheme and we built this to handle dark color schemes now they're starting to apply so here's our field set it's got a border and a background color where's our field set item here it is paste that there our field set item itself I said field set item before but this is our field set item excellent so notice that was a color on the whole surface there this color is for each item and there's our hairline our one pixel starts to show up there as the dividing color and here's our field set item picture field set item picture gets a color surface four now we've used all four of our surfaces we have this sort of one here around the icon we have one on the field set item itself one on the field set group and then one on the background so we have four surfaces two text colors we're just using them all cleverly to make this whole layout let's get the field set item SVG and the field set item focus within so here's a new selector and this one right down below it so if the field set item is getting focus inside of it we're going to change the color of the icon to be the brand color and you can see that right here did you see it go blue see it goes blue so when we have interaction happening next to this we get to change this color and that's focus within so we're saying hey if this field set item is getting interaction some focus we want to change the SVG child that's next to it and I just I love it you're going to see some other focus within work here here's our small we're going to set that to custom color here text to two and then for nice little kicker here on the route if you set the color scheme to dark light watch what happens to the checkboxes and inputs so here okay and so here we can see that we got custom colored checkboxes and SVG icons and just with one little CSS property called color scheme and you're signaling to the browser like it's okay for you to use those colors here and I'm getting very closed up on time so you can have to add these last styles yourself that reduce the motion our goal here is that we want to look to see if the user has a preference for reduced motion and if we do we're going to use color cross fades or opacity cross fades instead of some of the grow and shrink and scale animations that we would have done otherwise and that would get you to the end here where it would be otherwise complete and responsive and adapting to users from across the world and I hope you had a fun time this workshop and feel inspired to go make new interfaces alright see you later y'all bye


Hi friends, we are going to see January month Yojna the title millets So in this there are four articles which you are going to see on us milite cultivation in northeastern India India's wealth millet for health health benefits for lifestyle diseases Millets for pregnant and lack say lack-tightening mothers. So in this if you go for the first one millet cultivation in northeastern India and Before going to this article Why this article is important is when we take this northeastern states the entire Indian Democracy and especially in the entire development process of India northeastern state is comparatively not well developed Both in socio-economic perspective Right now government is providing all opportunities for its development and they're using multi-fold development programs For example, government is trying to promote tourism there government is also promoting infrastructures there government is also focusing on connectivity In one that aspect is government is also giving greater focus on Agriculture so in this article they say how is the potential of millet cultivation in northeastern states existing potential What are the existing dimensions on how it can be encouraged to the next level so before starting this? article We need to know that 2023 is being recognized as International year of millets by you on so with that background we can see the importance of this particular Yojana, okay so paragraph one Paragraph two and paragraph three so in paragraph one They say about the conditions for millet millet cultivation conditions they have given It's starting with especially in northeastern states so they say that Millets grow in tropical and subtropical regions So you simply to say that Miller grows in India because India's in tropics subtropical region and altitude altitude of two thousand hundred meters this height altitude and Temperature so minimum temperature required is So minimum temperature required is sorry eight to ten degree Celsius So this is going in paragraph one and paragraph two also speaks about millet cultivation only It says that so ideal temperature range so ideal temperature is the minimum requirement So when millets will be very effectively growing is when the temperature is round 26 to 29 degree Celsius And where we have very good yield and rainfall so rainfall in the range of 500 to 900 millimeters So these are some of the geographical conditions for growing millets and which matches with the northeastern states also And what are the other importance of millets in paragraph two also you can see the importance of millets especially from nutritional point of view It's given there that is Similits is rich in calcium iron protein fiber which are essential for human development both physical and Psychological aspects this has a huge role play in our human body So we can see that millets has all the essential Nutrition required and also they have this unsaturated fat. This is all given there There's all the points you can use it in your main sensor writing unsaturated fat and This is also very you are useful for diabetics correct to maintain low sugar level to maintain low sugar One of the biggest problem right now regarding India India's called us diabetics capital of the end table and we can see that Diabetism of the major problem in India and millet can be one such solution and It's also helps in maintaining bone health. It's all points we can Play it with our answer writing improving bone health so decreasing blood cholesterol blood cholesterol There's more most of the problem for especially people in urban India and also Weight control So millet is a solution for most of our health issues. That's the point. We can understand from this So we are in paragraph three It's paragraph three. This speaks about agricultural aspects of India that is India's agriculture based on time period Agricultural strategy and policies and all So in 1960s where we can see that India focused on green revolution so India focused on green revolution and what are the outcome of green revolution is India used High yielding varieties So primarily focused on wheat and rice Primarily focused on wheat and rice and agricultural techniques So this clearly shows a historical evolution of agriculture, especially after independence especially from government policy perspective So paragraph one paragraph two and paragraph three Next page paragraph one. So when we say agricultural Green revolution high yielding varieties. So this was primarily focused on chemical fertilizers to get high yielding Based on green revolution people behind to use fertilizers and pesticides fertilizers, fertilizers and that results in large-scale production Results in large-scale production that is food production food production So what are the power aspect is Even though we are able to achieve food security Food security we achieve So there's a cost involved in it. So the cost is first one is negative effects on environment Negative effects on environment or what you called as environmental cost or ecological cost. What are the environmental cost here is? one is Poisoned That is given here poison water bodies and agricultural land How this happens is because we are using chemical fertilizers throughout the seasons and continuously for years It has a residue there. So this is used to wash during rainfall and reaches the water bodies So that has an impact on water bodies and once gets settled on land that has an impact on agricultural land so at the point they are saying here and And low nutrition for soil low nutrition for soil Because under this green revolution most of the time it is always monocropping and continuously every season There will be always one crop for example rice means rice cultivation throughout the year wheat means wheat cultivation throughout the year So ultimately nutrients are being taken out from the soil without time for replacement So these are some of the cost because of green revolution that is given in paragraph one So paragraph two also this speaks about the impact of green revolution and they say that Madhya Pradesh is a case study here Madhya Pradesh is called as wheat bowl of India so wheat bowl and Which has a great impact on So they say also say that how? Recently agriculture is transforming So a heat wave has an impact on Agriculture productivity So wheat production has gone down production has gone down this you can also let climate change also and apart from this See in Northeastern states So we have this monsoon failure So may monsoon failure that is given in Northeastern states and and they also given Kaveri River Kaveri. These are some case studies where water deficit water deficit is a major problem and So 70 percentage of crop failure Crop failure in Tamil Nadu. So this is all case says the current status of Indian agriculture and Just clearly correlates with millets. How millets is going to solve all these issues? Okay So that's in paragraph 2 paragraph 3 So paragraph 3 so they say that because of this Because of this following conditions farmers need to focus on farmers need to focus on Adopt farming techniques they need to for adopt farming techniques to Resolve all these issues in agriculture farming techniques and which has the least negative Environmental impact negative environmental impact and also to support support food demand Food demand and also resulting in bettering better livelihood opportunities better livelihood opportunities and this was primarily for Possible only through organic farming coupled with millet cultivation So that was the paragraph says for all the problems were discussed in paragraph 1 and paragraph 2 the best choice is always organic farming coupled with Millet farmer millet cultivation. So that's going in paragraph 3 paragraph 4 So paragraph 5 And 6 in paragraph 4 and a millet Cultivation in a millet cultivation. So sustained sustained productivity techniques or what they call it as Sustainable farming techniques Sustainable farming techniques what are being used as given as as six parasic points One is you using organic materials mostly in all these things happens. One is organic Organic supplements or organic materials organic supplements used in cultivation Example it can be composed and next one is next one is it says about two recycles all nutrients and that is using cover crops Using cover crops this we can see multi cropping ideas and also in a particular land There are simultaneously different types of crops are being used and it also helps in fixing nitrogen mixing nitrogen and planting green manure legumes planting green manure legumes Mostly where we can see this whenever we go for this Plantation cropping in between we can see a lot of Leguminous plants are being put so that it has a multiple effect on agriculture And intercropping what we discussed intercropping intercropping and rotation of crops rotation of crops and management of crop residues So these are some of the ways of Having sustainable farming techniques which can be used for any answers of sustainable farming And also this is the practice right now mostly in northeastern states They are doing it and we can so that we can see one of the biggest potential of northeastern states in agriculture is organic So we already have this techniques there that is given there and also in paragraph why this speaks about the concept of shifting cultivation shifting cultivation in northeastern states or popularly they call it as Slash and burn the terms itself says And in northeastern states mostly in hilly terrains especially by tribes they take out one particular area They cut all the trees and they burn it So that Residues access of vitalizes and they do cultivations after the nutrients are over they go for a new sport and in our natural patech In our natural patech So this is called as Sweden Sweden in our national page called as within similarly in Assam. It's called as Juhum Juhum in Assam. So these are different names use it for your answer writing And this primarily tribes are focusing on all this using for millet cultivation. That's the point. It's given here and Most of the majority crops is Majority crops is always millet and they have given some examples of millet like finger millet Finger millet small millet Small millet fox tail millet. So these are some examples of millet So which is being cultivated through shifting cultivations that is given in this para page Next paragraph one so cultural importance of millet millet and its cultural importance So millet is not only seen as a crop and also Food for a people. It also has some cultural importance. So they have given some examples like Xan it's a approach recipe among this moon pot tribes So they belong to our natural So they belong to our natural patech Porridge that's nothing, but they convert this millet center porridge. It's like a watery Breakfast and this tribes especially consumes that and they eat with along with vegetables meat meat and cheese they consume this Porridge so that is one important aspect this name Xan is used by this particular type in our natural patech and apart from this apang So there are two aspects of it oneness normal apang another is Mouda apang there are two apangs and Both in our natural patech and oneness based on rice and other is based on millet and this is based on millet and and this is made out of Maorang millet it's a tribal name for it and It's considered to be dark red organic wine so from the millet they make this particular drink organic millet and this was primarily done by tribes like Adi and Nishi tribes probably my pronunciation may be wrong So these are the two tribes in Andamanic over they use this particular wine and this part of their Cultural importance, especially this Adi tribes Adi tribes have this annual Solung festival S-O-L-U-N-G Solung festival in the month of September in the month of September and this is this particular Wine is being given during that festival So these are some of the cultural importance of millets in our recent states This can also be a potential plumes question these two aspects they can give us a statement in Plumes when they want to give three to four statements about millets this can be one they can give even specific information can be asked what type of Food items are made out of millets by which tribes and what occasion they use it so this is there Next article is India's wealth millet for health so in that We'll go for paragraph 1 paragraph 2 so in paragraph 1 it speaks about this Year 2023 where a prime minister made a huge effort in making you and declare This year as international year of millets International year of millets international year of millets and in paragraph 2 and So what are the importance of millets? It's given here and it's millets are grown global Millets cultivated Across the globe Across the globe and it also given some major importance of it and especially from Indian perspective that is 170 lakh tons of millets are being cultivated per year in India and Entire world we are the largest one and 20 percentage of global production See regarding bill net India produce 20 percentage of it global production 80 percentage of Asia's production this we can clearly understand why government is promoting will it because when millet is consumed across the world There's a huge potential for India to export so India is very keen on it so 20 percentage of global production 80 percentage of Asia's production this facts clearly indicates that and India's average yield is around so one 120,000 239 kgs per hectare that is average yield in India whereas Global average yield is also given So go go global average yield is around 1229 kg per hectare this clearly shows that India is very good in Millet cultivation this are some of the facts to support that and we go for paragraph 1 paragraph 2 So in paragraph 1 So when you say millets, so what are the basic idea? What are millets? It's given here So popularly called as millets are popularly called asmota Unch in Hindi just you can use it for your introduction about millets and these are all small seeded annual grass small seeded annual grass and Primarily they focus on dry areas of dry areas of cultivation So dry areas of cultivation especially in subtropics and tropics subtropics and tropics So this can be introduction for your any question on millet So paragraph 2 so they list out what are the types of millets or categories of millets? Categories of millets which can be classified into three major one. One is major millets you can write some examples like pearl millet finger millet This you can draw as a table column for your answers and mila millets. We have minor millets Like foxtile foxtile millet or little millet and we have this Pseudomillet Pseudomillet like Buckwheat So this you can convert as a table column for your answers Okay, and what are the importance of millet that is being said first one is importance Importance first one is Climate-friendly So millets are climate-friendly crop So climate-friendly crop so does climate-friendly corp means it's very resilient to climates so it can take the vagaries of climate and So wide range of temperature, moisture and that helps in Usage of millet cultivation different parts of agriculture sectors or agricultural Zones so that is the point that is climate-friendly crop. That's the first importance of millet The next one is other important second one is So viable options for small farmers So what is why it's a viable option for small farmers means this requires low investments So millet cultivation requires low investments So there is need to put a lot of money into it and especially this can be helpful for small and marginal farmers in Small land area also they can go for it and inputs for this millet cultivation is comparatively very less next benefit is high in nutrition High in nutrition and it has a health benefits So we have an article on this we will see that and Basically, we already saw that millet is rich in calcium protein and unsaturated fats. This has a huge health benefits for humans that is given there and especially Millets can be a solution for malnourishment. So malnutrition can be solved through millets Sold through millets and This is one of the biggest problem for India, especially public health issue in India when compared to children's especially for children's So that can be one next thing is Economic and food security so economic and food security and millet is called as Poor man's food grain which clearly indicates that Millets are consumed by people especially at the lowest bracket bracket of the society where income levels are very low and This ensures this economic security and food security for the people so and Next page we go for it paragraph one Paragraph two and paragraph three so in paragraph one as we saw all the benefits of the millet right now millet is part of this Poshan Abyan Poshan 2.0 So right now Indian government is primarily focused on this Poshan Abyan or nutrition for children's objectives to tackle Tackle malnourishment or malnutrition and And and they are and in this portion 2.0 important is this 2.0 So government says that we also want to use this traditional Knowledge system so traditional salt knowledge is what traditional knowledge system is especially in villages and all we have a lot of Food recipes which we lost in our 60 years of evolution especially after 1989 due to globalization Where we can see the food patterns are changed and under this Poshan Abyan 2.0 or Poshan 2.0 government is trying to revive this traditional knowledge system especially to tackle malnourishment and That comes the role of millets because traditionally millets is on a part of our food patterns and this has a huge role to solve the problem of malnourishment and In this especially this Poshan 2.0 So we have this national Nutrition month National nutrition month Which is being celebrated across India across India especially in the month of September September September and which is done by Ministry of Women and Child Development Ministry of Women and Child Development and They are primarily focused on under this national nutrition month state governments are encouraged to develop millet based recipes some less millet based recipes and Which is being provided to the kids must be recipes and and this is being provided through Anganwadi's Through Anganwadi services so which clearly shows that government is very keen to tap the potential of millets to solve the Public health issue of malnutrition And also millets is being provided at least once a week through Anganwadi services Whereas in paragraph 2 So right now in India there are startups being focused on startups being focused on millets and FAC says that FAC says that right now we have around 500 startups and the startups especially being Promoted by through 500 startups promoted through this Program that is RKVY and Raftar Sir Raftar and Around six crores being distributed here rupees six crores is being distributed for millet based startups in India as per this particular scheme and and 22 starts up being approved for further funding. So these are some data is given that is totally 66 startups are given with this value This value and also we have this food safety and standards authority of India And they are coming out with every month. That is Recipe reviewer so this peer reviewer that has spreading awareness awareness about millets and It's benefit through a recipe and they're effectively using this social media platforms for it use of modern technology to reach the people social media platforms social media platforms and All already we have this thousand walk-a-thons and eat right meals programs are being organized that is given in paragraph 2 and paragraph 3 and government is establishing center of excellence Center of excellence on millets across India Across India this clearly shows the commitment of the government to promote millet Okay, next article is health benefits for lifestyle diseases and This entirely based on millets. So we have paragraph one paragraph two and paragraph three same paragraph one Some millets are considered as wonder foods because they have given the importance of millets. So millet consist of fiber content Will consist of fiber content Vitamins Vitamins Minerals phytochemicals antioxidants Antioxidants and this helps to solve a lot of lifestyle diseases. We'll see that lifestyle diseases lifestyle diseases and Millets in paragraph 2 Millets Let millet helps to reduce aging. So cardiovascular risk Diabetes Diabetes aging and cancer. So they identified all these things and paragraph 3 So what are the benefits of millets apart from health benefits? so water scarcity so Whenever we have a issue of water scarcity millets can be the best crop for it desertification can be stopped so desertification the certification and global warming so global warming and carbon footprints carbon footprints, so this all can be a Solved and paragraph one paragraph two paragraph three So paragraph four And paragraph five so in paragraph one so it says about Under modernization Under modernization we have Changed our food patterns food patterns and especially consumptions has changed a lot Consumption has changed a lot and it is found out that 71 percentage of Fatalities or dates are due to non communicable diseases Or due to non communicable diseases non communicable diseases and especially like Diabetes and all comes under this and In also the same paragraph it speaks about this reactive oxygen reactive oxygen species active oxygen species the imbalance of this in the cell imbalance in the cell imbalance in the cell and tissues that results in oxidative stress oxidative stress So these are some of the terms used in medical work and this oxidative stress results in diseases like R3 T's respiratory so respiratory diseases respiratory diseases and Even it can results in 8's all these things are given here when other conditions are matching So in paragraph 2 that is given there and paragraph 3 So antioxidants antioxidants in millets is able to solve all these issues and Prevent all these issues regarding this reactive oxygen species in balance in the cell and This able to resolve all these problems. So that is given in paragraph 3 because of antioxidants in millets So actually actually antioxidants in millets is able to solve all the Non-communical diseases majority of them that is given there and in paragraph 4 speaks about this LDL and HDL So LDL means though low density Lipoprotein low density lipoprotein and High density lipoprotein so low density and high density lipoprotein and what the fact says is whenever there is an increase of Low density lipoprotein chance of heart diseases are very high Whereas high density lipoprotein increases chance of heart diseases goes down. So to give a Fact that is There's directly proportional to heart disease What is directly proportional means whenever this increases low density lipoprotein increases heart diseases increases or as high density lipoprotein They call it as inversely proportion what is inversely proportion means whenever high density Lopoprotein increases chance of heart disease goes down. So that is given here and So that is given both paragraph 4 and 5 so paragraph 1 paragraph 2 3 and 4 so in paragraph 1 some millet as a food has high level of HDL and Low level of LDL. So in millet we have high level of high density lipoprotein and low level of Lipoprotein low density lipoprotein So ultimately heart disorders will be less when you consume lot of millets that's given here Now also in paragraph 2 so millets is also able to solve Millet is able to reduce Colon and breast cancers Just being researched in animals which is being proven and the reason for the thing is So they have this phenolic components Which helps to reduce the cancer cells and that is flavonoids flavonoids and Tantins etc So in paragraph 3 so brain disorders and especially So excessive fat consumption Excessive fat consumption Excessive fat consumptions in human diet Human diet can results in Brain disorders this being proven one in brain disorders brain disorders and and that comes the role of Millets millets can reduce that and So especially they can see that oxidative stress, which you already saw in the previous point Can results in Demnesia so which can also be reduced by consumption of millets. So fat consumption is one of the major reason for brain disorders and Fats in millets are very less. So that is given here and So millets have low carbohydrate carbohydrate low carbohydrate and fiber ratio fiber ratio and high antioxidants high antioxidants and This helps to reduce These two helps to reduce lifestyle diseases lifestyle diseases And millets for pregnant and lactating mother So paragraph 1 paragraph 2 paragraph 3 and paragraph 4 So in paragraph 1 it speaks about pregnancy So pregnancy it's a physiological condition physiological condition there is a greater demand for nutrients because of pregnancy. It's a greater demand for nutrients it's a greater demand for nutrients and that results in growth of increased growth of Photos. Fetus growth is entirely based on increased demand of nutrients and where millets will play a major role in it that's given here and A study clearly says that pre-natal is before childbirth and post-natal post-natal nutritional status Can be matched by millets So both this time there's a great demand for nutrition and millets can able to Provide all these things during the time and It's also given the importance of millets millets importance Which already we saw apart from this related to pregnancy note. So it's also have minimal or no use of Nimal or no use of chemical fertilizers and And They have given the examples of millets which we already saw in the previous article examples of millets that we called as major minor and pseudo millets So the millets which you already saw so this all given in paragraph 213 so in paragraph 4 the benefits of millets one is for human consumption human consumption Human consumption so millets once people cultivate human consumption and also straw for animals So in agricultural activity, it's beneficial for humans and also for animals especially for cattle's animals means cattle's and So this can be grown in all different areas that is agro climatic zones most suitable for varied agro climatic zones and paragraph 1 paragraph 2 paragraph 3 And paragraph 4 So in paragraph 1 so as millet is antioxidant antioxidant anti-casinogenic anti-casinogenic anti-inflammatory anti-inflammatory anti-viral so this helps to solve a lot of problems and There is human health issues can be solved based on this and which also helps during pregnancy So so pregnant women also have all these issues which can be solved and also Millet also have this Probiotic food Let us approve biotic food which is good for guts good for good and this is results in gram negative gram negative bacteria As millets able to produce this gram negative bacteria Which results in good for guts That is given in paragraph 1 and 2 Whereas paragraph 3 speaks about millet milk malt millet milk malt so which is based on millet jaggery and milk powder milk powder So which is very good for Pregnant women And also lactating mother so pregnant women and lactating mother this is very good and even ragi cutlets are being made ragi cutlets Which is rich in protein? Iron calcium which is very needed for pregnant mother a pregnant mother and also for lactating mother so and they also identified that Badgera a millet is most essential for Pregnant pregnant mother because it helps to increase hemoglobin levels help to increase the hemoglobin levels and also helps in providing all the essential nutrients and also millets helps to maintain BMI body mask index for pregnant women and lactating mother for pregnant and lactating pregnant women and lactating mother and also they identify another millet called kodo millet Which is rich in? Nutrition easy to digest easy to digest which is also helping pregnant pregnant women Thank you