Okay, perfect. Well, then let's begin. So as Joe mentioned, my name is Michaela Blackham, and I'm the accessibility and QA specialist at Atten Design Group. We have a lot to go over today, and I definitely want to leave time for your questions and examples. So I won't be doing my normal intro, but I want you all to know that I have about 10 years of experience as a flash touch screen developer, yes, I said flash, a web designer and a full stack developer, and I've had a very close and personal reason reasons for my passion on both physical and ADA compliance. I'm appreciative of Atten for letting me kind of run with this position and strengthen our accessibility knowledge team-wide, as well as fulfill a partnership with a blind institute of technology. So you're coming to the right person about ADA compliance today. Today, we won't be going to the intro about accessibility, but rather just have a focus on accessible content for your website. So let's talk about making your content accessible. Many people think that this is all up to the developer, and yes, developers, designers, architects, and so on, all have a major role in creating accessible websites, but a majority of the errors I tend to see on sites are actually related to the content. Your content is one of the most important aspects of the site that need to be accessible because, well, people are coming here for your content. So we need to make sure this is available and easy to read for those who may rely on assistive technology to navigate, who are blind or visually impaired, maybe color blind, or suffer from cognitive issues, mobility issues, or auditory impairments. So let's take a look at the six important areas to focus on when creating accessible content. We want to make sure that we're creating accessible visuals, and that includes images, maybe logos, complex images like graphs and charts and videos. We want to know when to use a table and how to make them accessible if we are using a table. We want to make sure that we're producing scannable content throughout the entire site. We always want to use semantic markup when creating content. We never want to override the site CSS, and we'll go into detail about that. And finally, we'll go over some ways to check your work. So let's dive right in and let's talk about creating accessible visuals. Now visuals could end up being, like I said, maybe they're images or logos in your content. It could be a focus on some complex images like infographics, charts, or maps, or even just embedding some videos. So let's talk about images. We want to make sure that we are including accurate alternative text. Alternative text provides text alternative for non-text content such as images on websites and apps. It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities. It is displayed in the place of an image in browsers if the image file just didn't load or when the user has chosen not to view images. It also provides semantic meaning and description to images which can be read by search engines or be used later to determine the content of the image from the page context alone. But as you can see here, I emphasize accurate alternative text. And that's because just because you have alternative text doesn't mean that it's actually conveying any kind of content. So if it isn't accurate, it actually isn't accessible. We also want to make sure that we're including descriptions with your images, which I highly recommend. Not only does this emphasize any point you have on the page or the reason to have an image, but it really just gives a lot more context to what's going on with your content. And just a reminder that if you are including a description for your image, then the alternative text in the description should not say the same thing. We don't want any repetition between a screen reader to hear the alternative text and then a description. This is the same thing. It's a little annoying for them. So we want to make sure that we're taking advantage of the description to really talk about what's going on in the image. So I want to just dive in a little bit more on how to make accurate alternative text. Alternative text should convey information that is equivalent to the meaning or purpose of the image within the context of the page. That's a very important piece there. It could be within the context of the page. One image could have various different forms of alternative text, depending on the reason for it being used. We also want to make sure it's distinct. So 10 or so words are less. I mean, if you do 11 or 12 words, it's not the end of the world. Just try to keep it under 10 if possible. We want to avoid words like image of or graphic of and things like that, because the screen reader announces that this is an image and this is the alternative text. So you don't have to include any of this extra verbiage going on. And we need to make sure it's never the same as the file name. They should not have a .jpeg or .png in the title. This isn't helpful at all because, again, it's not conveying the purpose of the image within the context of the page. Now, alternative text is not an SEO keyword fill. So do not just put a bunch of words in there that's going to help with SEO, because, honestly, nowadays with Lighthouse kind of weighing in your accessibility scores, they will take that to note and they won't actually put you higher on the SEO scale. By having accurate alternative text will actually help you in the long run. In any images that are just a text as image, that's going to be your alternative text. It's very simple because at that point, I'm not sure why we're having text as an image. It should probably be text on the page. So we just want to make sure that we're getting that same information across. And this is one that might seem weird, but I've seen it a lot, especially in social media posts, is to just don't use emojis in alternative text. Some of these are read really wild to a screen reader, so we want to make sure that they're pretty accurate. And all social media actually have options to include alternative text. I'm not going to dive into that portion of that too much today because I've done a past webinar on that, which we'll include in the resources. But just so you know, alternative text is just as important there as well. So let's take a look at an example. We have a great picture from our Atten Summit this past year. This is the Atten team during a presentation from the Blind Institute of Technology. Let's try and give this picture some alternative text. Do you mind filling up a poll here so we can see which one might be the best option? Do you think it's going to be a group of people listening to a presentation? Will the alternative text be BIT founder giving a presentation to Atten Design Group, man standing in front of people in the office during a presentation, or Mike S. BIT founder presenting to Atten staff? I'll give you a couple of moments to kind of figure out what you think would be the alternative text based on this image. Aha, I see someone in the chat getting sneaky over there. So technically, these are all correct because as someone mentioned in the chat it depends on the context of how it's being used in the page. So basically the alternative text just depends on why this image is on the page. What is the reason for it being there? Is it decorative? Does it serve a purpose? What is it emphasizing? For our case, this is being used to talk about the partnership with Atten and BIT and listening to Mike speak internally at Atten. So the alternative text we use in this case was, not sure why that's something moving. There we go. I'll let the screen reader do the talking on this one. Mike S. BIT founder presenting to Atten staff image. Mike S. BIT founder, you are currently on an image. So as you can see, we were able to have the screen reader actually announce what it was and we went with the Mike S. BIT founder presenting to Atten staff because we were trying to emphasize the aspect of Mike S being the person we were really talking about in this article and what he's doing to help with the partnership and everything that's going on. And remember that we want to include a more descriptive version of the image and we want to make that encouraged because you feel the alternative text may not convey the image's content. This is great for visual users but also to enhance the context of the image for those screen reader users. So here we can say that we were presenting to the Atten team but we went into a little bit more detail about diversity and inclusion during a team building exercise so that way we can give a little bit more context. And let's look at another one. What about images with text? We kind of briefly talked about this. If we're looking at this image what do we need for alternative text? We'll give you another moment to kind of choose what you think is the best option. Any good answers? It looks like most of you guys got this right so the answer is actually Drupal 9. That's exactly what this image is saying. So that's all we need to end up putting for the alternative text. I know the rest of it is kind of a pretty picture and this and that but really the only instance that we need to worry about is that this is Drupal 9. So what about working with logos? What would the alternative text for this one look like? I promise this is the last one you have to pay attention to. Would it be Atten, Atten Design Group, Atten Design Group logo or Atten logo? This is good. Everyone has different answers here and technically that's because these are all correct. I prefer exactly what it's for. So Atten Design Group, that's what this logo is. So Atten Design Group but none of these would actually be bad to encounter and absolutely give enough content of the image for what we're looking at. Just remember that sometimes images with text should just be text on the image. So let's scoot on to the next one. So let's talk about this one, complex images like infographics, maps and charts. We talk about this a lot and this is kind of a little more difficult to work with. So let's take a look. When we think of complex, we think of more than 10 words. We're not gonna be able to be very succinct when we're talking about alternative text for these images. So when we're talking about alternative text we should describe the point of the complex image. What is the reason for it being there in the first place? That way we can kind of give exactly what we're looking for. If you can't do that within 10 words or less you can honestly just point to a description. You can say that the chart is being described in the description below or in the caption or within the context of the page. So you can kind of get to go without direction there. And another thing is that obviously we can't do everything in 10 words. So we want to include descriptions for every complex image. If you have a chart or map for any kind of infographic definitely include some kind of a description. Or in that description maybe just say that you're pointing to the complex image when it's being described in the text of the page as mentioned before. So let's take a look at a map example. So right here we have obviously a map. We have add design group highlighted. We can see some of the other things going on but looking at this it looks like we're looking at add design group in downtown Denver. So in order to talk about the all texts of this I would probably say Denver area map with add design group highlighted. And then maybe after that there's a link that says directions to add design group placed after the image. And if we want to highlight the importance of the page and then include more information after. Or even we can include map described in description below. That way we know that there's more information in the fig caption that will be described there. So let's take a look at this graph. We have this pie graph of pets, all my favorite animals, dogs, cats, birds, rabbits, hamsters. So if you have any thoughts on what the alternative text should be with this just feel free to put something in the chat real quick. Otherwise I will definitely just tell you what I think is gonna happen. I'll give you two seconds. If no one's quick enough then I'll start jumping in. So we can see here that this is a graph of people's pets and it looks like most people have dogs 40%. So maybe a good example of alternative text for the actual graph could be pie chart showing a majority of people have dogs for pets. However, maybe the context of the image is to show that rabbits are making a comeback as a pet. Then your alternative text would be something like pie chart showing rabbits and birds are growing in popularity or something of that sort. So obviously whatever you're trying to convey with this graph or this chart is what you wanna put as your alternative text. And then obviously if it's still not enough if you wanna get into more detail you can absolutely include a description that goes in after so people can get more of that breakdown. So now that we talked about complex images let's talk a little bit about videos. There's a lot I could say about videos whether it's blinking and flashing or responsive or autoplay or anything of that sort. But a lot of that isn't relevant to content editors. So I think from a content editor perspective we wanna make sure that we are captioning our videos or at least sending them in the direction for what's going on there. YouTube and Vimeo have automated captions which aren't horrible but they aren't great. This is a great way to start out but it's always recommended to get these cleaned up. For instance, I'm using auto captions right now which is doing a pretty decent job considering this is a live presentation but I can guarantee there have been some moments where you may have giggled because it might be a little off or anything but it may be funny sometimes but to a user relying on these they wanna make sure that these are accurate and clean. We also wanna make sure that there are downloadable transcripts if necessary. These are super helpful where they're time stamped and it tells you exactly what's happening. It's great for students in higher education who may wanna go in and be able to highlight exactly what they need and kind of have that reference for what's going on. And then in some instances we may need audio description for blind users. These are not always necessary because it depends on the video. However, something like a recorded science experiment will need audio descriptions that are announcing exactly what's happening in the video so the user can understand that, oh, the volcano is erupting when you're putting these two elements together. And adding a text description is similar to how you would add image descriptions and they're always helpful not only for a screen reader user or someone who may be hearing impaired but just for an everyday user to understand the reason or purpose for showing the video on the page. So next, let's talk about tables. This is always a fun one. A table allows you to quickly and easily look up values that indicates some kind of connection between different data types. So if we're going in here we wanna make sure that tables are only being used for tabular data only. I see it all the time but do not use this for structure. And I know you're probably thinking like, oh, it's 2021, we're not using tables as structure. And you would be kind of silly to actually think that because I see a lot of people that put it in there and they're like, oh, let me get rid of these outlines because I like the structure of this key value pair instead when maybe a data list makes more sense for that and become a little bit easier to navigate that way. Just remember to just don't over complicate tables. Tables are not the enemy. We wanna use them when it's appropriate. However, if you find that your table is getting fairly complicated with like spans and you're doing these row spans and call spans and this and that, I'd recommend just have a developer implement these correctly with the appropriate accessible labels. And on your end we wanna make sure we're creating tables with table headers. And I'm not saying visual table headers. I wanna show you exactly how to create a table header, the TH that would be going on there or even for a table row as well. They can be in either section. We wanna include descriptions for the tables as well so that people can get an overview of exactly what it is. If the screen reader user really doesn't wanna go through the table and try to figure out how that works they can at least get a gist of what they're seeing with the description. And just remember that there is no great way to display tables on mobile devices. There's different directions. We all kind of go in different ways depending on what the content actually is. Maybe a scroll is better. Maybe we do it in one column and things of that sort. However, there is no great way. So we only wanna use tables when it's necessary. So let's look at a table here. So these are actually two of the same tables. However, one is written with actual table headers and one is just visually showing a table header. So we wanna make sure that we're actually doing this correctly. So I'll show you how to do this within Drupal. So if we're in the CK editor and we're adding a table to the page you can see I am in the WYSIWYG where you have the options for a bold or maybe list and we have the table option. So we're gonna click on the table and from there it actually brings up different properties. So this is where we can create the amount of rows or columns make it a certain height but there is a section for headers. You can see it's automatically at default none but if you were to click on that you can end up doing a first row which is the normal one that you would see like the one we just saw that has the table headers for each column or even the first column if you want it to be for each row is a different section that you really need to pay attention to or even both. And this is super important to implement so that a screen reader user can navigate the table correctly. They'll be able to do column one, table header, apples and go in and like actually read the cells if they're meant to be read. So now we talked about tables we wanna make sure we're producing scannable content. This way we can get users to get the content that they're looking for right away. So let's look at how we can do this. First we wanna focus on creating descriptive headings and labels, headings that describe the topic or purpose ensure that labels or headings are meaningful when read out of context. For example, when jumping from heading to heading within a page, people can easily get to the content they want without any issues. They know exactly what they're looking for. This also helps break up the content a little bit more and then it becomes slightly more manageable chunks to read so that they can easily scan the page. So let's take a look at this example. So here we have some basic content on the page and you'd have to kind of dive in if you're just really trying to figure out what you're looking for. You don't really know, you're looking for some kind of partnership that was mentioned. By putting in the correct descriptive headings we can see do you need to find an apartment? Yes, I do. Okay, so now we wanna learn about the app. Oh, here's the partnership I was talking about. That's what we were looking for. Now we can easily get that information rather than wasting some time or getting confused looking for everything. Another important piece here is we wanna make sure that we are not writing in all caps. Not only is this difficult for anyone to read for more than like maybe a couple words at a time like I've seen some paragraphs that are written in all texts which at that point I'm a little confused and kind of get lost but not only that but screen readers announce these letter by letter. So for instance, this heading that we're looking at is actually D-O-N apostrophe T-W-R-I-T-E, et cetera, et cetera. If you really want these to look like all caps just talk to your developer and they'll make sure that they implement some kind of CSS style within the WYSIWYG that they'll be able to make it look that way and not actually read that way. Another important one is we wanna make sure we're avoiding underlines. I see this used a lot for emphasis but really an underline is the universal sign for links. If you're seeing something underline you're automatically assuming that you can click on it. So instead we wanna be using bold or italics for emphasis instead. I like to use this example here. So we're looking at some content on a page and you can see react and hide charts is underlined. And from there I would automatically assume that that's a link. But really if we go to this next one we just had color use for the links instead. So Drupal 8 or health system data center and things of that sort. But if you're color blind you may not actually catch that color difference there.  So ideally we wanna stay away from the underlines and just reserve that underline and color change for links only. Now that we've been talking about links let's make sure we're making them descriptive. We wanna avoid vague links like learn more or click here or read more or anything of that sort. And just remember that multiple links that actually say the same thing on one page is also considered vague. A good example that I see all the time is maybe a list of events and it will have the heading and then all of a sudden a join event and then another heading and join the event. And at that point there's 10 join the events on the page. So you don't actually know what you're joining for unless you look around for context on the page. And this is all important because screen reader users can actually navigate by all the different elements. So if they're navigating by links alone they're not gonna know what event they're joining. Now that link is still very descriptive and if it's by itself and there's no other on the page it can still be descriptive so it's fine but once there's multiple of them that's where the issue comes in. You also wanna notify the user that a link isn't external and I'll show you a couple of ways to do that. We also wanna notify the user that a link is a PDF or any kind of alternative format that's not HTML. We need to make sure that logos and links or logos and images are also linked as well. So that would include correct alternative text or even just text that goes along with the image that would be linked as well. So for example, we don't wanna have to learn about the history of HTML click here. What we wanna do is just have history of HTML as the link that way it's descriptive. We know exactly where we're going at that point and for a screen reader user jumping around by links they can easily know that, okay history of HTML I know exactly what we're going to learn when I click on this link. And so let's have an example here where we have a download annual report. You would assume download means a PDF of some sort but you really don't know because it's gonna open at a new window or you're actually downloading what's going on. So what you wanna do is you need to include PDF in the actual link text itself. And we usually do it with the parentheses here or if we're using the image for it, the icon, the PDF icon will include the alternative text for that within the link so that it's still being read correctly as PDF. This would go for an XML document or even a Google sheet if you're linking to a different form like I said, that's not HTML, it should be in the link. And that's great for any user. I don't wanna automatically download something if I didn't know I was gonna download a PDF or screen reader users have a very difficult time interacting with PDF. So you wanna just warn the user that they might need some help to actually explore that content. And when we're thinking about external links we see this icon a lot and that's really helpful but as you can see here this is an example of visually it still is helpful but for screen reader user it may not be that helpful because you can see the external link isn't a part of the link, it texts itself. So we wanna make sure it's included. If you don't have the ability to add that icon you can also just include external link within the text as well so that people can get that information. I didn't wanna show a great example of what we could do instead of using all of those learn more or somewhat descriptive links. So here's the Nike website and you can see we have shop, shop, shop. Shop alone would probably be fairly descriptive if it's only on one page. However, we don't know what we're shopping for cause we have new basics for school uniforms, new backpacks and more new must have kicks. So all they really had to do was just make that heading that they have there the link itself where it could say new basics for school uniform is the link or even shop new basics for school uniforms shop new must have kicks and so on. It's something that we're seeing a lot more of getting rid of those learn more links and just having those headings be the links itself. And just remember when creating content I know we just wanna keep it kind like everything clear and concise. I know sometimes we wanna include everything and go a little overboard but clear and concise and keeping it simple is just always the way to go. And along with producing scannable content come semantic markup. These two go hand in hand when creating semantic scannable content not only does this make it scannable for you who may be a visual user but we also need to be making it scannable for those who require screen readers or other assistive technology to navigate the site. And I know you're probably thinking like semantic markup but I'm not a developer. I know very little HTML. How can I actually do this? But when I'm talking about semantic markup today I'm actually referring to WYSIWYG semantics. For instance, if you're using HTML list or if you're talking about a list it needs to be an HTML list. If you're saying a list of events a lot of times those aren't actually in lists they're in separate divs. When you're saying list of events or a list of news those should be in lists. You wanna make sure using block quotes for all quotes because it should give the option for a citation. So screen reader user can navigate that correctly. Again, we wanna use a table for all tabular data. We never wanna bold paragraphs to make them look like headings. And we wanna make sure we're following the correct heading structure. So let's dive in and see kind of what's going on there. So as I mentioned before screen readers have the ability to navigate by elements on the page. And that's more than just links. We're going with semantic markup because we wanna jump from link to link from heading one to then a heading two then a heading three because of three comes after two because that's just how it is. And numbers and that's also how it is in headings. It's helping to navigate everything that's going on and separate it up into correct content. So another piece is like maybe you have a bunch of list items that they wanna go through and kind of gives the context that they're actually looking for. So here's an example of the WYSIWYG. So let's take a look and here's all you have to do in order to make your list. You probably use that one a lot. So I don't have to go into too much detail but if you're making a list make sure you're using those items to actually create that list. Same with a block quote. That's all you have to do is make sure you're highlighting that content and make sure you're attaching it to the block quote. We already talked about a table so that's good. And then here's one of the bigger items is the heading styles. So I see it all the time where people want to just use a heading three instead of a heading two because it's smaller and it looks better but heading levels are not meant to be the visual aspect. They are meant for structure only. If you're looking for heading threes on the page because you're already in the section of a heading two that you're like this is the section I wanna be in now I wanna dive in even further. We need to make sure the screen reader user is able to do that. So I actually like to create my content within Google Sheets or Google Docs here because it's actually great because if you have the outline open this is how a screen reader will navigate. You can see here heading two is kind of a sub piece of heading one heading three is a sub piece of heading two it's following that correct order that you're expecting. What becomes an issue is when you start throwing things off. So we wanted that heading four to actually be our heading two because we like the visual aspect of it and we kind of were playing around with the design but at that point you're heading two is now a heading four and you're not kind of following the direction you're looking for and now it's really confusing you can't jump to the title that you're looking for. And then we never wanna bold paragraphs like I mentioned because you can see on the left hand side you can't even jump around to those pieces. So if you can't do that in the outline you're not gonna be able to do that with a screen reader as well. Next we wanna make sure we're not overwriting the sites CSS and I just want you to remember that just because you can just because you know a little bit of CSS doesn't mean you should be doing it. If you're overriding the styles just on one page then you're probably trying to do this in other areas of your site. So wouldn't it just be easier if this was a style option in your WYSIWYG? And while you shouldn't be overriding them for a few different reasons but mostly don't make the designers and the developers mad for design probably already completed an accessibility review for all the styles. And by changing some of those styles on your end this could break design patterns and consistency or even possible branding. And then for developers, developers create patterns that work for all screens and all layouts. The biggest thing is maybe you're adding an important tag to something because you wanna override it and messing with these patterns and rules can override any important elements especially responsive ones. And being responsive is one of the first rules for being accessible. So you may be thinking like what if the H2 I need to use is just too big and I don't wanna use this so I wanna use an H3 or an H4? Well, contact your designer or developer to add another option into your styles. Or what if I want to emphasize a new section and create this new style so there's like background color and this and that contact your designer and developer to add another option into your styles. Or basically insert any excuse you may have here because I'm just gonna tell you to contact your designer or your developer to add another option into your styles. And finally, the last piece of the puzzle is we need to make sure we're checking our work. So designers have to check their work with various plugins and like Figma or Sketch and then developers need to check it using automated tools and manual testing and content editors have the same thing you should be checking your work. One way to do this is to leverage Drupal modules and plugins if you're using Drupal. There are two modules in particular I would absolutely recommend including on your site. Both have discussions of being added in Drupal 9 core in future updates but for now these are both available and can be added pretty easily with little setup on your site. First is the CK Editor Accessibility Checker. I did include a link for more information here and I believe we will be adding that in the chat so you can get some information regarding that. And this is also great because you can see here it's a Drupal project but you can see it also goes straight to a CKEditor.com and that's because it can be used anywhere the CKEditor is being used. So this is WordPress or any other CMS that might be using CKEditor at that time. What it does is it adds a button to your WYSIWYG so that it will automatically check everything similar to how a spell check might work. And it is actually very accurate it's pulling in the latest WCAG standard so that you know that it's going to be updated and move along pretty well. So let's take a look at this in action real quick. So here's an example of the CKEditor Accessibility Checker. You can see here we just have some normal content on the page. We have a table, some headings, some links, some lists and images. So what we're going to do is we're first going to take this little button on the page here we're going to click that. And then from there it actually goes through and gives us all the answers that we may need. So you can see here we have one of seven errors it gives us what the issue is how to resolve it and like actually being able to resolve it here. You can ignore or you can actually fix it. You can then go through and kind of click these arrows to kind of see what's going on here whether it's a warning what the suggestion is or maybe you go through here and it tells you you have to actually use a list and so on. So you can keep going through until you resolve all the issues and then that way you can publish without any worries. And like I said, I like this one because it is very accurate. However, the downfall is that it's behind a button so not everyone's actually going to click that. So another good option is actually adding editorially. I'm probably not even saying that correctly. I honestly don't know how to say it without kind of like second guessing myself every time but that's how I'm going to say it. It is a Drupal only project. So unfortunately it seems like if you have WordPress or something of that sort it may not be super helpful but it is nice because it automatically checks your content and it does more than just that one section of text there. It will get at various aspects on your site whether it's a heading or maybe it's just like a plain text area that then gets put in a different way and then that way developers may have to check it and fix it on that point. The only downfall that I'm finding is that it's not quite as accurate as the accessibility checker that we just showed you. It seems to be a little more customizable so that you can get into the JavaScript or whatever's making those rules and kind of update what you think might be best. It does have a great baseline though. So I definitely recommend using it. So let's take a look at this in action. Now let's take a look at editorially in real life here. So you can see here we're using Ames Community College there so bravefully let us take a look at it as we've been using this on their site. So you can see here if we look quickly you can see we're getting some highlights here. Little question mark there, question mark. Ooh, we got a red outline and little notification there. And as you can see in this bottom right hand corner we have this little thing that you can turn on and off. So this is actually the editorially. So I haven't even saved this. This is in preview mode. So you can see we still have back to content editing. So we're kind of looking at this before we even publish and you have to go through this step before it actually publishes. So what you can do is you can end up showing the tag. So you can see kind of like where we're out of the page and see we went from a one to a four to a three to a two. It kind of gives you that great idea that you can skip to some other content there. So let's get rid of that. Then you can see we can get some more information on what we're using this for, kind of skip to each one and minimize what we're working with. But let's see how this is working. So you can see I'm hovering over what's going on here and it's taught me that my heading jumped from a level one to a four. So really this should probably be a heading level two because this is probably a heading number one. If we scroll down here, we can see another one and possible heading because that seems to be just a paragraph that's folded. This is another one. I mean, this is the same content from before. So you should be able to see that this is the list item of what's going on and oh man, that should actually be a real list and not just look like one. Then we can see that there's an issue within the table header as well. So you can kind of see that this is nice check before you even publish and that's why it's nice because it's not really hidden behind any kind of button, it's done right away. And like I mentioned, they're both great options to work with. This one's nice because you don't have to worry about clicking on a button. And yes, the other one only works with like body texts and so on and so on. But if your developers are creating the site that you need and have it all set up in the templates, you should only have to worry about checking your body texts in general. So I think having even a combination of the two of these, you should be able to get every little bit of information you may need in order to create accessible content. So I definitely just recommend asking your developers to include either of these modules on your site and should set you up for success. But let's say you don't have Drupal or maybe you don't have the ability to add those plugins. There are plenty of tools out there for automated testing. I like to focus on the free ones, especially for those who may be new to accessibility because we want to make sure that you're getting the access that you need. So I always recommend wave.webame.org. And this is a great one because again, it's free. It's extremely accurate and well-respected. It's been around for quite some time and it seems pretty like laid back and very easy to work with and it may not be the most modern looking thing but it's extremely accurate and easy to use. And a lot of the content is done in a way that's human readable and not necessarily some of the criteria which can kind of get a little wonky there. The only issue with these automated tools is that you need to ignore other errors or warnings outside of the content alone. So if there's other things going on in your site you may get a little distracted by those but I think it is still a good thing to use if that's something you're looking for. So here's an example. We're just on the Apple website. You can see all it does is you would run it, you put it in either in the webpage or you can have an extension on your Chrome and I think Firefox has it as well. And it gives you a list of all the errors, your contrast errors, some alerts that you could take a look for and you can look at structure and even change contrast from there. And it gives you the ability to jump and look directly into the code itself or maybe you're just gonna have, click on something on the left and it will highlight on the right where it is or you wanna highlight, click on the right and then it will give you more information regarding that. So it is an easy one to use and I recommend anyone can actually use that very easily. The other option is Google Lighthouse. And again, I recommend this one because it's free. If you're using Chrome, you have the ability to use it. It's already there. And one thing that we're seeing more and more is that they're weighing these scores that you get on your site in Google searches. So if you're having 100% on your accessibility, then you're good to go. And it also does things regarding like performance and SEO and things of that sort as well. So it is pretty helpful. And again, you need to ignore the errors or warnings outside of the content unfortunately. I do think Wave is a little more accurate but Google Lighthouse is available and everyone should be able to take advantage of it. So you can see here again, we're on the Apple website and I ran the Lighthouse, which you might be able to see, it might be a little small, so I do apologize. But you can see it's highlighted in the top of the bar there next to components and security. And you can see we have an 89% for accessibility score. It goes into what exactly is an issue. You can find what's relevant to you and expand that to get more information. You can also see that automated testing is not everything. We need to obviously always manually check things as well even alternative text needs to be manually checked to make sure it's accurate. And then you'll see pass audits and not applicable but it is pretty helpful. And again, everyone has access to it so you can definitely use it. And obviously we wanna review content on desktop, tablet and mobile devices. This is especially important with layout builder and layout paragraphs. Now that you have full control over your content and your layouts, you wanna check that your layout is properly working on all screens. You're creating content on your desktop for desktop but many people will be looking at this from their phone. Review this on your desktop, then tablet and mobile. And you don't have to be on actual devices just making your browser smaller and bigger and kind of moving with that flow can be enough to exactly see like how this is moving, how that content works and what it looks like on various screens. And this is important for three main reasons because you need to make sure that your site is responsive. As I mentioned before, if your site is not responsive then it does not pass WCAG guidelines. Make sure everything looks as it should and doesn't look broken. So there's no like text going off the screen you're not doing any horizontal scrolling or anything like that. Your content should still flow in logical order because we go left to right, up and down. So we need to make sure that's happening on desktop. We need to make sure it also makes sense on mobile. When things start to stack, does it actually make sense? We following a logical order, do we now have like four images and then all the text for those images is below it and there's no way to associate it with it. So you just have to make sure that everything is kind of going in the order that you're expecting. And finally, just the last thing you really need to test is just zoom in on your website to 200% and make sure everything still works. The only time I really see issues with this regarding content is maybe a long link that's on the page because it's not a descriptive link and it's just the URL posted. That's gonna cause some issues because there's no natural breaking point. So by doing the 200% zoom, you'll find if there are some headings that might be too long or anything of that sort that needs to be fixed. And overall, just remember that with great power comes great responsibility. This is something that's always been super relevant but it definitely emphasized more with all the amazing work with layout builder and layout paragraphs. This is great for giving content editors true control over the content which you didn't really have before. So have fun with your layouts and your content but make sure to keep things clear and concise. Keep it easily readable. Follow great content editor rules and don't forget to check your work. And if you follow all of these, you should be creating accessible content in no time. So don't forget, this is being recorded and will be available on YouTube. And if you ever need it as a reference, it will be there for you and we'll post the slides later on for you as well. And just remember if you have any questions that we didn't get to today even after this question session or would like any follow-ups or even more customized trainings for your team, please feel free to reach out to work at atton.io for anything you may need.


Earlier, we talked about expressions of the form variable equal variable plus one, being very common. In general, updating variables is quite common in Java programs. Presume that the variables in these examples have been declared elsewhere in the program. Whenever you have this pattern, where a variable is updated by an arithmetic operation, you can use an augmented assignment operator. These expressions turn into these simpler expressions. Age plus and becomes one is the same as age equals age plus one. Limit minus and becomes five is the same as limit equals limit minus five and so on. If you don't have a simple update, then you can't use the augmented assignment. There's no way to use augmented assignment to simplify this expression, sorry. Let's get back to adding one and subtracting one, also called incrementing and decrementing, which are among the most common operations that programs perform. There's a special shortcut for this, plus plus for increment and minus minus for decrement. This updates the variable without needing an equal sign. The variable is changed in place. You can also put the operator before the variable name as shown here. Why two versions and what's the difference? When the operators are all by themselves, as in this example, there's really no difference. But when you put them in an expression with other operations, there's a big difference. Here the plus plus follows the variable and it's called a post increment. This is what things look like after we initialize quantity in the first line. Let's see what happens when Java encounters the second statement. It accesses the value of quantity, which is ten. Then the plus plus takes effect and the variable quantity becomes eleven. But our scratch paper still says ten. When we do the multiplication, we get a result of fifty and assign that result to the variable total. Now let's try it with the plus plus before the variable name, which is called a pre-increment. At the end of the first statement, quantity is still ten. And at the beginning of the second statement, we pull out a piece of scratch paper for the right hand side of the equal sign. Because the plus plus comes before the variable name, the increment happens before we access the value of the variable. Now when we look at quantity, we get eleven and multiply that by five, getting fifty five, which goes into our total. I don't recommend writing this sort of thing. I don't think it adds to clarity. However, you will see this in programs that other people write and you need to know how to interpret it correctly. For example, how would you solve this problem? If you ever see an expression like this, here's a technique that will be very useful for you. Find everything with a pre-operator, the plus plus or minus minus preceding the variable name, and write it out completely before the statement in question. Now find everything with a post-operator, the plus plus or minus minus following the variable name, and write it out after the statement. Now go through the statements in order. Here's our situation after the first two statements. We add one to y, then we do the multiplication, and then we subtract one from x. Again, I would recommend writing this code as three statements rather than the original combination, which I think is much harder to understand. One final word of warning. What happens if you use the same variable with both pre- and post-operators on the right hand side of an equal sign? Answer? Don't. Just don't. Not only is it hard to understand, but in other programming languages the result could be completely undefined. In summary, most of the time you will use the increment and decrement operators all by themselves. If you use them in expressions with other operators, you have to be careful to choose whether to put the operator before or after the variable, depending on the effect you want. In the interest of code clarity, you might want to avoid this sort of expression altogether and write things out completely.


And the presidential candidate of the People's Democratic Party Atikua Buberke has promised to restore peace in Sokoto and other states experiencing insecurity in the country. He also promised to walk out ways of putting an end to the recurring strikes by the academic staff union of investors. Buberke made a promise at the PDP presidential campaign rally in Sokoto on Tuesday. Make sure the road construction that has been awarded from here to Kusau to Funtua, Tanzania, this road is constructed and implemented. We also promised to reopen our borders with our Indonesian neighbors. These are some of the three promises I have made to the people of Sokoto and to the people of Kusau.


Well it's day three here in Minibash. We've come to one of the only tangy bowling club for breakfast. It's been a great start of the day and at the moment it's 12 hours behind in another country. There's a game of rugby going on and that's what we're doing at the moment concentrating on that. So it's all a bit much. I might have to just come back to me. Oh okay, see I'm busy at the moment. Well it's half time here in the All Blacks game. Nerves are a little bit on edge because we are playing the French. Well we're here on Waiheke. Lyndon what are we doing? Well after this I don't know but I know there's a fun stop somewhere. Yeah I heard the fun stop might be the other end of the island and I don't know which end of the island we're at so... Well I guess we'll just go round it and round it and see if we can find it. And then we'll get a ferry and we'll go home.  But until then we've got a rugby game. We're on a halfway through it and we're not moving.


Hello, welcome to the back garden. My name's Imogen and one of the play workers. We teamed up with opensourcelotech.org and over the past two months we have designed and built a site-specific solar hot water system. So this is the hot water panel, 20 times cheaper than a proper system. It'll do ballpark about the same order of hot water. The hottest I've had any part of this um which is in Guatemala at altitude during winter was 80 degrees. You can make it yourself in less than a day just with nuts and bolts and it's plastic and that's it. So we've got the steel pole cut to length with drilled holes in each end just like 12 mil like half the width in and then we're just sort of like top and tailing it so that the long lengths overlap each other so like at the corner we're going to drill a hole straight through, bolt it straight through, just go around through that through the four corners and then put the uh the other lengths in between and drill with the drill until it's all looked down. Sorry with the crossing what are you doing? So you can see all of this way. Gotcha. Hey Roshi! And then that's basically the panel itself done minus the spray paint and the plastic. The panel is just made of two sheets of galvanized steel which are bolted together just with this like lattice of nuts and bolts through the middle here and then the edges have a bit of weather stripping in between as the gasket and then just like this 20 mil steel tube on either side of the gal. So the water goes in between just balloons those two sheets of gal out very slightly and that creates like a lattice of space for the water to come through and it gets hotter as it goes and it rises as it goes and then it comes out through the back here. Day two we are building a box for the tank which holds the water. The bottom of the barrel needs to be above the top of the panel for the work what the circulate itself as it as it heats. So we just need a box to sort of keep everything contained and locked to the roof of the shipping container so that it doesn't all blow away or fall over and kill some children which I've been advised not to do. So basically it's pretty simple we're just done screwing some bits of wood together. Got the box for the barrel in place that's screwed down but since it's a tall thing in Scotland it's definitely going to blow over we therefore have these bits of wood here which we're now going to attach ropes from each of these four corners up to here. These members here are bolted down through the lip of the container so it's all stapled on the base. This is the panel which we're now going to firmly attach here on about a 60 degree angle so it's sort of aimed for like the low winter sun more than the high summer sun that will get both and that's going to be just planted in front here. We're also how are people are going to put then put two rows of solar photovoltaic panels here for electricity. Hi I'm Gordon I'm up and install a solar PV system in the garden today and we need the solar PV system so that we can have lights and power across the side so that the kids can play and people can see what they're doing because up here in Glasgow it gets pretty dark in the winter and the night's so long. Hey Daniel what we're doing? Today we're going to be plumbing the panel to the tank and the mains to the tank.  We're going to cover it with clear plastic and then the system is done. So basically we just plumbed in the heat exchanger here so I've just got basic compression fittings going through the wall and then using that to clamp onto the wall. So the water is going to come from the tap through this hose this will be up there into the copper go around the copper come out of the copper this is going to be full of hot water especially at the top of the tank because the hot water will rise up. That's the inlet the hot inlet from the panel that's the cooler outlet to the panel so the cooler water comes out here goes for the panel gets hot comes into here. The important thing for these pipes is that for reasons of the convection loop you don't want any sort of like any of that you want it to be uphill like you want it to be like a steady if that had some like high and low points then the heat would get trapped in a high point basically and also air could get trapped there as well and if an air bubble trap gets trapped there it will break the whole connection basically. So this is the insulation on the back you can use anything here you can use more of this polyethylene foam wraps you could use like polystyrene or something significant but I find just like there's just two layers of like thin cardboard that we just keep lying around. So the air temperature is eight degrees and the water temperature is 17.5 but this is with this level of sunshine which is pretty much none like this is a Scottish November day it's not had any sun for a couple of days this would probably represent about a worst case scenario. Like on a sunny day here the other day it was about 35 degrees the water which means that the kids who come to our sessions will be able to wash their hands before during and after sessions and help them to us to adapt to COVID-19 and the challenges that it's bringing to this community. So the way that this is used is we have this little tap down here which is like this mains cold water that has a hose which comes down is buried comes under the ground and up to here runs along here and then goes up into the tank and then in the tank is a coil of copper tube which this just connects the hose connects on to and then it comes out the other side and it goes down to the sink. The copper tube is sitting in the hottest water at the top of the cylinder and so it gets hot because copper is a conductor so it basically sucks the heat some of the heat out of that hot water the cold water becomes hot then goes down to the sink and then that's your hot tap. We've got a thermostatic valve at the sink which basically mixes that hot water coming from here and the cold water coming from the hose together and though you set the temperature that you want and then it like mixes different amounts of hot and cold temperature water depending on their temperature and so people can wash their hands for you know which is obviously important at the moment for health reasons and um sanitary my sanitary


That's a significantly huge difference. Business owners who don't use this fact to their advantage will remain behind the curve and lose out to their competitors. Still not convinced that you should be aligning your marketing to keep up with the video marketing and storytelling trends? Here are a few suggestions to help you see why you need to use videos. Of all Internet users in the United States, 85% of them watch videos online monthly. 88% of companies that use video marketing on social media are satisfied with their ROI. 86% of businesses use video marketing as a tool in their marketing arsenal. Watching a video about a product or service increases the likelihood of consumer purchasing by 77%. How can we help you? We will create compelling, engaging, fun videos to deliver your marketing message. Stand out from your competition online by using video to increase your visibility. Contact us today.


I'll go back to the container OS part once more because I've talked to CentOS folks and Fedora folks also and since Fedora and CentOS is kind of upstream to REL. Right. So what is who is going to be upstream for Red Hat Core OS? So the original container Linux right before we made any integration that community that code base will still remain open source there are still non-core OS maintainers that we're working on that so we don't want to disrupt that community we'll still see core OS engineers you know keeping that going because there will be innovation that continues to happen around immutable right. We'll take those you know we'll work in that community we'll take those learnings we'll put those into Red Hat Core OS. The Red Hat Core OS and so now we based off the Fedora kernel we'll see you know work you know kind of core OS work going on in that community as well and bringing those learnings overall to the Fedora community right. So you know over time you know we always talk about the importance of the operating system but there as we get into more fast-moving environments like you know people want better ways to operate them you know they want to deal with them it's mutable they want to deal with updates and so forth so I think we're going to see a lot of cross learning between these couple of communities just there's learning in the immutable community that it's going to get exposed to the Fedora community that we think is going to be really good we're you know sort of new ideas refreshing of ideas. But this doesn't look very structured the way Red Hat has things are still like you know CentOS is there Fedora is there so. Well there's a very structured way between you know Fedora is sort of the. I mean Fedora has sponsors communities fully community driven but it's very sponsored and funded by Red Hat. So what will happen to the Kuru is the continued Linux community because right now you're saying a lot of non-Kuru developers are there. Yeah so we'll still support that community and endorse that just like we have Fedora you know if it continues to grow that's great and we will continue to support and endorse the Fedora one as well so you know for us this is an opportunity there's a realization that managing Linux host is evolving the entire market's not going to go in one direction or the other just lots of things so we want to make sure that fundamentally we know how to work in open source communities we have no plans to change that. We we still believe that the operating system is very important it's evolving and changing so we want to make sure we're actively involved with that. And we've learned through a number of acquisitions and some good and some bad like you don't want to do harm to an existing community. And so you know same way that we're not going to leave any existing tech tonic yeah we're not going to leave we're not leaving any existing tech tonic customer behind right we're not going to leave a community behind either.


So after a pretty underwhelming 2022, the New Orleans Saints are looking to bounce back in 2023. The win total set at nine and a half. Let's see if they can meet expectations. So the first five games of the season I think starts off a little rocky for New Orleans. You guys go two and three in that first five game stretch with the two dubs coming against Tennessee and Tampa Bay. Then I think New Orleans starts to get the ball roll a little bit going four and one in the next five games with that one loss coming to Minnesota. Fresh off the bi-week headed to Atlanta, I think New Orleans does drop that game in mistake spin stadium. After that you get three straight games in the Superdome against the Lions, the Panthers, and the Giants. And I actually think the Saints win all three of those games. I think the Saints finish off a little rocky kind of how they started the season with two L's back to back coming against LA and Tampa Bay, but they cap it off with a dub against Atlanta. So that leaves New Orleans at 10 and 7, which should be good enough for the playoffs and that's just good enough for them to go over their win total. Hoot at.


Good afternoon. I am destiny mama. This is news brief arising from the withdrawal of subsidy on premium Moto spirit PMS by the federal government and the resultant increase in the price of the commodity But I'm during Libro Congress and LC and the trade union Congress to you see issue the strike notice Which had elapsed and they were poised to in back on a strike bill to commence on Tuesday told of October 2023 Consequently a meeting was called by the federal government to avert the strike and after much discussion 15-point agreement were reached Part of the agreement or that the federal government grants a wage award of 35,000 Naira only to all federal government workers beginning from the month of September pending when a new national minimum wage is expected to have been signed into law The second being that a minimum wage committee shall be inaugurated within one month from the date of these agreements and Tatine order agendas very pains-taking and meticulous deliberations But what is important here is Nigeria and all of us are committed To ensuring that this country Remains united Peaceful and prosperous and that is the spirit behind every age of this negotiation We're grateful to say that at this point We finally have an agreement To be jointly signed by the Federal Congress in a general level Congress and the federal government The details contained in the agreements Will be presented by the Honorable Minister of Labor and Employment The NLC and the TUC accept to suspend for 30 days The plan in Devonet Nation 1 strike scheduled to begin Tuesday the 3rd of October 2023 2015 this memorandum shall be filed with a relevant court of competent jurisdiction Within one week as concerned judgment by the federal government After 30 days if these issues are not implemented will revisit All the issues the ones that have that timeline Because if they are not implemented within that period issues but fate it is something that affects everybody in some private sector companies They are taking some measures. I can remember one or two banks that have a poll implemented about 100% Which reviewed so it's not something that you know We are saying what it will affect them or not it will You know and then it's a measure that is in that cushioning the effect Of this harsh policy, you know harsh policy in the sense that it was not anticipated And it appeared at the fabric You know of the source of existence of Nigerians So that is it is a stark reality that is facing all of us So how to face it? So as Contained in the sign communicate, which I believe You have a copy any moment from now And as a test set to as well by the president of NLC We have a sign a sign agreement And we have signed this agreement with the belief that government will act in utmost good faith We sign this agreement with the belief that every single item in this agreement are inclementable Every single item in this agreement. We are extremely serious about them and we Wish to also reiterate that we are expecting a hundred percent implementation and not a 99% in any way Hello, hope you enjoyed the news Please do subscribe to our youtube channel and don't forget to hit the notification button So you get notified about fresh news updates


Of course I can draw Hercules or Heracles or one of the many other names we have to talk about Hercules some day.


Hello and welcome to the session. In this session we are going to discuss the following question and the question says that All varieties of pan pizzas cost 8 dollars. Maria organizes a pizza party at her home and orders x tomato pizzas, y onion pizzas and z capsicum pizzas. Find the cost of the pizzas if she orders for 2 tomato pizzas, 3 onion pizzas and 4 capsicum pizzas. In this question, cost of all varieties of pan pizzas is given as 8 dollars. Maria organizes a pizza party at her home and she orders for 2 tomato pizzas, 3 onion pizzas and 4 capsicum pizzas. And we have to find the total cost of all these pizzas. Let us now go into the solution. We are given that cost of each pizza is equal to 8 dollars. And it is given that Maria orders x tomato pizzas, y onion pizzas and z capsicum pizzas. Now, number of tomato pizzas ordered is given as x, number of onion pizzas ordered is given as y and number of capsicum pizzas ordered is given as z. And cost of each pizza is given as 8 dollars. Therefore cost of tomato pizza will be equal to 8 x x that is 8 x dollars. Similarly cost of onion pizza will be equal to 8 x y that is 8 y dollars. And cost of capsicum pizza will be equal to 8 x z that is 8 z dollars. Hence total cost is equal to 8 x plus 8 y plus 8 z dollars. This can also be written as 8 x plus y plus z dollars by using distributive property. We can find this expression using another method as the cost of all types of pizzas is the same. Therefore total cost will be equal to 8 dollars into total number of pizzas that is x plus y plus z that is number of tomato pizzas plus number of onion pizzas plus number of capsicum pizzas. And therefore we get the total cost as 8 into x plus y plus z dollars. Now if the number of tomato pizzas is given as 2, onion pizzas is given as 3 and capsicum pizzas is given as 4. And we know that the total cost is given by the expression that is 8 into x plus y plus z. Therefore the total cost would be equal to 8 into x plus y plus z dollars. And here the value of x is given as 2, the value of y is 3 and z is equal to 4. So we get the total cost as 8 into 2 plus 3 plus 4 dollars that is 8 into 9 dollars which is equal to 72 dollars. Therefore total cost is given by 72 dollars which is the required answer. This completes our session. Hope you enjoyed this session.


Hello guys in the last video we have seen how to perform API call with the help of sttv package and provider So in this video, I'm going to cover One question asked in my video. So it would be nice if you would add search bar So although I have replied with my previous video where I have added a search bar in Firebase cloud operations So this time I'm going to perform the same thing with the help of this provider packet So we will update this app and add the search bar into this in order to search data based on the entered information So let's go here and we need one more variable. Let's say search pets so this would be also of pets type and We will just keep it like this Initially it would be empty So what we have to do whenever user will type something So for that we just need to add one Text field over here in this body part So let's wrap this List view into the column widget so that I can add one more widget over here. That would be my text field So this text field would have some let's say decoration That is input Decoration and inside this decoration. We need hint that would be let's say search and What else we need we can add some border as well so out wine input border and We can just say border radius Border radius dot Let's go with this circle that and give it let's say time radius that's fine. So save this So once you save this you are getting some error over here. So here this view need to be restricted So we don't have any length of this view. So what we can do we can just expand our builder list view with widget that is Expanded Expanded so save this just reload this Okay, so we got a search bar. Let me add a little padding so that it should look nice and What else we need so if you want you can just add more decoration. Let's say go here and we would add one suffix icon that would be icon and I can start search That's add const Save this So it would look better Okay, so here we need to get this data So whenever user will type something you need to get it So in order to fetch that data entered by user, we need to use one property here that is on Changed so this is gonna accept one function So let's do what use this one and here you will be getting whatever value entered by the user so this value I need to search with That pets do we have that particular? Let's say username for this example We have used username. I think what title we have used username. So we will search based on the username so let's go here and Now here we need to define the functionality So for that we just move to the logic part that is our provider and here. Let's create one function So that would be search Which one I accept one username Okay Fine. So this will do what what to do is Let's go here and simply create a provider. We can just copy it from Here You can either create a new one or you can keep the same reference. So let's keep it context and listen pulse and We just use provider Dot such and You need to pass this username that is ready Okay, so that's fine. So let's go back here and Here what we need to do. So we need to do some repetitive work So in order to avoid it what I do, I just do create one string here. That is that's a Search Text so initially the search text is empty So what I do, I just create one more function over here that would be used that is up date data Let's go back and check what we are doing here. So we are just keeping the data. Okay, so this would be called once and All done We fine So we just go here and simply check if the search Text dot is empty if nothing is searched by user then we simply need to do searched pets dot data dot add and We can say add all and we can add these pets over here. Is it? Okay, so we need to add pets dot data so those data is a list of elements Okay, so if user has searched nothing so we can simply display Data from the regional pets That is this one which is called Once okay, otherwise if user has searched something then you can do what? You can simply say filter on this values We can say simply pets Dot Data dot So we can use a veer This is gonna filter the values so we are so this element gonna give you one data part out of this So we can say what we are the element dot Username So here you can just convert it into lowercase so that we don't search for case specific Now here you can either use starts with Or you can use contains so contains gonna search from any of the word for example if I write e so this Linea contain e this Erwin contain e this Clementine contains e so all that contains e would be coming over there So it's better to use that starts with for example if I starts with e So it should show only this e portion this one second one not all that contains e So for that we just need to use starts with and here you have to use your search text And once you have searched everything simply just convert it into list So once it is converted into list we can add this list into your search pets So search pets dot add so we have multiple so let's use Dot data dot add all Because this data is a list and Done so once this is done. You need to do what you just need to notify the listeners Let's use notify listeners and we can just copy this and come here So once user gonna type something we will get it over here and we will update it into this such text is equal to whatever username and Once it is done. We just need to do what this update data Okay, so this will update data and according to that source text or not search So it will update the data. So just save this portion Go back here and If we are missing anything so let's go to home page and Here what we need to do So here we have this list view. So what we can do we can just Instead of using this pet data, we can simply say pets not pets we will say so we need to get data here So we are getting it from this pets. So we don't need it anymore and We just use this provider and we can say provider dot Searched pets dot data We just go here and replace all these things. So just save this and Reload it so we have one error like a jacket. So here we are just Moving this save this. So let's quickly reload this Okay, so let's go back to this body and cross check This is the provider and we are doing Search value at spine and then With this provider we are doing this Okay, okay, okay So So what we are missing we just need to just cut this List view And we can discover it with the consumer so that we can use it So let's use consumer here And for this builder we can just pass this function and pass this And so Now here instead of using this Where it is This value we can use Okay, so here actually we need to define pets provider because this Gonna give us provider reference. So with this pets we can simply use Like this Okay, so This was just one mistake So go here and instead of using this provider we can use this Pets which is giving us to the reference of This provider and simply say My Or you can say pets provider Just for understanding Just updating it Updating And All that So let's try to restart it and cross check So are we missing something inside the provider? So first time it is loading this Go here Update data So we admit this That's Okay And we are Missing one thing here So it might be adding it again and again. Let's just clear this Search text dot Data dot Here And So if nothing results just add the original data Otherwise based on your search Even as data into this That's fine That's Okay, okay, okay So I think everything is fine So we are missing one thing here So here we need to just update the data because we are not updating this data So let's use this update data over here And we don't need this notify listener as it is already used over here under this Update data Okay, so that's all I think Let's restart it and it should work What's the problem here? Unuse import So let's delete this line and meanwhile You can see your data is loaded And your data is loaded Let's try to search with something Let's say E And if I go for P You got eddy If I go back Back And if I go for L we have only one So do we have something else? Let's see for C So we have three Let's use L Then we would add two Then We need to write it If you want to close check So let's go for E And E And E I And A So for A we got this For E we got this So that's all This is how we can use the search bar So that is all for this video If you have any doubt To comment in the comment section Otherwise Like, share and subscribe Thank you


Alright, what's up internet? Today we're going to be reviewing the ASUS VG258Q and it has all the bells and whistles of a usual gaming monitor. It's 144 Hertz, it's 24.5 inches wide screen, one millisecond response time, precinct, g-sync, and to be honest, ASUS just lent us this monitor to display it in the shop. They were like, okay we're going to give you this monitor, you can use it in the shop, you know maybe customers will ask about it. And so that's what we did with this monitor. We had it in the shop, this was for our, it was the monitor for our test bed and you know it worked out well in that function but then COVID hit and you know the shop was closed for around two months, three months, and I was at home and I was gaming and then I talked to myself, you know there's a gaming monitor at the shop that's not being used. So I stole it. I stole this ASUS monitor from the shop and I brought it back home and I used it for the entire lockdown period. And I'm not a professional reviewer, I don't have a bajillion hours on a million different kinds of monitors, I don't follow the latest specs and things like that but what I can promise you is that I run hardware sugar, we see a lot of different tech going in and out of the shop and I use this monitor extensively. Basically the entire lockdown which was two to three months, at least eight weeks, this was my primary monitor, I used it for work, I used it for gaming. So this is a wham bam, thank you ma'am review that you know I spent two hours with the monitor and then rushed off to the internet to type up my thoughts and things like that. I spent time with this thing. So we'll start with the aesthetics and the structure because it's kind of angular aesthetic going for it, notably in the base and I'm not really a fan of that look. It's fine, I don't like it but it's not ugly enough that I would recommend not getting the monitor but that's kind of an angle thing that's not for me. But the structure itself is very solid, everything is quality, it comes with its own power brick and you can swivel the monitor, you can tilt it, you can raise it and you can also put it in portrait mode. So all of those things are very solid, you don't feel like once you have a position that you like the monitor in, suddenly the support will give way and it'll sort of sag and go into a different position. Everything is very premium and everything feels solid for this monitor. For display quality, viewing angles are a little bit off, you know if you're sort of standing above it and you're kind of looking down on the monitor, the text is a bit blurred. This is not a deal breaker for me, to be honest I don't understand what the big deal about viewing angles is.  This is not a deal breaker for me. I think especially for computer monitors, it's safe to assume that the user will have it right in front of him or her. So the poor viewing angle is not really a big thing for me but I noted it for the review. Screen quality is good, the text is crisp, video is nice to watch. Although I did note that compared to a Dell 27 inch, the Dell is not a gaming monitor at all but video was a little grainy on this Asus and then when I shifted the video to the Dell, because I had them in dual screen format, on the Dell the video was not grainy at all. So just a little something to note for you know if you're gonna be watching videos extensively on this monitor. Colors pop very nicely, they're very bright and they're very vivid. Some people might call them oversaturated but I like them. I like them this kind of very bright kind a little bit in your face color or color quality to them and you already noticed this in games with a wide color palette or you know colorful graphics such as overwatch and you know the colors really pop when you play those kind of games and so again very good quality for this Asus monitor. But let's cut to the chase. Is it a good gaming monitor? And to answer that I have to share what I was using before. My old monitor is three years old. It's a ViewSonic XG2401 23.5 inches 144 hertz free sync. So in terms of specs the Asus and the ViewSonic are basically neck and neck. They're basically tied for specs. So if the ViewSonic was any good then I shouldn't notice any difference on the Asus. But actually there was a big difference. This monitor really showed me what a true gaming monitor can do. On my ViewSonic for whatever reason the free sync would not work. I changed HDMI cables. I tried to fiddle around with the settings. It would not work at all for some reason and to be honest I'm like well I don't really care you know I have a tendency to think all of these terms that manufacturers throw around a lot of it is just marketing hype 144 hertz free sync. One millisecond response time. And I kind of think like well you know really do they do they make any difference. But when I got this Asus the free sync worked right out of the bat. I didn't have to do anything. I checked the radion settings and free sync was already enabled. And on the ViewSonic I experienced screen tearing and I was a bit surprised. And I just thought that you know my rig is old. I'm using cross fired RX for 80s and you know probably the graphics are lagging. But with this monitor on the exact same setup no video tearing at all. No screen tearing while playing games or any other application for that matter. And this really struck me like wow the game feels so much smoother on the Asus monitor compared to the ViewSonic. And all of the game footage that I'm showing in this video I tried to capture the actual you know I filmed the actual monitor. I didn't screen capture the game. So just to try to show that there was no screen tearing in the graphics when I played. I don't know if professional reviewers would do this or you know they actually filmed the monitor footage from the monitor instead of screen capture. But I did it to try to give you guys a sense of what the experience was like on the Asus. And really what an experience. No screen tearing, colors were vivid. And I really began to appreciate that maybe not all of this is marketing hype. Maybe all of this brouhaha about 144 hertz and 1 millisecond response time. And precinct maybe there is something to it. And for me bottom line as a consumer never mind like you know as someone who runs a computer shop. As a consumer is there a real world benefit to buying a monitor like this with all of those specs. And the ViewSonic didn't convince me but the Asus VG258Q certainly has. I'm like really amazed at the quality and the no screen tearing of the game experience. So it's not new to my computer or it's not that new because I don't have a monitor anymore. I don't have graphics cards. So I apologize to my RX for 80s for thinking that they were the problem. Would I choose this Asus over the ViewSonic when the two monitors basically have the same specs? Yes I would choose this Asus monitor in a heartbeat. We don't actually sell the Asus VG258Q in the shop but a quick online search shows that it's going for around 13,000 pesos and I think that's a reasonable price for the quality of this monitor for the solid build quality for the excellent graphics that it displays. I think that is a good buy. And I must emphasize again this is not a sponsored video. They were basically just you know they just gave it to us and they said use it in the shop however you want. They didn't say anything actually about you know you can use it like for your personal use. So don't tell Asus that I stole it from the shop and used it for my own gaming but I'm very glad I did that I managed to go to the shop pick it up and rush back home and so I had two months of during lockdown where I use this monitor and you know I I am it has made me a believer in all of these buzzwords so 144 hertz free sync and one millisecond response time. So I'm a bit sad now that business has opened up and that I need to return this monitor to the shop and maybe I won't. Let's see I am curious now to try other monitors with different specs and maybe I will do more and again not a professional reviewer but hopefully they help some of you guys out there. Thanks for watching. So I hope that these basic tips helped you. If you found this video helpful please drop a like and hit the subscribe button. For your PC needs consider buying for Macs, hardware, sugar, atlada or on our website. You can find links in the description below and thank you for watching. See you next video.