Good morning, everyone.
So.
Today, just.
1st off I want to check. Did everyone do okay with
During the last lecture, quiz.
I saw a lot of you had.
You still have time to do it.
But
The lecture quiz is.
You know any you know so.
Questions should have been pretty simple. The solutions are there.
Again expect that kind of level of things. They're not going to be.
Deep questions.
You have a week.
To do them first.st
You shouldn't have to do much studying. If you watch the lecture, you should be able to.
Do the thing. It's it's not.
That's all supposed to really check.
So the the quiz itself. I don't think it shouldn't have a timer.
Yeah, I don't think it has a timer. Again. It's like 5 multiple choice questions. I think one's actually true, false.
So these are really set.
Tutorial start today.
And that will be what I'm doing that so.
I'll talk about the. I'll answer these questions real quick. I just want to show you some stuff, and then I'll start answering questions.
So
So you'll see. Now, you know. Lecture one is here on the Wiki.
Lecture 2 now is here also on the wiki. I put the notes up.
Here, along with the video and the auto generated captions.
If you want to have the captions, just download the video and watch it in some like Vlc.
And then it will show the captions automatically.
If everyone has a good web player for me to point this into that, that'd be great. But I don't.
No fun.
So in terms of when these are the videos recorded, I posted.
Soon after lecture. I generally can't post it immediately after, because it takes some time.
For zoom to process the video and make it available for download.
So it's sitting there being processed. And it typically takes.
Like half an hour to an hour. It's like it's it's not that fast.
Not sure exactly why. That is.
Now the other things to note here is you go to the course outline. Now.
You'll notice I've added all the tas. This is still a little bit in flux here, and also the who's assigned to which tutorials.
You notice the 1st tutorial start.
Are today, I think at 2, 30.
Is the first.st
Tutorial, say 2, 30 to 4, and then 4 to 5, 30.
So if you're assigned to these tutorials, please go to them.
Try initially to.
Stick with your assigned tutorials.
We may have some flexibility later on, but let 1st try to go to your assigned tutorials.
There will be
Typically an online version.
Possibility for most of these tutorials, but.
Try to go in person, you know, if you can, at least initially, because then you get to like, meet your ta, and they get to see you and.
You get to like, get things set up initially. So.
Try to show up for your tutorials.
And meet your Tas.
The other thing is, the 2 1st tutorial is up.
So you notice it's here.
And we'll be talking about stuff for background for this.
In class today.
One other thing I want to show
Why have my web browser up? Is openstack.
So you're gonna need to go to so if you look at the tutorial here.
There is here about getting started with openstack.
There's this whole guide.
Here for
Opus. Second ses they have lots of how to's how to get the VPN. And stuff.
What I'm gonna do right now is just show you a bit about the interface.
Let's see if I can.
Logs me in.
And so here's what opus I have admin.
You know.
Could you embed an unlisted Youtube video? I'm not uploading things to Youtube.
For many reasons. One is, I don't really feel like giving them a license.
To my videos.
Not this time, but
Oh, right! Is it? Tutorial, not finalized? Oh, thank you. Let me fix that. The tutorial is good. Now.
Firm.
See if I remember that password.
I'll say, Yeah.
Okay.
That. Get rid of this.
And fix that.
There we go!
So the question is, where can you contact? Tas? For on my tutorials.
You should be contacting them through
Through
Teams.
And basically they're using their name. You should be able to send them a message.
So.
So if you have problem finding them on teams, but then they also will start.
Posting things so you'll see them. But.
You'll be coordinating with these. But again.
1st try showing up. The Tas are still getting organized. They'll announce their office hours.
You should try again. Remember you the times you can get off.
By Tas.
Is during their office hours.
And during their
During their office hours and during tutorial times.
They shouldn't be checking you off at other times, because they have plenty of hours available between them.
To do that. I wanna make sure they're not getting overloaded by messages like, please check me out. Please check me out. It's like.
We have times.
To be available.
Related to sorry on the main page the outline
You'll notice the 2. So these are tutorials are office hours. Some people are online. Some people are in person.
We're gonna post a zoom link.
Which will be the universal online.
Zoom. It may already be their invite space. I'll check, but if not, it will be there shortly.
For in person there's 1 room, the ta room. I don't want to mention that on.
Lecture, because these lectures are made public.
So any other kind of saying, please don't post room information.
Publicly. So I'm not doing that. But.
We'll announce that on.
On
Teams, the exact room, but it's the standard ta room.
For office hours where they're in person, but otherwise online will have a zoom link.
Where you can go and beat the Tas.
So.
Again, if you if you're looking to get off.
Just go to their office hours.
Or.
Show up in a tutorial, either in person or virtually like. We'll have a zoom link where you can attend the tutorial virtually, if you're not there. But.
I highly encourage you to go in person, because, frankly, if you're going.
Online. You may be sitting there waiting for attention while they pay attention to the people or in person.
Cause. It's much more efficient deal in person. If you want to get checked off.
Virtually.
But yeah, we're gonna have to just see how it all works. But.
I'm trying to encourage you all to show up in person. If you can.
Yes, you need to show progress during you need to show progress in your tutorial to get checked off, and the easiest ways you go to the tutorial have been working on it during the time. At the end. They kind of go like, okay, you made progress.
Check off.
This 1st tutorial.
Spend the most time do I put into it.
Terms of instances. The basic way you go through making an instance.
If you go to instances.
So like I.
I'm sort of go here and make myself. You know, I'm gonna launch an instance.
So I'm I'm not gonna go through the whole thing. But you basically go to launch. Instance.
You have type in here. So I'll type some knowledge. And you guys talk to 4, 6, 2.
And then you go here to Source.
And
The volume, here is
My wife.
Right here, I say, got volume. Say, instant snapshot.
And he's the instant snapshot, and you'd look here for Comp. 2.
And pick the latest one. This is.
This one here, not the one from the winter.
Because if I if I update the image, I'll increment the date.
So you do that.
Then you go through the flavor you select. This.
Networks.
That'll be there. That'll be default to that network portion.
Security groups.
Make sure you add this security group. Otherwise you won't be able to get in so easily. We'll have to fix that.
Key parallel. That blank is a default. Password don't need the rest.
And then you click launch, instance, and it should launch an instance.
And then, after I'm not going to launch this, could I have one running and stuff? But basically, that's an instance.
And then, when you have an instance, you'll need to do. You see it says Disassociate IP. You'll need to say, associate floating IP with a new one.
So what this is is.
In networking terms. Every Vm. Will have one of these IP addresses associated with.
Any IP address. That starts 1, 9, 2, 1, 68.
Or 10 anything our private IP addresses. They cannot be routed on the global Internet.
So you won't be able to reach them. Those are IP addresses that only work within openstack.
So then there's globally IP addresses, which means ones you would get to from outside of.
The Upper Star Cluster.
Those IP addresses are these, 134, 1 7 Carlton, IP. Addresses are in general 134.1 7 else.
And so these so right here, my my Vm. Has this IP address assigned.
Like these other ones do not.
That's what you're gonna need to.
Yes, I'll just say so. But that's what you're gonna have to, you know. Make sure that's there, and then you can access your vm via that IP address.
So now let me
Stop sharing that.
So.
So can you use your own local Vs code? You can use your own local Vs code.
But I do not recommend that you just.
Yeah, I don't recommend you just do it with your own local Vs code.
And the reason why is because you really should get used to doing development in the cloud, because.
That's kind of what you do with
Openstack!
So is it possible to write down these instructions for how to launch an instance on your own page on the wiki? Well, that's why I linked to the ses.
Pages, because they have extensive videos and walkthroughs and everything.
Directions, and how to do that.
If you daily drive Linux,
Actually.
Even then actually add some more to, because whole point is to have doing development on a remote machine as opposed to a local machine.
Is there a reason? This course uses Javascript, but we will talk about Javascript later.
Okay, so.
I want terminal.
You take it.
Taste.
So what I'm going to do right now.
Too many authentic are people trying to log into my Vm.
Sorry one second. I'm.
So.
Yeah, let me. Sorry I was. Yes, I sometimes just stop speaking. So let's go and share my email. So I can share what I've been doing.
So you all should be able to see my emacs window right now.
So what I did was I logged into the Vm, so on the class vms, there's a 24, 6 account, and there's a student account.
I tried logging in a student, but some.
I think some people have been trying to log into my Vm. And.
Oh, did I not change the student password?
Are people logging into my vm, so.
Okay.
No good.
Okay. Oh.
This is really annoying. My! My emacs is like not showing these coloring. I really have to disable that.
Yeah, this is unreadable.
Never mind
Okay, that screen sharing. Stop. That's fine.
There we go!
Sure.
My lecture, 3 notes.
There we go!
So.
What we've got here.
What I just wanted to show you. Here is.
So this is, I've just got a terminal running, Mac. So this is the same as any terminal. So I've got a little Ssh alias set up.
To log into comp. 2.
That's my IP, you know there's a specific IP address. I'm going to show you a little bit of how I set that up.
Actually know that won't make much sense.
So you locally, there are ways of doing this. You'd have to normally say Ssh, and.
What you'd normally have to say is,
Here, so upstate Ssh, student.
At 1, 34, dot, 1, 7, 1, 3, 1 dot, 50.
This is how you'd normally Ssh from basically any machine.
When you have a command line.
When you do this.
Oh!
Actually, you might. You can do this. Actually, I'll you know I'll it's a unisc.
So here on my username, Soma.
So I can say this.
And then the reason why is you can't log in directly to this machine.
Because it's isolated. So you have to go through another machine.
I'll show you this as one, as 2 commands.
So you can see what's happening.
Now I'm on access.
7.
1, 3, 1.
1, 3, 1, 50.
Yes.
Okay. So now I am in.
There's various things about how to get Ssh working without typing in passwords.
The way you do that is, by using Ssh keys.
I can show that to you all later. But I'm not going to show that today.
Because that's that's a whole little.
Side quest.
So.
Okay, I've got this.
Terminal here I'm on this. Vm. Notice it says, student, at Comp. 24, 6, 2,024 F.
It should say this when you log into your Vm.
If it does not say this, you're using the wrong Vm image.
And if you do that, you're gonna notice one consequence when you type.
It won't work.
Because that's what I want to see.
So the question was is, how do I get to the Soma part? How did I so cause you can't log in directly. Now you can avoid this step of going through access. So right now, I'm logging into access.
And then I'm logging into.
My, and then I'm logging into the Vm.
You can do this command directly from your machine command line. If you connect to the Carlton VPN.
I am not connected to the Carlton VPN. Because I do not want this zoom stream.
To flake out, because I'm going to the Carlton VPN. That would.
That would be very bad, because that's the thing about using a VPN.
Means. All your traffic goes through.
Basically another router. You're basically packing up to go through another router. And from there going through the rest of the Internet.
And that inevitably adds latency.
And potentially ads reliability issues.
So.
To avoid that, I'm using the public Ssh box.
You all have access to this.
Machine, or, you know, like the Scs.
Linux boxes.
Your username is your mark, my Carlton, one username. And you'll need to have this working in order for you to have openstack working because you're gonna have to update yours credentials and those same credentials get you in here as well as there. That's all explained on the openstack website.
But basically.
You change your password for scs.
Once you've changed your password for.
Then you can log into openstack.
But you're only login to openstack.
While you're
On the Carlton network, so you'll have to VPN. In.
I've done some other tricks so I could access it from my
My browser here.
Aye.
This is the stuff I want you to figure out and tutorial how to get through all this.
This is kind of a pain. This is like, once you've got this stuff figured out.
It's not too hard, but.
There's some barriers there, and that's really what tutorial's about.
Getting to the dental, prompt.
On a remote machine. You can get on your local machine. But it's like, you see how many concepts there are about doing that.
It's a little, you know. It's a little tricky getting started with cloud stuff, and that's why I want you to get used to it from an early stage, because well, this is what you're gonna be doing. If you're doing any sort of cloud development.
So.
So the question is, what what is openstack? What is openstack? So what I've got here.
Is.
I have.
A little Linux computer.
It's got.
You know it's got its own CPU. It's got about 2 gigs of memory.
It's got.
It's got, you know, a 10 gig drive.
With about 4 gig free. So when you launch an instance, you get this little.
Virtual computer running on a remote site, and you can do whatever you want with it.
You have root, access.
When you log into this Vm, you'll initially, the password is the username is the password student.
But then.
Once you've
Then, once you've logged in.
You can. You have to change the password to something else other than.
And and so that's that. Vm is now yours, and you can customize it as you want, like, for example, if you want it. So you become root.
You'll be doing more of the stuff with comp. 3,000 as well. But this is your own. Vm.
So you would type pseudo.
And here now you can do things like.
Here's the host name of the Vm. You could edit this.
You know, file and then say, reboot.
And then, you know, it'll reboot the Vm. And then you'll be able to.
Note. Change the name of the Vm. To whatever you want.
You know you can customize this as you like.
So this is also getting you some experience of using Linux.
You're using a Vm. For Comp. 24, one. Could I use the same one for this class?
You could use the same Vm. For this class, except.
You'll have to
You'll have to install dento. It actually might be easier to use the 24 6 vm.
For 24, one.
Because.
I'm I'm not sure exactly what they've got customized in their Vm.
So.
That's the reason we have these vms is because each of them we've.
I've done some. I haven't done much to this. Vm.
Per se other than installing dental, but.
And, by the way, if you're wondering where Denno is.
Dental is in Doco.
There's a directory here called Dental, and if you go into.
Dot.
Dot, local.
Bin.
I create a SIM link for Demo to point to that.
But those of you curious about that. But that's how I have.
Demo runs when I just type it.
Like this.
Yes, you're connecting to a Linux machine here.
Yeah, you're not. You're not downloading a Vm onto your machine. It's not running on your computer. It's running on the opus infrastructure. But it is a little Linux computer.
What's the use of dental? Well, that's what we're talking about. So.
So what?
So now let's let's start talking about what we're actually doing here.
So.
Dental and Javascript.
What are we doing in this class.
So. 1st of all, remember, I talked about the.
So.
HTML is for
So.
When I say this.
That the web is HTML. Css. And javascript. I'm talking about HTML for define the structure of Web page.
Css. Is for styling Javascript is for interactivity.
What I'm really talking about here is.
Front end stuff.
Will the tas help you get set up with all the tech during tutorials.
That is the point of the tutorials, you know, is to help you get set up.
That's why, you know, that's why I want you to go show up so you can try getting this running. You can talk to your friends. You can see how this.
Works.
I can't.
I could sit here and spend another 45 min and walk through everything in close detail.
And even then it would still be confusing until you actually do it.
Yeah, so.
Exactly. So there's gonna be things, and you'll find as you do, Webcheck.
Going on, there'll be this, these.
These little things of getting things running. Why can I connect to this? Why can I do that? And they'll be confusing and.
Having people there to show you, and to see what's going on.
And get, and to help you debug these things.
Will save you so much time.
So.
That that's.
You know.
That's why. So that's what I want to do. But.
So when we talk about web technologies, and we talk about this HTML, Css. And Javascript, that's what we're doing.
So.
This is all the front end stuff.
So originally the web is just HTML and Http.
I did not mention Http above.
I will get to that in a second.
But but that there's a reason for that. So.
This is all the when we talk about front end technologies, they're talking about this and stuff related to it.
And you say when you're saying front end, what do you mean? Remember, Http is a networking protocol.
So when you browse the web.
You're using a.
Client.
And the web client is connecting to a web server.
So.
So here, when I start my web browser, I have a web browser built into emacs.
I type in a URL.
I type in my wiki.
And then.
I now my browser.
My client is accessing.
You know, a web server. The web server is on the computer homeostasis. Carlton C. Theologically.
I'll break that down a little. But you see, now I'm looking through. Here's my page when I when I click on this.
So.
So my.
So if I do this.
So this right here it is.
You know that is the.
That's the protocol.
And.
Space. This out here.
That's the.
Just.
Sorry.
It's a political.
And then.
So that's what we're doing here. So we're saying, this is the protocol. So this specifies.
How to get there. There are older protocols.
Things like you'd access things by Ftp. Or gopher things.
But now.
There's just the web.
So we just do things with hypertext protocol. You might see Htp. Versus hts.
We now mostly have Hbs, because we're doing.
Secure connections to web servers.
So this is almost always what you're gonna have getting to the point that modern web browsers drop this.
They don't show this part of a URL.
So a URL stands for uniform resource locator. That's how you name things.
On the web.
And so we 1st have a protocol. Then you have a hostname.
So this is the name of the computer on the network.
That's what that 1st part is.
Homeostasis dot scs. Carlton, Ca.
And this name comes from.
This is protocol called Dns.
Dns is the thing that.
Host names to IP. Addresses.
It's it's a big distributed database. It's a very cool thing.
We can talk about that later if you want, but that's.
So the host name. Really, this isn't.
This is an IP address.
It's a name associated with an IP address.
And so that's the computer you're connecting to.
So you connect to that computer.
You then ask it for something.
Via the Http protocol.
And you say.
This.
Me, that.
And to a 1st approximation.
The thing you mostly do. It's not all you do, but the thing you mostly do with Http is, get.
So get.
Well.
Mostly what you're doing with Htp. Is get is doing get and a URL.
That's what you're doing.
Actually have you? Well, anyway, we.
Is there assigned readings, or a guide to what we should, you know, read in the online textbook for each lecture.
There's not something specific for you to read before each lecture.
The tutorials will guide you.
I'm going to have.
There will be a lecture quiz for this.
So.
Anyway. So so this is a URL. This is how what it means when you talk to a web page. This would look very familiar to you, given that you all spent so much your life.
Surfing the web.
Pop.
So as a protocol, Hcp. Is so simple we won't actually have to talk about it. That much.
There's there's complexities to it, and stuff gets abstracted away and.
So the library is used, but.
Conceptually, it's it's very simple and really.
Really, what's designed is a file transfer call.
Host.
While.
So.
To a 1st approximation. That's I mean, that's where originally servers were.
They
It's basically a file server.
It's like it's a server that contains files.
And clients could go and ask it for files.
And so a web browser, in a sense, was originally designed just to do that, to take.
The contents of a file and show it.
Except that it wouldn't just do one file.
I mean, what we're really talking about is file.
That was the original use case.
The web.
You had an HTML file that could have image tags, you know. Image tags do this. So when I talk about tags.
So we're gonna go through this all more detail. This is now just.
I'm just trying to.
Get you to where we're going for? Why, Javascript shows up.
One thing to note about how I teach things.
Is.
I tend to follow a bit of a spiral pattern.
Which means that.
I tend to try to give you an overview of the whole thing, and everything's kind of fuzzy.
And then I go back through it and go through it more slowly and show you. Okay, here's this piece. Here's this piece. Here's it all connected.
So when you 1st hear about this, you're gonna hear about a lot of things.
And if you don't have much background, it's going to be confusing.
That's fine!
Take it in as a whole thing, do not, and that's.
In general, what you need to do with learning any sort of technologies or complex thing.
You can't do.
Depth, 1st search.
You can't go and say, I'm gonna learn about this thing completely up this thing completely. You have to know about what you're gonna learn about, because there's too much to learn.
You can't learn about everything all.
At once.
And if you just know the little pieces, you may spend your time about this whole thing, and it's actually.
Useless knowledge.
So what you do is get an overview of kind of what's going on and go like, well, if I want to understand this, I have to understand this. I want to understand this.
Especially when it comes to the web. You have to get comfortable.
But actually computer and computer technology.
You have to get comfortable with.
Ignorance.
You don't know.
Most of what's going on.
But you can know certain bits and pieces.
And know enough of the overall structure you go like. Oh, well, if this is happening, it must be over this area which I don't know about, so I will go learn about it, so I can figure this out.
That's really the purpose of this course. It's not to teach you everything is to teach you enough of a map.
Of the world, of the web.
So that when new things come along that you don't know about, you'll know. Have an idea. Oh, that sort of thing must be over here. Let me go learn about that.
Give you that high level structure. So now I'm going through that structure.
Very quickly.
At a very high level, putting things out there.
You're not gonna follow it all now.
That is fine.
Just trying to pay attention to it. When you go into the tutorial you'll go have a very specific task.
That will be very, you know. Go in depth, and you have to go through and see if I could accomplish these tasks.
As long as you can accomplish those.
Those are fine.
Hopefully those tasks. What I say, the.
Lecture, will integrate together.
A level of conceptual understanding.
Neither are by itself really is enough.
So, anyway. So what I was saying right now let's just show. Remember, I showed you my
So you'll notice.
I'm saying index. HTML.
This is the default file that I, if you ask a what a web server.
For a directory.
It will look in that directory and download its index.
Because you ask for a Directory.
What am I going to show for a directory? Also the index of the Directory.
So that's the file that gets loaded. So this is.
My homepage.
So.
So this is.
This page.
As as rendered in this very boring browser.
It'll look a little nicer there.
So.
How let's walk through this here just to kind of get an idea of what's sort of going on here, because this is.
A pretty simple thing.
So here I've got it so. HTML.
Is made up of all these little.
Tags.
So all these angle bracket things.
And so what? You start off.
And so this is coming from a more general language, called.
Or xml.
That's kind of. I think HTML is a kind of specific flavor of it.
Basically, what it's made of is a document made of tags.
Each tag.
Is basically an angle bracket. You have the tag, and then you have a maybe some other things associated with the tag, and then a close angle bracket.
But oftentimes you have a start.
And end.
There's something supposed to be between the tags, and so the end tag starts with a slash.
So here you'll see.
And it's all supposed to be nested.
So.
An HTML document starts with a Doc type.
This is a very old Doc type, showing. This is an old school document.
This is not really what you do in modern HTML. But then.
You have just an HTML tag saying, this is something that's contained, and if you go to the end of this.
You'll see it closes within. Slash! HTML!
And then inside of HTML.
There's a head.
And a body, so the header and the body, so the head of it.
Is here. So you see, the head starts here. It ends here, and all it is. This head contains metadata about the page, so such as.
The title of the page.
So here's the title link. So Mill's homepage.
And then here's a link.
2 out!
You know, a style sheet.
So this is a link.
And you're also saying, Run your style sheet. What's the type? It's text? Css, so it's a Css style sheet.
And here's the H Rep. Hyperlink, basically.
Is anil. Css.
So that's the file.
That contains the Css stuff.
And sure enough, if I load.
Will that Css.
I'll go here.
This is the file that's being loaded by that. So this is saying various things about the tags and saying for the body tag, these a tags, these image tags.
Some little information on how to style it.
But then we see below that we have.
So is this like a packet? Not really. This is just a text file.
That's all. This is.
This is a text file. This is a structured.
Text file. So think of this like a program.
You know, kind of thing like we have begin blocks and end blocks. So you might have like in Python, you know, to block by indentation.
Or in
Yeah, or in C, you'll have a curly brace.
Begin a curly brice to end, or something.
Those are denote structure. Here the structure is denoted with.
Tags.
And so here's we have some other tags.
So there's an.
One tag that stands for a header, 1, 2, 3, 4, 5 different levels of smaller headings.
This is a header, one tag.
In this header tag.
There is a link, an to an image.
And you know, you know, based on this is a hyperlink to that. And then here's the image.
This is a file. The source of the file is, and they'll prop too small.
All text which says, You know text over it, does it.
Well, let's actually say yep, no, it doesn't show the all text in this browser how sad.
But that we would show if it couldn't load. The picture, would say, a picture of me.
And then it would have a closed tag, and then they'll sell me a home page.
And then that's you know, that's ending of so a is for hyperlinks.
And H. Was for that.
It's now here is a link. Oh, by the way, there's a little audio on my web page that used to be a big thing nowadays. You don't do that, but I kept it around as a historic artifact.
And that's an audio file here. So if you click here on Hello, you'll hear me saying something.
And then here's the text, and I've got links. And you notice here a Href, that's the link that's the text.
Here's the link.
And there's the where it's going to.
So that's just what this is. It's just.
All the stuff. And so what a web browser does is it downloads multiple files.
From a row page jelly, under the direction of a single and unifying HTML. File that tells what other files to be loaded.
And those all get combined together into a document that's shown.
On your screen.
This page here combined, this image file.
Combined. Yeah, and then the contents here and compile the style file and then get this. So again, this is.
Really simple.
And some of them are links to documents here, like if I click on this.
I get a you know there's the image.
And.
Things I can click on this.
It loads that. And we have the main school computer science web page.
Loaded in this very.
Primitive browser.
We'll talk about different types of browsers, and how things look differently in different browsers. But.
There!
So.
That's what we're talking about with.
You know.
So.
You're downloading files.
From a web, browser.
You know, from a web server putting into your system, and then it's using it to render a page.
Page.
That, you see, is actually the product of multiple files.
That have been retrieved.
From a web server.
But now.
Bear with the key is.
Do the file stay downloaded after leaving the browser. So that depends.
So you'll notice every Web browser.
We'll remember things in memory to some degree, and then they'll typically have a cache.
On disk. So this is a recently downloaded file. So if you go into the.
You know.
The Directory associated with your browser. It will often take up a lot of space, because, as copies of the things.
You've downloaded.
Some of it gets saved there it's I mean.
Caching is kind of a funny thing. It used to.
You know it's for.
Kind of performance. The ideas. If you visit the same page, multiple times.
Or if you visit multiple pages on the same site, they're referring to the same files like the same, like image banner or something. It doesn't have to load them all from the server every time they can use the local copy.
That's a performance improvement. But yes.
They don't, you know.
They're temporarily downloaded onto your computer.
They may or may not be discarded. They may be loaded.
So what I want to do here is when you're navigating through this Wiki.
You know the URL keeps changing.
And if like, if I go over this and I go like, what is this lecture? One? I.
Over this. It'll tell me.
The link of it. And so you can see it's point to let me say so. You can see that long.
Actually, probably some of it got cut off at the end of the window.
Can you see the hover.
When I hover on things.
Does that show up.
Make it.
So
So the hover.
It's showing you the URL that will visit if I click on this link.
If I click on that link.
Sure enough, I get to this page, and it shows me the notes from the 1st lecture.
Are these files.
When I download them.
When I when I click on this.
Am, I.
Downloading a file that is saved.
On!
The web server.
Yeah. The offers. Yes, yeah.
Is that
Is there a file? On! On! There!
No.
For the modern lab.
You're not downloading files, much of the timing like images and other things. Those will be files. Typically, not necessarily, but.
For a lot of stuff. You're downloading the output of a program.
So the.
The definition of a server. The server is just the computer you're talking to.
All approver is is a computer that provides a service.
And a service is just a program that's waiting for requests and give them replies.
So.
The server concept will become much more concrete.
In tutorial, too, because we're going to run a web server, and you're going to see it in operation.
Is the server, the back end? Yes.
So.
So this is.
So that, yeah, that's.
Close enough.
Up.
So what what program languages can you have on the server.
Pearl was one of the old ones.
Php.
Is a huge one.
Python is definitely used.
Java is definitely used.
See, sharp is used.
A good bit.
So.
You can basically use any programming language.
For server, side code.
Oh, Ruby, yes, definitely. Yep.
I should make sure.
Ruby is a big one.
So so we'll we'll get to those. So.
Sequels, a special case.
That that's a that's a different thing.
Which we'll talk about. This is just what program. So.
That's what it is.
Cnc. Plus they can be used, but they aren't.
So.
So that's okay.
So there's some other benefits to having Javascript. Now the question is, does and C. Work.
So traditionally we thought of. So what I'm saying here is, what do you want from a server-side language?
You typically want something that's you want something HTML, and maybe other documents. So you need something that's good at messing with text.
Right.
Because HTML is text.
C and C, plus.
Not so good for text.
Another thing is, traditionally, you wanted a language that was more dynamic.
Ie. One that didn't need to be compiled for development purposes. But, in fact, nowadays, on the.
We actually.
Do a lot of work with.
Do a lot of work with compiled languages in various forms.
As I'll.
As I'll talk about, so you may have. So there's some things like
Used to be something called coffee script.
And.
Parentheses you speak coffee script was big for a little bit, but kind of.
High script.
So there's things like typescript and coffee script.
That can be using the client rather than Javascript, but these compile down to Javascript.
So I'm just saying this to be complete. My picture here is that.
There are other languages.
On the client.
You could use.
I mean, you can potentially use typescript or something. They're all the things that basically languages that compile down to Javascript.
Those are actually used increasingly nowadays.
And there's this newer thing called Webassembly.
Which is kind of like a machine code.
For the web.
Kind of like x 86 code or some, you know, arm code.
But it's designed for the web.
It can run on any machine and
But Webassembly isn't a complete replacement for Javascript. You actually have join. If you make a Webassembly program, you have to have some Javascript code.
Connect to the browser. It's all of a mess, but.
So, technically speaking.
You can use other languages.
On the client, and you definitely can use other languages on the server.
But in this class we're just gonna use Javascript.
So.
You have many front ends.
That are connecting to a back end, requesting content.
So. But what if it is data that changes.
If you say it's the static files, that's that's no problem. But what if it's data that changes.
So think about this.
There's this basic problem of.
Have you ever had an issue where 2 programs try to change the same file on.
Well, let's say I have 2 copies of an editor.
Or 2 programs just trying to modify the file.
If you've ever done this.
You've probably noticed how it's gone horribly wrong.
Because one program tries changing and the other one doesn't see the changes and the other one tries to.
Merge conflicts and get yes.
This is real time, or any. It could be real time or upper, but.
Real time, real time. But yeah, so.
So you have this. This is concurrency. Like 2 P. You're at 2 people editing source code at the same time.
Trying to do that. Then you have merge conflicts so. But.
Think of this at a really fine scale, at the level of a database, talking to hundreds, maybe thousands.
Clients at the same time.
How do you keep all that data from getting.
Confused with each other. How do you make sure you have a consistent view of things?
So.
So what you really have here is, you have.
Yeah.
Front.
So that's really what you have. You have the front end.
And you have potentially.
They're all like all these different front ends are connecting to the same back end server. That back end servers talking to the back end. Database.
And.
Basically the the server. Can you actually end up doing various things? So the server doesn't have to worry about the.
Mix it. The concurrency issues, the database deals with it.
Yeah.
So.
Does anyone know? So we're specifically talking about relational databases.
Does anyone know what the 1st real application of.
For relational databases was.
So know. This is a little interesting bit of history.
Not banking, actually.
Airline reservations.
So you don't want someone to.
Have a seat reserved.
And not have paid for it, or you don't but you don't want someone to have a have paid for it and not have a seat.
So you have all these. You can see all these different tables of information that have to all have.
Consistent things and like, Oh, what if this flight is selling out so everyone's buying it.
So anyone know, like how airline is still kind of janky.
It's kind of like their systems. Their it systems seem kind of like.
Messed up like you might be able to go online and buy tickets. But, like, if there's any issue, you start getting these weird printed pieces of paper, and you go to the airline. You see their interfaces. It's all text, and they're all typing in these weird.
Codes and stuff.
It's because it's old, because it's a system that's been running since the sixties.
The 1,900.
Because they 1st developed it. And it's not like they had time to just shut it down.
And introduce a new one.
They've.
You gotta keep flying.
So.
They've just kept these systems, and they've kind of added other systems on top of it. But the.
It's a system called Sab.
Sabre. It's still there. It's still very old. It's Beto's old glacial technology. It's like.
It still works.
Take care, but that's why it's so bad.
But anyway.
That's why. So.
Sequel.
Sequels the language of relational basis. It was developed for these kind of applications.
We've co-opted it.
In the context of web servers, because we realize that just serving files and trying to keep currency just gets.
Madden.
And having a relational database back there.
Saves, serves a.
Saves a lot of problems. I mean, you can't. You technically don't have to have it.
But very quickly. You'll want to have one so initially in the course. We won't have a database.
And then we'll introduce a database, and we'll see what problems we use it for.
Yeah. SQL, I've said. SQL, it's.
Sequel. It actually was
Why is it called SQL? It's like, there's this whole thing that it was like the second version of some other query language, or something.
So this whole structured query, language is kind of up.
You know, background, I think a little bit, but.
Anyway.
I sequenced right back? Yeah.
Won't disagree there, so.
This is
So this is getting an idea of the lay of the land. This is the picture of things.
So now.
Let's talk about.
What are you doing? Your tutorial cause? I'm almost out of time here. I don't. I have another like 15 min or so.
What are you doing in your tutorial.
What you're doing in your tutorial is.
Dumb.
You're playing with some programs here, and I'll just show you how this.
Works.
So what you'll want to do.
Is
So we go here. Okay, let's just go here. Let's so we have dental there. So Deno is a Javascript.
Runtime.
That runs on the server.
That's what Deno is. Node is a more popular runtime.
I have chosen to use deno for this class.
Because the Javascript in deno.
Is closer to the Javascript that runs inside the browser.
I think I'll be using sqlite.
Sequel, light.
Or I could figure out how to pronounce that.
But I.
Completely decide. Yeah, we'll see when I
How well it works.
So, deno here it's Javascript.
2 plus 2. I've given some links to resources on reading about Javascript.
I'm going to talk about certain things about Javascript.
As a programming language as we go.
I kind of want you to try like figuring things out.
Cause you've programmed stuff. Javascript. Is not that different from the languages you've learned? There's some subtleties.
To get out of this, you would hit control. D.
I think.
Dental, exit.
0.
That does work.
But otherwise you just hit control. D.
So we need to get a file on here.
So how do we get the file? You go to your web, browser.
And you go. You find out what the URL is of the file.
This is the easiest way to do it.
So I'm going to my tutorial in another window.
I'm copying pasting the URL for downloadable version.
I say, copy, link.
And then here.
Oh, come on!
Really.
Scroll annoying.
Make sure hw gets there.
There we go!
I should be able to paste this. But I'm being.
Recess.
You'll need a Carlton VPN. To use openstack. Yes.
Unless you're on campus.
Or well to initially join.
You'll need to use the VPN. To go on to the openstack and be able to do all the setup. After that you can jump through access.
You don't need emacs.
Emacs is installed there. You can use whatever you want.
You'd also use your Via Vcs, yeah, you use a Vs code. I will probably show that.
At some point. I'm not gonna mandate know the best way of doing it. In fact.
But I want to show you kind of how you do this here. This is more old school.
We were using the lab computers 1st to access. Maybe.
I I don't think we actually tutorials. We all have lab computers.
Actually.
So bring your laptop.
Definitely, bring your laptop.
Okay. Simple. Grab one.
Okay. So now I have this.
So we've got simple sync. So I should be able to run.
Dental.
Run, simple graph.
Not sync.
And now it's going to give me an error.
It's not enough parameters.
Try this.
Demo.
Right. Allow, read, simple. Prep sync.
It will. Js. Is fine.
And so let's say, bar simple, grab.
So I just searched.
This file. I just searched the same file that we had.
For the file, Var, and it printed out all the lines.
That matched it, that had the word in it.
And so I could do the same thing.
And just search for.
Nonsense!
And it does that.
The demo. The 2 trials are in classrooms without computers. Okay.
I create account and openstack. That was
If you got into openstack. That's great. To make sure you're part of the Comp. 2 project.
The work does not have to be fully complete. You have shown that you've
We're gonna be using throughout this class.
Denna will be part of basically everything we do.
So you have dental running there. But.
And now I can. I use emac, so I can do emacs and emacs.
That's kind of funny.
So.
Here we go. This is emacs and emacs. So this is emacs running on the class. Vm.
There's also Vi.
And of course you can use some like, and I'm sure they'll show you some fancier ways.
Connecting to the Vm. Here.
I'm old school. I'm used to this. I will try to show you some visual studio code, but.
I've been doing this for decades. So.
This is.
What I like about this.
Is that when you have an editor you can then just look at the code.
We can make some changes. I can do some things.
Like, sit like.
Console, log.
I changed something.
I can do that. I can save it.
And so here, and I can just do what I was doing.
And I get I change something. The code changed, and you can run it that way. But that's.
You know, that's what you're gonna be doing in tutorial is running this code.
Now.
Let's walk through that code.
Just to get used to. You have a you have so when our tutorials do.
So you're only able. Get checked off.
By talking to a ta.
So don't put it off.
But.
You have until it's basically you have to understand the tutorial.
The easiest way to get off is you show up for the tutorial.
You get checked off the end of the time, because you've been making an effort.
Because you don't. It's not checking to make sure you understood everything. Just that you're making progress.
But.
You have to it by the time with the tutorials.
So.
Back to what I was showing here. So now we've got this is.
Denna, this is my code running on the
Class vm.
What? What is this code doing? So 1st we have a little, if statement.
It's using C like syntax. That's what kind of Javascript is.
If you know. So it looks kind of see, Ish, but it's not.
Dinner. So there's this object here called orgs. Length is less than 2. Don't have arguments. So you'll notice we're referring to this thing called Denno, argues.
This is so. Deno is kind of this.
Object that represents everything that's specific to deno. So anything that's deno.
Is Javascript, is something that you cannot access in the browser. You're gonna have to do something different.
If you're doing it in the front end browser. So that's a nice way of distinguishing. Am I doing something that is.
Specific, to.
Demo on the server? Or is it something that I could use in my browser.
Kind of keeps it nice and clean.
So here.
This is something for doing things. The command line, it's saying like Denos. There, you know. Lesson 2. You have your parameters, gives you some errors, and then exits.
Console log is that you print something.
There's a console object that has a log.
I've signed some variables.
Search, term, file, name.
1, st 2. Arguments.
I have a variable called raw contents.
Called read, you know. Text, read text, file, sync.
And that reads the file into something.
And then the next it.
Splits it.
So when you read this, all the file is loaded into one.
Big string.
And the split turns it into an array of strings.
By using whether they have a new line as a thing.
And so then I just iterate through it.
Checked. And I this thing that searches for the search minute. If it's present.
You know, if it's greater than minus one. Then it was present in that line, and then.
I prompt those lines that match.
That's it.
So at this point in your career.
While you might not understand all the syntax, all the things, the basic idea of what this program is doing.
Shouldn't be that complicated.
For this one.
This. Yeah. Simple grep dot sync should be pretty easy.
Simple grep, dot async.
Will not be so easy.
That will be a little more complicated. I'm just gonna say I'm gonna talk about this Async stuff much more next term.
And this is why I'm saying I want to. You know, Progress. You're gonna.
Figure out things as we go through these tutorials.
But.
The Async one. We're gonna load my local copy.
So this is the Async version.
And go like this code is gonna look a little weird.
And the big thing that you'll notice is different. Now this is for each.
Here for.
It's doing things a little bit with this for each.
And then.
Then it has this weird thing of getting a promise here.
And then it does this a wait thing.
And then has this whole catch thing.
So this code.
This is weird.
Using a concept called promises.
Basic, a weight.
This is all stuff I will talk about next time.
But.
You have.
Play with the code, run with it, do experiments.
See, you know. Look up stuff.
See what you can figure out.
And we'll talk about this more.
On Tuesday. No? Oh.
Sorry.
Next week is asynchronous.
Meaning that I will be posting lectures.
By Tuesday and Thursday.
For you all to watch. I will not be available at those times, because.
This is just something that affects this week. The rest of the semester. I should be around.
But
This week. I have a conference to attend.
So I will be busy during lecture time. Now I will be recording a lecture off of Zoom.
And I will announce.
On teams when I will be doing that recording. So if you want to show up for when I'm doing the recording.
Feel free.
If you don't want to. That's fine, too.
So you will be. Have the opportunity to be an audience if you miss it.
It's perfectly fine, cause it's all gonna be recorded there.
You'd access.
So this is both Tuesday and Thursday.
Where I'm going is this conference called the new Security paradigms workshop.
And it'll be held in
Little town of Pennsylvania. So there! I'm actually not allowed. I have to actually sit there. It's us.
Like 30 people.
Is in the workshop, and.
Have to actually participate in all the sessions. I can't just go off and stuff so.
It's 1 of those things that actually, I have to attend.
I can't just like Oh, I'm gonna go away for a couple like Wait, you're missing my paper that.
That's not very nice.
So.
So that's my next week. But you'll have the but the lectures will be up, and I'll probably be posting them.
Over the next few days. I want to get them done before I leave town.
So I'll be messaging on teams. So keep an eye out for those announcements. I'll announce it to everyone.
Pennsylvania. I have a student delivering the paper, although
Pennsylvania's crazy. Yeah, this is a funny time actually, to think about going to Pennsylvania.
All the lines are.
I don't know if I'll see what I'll see in Pennsylvania. I suspect I'll see a lot of us campaign ads.
Anyway. We're out of time.
So we're so. The nice thing is, you will actually have much more information.
About these tutorials, and how to do things.
Much sooner than next Tuesday and Thursday. So that's a good news.
And that's, I think, helpful for this early stage, because there's.
Just a lot of stuff. So it all worked out with my schedule, I think, for you guys going through this. But
But don't get. I mean, there's a lot of stuff here at this. Initially, there's a bit of a learning curve. Don't get overwhelmed.
Just.
Do what you can go like. Oh, wow! This is really confusing. Ask questions.
And hopefully, things will start coming together.
So I'll.
That's the nature of the web. The web's a big, confusing mess, and you just gotta kind of.
Get in, get in there and try it out.
Pick it apart.
So I will stop sharing my screen.
And.
I'll say, Thank you very much, and I will be online on teams if you are not on teams, join teams.
And
I will see you asynchronously.
Have a good day.