 Hey Adam, welcome to the team! Hey Jesslyn, I'm excited to start as a junior designer today. I figure your first day should be with me, in the product, on the web, squatching bugs from our ticket system. What do you think? I think that sounds rad. Let's do that. The first ticket I grabbed for us is a duck team bug. Hmm, our contrast is apparently too low in our primary button. Let's check it out. Right click, inspect on the button. Then, we can emulate the duck team by running the duck mode command. Next, I will inspect the button color contrast. Spot that little warning icon there. Not a good sign obviously. Look here, we set a different text and background color when the media query is set to pre-first color scheme duck. I remember we have a primary brand color variable defined. Let's try with that. I think this color combination seems okay now. Let's try to find if the page has others contrast issues. Go to the CSS Overview panel and run it. The color section shows a nice summary of all the contrast issues. Ha! We actually didn't fix the primary button color. Seems like we can't depends on our intuition to solve color contrast issues. We look like such a bad example here. Let's go to the button and fix it again. Let's fix the text color this time. Open the color picker. Expand contrast ratio section. Let's click on the suggested color to see if it's fit. Hmm, cool. It looks okay. Let's change the secondary button color as well. Let's shift click on the variable, see what are the other gray colors we have defined. Oh wait, you know what? Instead of doing that, you can actually click on the color picker, expand the color sections and preview all the CSS wearable colors there. I think darker gray might fit. Let's update that. Let's capture the overview again to see if we fix all the issues. Or fix. I think AA is fine for this one. We'll open up a PR and get confirmations from a designer that this color is good to go. Whoa, that was rad. Oh, we should probably check if there are any contrast issues in the live theme too. Ah, I forget to enable this pretty handy experimental feature. Open the experiments pane and filter by contrast. Enable automatic contrast issue reporting and reload depth tools. See the issues icon there? Click on it. If our page has any contrast issues, it will detect automatically when we reload the page. Seems like we have more contrast issues to fix. Let's create a bug report and assign it to you. What do you say? Sure, I'm up for that. Next bug is on mobile. Whoa, look at this. Seems like we have a jiggy navigation bar. Nts, nts, nts, nts, nts. Do that bug, do that bug. Okay, let's try to string the page view port with the depth tools to stack the navigation bar on top. Whoa, nice dance. The animated elements appear to be in the mouse way causing some infinite loops. Oh yeah, that's broken. We got this. Let's start by checking the scroll styles for this layout. Okay, I see the overflow x is auto, but overflow y isn't specified. We have animated elements that looks like they are changing the container height. Let's disable scrolling on y. I mean, we don't need it anyway. Aw, no more dancing nav. That's okay. But hey, it looks like that spin is really hyper. Can we tone it down? It's too much, right? What do you think? Oh yeah, let's fix that too. Let's hover to the link and toggle the hover state repeatedly. I use target, focus visible, and focus within all the time too. Hmm, no animation here. I think it's defined in the seal door element. See? There you go. Five turns is a lot of turns. That's why this looks so hyper. I bet the intended value was 0.5 turn. Let's change that. You know what? I really like this angle preview too. I can drag on it all day. Let's verify if the spin is less hyper now. Cool, the animation direction doesn't seem right. I think it would be nicer if it's coming from the bottom. Let's see what we can do here. I think we should change the transform from translate x to translate y. Almost there. But now the animations is coming from the top. I see the calc function here is inverting the value to a negative transform. Let's get rid of the calc immersion and just use the custom property. Oh yeah, well done. I'll mark the solution in this bug report and assign it. Yeah, crushing bugs. Just as a double check. Let's make sure the spin animation is still reduced when the reduced motion media query is active. What is the reduced motion media query? We'll show you in a second. Let's open the rendering tab and emulate the reduced motion option. That's the media query to specify the styles for reduced motion. Nice. No regressions here. A crossfade animation is great for reduced motion. Whoa, Jesslyn. That was rad. Next one is a layout bug. The footer doesn't look good on foldable device. Let's simulate the bug by toggling the device toolbar, select the surface dual device, and toggle the dual screen mode. Whoa, DevTools can do that? Did you just flip it and reverse it? You think the emulation is cool? Let me show you the CSS screen spanning media query. It lets us adapt to the foldables. Check this out. This feature is currently experimental. You need to turn on the experimental web platform features in order for that to work. Oh, I see. That's rad. Very cool. Ah, I remember the footer was built with Flexbox. Let me show you something cool that I recently discovered. You can go to the layout pane. There is a Flexbox section that will list out all the Flexbox elements on the page. Since the footer is the last element, let's scroll to the last. Enable the footer checkbox. See the overlay show up. Let's change that color to red and make it stand out. Then we can show the element in the elements panel and fix it there. Go to the styles pane, see that little Flexbox editor icon there. Let's open that and play around with the styles. Ideally, we want the footer to align on the right. I think we should stack it. Let's change the flex direction to column. See the icon is changed according to the direction. Sweet. Let's align item to the right. Looking good. Let's see what are the changes we have made so far. Let's pull out the changes tab. Make sure you don't misclick that undo button before capturing all the changes. It happened to me once. Oh yeah, one more tip for you. Sometimes I find the badges are too noisy. You can filter them out in the best settings like this. Red. Alright, let's watch the next part. Someone with an older browser reported that our featured image is missing. Let's open the page. Hmm, the Bandung image is still there. Let's inspect that. Oh, it's a picture element. Let's hover on the image source. Ah, nice summary there. Okay, it's got the dimensions, the aspect ratio, and it has the source. I see it's WebP but not all browsers support WebP, right? Definitely. We can disable the modern image formats with DevTools. Go to the rendering tab and disable the AVIF and WebP format. Refresh the page. Oh yeah, we reproduced that. Seems like some typo in the image path. Spot that extra dot there. Let's fix that. Nice. Easy fix. Oh wait, there's another bug report on slow image rendering. Seems like we are using a bigger image for a small display. We should actually optimize that. Let's save that for you. Okay, you can use Squash to do that. Oh, definitely. Squoosh is rad. Oh, there's a bug on missing limited edition tags on Carrip Up. There is also a request to highlight the price. Let's see what we can do here. Let's duplicate the element and drag it down. Looking good. Let's play around with the price now. Maybe we change the font and make it bigger. What do you think? I think that looks good. Let's copy the styles and paste it in the Carrip Up too. We should take a screenshot and send it to the product design team for review. It's very rad. Okay, now we have fixed all the bugs. You can go and start your work. Any questions for me? Yeah, how did you discover all of these DevTools features? I follow the Chrome DevTools Twitter and subscribe to the Chrome Developers YouTube channel. There is this awesome What's New in DevTools blog and video series published every six weeks. I also like the DevTools engineering content. Check them out. Yeah, okay. Let me open up that link real quick. They are more new features. Is that you in the video? Please don't tell our boss I have side geeks with Google. Ciao.