Community Projects

[00:00:00]
>> I would love to know, even if folks don't feel comfortable sharing their code, although this is a safe space. We are all messing up a lot here. So I've broken builds. I've gotten the names of very basic [LAUGH] JavaScript things wrong. I've misled you a couple of times about command, so I feel you.

[00:00:26]
None of this has to be perfect in any stretch of the imagination. So please don't feel shy, and please share with us what you've got in the chat. And so we do have one that I'm very excited to look at. Can you maybe tell us a little bit about what you did for your hackathon project?

[00:00:46]
>> Yes, so I ended up doing two things. One thing I tried it on mobile didn't work but I think that's a Riley set an iPhone to network. But I added the there's like a shared API up It pulls up the share sheet in your OS. I think it's mainly for iOS and Android because they have like share sheets that you can share too.

[00:01:08]
So, but yeah, so if you click on the share image after you make it, it'll pull up the share, it pulls up the share sheet.
>> Okay, so we've got a new button, which hopefully was relatively easy to put in there and do a different modal thing. Then we have the Share button and now I can like airdrop it to someone unsuspecting or send a text message or whatever.

[00:01:29]
This is very cool. Super cool, so I'm in Safari right now on a Mac. So it does have access. And can you maybe point us to Where did you find out about how that API works and what you need to call.
>> Yes, let me see. I found it on MDN.

[00:01:44]
>> Yay! It's our friend.
>> Yeah, let's see. Let me look it up again.
>> And by the way.
>> But yeah, just if you search for share on MDN.
>> Sure. So a lot of browsers have a way to set up search keywords. So I have a little MDN search keyword, that when I type MDN, whatever, it doesn't even go to the search engine, it goes directly to the search page of MDN.

[00:02:13]
So this is a very handy little feature here. So share API is what we're searching for?
>> Yeah, if you You just search share, it's navigator.share.
>> Okay. Let's try navigator it just popped up. There we go. There we go. navigator.share.
>> Yep.
>> Okay this feature is only available in some are all supporting browsers on secure HTTPS.Websites.

[00:02:39]
So, that's also something that you can do in GitHub Pages, as I believe you can decide whether you want to enforce that it is always HTTPS, which why not but this is very cool. Okay, the web shareAPI and again, we have like so many of these API's. It's amazing.

[00:02:57]
This is awesome. So I haven't worked But this very much but this is a fabulous interview like these are all things that we can share with people using f they have a supporting browser. And we can check the compatibility table down here to see that okay, like Firefox for Android might work, but not all of the parameters.

[00:03:20]
But sadly my desktop Firefox won't be so friendly with it. But a bunch of these other browsers, Chrome, Safari, Opera, etc. All about it. So again, yeah, just a note to be aware of the browser support for the thing you're using, and it's always a good idea to have like fallbacks.

[00:03:38]
So whether it's a try catch or iffy, wrapped, async operation or whatever it is, you should be all set. All right, great. So like getting, okay, so this is the other thing is we need to actually get the file in a useful chunk of information that the browser knows what to do with.

[00:04:00]
A blob or a file object based on that blob of data, all of these things base 64 URLs, all of this stuff. As we go, we're probably having to learn a little bit about under the hood. I see a meme, but what does the underlying engine see? What kind of data is this?

[00:04:21]
So some very good lessons to be had here. So yeah.
>> That like two data URL method on the Canvas API.
>> Okay, can you please? All right.
>> That turns it into a base 64 string.
>> Yeah, and so this is a great way to be then able to, and look, we've got.

[00:04:40]
We've got some nested awaits here. This is awesome. And so this is where we can learn so many cool tips and tricks from looking at each other's code. It's always a good idea to peruse other people's way of approaching things. And this is some fabulous stuff that we're learning here.

[00:04:57]
We're converting the meme to a data URL, which were then-.
>> Yeah, actually I don't even know if that I getting a batch need to be there. I don't even.
>> Well, we can try it out and we can all you know fork each other's repos back and forth.

[00:05:17]
I don't know how complex of a fork tree we're allowed to have on github, but in any case, this is awesome. Fabulous, thank you so much for sharing excellent work fabulous. We've got a meme version in the chat that uses an ML model to add a box around your face after you click Save.

[00:05:36]
Let's check it out. Okay and let's see if it works in Firefox. Great! And somebody thought to put the links. Roshan Raja has put the amazingly clever, and I wish I had thought of it, link to the project of the GitHub repo in there. So, good call and let's do it.

[00:06:00]
So we're gonna take a selfie. Save okay. And wow look, it knows where my face is. I am very impressed and a little bit afraid. [LAUGH] But this is awesome. So we'd love to hear a little bit about what you used to build this, let's go through to the code, thanks to this very handy link.

[00:06:29]
Okay, let's take a look, maybe.
>> Just look at the commit history, maybe.
>> Uh-huh, okay, we've got a face API, sorry?
>> Nevermind.
>> Yeah, so I'm thinking we're gonna wanna look at his face API, and there's some models and things going on in our source, perhaps.

[00:06:52]
Aha, face recognition. Wow, okay, so this face api.js, which I'm guessing we now see as a dependency of the project, is giving us all of these methods for like loading all of these different models. We're wrapping them all in a promise all, which is a good way to basically, instead of having to like await this, await that, await the other thing.

[00:07:18]
We can write one await on a promise.all, which will, that promise, Returned by promise that all will resolve when all of those other promises as the net as the method would indicate have resolved. And then we've got kind of a mix of like the then Ning and the catching cool.

[00:07:35]
This is awesome. And there's some models then in the models, Directory which I might not have up here, but that's all good. Maybe it's in assets? That's modals. That's fine, okay. [LAUGH] Anyway, so I personally do not know this API and how to maybe it's in Public? There we go.

[00:07:58]
Public models that makes sense. So these are gonna be hosted, did with the site. So I'm curious to look at these. We've got some thing that is essentially Jason file again, like it seems like the whole JavaScript ecosystem comes down to Jason files, that is somehow representing. To the machine learning magic underneath what a face looks like.

[00:08:28]
So that's really cool. Awesome, and this face, Jay, let's look at the package Jason. And yes., exactly. So we have this face API JS is a package that we now can be inspired to go play with ourselves. So thank you so much for sharing. That's awesome, great work.

[00:08:53]
Perhaps you could even do something if I had given you more than an hour. You could do something like use this to then I don't know put sunglasses on people or something, so I the possibilities are limitless very cool awesome work.