(music)
>> We did an Azure stream about a month ago
using video stuff.
And you know me, I love video stuff.
We're gonna use a service on Azure
that you have likely never heard of before,
but at the end of today's stream,
I think you're gonna wanna go set up an account today
and update your blogs, whatever websites you got
to include this because it's just that legit.
It's gonna blow your mind, it blew mine.
I've honestly wanted to install it into my blog
as soon as I found it and I was like,
you can't, you can't,
it defeats the whole purpose of the stream.
You're gonna do it on the stream.
But I want it, I want it accessible like this now.
You gotta wait, you gotta wait.
Yeah, let's go look at it.
Listen, let's go to Azure.
Oh, Azure.
I'm gonna show you a service
you have likely, never seen before.
Are you ready?
I bet you've not heard of it.
I had not heard of it
and I feel like I am pretty knowledgeable about Azure.
Oh, I use it a lot.
Actually, before I show it to you,
I wanna talk to you
about the project coupon we're gonna work on.
Let me go there.
MJC, the shortcut I got,
that goes to my personal website.
So my website is stored in get hub is a grid some site
and it's most of it we won't have to mess with today.
You'll have like content
and there's my blog posts group by year.
And then each one is just marked down
that it turns into a blog post,
over at baldbeardedbuilder.com or bbb.dev.
So all those Mark Downs files get turns.
It's the jam start right?
And grid some is like the view Gatsby.
That none of that's important for today
but basically there's our site.
Here's the thing.
If you wanna go read my site, okay, you go read it.
But certain people have issues with reading.
They're like disabilities that hinder them
from being able to read as easily as others.
Phrakberg says he's dyslexic makes life fun.
Hopefully will make it easier to read.
But anyway, so here's just a blog post.
There's nothing to it.
Add your comments at the bottom.
That's all there is to kind of wait
for me to show you right?
Check this out.
All these services, they're so cool, aren't they?
Mixed reality, oh my, media?
Ooh, static web apps.
Those are very cool, signal our service.
I love it, I love it.
We're not playing with any of those.
You've probably heard of those.
I'm gagging it on to, egging it on,
gagging, gagging, egging it on, egging it on, gagging.
I'm drawing it out a little too long, here we go.
Let's see all the services.
The one we're gonna use is called Immersive Reader.
This thing is amazing.
We're going to use all of them.
No, we're gonna use Immersive Reader.
An AI service that helps users read and comprehend text.
There aren't words to show you how excited I am
about this here.
Let's just copy this from my side, here we go.
I'm gonna copy this and paste it in here
because it says I can try it with my own content, right?
Try it out, I have not tried this before.
Here it goes.
It brings up this interface,
immediately I can press play.
>> Instructor: First step was cutting the boards to length
because the ends of store-bought boards,
aren't always straight.
I cut two 50 millimeters off one end of each
rather than measure and Mark the others.
I used a square jig.
>> She talks at the pace that I tell her to talk.
That's cool, that's like the default speech.
And actually I think there's some settings down here
for the voice, you can change the voice.
We're gonna focus on these options up here.
You may not know this, but there are certain fonts
that are known to be better for people with dyslexia
that help them read better.
It's giving you some font options that have different
unfortunately comic Sans is one
that helps certain people.
So you get font options, increase line spacing or not so
that it kind of segments it better.
It gets better.
Are you ready for the better grammar options?
Like if you were learning a language,
this is where it would be a legit.
Show me syllables.
I need you to highlight my nouns versus my verbs
versus my adjectives, my adverbs, what?
We click that switch and then we did it.
Okay, that's cool.
This is where we get into really doing some legit help
besides the fonts, line focus.
So for someone with ADHD who has trouble focusing
because there's too many words, you can focus it
but you can dial it down and say, no, no, no.
Give me like three lines.
Let me break the fonts down a little bit more
so I can see better.
Let me go five lines.
Let's switch it over to Dutch.
What if I play it?
>> Instructor: (foreign language)
>> I have no idea what she's saying, but I'm here for it.
Whatever this content is.
It's quality content.
Check this out each word
for me to comprehend and understand what I'm reading better.
I can click on it,
>> Instructor: First
>> Click to listen to it.
Then it gives me pictures
in some instances to understand what that word means.
That is the legit.
Imagine if you're trying to learn a language
let's get out of Dutch 'cause I can't speak Dutch
but very similar to Dutch is German.
I do know some German, not a lot.
Anyway, that's pretty cool.
Just to copy and paste that in.
Can we integrate this into our site to do it automatically?
Spoiler alert.
If we couldn't, we wouldn't be doing the stream right now.
Let's do it start for first.
Oh wait, I've already got an account.
Can I just add it to my account?
Yeah, that's me.
My name is Michael Joni.
Let's go, what are my resource groups?
Where do I wanna put this?
I don't think I wanna do that.
BBB maybe, let's do it here.
Add this immersive reader and option.
It is create.
Let's just it in the East.
Can we just put it in East banks, commercial or educational?
I'm not a non-profit so commercial, more
of the first questions I had when I set it up.
We're actually, this is my first time doing it.
I have literally never tried to add this
to a site before we're doing it live.
What could go wrong?
One of the first questions I had was,
"How much is it gonna cost?"
Let me show you the pricing.
It's really based on how many characters
3 million characters free per months for free, for free.
For free, yeah, Microsoft's doing that for us.
Come here.
That number with a big zero.
Its called free, free.
Yeah, let's do it.
Okay. SDK, get an API key to authenticate your stuff.
Let me make sure my, as your mask
from Clarkdale is turned on, I'm gonna need those values.
Let me open up the greatest code editor
known to man, note pad, and copy them in there.
Well, that's pretty cool.
They're hidden by default.
I had to press a button to show them shout out for notepad.
Show us your keys.
No, 'cause I wanna keep using this.
Okay, SDK step-by-step well, that's what I need.
It's not really gonna be node
but show me the node version.
We may come back to that.
Yeah, I guess we're gonna have to use this okay.
Jaw was scrapped, I may have to do this.
They're wanting to create an end point off token.
I guess it has some content, so, okay.
I think we can play dries the heck out of this.
That's not the way we're gonna ride it.
That's like a pug format, right?
We're not gonna do it like that
but we can still do the do.
I've got my website open over here.
Let's zoom in a bit templates I think is where
I would want that on a post.
I think for the most part, certainly any blog post
we're gonna want that on there.
I don't think that I'd want to add it all my talks
because there's not really anything there to read
about the about page might be a good page to have it.
Let's start with a blog post.
So this is a post less, this is an awful famous, so bright.
It's burning my retinas.
Let's go through here.
There's the post header at the top.
That's this thing.
There's the title.
Pretty much everything in that entry content
is what I'm gonna want.
This is all views.
So we could probably add this stuff in here.
Let's let's do it.
Let's go back over there.
Plan storage only to add that file.
I'm gonna put this son of a gun.
Give me a place where I can put comments, darn it.
Heck, I'll go paste this over at notepad for now.
This is the script that we're gonna need to
put on the page.
Let's go down and look at their Java script.
They've got a function called Get that.
Let's save methods maybe [Indistinct] yeah, we do.
We need like an API layer.
Let's do that.
We'll create a function.
I'm gonna copy one of these others
into it and then we'll just put that in here.
Does that make sense, Mr. Balrog,
we'll create, instead of doing this here
we'll put it into a function.
That'll be our API essentially.
Do I have like Axios or anything installed?
I doubt, and let's add it.
We'll go in NPMI, Axios.
And while that's loading in here also import Axios
JavaScript, Axios that's right.
Constant response equals a weight axios.post to yonder.
So we are gonna have to add those values.
I've got an ENV file here.
I'm gonna add it, but I need to go add it off screen.
You want these values?
It's using tenant ID there.
That makes sense.
Client ID.
Oh, it's it's sending those in there.
So let's bring that back over.
Let's go.
Let's go over to active directory, active directory.
Where are you at?
Any BIR this may tell us what to do.
Copy paste, the last half of the script.
Here's my code.
Come back over here.
Let me open my ENV and copy in the client ID, you know?
It's kind of jazz.
Copy, paste client ID is this copy paste.
All right, let's come back over here and come back to this.
Move that over there.
Oh my boy no.
So we've got those set up
and we're gonna build a service to do this.
So let's go build a service to do that
because I'm like that.
I think in response dot status equals 200, I guess.
I don't know, delete all that out.
I've got to clean this stuff up.
We've got like a hybrid of their code
and mine in here and it's a mess.
I tell you it's a mess.
So if there's an error, we'll return that.
Otherwise this is all garbage.
I think at this point, let's do again
in console log it know that's
if it's good console log and if it's bad.
So if we're getting it out
we don't want her to turn that.
We want to turn 200 and send back out this reg.
I think that'll get us.
Is it potentially that easy science point to know?
So in that case, let's pretend it's gonna work
and we'll go down to our other code.
We need a Mo function.
That's gonna call that is that's not the right URL though.
We can bring Axio into this constant axios equals
require axios, constant auth.
I don't know a good way to say this equals
oh wait, Axios dot get wrestling, anything with this.
So just do that.
Yeah, yeah.
What are we doing with that though?
What are we doing with it?
So we get a token stuff to try and catch this time
catch error console log, or come on, come on to
do that inside of there.
And then we would do all this stuff yet.
All of that token equals response to token.
I think we can just say token sub domain.
We can just get those straight out of that.
Learn more not only to learn more.
Heck I would never learn anything more.
Dollar page post title.
That's exactly what we want right there.
Oh yeah, that's pretty easy.
Html would come out of inscription.
No content, there it is.
So awesome, on callback this dot exit callback,
which we haven't done yet.
Immersive reader, launch error and launching there.
Yeah, that's cool, that's cool.
That's cool, holy crap.
I think we're getting pretty close
to having this magically done.
So is there anything else we need to add to that?
You gotta get that URL.
I don't remember what that URL is.
Is something like underscore is not underscore functions.
We use that in our comments.
Let's go look at our code for our comments.
Our comments are handled by a function right now.
Very similar to what we're doing right now.
If you're on my blog and you go to the comments
and you type in some kind of comment and blah, blah, blah
and you're all, blah, it's actually publishing
what you just typed to an Azure function.
It actually creates a commit on my repo with that comment.
But that same, that same methodology
of calling it something else.
The executive we want components a comment new
that probably also pair it is right there, look at that.
That's the URL that we wanna call data dot Netlify.
We'll see if we need that immersive reader.
Okay, okay, so hypothetically, that should give me my token.
Call out to the function, give my token and stuff
come back and then initialize the immersive reader.
I don't have anything that calls this yet.
So we'll need to add that.
Let's go back over here and be able to start
button class this.
Oh, okay where do we want that button?
Maybe up here.
I think we should make it like, as part of this.
I think immersive reader.
Where's that at?
There's the date and the comments.
So let's do pipe, right?
There's we'll put it.
So we've got that button.
What we wanna do is say, I think it's click colon prevent
that does to prevent default.
So if we've got that heck, we're going to have to
go read the documentation, like an animal.
It is dot, okay, fine we'll do dot.
I don't even remember the script to get this to run.
Is it develop NPM Run, develop?
Let's run it, NPM run develop.
There's some good tea or all right.
I'd be really surprised if this works first try.
in fact now I know it won't .
You know that script I copied off to another screen.
So I'd remember it.
That script, that's what needs to be there.
That's what I wanted there.
That out body false.
I don't want it in the body, but at the top
no console errors that did it.
Okay, refresh.
Immersive reader, there it is it loaded it.
Okay, so we cross your fingers.
So the moment of truth, there's that?
There's my button.
Oh, wait, it's way the heck over here.
I didn't put anything in it.
Which makes sense why it's empty.
Okay let me just, you know what?
I just talked about, man.
Immersive reader, let's say, okay, well that
at least gives us a button.
Here's the moment of truth.
I'm so scared to death, it's not gonna work.
I don't think it is gonna work, but...
Okay, can I get, get token of sub-domain sync of undefined?
Oh, that's handy it called this, this called this dot...
Okay, that'll rebuild it.
Refresh, clear all that out.
Oh wait, now it works.
Look at that, oh, son of a gun.
All of a sudden
that button started working well, that failed.
I couldn't find it.
Oh, because it's a Netlify function.
It may not be running locally.
Is it not running locally developed should run it locally.
Functions, Immersive reader.
It's not in there.
It should have gotten built out to that.
Did I put the right URL in there?
Yeah, that's right, that's right.
Look at our scripts package Jason let's run build
NPM, run, build building the functions.
Let's see if it builds our immersive reader.
It did so if I NPM run develop
now it should just serve up those functions.
If I look up here in Lambda now I've got immersive reader
last refresh to make sure all is good grants
and giggles all around.
Go, go, gadget, go, still not found.
Son of a gun, I think this is a red herring of a bit.
That code there was the actual function being called
and that failed.
What if I take that off?
You know what, if I take that off
can we get this mug working?
I feel like we're pretty darn close.
Clear this, clear all that out too.
Gosh, we are doggone close here.
Just to see what kind of mess we can get ourselves into.
Oh, please work.
Oh my gosh, it worked, oh my gosh
that is my blog in the immersive reader.
I can immediately hit play.
>> Instructor: In 20 years of being a developer.
I've used lots of various desk types.
>> It is Adrian.
I can't wait to show this off.
This makes me so happy.
I'm gonna start tearing up
because it really does make me happy.
I love when I can make content that is accessible
to people who struggle in that.
I'm gonna tear up about this.
I am so excited that now, like people who struggle
with dyslexia and with ADHD,
I got some cousins that struggle with that really bad.
The fact that they can get involved
and use this now and consume this content.
That's legit.
Look at that magic, look at that.
At the beginning of this dream, I said
I'm gonna show you an Azure service.
You've probably never, never heard of,
but it's so stinking easy to install
and makes content so much more accessible
for so many people.
How many lines of code do we add?
We added these two methods to go get that token,
three methods, there's an exit callback.
We added that, we added a button on the page
that would call one of those methods.
And then we created a little Netlify function
that gets deployed as part of our grid some site,
it just makes a call out to Azure's go off.
This was still a jet.
We nailed this.
I do wanna make that button look better.
Processing side is live, go to the site.
There it is, this is live.
This is all baldbeardedbuilder.com.
Just so awesome, it's just so great, we did it.
Ladies and gentlemen, boys and girls, everyone
everyone we done did it, everybody.
Thank you so much for hanging out with me.
So basically we just go to Azure to try out
and learn Azure stuff.
I practice learning for Azure exams and get a certification
but it's the immersive reader, service and Azure
for like the first 3 million characters a month, it's free.
Basically, it's just a method that we'll use
and get the Auth token out of Azure.
And then one that we'll call the immersive reader
and say here's the title of the page.
And it does the work for you.
Three more nights, yeah really easy.
I thank you for hanging out.
Thank you.
Special thanks to Azure today for sponsoring the stream
and for exposing us to these cool services like this one
this was was fantastic.
It's my favorite so far.
Anyway, have a good rest of your week.
If I don't see it, I hope I do.
And in the meantime, have a great afternoon.