Many of you will know Chris from around on the on the Internet.

He's he's been I don't want to call him old, but he's been around there for a while.

Sorry.

Hey, he was absolutely behind.

You know, so many of the resources that have taught me so much throughout my web development.

Korea no CSS tricks has become this Kanaan ical reference for all kinds of content, all kinds of things to do with Web development.

I'm always baffled at how quickly after something new comes along, courses ableto grasp it to see its importance, learn about it, produce content that is just so valuable for everyone on that has incredible longevity and just kind of sticks around eso it is kind of staggering to see Chris is gonna come and talk to us now about, you know, the power of the all powerful front end developer.

And that makes me happy because that's that's my background.

So please make him very, very welcome.

Is Chris Koya?

Yeah.

You don't know You okay?

Wow, That was so nice.

That's a nice direction I ever got ever.

Um, yeah.

Who Flashlight, all powerful friend of Miller.

I've been a friend of dealer.

Prefer a long time.

It's very near and dear to my heart, and it's so cool what's happening in that front?

And developers are just getting so much more powerful in what we can do.

And that's what this we're gonna talk about for half an hour.

It's gonna be awesome.

I work at Code Pen.

Uh, do CSS tricks and chop talk shows.

Well, what does it say?

Bookmark this pages in that weird.

Do you see that?

Whatever that's annoying enough to fix.

There you go.

You want to read my evil Tiu there?

Someone cool.

So, like, before any of the stuff that we're going to talk about today from developers have already been super powerful.

We always had, like, a super important role in the on the construction of websites.

You know, like, uh okay, next go, buddy.

All of you.

X is important of you exes.

It's like the most important thing we can possibly deal with when making a website.

What is it like for the user's to use the front of developer crafts?

All of it.

You know like it's in a totally in our hands with the experience of using a website.

It's like performance that's on front and developers, primarily a big chunk of purpose, a front of development situation, all of excessive people can.

You can have specialists like Think about you X and wire frame stuff and do research.

But the putting it into a website is all from developers just like accessibility that's in front and developers hands with the execution of a design and integrating the animations and interactions and all that stuff.

That's all front and development work.

That's incredible.

We have so much work to do already front and developers that you can make a sweet career out of it and lots of people are doing it and I love it.

I've done it and I just think, Wow, what a cool job of the best job in the world being a friend and developer on.

There's a certain skill set that comes along with the job.

Certainly those things.

It's generally like some of those things you specialize in, some of them whatever.

You add a few things to that party.

But there is some kind of like roadblock eventually.

That's the point.

You're a front and developer, which means that you don't have some other skills.

Probably.

So there's some kind of, like roadblock to your front and development skills were like, Okay, my skill set has expired and now I need somebody else to help me.

And this talk is kind of about like, where is that and where is it changing?

And I'm kind of interested in just kicking it down.

I mean, like, I don't I don't need anybody's help anymore.

I can do everything which I love.

So there's some kind of like there's a when, when does it stop?

Generally, it stops when you need, like some some hard core back end help or like server ops kind of stuff.

Uh, at least that's been the case for me.

So if you don't need any servers, you know Well, I don't know why that this word hasn't come up as much of this conference, so I feel like it's just a CZ buzzword.

Ia's Jam stack is to some degree, so I'm gonna say a whole bunch just unapologetically, and I'm not even gonna give some caveat.

That's like, Well, they're still servers involved Boo Boo and I'm gonna do it.

I made a website called the Power of Server lis dot info that it's just a bunch of links and stuff, so don't worry about like jotting down links and stuff.

We talked about some service.

It's up on this micro site that's kind of related to this talk.

So let's look at one of the major ingredients of I'd say jam stock, but definitely of server list, which is this whole idea of cloud functions are so cool.

It's some Java script and you put it on a server, but not your server.

Somebody else and server, which is great.

And it's probably knowed, you know, it doesn't have to be, but it probably is especially for the people in this room.

And then you got a website, and all you need to know is that you execute that code by hitting the Earl of some kind.

You hit the u.

R L.

The code runs.

That's all that a cloud function is.

It's sounds boring, but it's cool.

Why would you ever do that?

Well, let's not be abstract about it.

Let's talk about real reasons why you do it.

Let's say your bosses like Okay, we work at we work it food dot recipes or signing off.

You work on a recipe site and you're tasked with.

We need to, like, have an input field, and you type in your phone number and you get the recipe on your phone.

It's like a feature that you're tasked with building.

So if you're like a friend of developer like I got this, I can do the design it.

I can do the u X for it.

I can build the form I can think about states I could do all this work, But at some point, my friend develop, I'm done and I gotta kick it over the fence to somebody who could, like, go the last mile and make it do the actual thing of sending a text message.

That's the road block that we're gonna kick over.

We're gonna be like Okay, Twilio.

That's the app that you used to send text messages.

Cool.

Got it.

That's the thing.

I'm a little afraid off like you don't know.

I don't know how to do that.

Seems like back and nerd stuff.

This is where my friend and skills expire and somebody else comes to help me like that.

That's what we're gonna we're gonna scratch out.

So how do we do it?

Well, it's not because Tulio announced that they have client side only AP eyes and we can just do it in the browser.

They don't have that.

They don't have that on purpose because you need a P I keys to deal with your twilio account.

Because if you're the FBI, keys are the keys to the kingdom.

If some bad person slides in here and steals your ap, Ah, keys for twilio, they're gonna context all of Texas to vote for Ted Cruz or something that you don't want.

Something bad is gonna happen to us if they get your A P I keys.

That's why you need to protect him behind server side code.

Uh, that's a traditional use case of why you need a server.

I need to protect my A p I keys.

You just have to do that.

You can't protect them Client side.

I need a server to do this in some way.

It's not the case for all AP Eyes flickers.

Got an A p I.

You can use it to search first church for pictures.

You don't need any AP I keys.

You don't need a server for this.

This is all happening Client side.

This also makes you powerful as a friend and developer.

But it's not gonna help us in the twilio situation.

So we're gonna use the server, but not really.

We're going to use somebody else's, and we're gonna do it this way.

So that's our little clout.

What a cloud function is diagram.

We're gonna write our little javascript code.

We're gonna put it on somebody else's server, and we're gonna communicate with that via U R l's the Web's finest feature.

So if we're gonna run some javascript code and we need to put it on a server somewhere, whatever, why can't we just use the one that's already powering our recipe website?

Like Why?

Why not?

Well, because this is wine because our server doesn't run anything in the background.

So we maybe could if it was like an old school server that we don't have, but no, we jam stacking, baby.

Our server don't have note on it on purpose.

What's a RST website is running on?

Get up pages or code 10 projects are obviously nullifies the choice.

Here, I'm gonna dump all that crap in.

It s three bucket.

Guess which back end languages.

None of those things have all of them.

That was complicated.

None of those run any back and languages, you know, like get home pages will not run your python script.

Know if I will not run your PHP function Code pen projects will not run your know Java script yet.

So But why would you choose those things?

Because it's super cheap.

It's super fast.

It's cdn edge.

Don't we call it a CD?

Ends edge?

No, I don't know why there's you.

They're super secure.

There's no database to break into.

There's no file permissions to set that you get ups.

HTM the https that you don't have to frickin deal with.

It's such a pain, yet they're just very front and developer friendly places to put your code.

It's a fundamental kind of concept of this jam stack stuff.

That's where our recipe website lives.

So that's why we don't have a place to run our little function to talk to Julio.

So let's serve Earless up server lift it up this website, which I have no affiliation with or anything.

It is just It helped me understand what a cloud function is, so maybe this will be useful to you, too.

It's called Web task dot io.

It's a little bit like code pennant that it's an editor in the browser so I can open up Web task and that can actually edit that code.

And I can make a function.

So here's just a function that takes some data, and when it's done doing whatever it's gonna do, it calls a callback in returns that data what's cool about what has second test it right in there, compress that run button, it'll run that function.

So here, I'm gonna post.

I'm gonna fake post to this piece of code, and I'm gonna pass it some form data, food, bar, whatever.

Hit the run button and I can see that it returns.

I can even console doubt logs stuff in there, and it returns a little piece of Jason for me to use.

Cool.

So now I have this like piece of node that I'm executing now, uh, but that note is useless.

The node code I want is I'm gonna just go copy and paste them crap out of the Giulio docks because that's how I need to send a text message.

They'll have an N p m lib that you can just grab.

They'll have documentation.

That's just like, I don't know, fill in the blanks.

You know that it's their job to make this easy for you to use.

So here I've done it.

I just went to Coolio.

I'm importing Tulio from Tool.

You don't even know what that live does.

But I'm just following the docks.

You know, there's some a P I ke stuff in there, and I'm just gonna That's their documentation for how to send a text message.

Um and then Web test has a place to keep your secrets if you want to, so that the world kind of can't see them.

But crucially, they give you a u R l to hit it that they've give you that.

Now I have a girl to run my function, which is great.

Now I can use it and this is cool old school web.

I can use this function with not no client side javascript at all.

You just have a form I'm gonna post to that girl that they just gave me on.

I'm gonna ask her phone number to send it to and just pass it some value to send or whatever, and it has the submit button and that's it.

So I can run that on Code pen is just a That's it.

There's no CSS or JavaScript involved here at all.

I just type in my own phone number there and never call me, and I'm just having it barf outside.

But I'm you know, I'm in Mac OS, so I have my message set up or whatever, and it's working.

It's hitting twilio with that data, and it's sending me a text message.

I put that together, and I have no business doing that, which is great, and so you and you don't even have to have it spit out crap.