Experimental Features & AI

[00:00:00]
>> Jon Kuperman: Awesome, okay, so let's just talk about two other things that we'll kind of just talk through together. So the first one I covered very briefly, but there's so much cool stuff going on with Chrome DevTools experiments, and I really think they're worthwhile. So with the DevTools open, you can go to the setting cog, and then you can go to the Experiments, and you can see this huge list of things.

[00:00:21]
There's really, really cool stuff going on in here. Some of the very early stage ones only have a title, it's kinda on your own to guess what it did. But as they get a little bit later stage, they'll often link through to some kind of DevTools page where you can see specifically what it's there for and what it's used for.

[00:00:42]
So yeah, there's all sorts of stuff. There's these cool accessibility ones and accessibility tree. At the beginning of class, somebody was asking about a font editor, so there is font editor. So you can enable this, and then you go to the Styles tab. And you can see now with this font editor, you can kind of play with the fallbacks and the family and the sizes, some really neat stuff here.

[00:01:03]
These are always changing, they're not guaranteed to stay, sometimes they won't. And additionally, sometimes they can cause crashes or strange behavior. These are very experimental features, but there's all sorts of cool stuff here. I honestly feel like this is pretty worth checking out from time to time. That being said, if you want something a little bit more user-friendly, this New in DevTools kind of series that they have over on developer.chrome.com is just such a great series.

[00:01:32]
They always have videos and blog posts and all sorts of stuff about their extensions and their DevTools and Chrome in general. There's lots of really cool stuff here. So yeah, so I think experiments are really cool. And then the last thing that I wanted to talk about was the AI innovations.

[00:01:47]
Cuz everybody already built stuff with AI these days. I actually think they've done a really good job here. So there's two different AI innovations that they've added. So again, starting from the DevTools on any page, you can go to the settings cog. You can go to AI Innovations, and then you can turn on these two different things.

[00:02:03]
So there's two different ones, there's Console Insights and AI assistance. So I'm gonna go ahead and just turn both of them on for now. I think when I close this, it'll tell me maybe that I need to restart, maybe it won't. Let's see if it just works, it does, okay.

[00:02:18]
So yeah, there's two things, basically. So one of them, if we go into debugging, so we've got this error. One nice new thing with this AI is this kind of understand this error with AI thing. I think this one is pretty decent. I do think it's pretty wordy, and it's not always necessarily getting you to where you need to be.

[00:02:37]
But it at least tells you this came because this thing was empty, and here's maybe an idea of how to fix it or something like that. It does not get the right answer here, but it looks cool. What more can you want from AI? Cool looking and almost there.

[00:02:53]
The one that I think is a lot cooler is this Elements panel. So pretty much anywhere now, when you're scrolling around on different elements and things like that, you can click this little button. And then this will be a more traditional ChatGPT style AI prompt. So what's cool about it is that it's very contextually aware.

[00:03:13]
So for an example, I used it earlier, oops, I used it earlier. Because I was looking at one of our exercises, and I think it was this one. And I had all these little list item lists were like this, right? And they looked really bad, and I was like, I think there's some API that I can use to get these when you're doing text-align:center.

[00:03:42]
And I was, actually, I should see if the AI can do this, cuz it's very contextually aware. So I went to the list item, I went to the AI prompt. You can see the AI prompt brings in this list item kind of cursor, where you bring in the file you want it to work on.

[00:03:56]
So I can say, the bullet points are super far away, how can I make them closer? Or a more professional version of that, anyway, and it'll kind of go out. So again, I thought this was quite cool, because it's like the prompt that you're used to. But it is so embedded in the rendering engine and things like that, that it can kind of quickly figure things out.

[00:04:18]
And so, you can see here that it kind of points this list-style-position inside. The other thing that I thought was kind of cool, a bit dangerous, maybe, seeming, is that its suggestions always come partnered with code you can execute in your console to make it happen. Which I thought was kind of a wild thing to offer, but so you can copy this to clipboard, then go to the console and just paste all this stuff.

[00:04:42]
Well, it's AI, what are you gonna do? We still have jumps. Wait, setElementStyles, I guess it doesn't have the function, that's too bad. Anyway, I thought that was kind of an interesting thing. But you can see that it is extremely context-aware, so it was correct, list-style-position, you can set it to inside.

[00:04:58]
So that's all you really need to do is list-style-position: inside. I thought this was quite nice, for multiple reasons. It had such a good sense of how things were rendering, that it was just contextually aware. Less excited about running the code to get it to work automatically, but pretty excited about how contextually aware it was.

[00:05:16]
So yeah, I think it's always worth checking out between those kind of experiments. And all the new stuff that they're doing with AI is quite useful, great. And yeah, I think with that, there's a few other places you have the AI, varying use. So they've added the little AI button everywhere, basically.

[00:05:32]
So you could kind of do a thing, actually, and this might be cool to try while we have a minute here. But we go back to the page jank one. And let it do its thing, and then eventually find the moveBalls method. Let's close out this memory heap, and we'll kind of scroll in here.

[00:05:52]
And how do I get this? Ask AI, why is this so slow?
>> Jon Kuperman: Hmm.
>> Jon Kuperman: That's kinda cool, okay, this part's right. Yeah, it forces this synchronous layout thrash, okay, I'm pretty happy with this. So again, you can see something that's kind of slow and kind of run AI on it.

[00:06:18]
And at least get some pretty good information. In our actual solution, we use CSS transforms, but this similarly points out correctly that you could do batching or requestAnimation, pretty similar to the stuff we covered in this course. So yeah, I think that's cool, kind of fun to play around with.