Links mentioned: Details automatically generated.
summary

They send greetings to each other.

Andreww was working on the Express back in node project. Now they want to be able to send data from the front end to the back end. Andreww is working on a project that allows they to create a website from scratch. Andreww wants people to create a functioning project on their laptop and then move it to their laptop. Andreww wants to keep the theme of learning and stuff like they spoke about how its plural sites, free weekend. Andreww is going to share their screen with others to share a video from a web development course.

Andreww is interested in web development. They discuss responsive design and learn forms. They are interested in learning about forms. Andreww is working on a form for a quick project.

Andreww is teaching their students how to use forms in their projects. they recommend checking out the intro to HTML course from.

Andreww explains to how to avoid re-entering data informs. Andreww is working on a website.

Andreww is trying to go back but they don't know if they can.

Andreww explains to Sep how a process works.

Andreww explains to how data is transferred. Andreww is using the fetch API.

Andreww is learning about the fetch API. they like structured programming languages because they are structured for them.

Andreww's browser didn't like the way Andreww shared their screen. Andreww is going to get back to work.

Andreww is thinking about having courses on web dev. Andreww is going to head out of here. Next break will be 15 minutes after the hour. If no one signs up for show and tell, Andreww will go over an artist's website and listen to some tunes. Andreww and their friends are going to listen to The Traveling on the radio show. Andreww is going to make a highlight video and share it with audio.

topics
  • localization security
  • form data
  • html forms
  • web development
  • web dev
  • form elements
  • bearer token
  • user clicks
  • plural sites
transcript

But those dreams everything, and they turned around thought that nature where we need to got him on the spot.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Welcome back.

Welcome back always puts.

Spotted rare.

Welcome back and a smile way, I think and I know what to see you again.

Learn to me was this song.

It made a comeback.

Never lead you Hey, what's going on?

Welcome back.

All right, I was actually a little bit late because I was working on that Express back in node project thing.

I was talking about earlier and I yam able to from the front end, send a message or some data to the back end.

It does what it needs to do, and it sends back a response that's working.

Now.

I just need to be able to 20, by the way, take a stretch.

Oh, yeah.

That's good.

That's, that's good.

All right, so Yeah, so now I just need to be able to from the backend, hit the endpoint, get the data back because I am passing the data, pass it along to endpoint, get that back and then send that back to the front end and see how that works.

So, yeah, almost there should be pretty cool.

So once I get the basics down, I like to go from like something I can do in the browser real quick.

Like a glitch project.

You know, I had to upgrade the glitch that took a little bit of time and figuring that out, at least an hour.

Have the project that I can go now and use that if I ever need to do it again, so I have that Baseline and then yeah, I got that working.

So now it's just about hitting that other endpoint with my Bearer token, which is stored in my environment variables because you don't want that out there.

I am saying, Because it needs to be an authenticated, what you call it a request to the end point.

And then I just need to get back the data and see what data there is and kind of design how I want the UI to look and stuff.

And then move that over to my laptop and create an actual functioning project and I made by a domain name because I haven't at issues.

All right, so Let us go through some stuff.

All right, so, welcome to the second break session of this Cipher.

There's one more break session.

So remember if you want to come on and do any sort of like show-and-tell, that would be the time.

Alright, so cool.

Hopefully you are getting some stuff done, you know as much as I am, which is always a great feeling.

So all right.

So to keep it kind of the theme of like learning and stuff like we spoke about how its plural sites, free weekend.

Let us talk about some other stuff that you may be able to learn.

So I talked about one of these other courses before in the previous Cipher today.

So I am basically going to get as much use out of this site as much as possible.

So let me share my screen.

Let me copy and paste it.

So that the recording of this video you will be able to see the link and check it out for yourself.

All right, so now share my screen.

Eventually, here we go.

So I am a big fan of like a web dev.

That's like a site.

I normally go, though.

It's flashing.

That's oh, can't do that.

Okay.

That was weird.

Okay.

Let us try that again.

Wonder.

Why does that, could I be like my graphics card or something?

So weird.

There we go.

Huh?

All right.

So webdev, a website that I like to go to the kind of checkup.

They have articles on there and things like to go there and see like what's happening in the world of the web.

And so it was I think of the Chrome Dev Summit recently that just happened where they mention that they have courses on web dev.

So I was like, oh, cool.

Let me check out what they got there.

And so we spoke about the responsive design before, which is super Important.

So we kind of like step through it.

Look cool.

I will turn it over to wet, learn pwa stuff.

But let us take a look at learn forms.

Come kind of curious to see what's in there because forms are big part of.

Like, I am actually like working on a form for this quick project.

So forms are the way people like can like interact with your web application and then people interact with the differently and so is important to be able to have like a good practice as far as what you have there.

So it's cool to see they have the forms there.

So of course, about HTML forms to help you improve your web developer expertise.

So yeah, so let us check this out.

And so, yes, of course.

All right, cool.

Welcome to learn forms.

The course, breaks down HTML forms into easy-to-understand pieces, which is always good over the next few modules.

You will learn how an HTML form works, and how to use them, effectively in your projects.

Use the menu, pane by the learn forms logo to navigate the module.

So they have a bunch of different modules at school.

So they like I said, they have General best practices.

And a thing that I could always.

Do better on accessibility in turn has internationalisation and localization security, and privacy autofill.

So, yes, there's a whole bunch of stuff that you can do.

And so well they have an intro to HTML.

Oh, okay.

Another side.

I like is mdn.

Mozilla developer networks, like docs, and so they actually have a link to their introduction to HTML.

So before starting this course, You should know about HTML for those new to web development, check out the intro to HTML course from mdn to learn about how to write markup, and they got demos nice.

Form controls.

Let us see what you learn used forms to get your data from users.

That's exactly what I am doing.

Now.

Like you type in some data.

It sends it to the back end.

It does some stuff with the data and returns a response.

So pretty much just like what a lot of websites are help users enter data informs.

All right.

Okay, there's like different types of form elements, or they'd be like select box or like a checkbox or input.

How to avoid re-entering data informs?

That's always a point cuz you want people entering the same thing over and over again, testing the forms.

Some design Basics.

Cool accessibility again, super important security and privacy.

So, yeah, cool.

So let us take a look at some of these things.

So design, basics.

Oh, wait, that's skip getting started from okay.

Use your formula.

See that.

First one.

What's cool is like they have.

Oh, here's like a glitch here.

Not like an error but the glitch.com that's exactly what I am working on.

It's cool.

When you can kind of create stuff really quickly, you know, like, little proof of concept kind of thing.

So that's why I use glitch for so favorite animal cheetah.

Chica, so, Right, it's good choice.

Chili is a great animal.

See, that's just super cool now.

Today.

I don't know if I can.

Refresh.

That can I go back?

I think it's in that.

You're going to go back.

Okay, reload.

Let us see whether we loaded.

All right.

Nice whale.

Let us see.

All right, cool.

Nice.

And then tomorrow you mind.

So it's a nice was a form element.

Nice, where did a process?

Okay, here you go.

So when a form is submitted, for example, when a day when the user clicks, the submit button, the browser makes a request.

A script can respond to that request and process the data, so, I think they're doing By default the request is made to the page where the form is shown.

So you want a script running at webdev to process the form data.

How would you do that?

Oh, and that's right.

They have got like questions and answers and stuff.

So that's pretty cool.

Nice, let us see.

How's the data transferred?

So you can see that's how they do it here.

Like question, mark is normally, but then you can actually pass it in like the body of like a request.

They talk about it here.

Using post.

The data is included in the body of the request.

Nice.

And so that's basically what I am doing now.

I am using the fetch API.

And so yeah, there's a super cool.

So this is pretty cool.

If you want to get to learn more about like the form element because it's super important.

Like If you're doing any sort of like web development, you will probably run across form elements.

So honest, super cool.

Now, do they have everything filled out and you style them down my styling JavaScript?

What do they talk about the fetch API?

We see respond to form, elements.

What we got here.

Now, it's just strictly JavaScript to, they talk about the fetch API.

Make sure your form is still usable if JavaScript is available also, so they talked about that a supercool.

Aria can control.

That's good.

Oh, yeah, here we go.

They do talk about fetch a nice.

Nice.

Yep.

Fetch API.

So this is a really good like well-rounded, uh, course You know, and it's type of thing where I have been using it, and I am saying like before, like the feds.

Like I said, I am doing it now, but it's always good to be able to go back and try to maybe fill in some gaps even know that were there and you know and just kind of get better.

So just kind of may take like a weekend or whatever just to kind of like go through it and you know kind of refresh things and maybe learn some new things.

So that's why I like these type of things.

They're just kind of like it's like structured for you.

So you go in learn a thing.

And you're better for it.

Anytime I password stuff, you know, okay, the show password, so And then show password.

Could you do that a lot as well too?

So whether they're probably doing the probably messing with the type because it's password because you put password to show it.

Let us reveal password and password field, password and out.

There's a lot of stuff happening here.

Okay, reveal password dot hidden, false.

Oh, is that thing?

Hide, password?

That's what that is.

So, are they changing?

Like the type from password to text.

How they do this.

Let me see something here.

I think that's how I have done it before, but they have data set text show.

Interesting.

I have the check to see how they're doing this.

Pretty cool.

We're weight-wise HTML.

Not wait.

Well, I think I just broke something.

Oh, all right thing my browser did not like that.

Okay, so that is that.

Oh, there we go.

Oh hello.

Let us wait.

You're my browser did not like something there, but that's pretty cool.

So.

Let me stop sharing my screen.

Because I am gonna get you all back to work.

So what y'all think?

Do you think?

Like having these courses on web dev.

Like, are you passed that now?

Like, yeah, I know this.

I don't need this.

Or you think it could be, like, a good frame of reference to kind of be able to go back and check it out and kind of make sure, you know, everything not know everything.

But I am familiar with what you need to know.

I don't know.

All right, cool.

So we're going to head out of here.

So again, thanks for hanging out.

I am get you all back to work.

Let me set.

So next break, the Final break is going to be 15 minutes after the hour.

And if no one signs up for like show and tell, we're going to go over an artist's website and listen to some tunes and maybe you will like that artists as well.

We play them on the radio show.

And so maybe you will become a fan and check them out, you know, so yeah.

There's that cool.

Thank you all again, for hanging out.

We're going to leave here.

Get y'all.

I am just finishing up.

Up this highlight video thing.

Cool.

So we're going to listen to The Traveling.

Music is going to be new Jabez featuring a Piney, be the trance call.

Thank you.

So again, thank you all.

See you all soon.

Be easy.

Make sure I share the screen with audio.

Cool.

All right.

Thanks.

Y'all.

Talk to you later.

Bz piece.

Are you talking about?