Speaker is working on their website. they have added two pages about and a shop to it. Speaker has been using Astro. Speaker will talk about a cool thing they came across during a break. Speaker will share the link with the video later.

Speaker wants to talk about the new Eyedropper API. Speaker has been using an API that allows they to pick a pixel color on a page. Now with the eyedropper API they can choose any pixels. Speaker explains how to provide a similar feature to the users of a creative application on the web. Speaker provides an eyedropper tool that web apps can use for their own needs.

Speaker explains the features of the Chromium-based Edge browser. It was launched in Chromium 95 and is desktop-based. It is possible to create a new instance of eyedropper and use it. Speaker has shown some demos of some computer games. Speaker recommends Google Chrome 95 or later on them. They are showing each other how to select the color of a picture. Speaker wants to win one of these.

Speaker explains the privacy and security considerations behind the Siemens Web API. Speaker explains why the mouse cursor disappears after a short delay and a dedicated user interface appears instead. Speaker is glad these people are working on that as they would have never would have seen that. Speaker is sharing the screen. Speaker has found something cool and wants to share it with others. They are going to listen to some music during their break session this week. Speaker is going to finish up some Pages on the website and then start working on the dashboard of the website. Speaker will see everyone 15 minutes after the hour.

• web technologies
• screen ocn
• eyedropper mode starts
• input color

Take it out.

Welcome back that same old place the cheek.

Well then since you hung around but those dreams have remained, and they turn around.

Hey, what's going on?

Alrighty, so, welcome back.

This is the second break session, stretch it out.

Oh, man.

Whoo! Oh, yeah.

All right, cool.

So, how's everyone doing?

Hopefully, you're doing well.

I actually just The.

Added two pages to if you can see it.

I am redoing a website like a version to like it was like a super Alpha version, but now I am had some time to actually get it worked out at some more features.

And so that's the doing stuff that I Insight that I launched and as for whites are traveling again and stuff.

So is it kind of Chronicle like my travels, and so I take like 360 photos Hose and you some 360 videos stuff and some other things.

It's pretty cool.

So, kind of go back and look at my call.

Nice.

So, I am adding some more features and stuff.

I just added two pages about and like a shop.

And so, it's pretty much the same thing as my other side.

So it's pretty cool.

Collection is like, literally just copy and paste and change some things, and it's there.

And, so I have been using Astro and that's been Pretty cool so far.

Like I just pretties like a straightforward.

So yeah, I am enjoying it.

So there's that.

All right, so I will talk about that on a future break when right now, wanted to kind of talk about this thing that I came across, that was pretty cool.

And it's from web dev.

And I don't remember.

I think I was just browsing.

I was going to say perusing and browsing together.

But yeah, I don't remember how I came across it.

I think I might as been on web dev and I saw it.

I was like, oh, that's pretty cool.

So let me show y'all what I am talking about, by the way, let me copy and paste the link.

So it's with the video, the recording of the video later.

So you can just click on that.

All right, Sherman screen.

I don't think I am any audio bum, added just in case.

And just going to be something really quick.

I want to kind of show that there's this API that was like released and it's pretty cool.

It was a kind of thing where I was like, do I really need that?

Yeah, I am saying, but it's good to know just in case because I was using like the regular one, but the thing I am talking about, make sure, I am sure my screen is picking colors of any pixels on the screen with the eyedropper API.

Eyedropper API.

So want to kind of talk about it's pretty cool.

And so shoutouts to these folks here for the article.

And yeah, I have had this for a while but and I have had other stuff I want to talk about but this we have time now and let us get into it.

And so let us see here.

So what it is, I am gonna show a thing, but it's an API that allows you to pick like the color, like a pixel color on a page kind of like the way that you want because previously, and what I have been using is this input type color.

Because again input is like my favorite HTML element is so powerful.

Just if you change the type, you have so many different options.

But so let us take a look.

I think this goes to the mdn.

And so here, so this is input type color right here, right?

And so when I click it, it brings this up.

All right.

I don't know how many people are familiar with it.

But that's just out of the box.

You get that in the browser, which is amazing.

The web is an amazing place, and they were able to kind of like just pick stuff.

But you're also able to, I think if I click this, see you get this thing here.

We can choose any pixels, which is pretty amazing.

Just like you're like an image editor or something, right?

So that's pretty cool.

Now.

I have been using that like, oh, this is cool.

I don't need anything else.

But now with the eyedropper API, so it's saying that okay.

So if you're building a creative application with web Technologies, you might want to provide a similar feature to your users, you know?

Being Picked a pixel color.

However, doing this on the web is hard.

If at all, if possible at all, especially if you want to sample colors from the entire devices screen, for example, from a different application.

All right, and not just from the current browser tab said, I know you could do that.

It's interesting.

There isn't a browser.

Supplied eyedropper tool that web apps can use for their own needs and their saying like the input color input type color.

It showed comes close on, chromium based browsers running on desktop devices.

Oh, I didn't know you couldn't have to check it on a mobile device.

It provides a helper helpful, eyedropper in the Color Picker drop down.

However, using this means your app would I would have to customize it with CSS.

So you'd have to change it to make it look how you want and wrap it in a bit of JavaScript to make it available to other parts of your app.

Okay?

Okay, you can see that going with this.

Option also means other browsers would not have access to this feature.

Oh, so I guess it's only chromium-based.

Interesting are the try another about, I have never tried input type in any other kind of browser, good to know and so it kind of shows going on.

So the same thing as here, so that's cool.

Oh, yeah, there we go.

So it kind of shows the current status of it.

So they got the explainer done also stuff and the origin child's complete and it was launched in chromium.

95, desktop only.

So hopefully mobile will come and then you can just check for the feature.

If eyedropper is in the window object, then it's available.

If not, you can show like an error and then using it.

You just create a new instance of it.

Although you can just call open on it.

And it returns a promise that resolves after the user selects the pixel.

So I guess when you hit open the be similar to when you click this, so be like that.

Cool, it's not.

Oh, yeah, and you can choose even outside of the school.

Again.

I have never really played around.

I just new about it.

Never really had much use in it, but that's pretty cool.

Well, I got some demos as well.

All right.

So then yeah, so you open a weighting it?

Then you get the value from the result.

That's RGB hex.

One of those other.

Oh, yeah, so you can get for my other formats so you can get like rrgg be as well.

Oh, wait, that is our gee.

I don't know, or you can get other values again.

I haven't really played with this and then you can cancel it as well here.

So it shows you how to cancel it.

Cool.

Then putting it all together.

All right.

And then we can try it here.

And so using Microsoft Edge or Chrome.

Google Chrome, 95 or later on Windows or Macs.

Okay, and so there's this link you can check them out.

So this has a list of games.

Some more information?

Cool.

I think the one they were showing was the color game.

So let us take a look at that.

Oh play, what's happening.

Okay, so I only have like a few seconds to pick that this one.

That's pretty cool.

Yeah, I played this before and yeah.

So, you saw how it came up?

It's pretty cool.

Let us try it again.

So that was like a salmon color.

So you see how So before you can have to open up like input and then select it.

Oh, I lost.

Was it?

I don't pay attention all this one.

Okay.

Well, I can't end off on a lost.

Let us I gotta win one of these.

So this one here.

That's cool.

Okay, let us take a look at another demo.

So yeah, look at that one earlier photo colors.

Woo.

So we can load a picture.

Huh?

So, I can click that select the color.

So you see, we didn't have to go like with the input type color, you'd have to bring that up and then do.

So this goes straight to the eyedropper.

That's pretty cool.

So, okay, let us take a look.

So click this.

And then swap with color.

I guess, let us try this.

Oh, that's cool.

That's pretty cool.

So let us select this one.

That's so if I click swap a coat of color first.

I don't think that's going to do anything in.

That.

Is my mess it up?

No.

Yeah you.

Okay.

You have to select the color.

Let us go with this swap with color.

This one.

Pretty neat.

You could probably play with like how harsh it is.

So it picks up more colors, whatever.

But this is on the web.

It's kind of amazing.

That is pretty cool.

Let us go to the last one.

We got a few minutes.

And then something called the Mondrian generator Generate random Mondrian.

Like color grids.

All right and click on any top.

Okay.

Let us see what this is about.

Do these things?

Oh nice, so they okay.

Randomize cool.

So I can click this.

All right, and I will switch it with another always switch.

All the colors.

Wait a minute.

This one.

We did this, which all the colors.

Hold on.

Select this one.

Yeah, it took AA while.

So at some point you just go to end up with like one color, okay?

Okay, so it looks like it.

I lost those colors, interesting.

That's pretty cool.

Okay.

Pretty nice.

Alright, so yeah, that's The.

What do you do?

Wait what?

So our privacy and security considerations behind the Siemens seemingly simple.

Web API has a potentially harmful privacy and security concern.

Oh, oh, what?

If a malicious website could start seeing pixels from your screen ocn.

Even think about that to address this concern.

The API, specification requires the following measures first.

The API doesn't actually let the eyedropper mode start without user intent.

So you have to call The open.

The open method can only be called a response to a user action.

Like a button click.

So you can't do like load a page and his habits show up.

It has to be through like some sort of user action.

And in no pixel information can be retrieved without user intent again.

So the promise returned by open only resolves to a color value in response to a user's action, clicking on a pixel.

Okay, so cannot be used in the background without the user noticing.

Okay.

It helps users notice the eyedropper mode, easily browsers are required to make the mode obvious.

This is why the normal mouse cursor disappears after a short delay, and a dedicated user interface appears instead.

Oh, so okay, so you.

So, how that little grid appeared.

That's let the user know that, hey, your pixels are being.

Okay.

So that's tops from anybody from like automatically like scanning.

Pixel-by-pixel like a site and sending it off.

Oh wow.

There's also a delay between, when the eyedropper mode starts and when the user can select a pixel to ensure the user has had time to see the magnifying glass.

Oh wow, and then finally, users are able to cancel the eyedropper more than any time.

I press the Escape key.

Oh, wow.

Wow.

See, I have never would have, wow.

I am glad these people are working on that as I have never would have seen that.

There would have thought about that.

Because like what?

That's super cool.

All right, nice, little child's to these folks who have been working on this seems like cool now.

Alright, let me stop sharing the screen.

So let me know like is this something that you find that you like you could use in your own applications?

That is super cool.

That's pretty cool.

And yeah, so I thought it was cool, and I am letting y'all know about it.

Maybe you will think it is cool as well.

So that's why I do these things and I did put the link so you be able to check it out on the recorded video and yes, let me get you all back to work.

We have one more break session for this Cipher.

For this week, and Yeah, so, you know come if you want to talk about something you found interesting then go ahead and make that happen.

Otherwise, we're going to go over an artist's website who he played on the radio show and you know, go through some listen to some music.

Check out a video or two, you know, so how you know, we do.

All right, cool.

So I am gonna get you all back.

All right.

So the traveling music is going to be from new Jabez featuring a Pawnee be And it's called Thank you.

So, thank you all again, for hanging out.

And yeah, see y'all 15 minutes after the hour.

All right, I have got to finish up some stuff with its Pages, then we will start working on the dashboard of this website.

All right.

So again, thank you all for hanging out and yeah, back to work.

Wish you much productivity.

All right.

See you later.