Good morning, everyone.
So…
give you update where we are today in the class.
So assignment threes, exception until Saturday evening. I'll go over solutions for assignment three and present assignment four on Tuesday.
midterm solutions.
And…
So that's the plan for today. Frameworks for web dev and midterm solutions uh
questions before I start.
So let's stop sharing here.
switch over to switch over to
Good. So if you look now on the
on here all of you except if you
had accommodations to take the
midterm at a different time, you all should have
should have your midterm graded.
And so if you have any issues, please contact me.
After I talk about the midterm, we'll talk about how the interviews will work.
Oh.
So here are the solutions.
Let me just get rid of the sidebar. We don't really care.
I kept the instructions there just to
Just to have them there. They're not really important.
So question one was, so these are all about
I'm going to bring up actually i'm going to…
bring this up here and then bring up
bring up the code for…
db demo 2. So the DB Demo 2 is here
And midterms here.
How could you check db demo to listen on port 7000, change line 331?
Just, you know.
Change this.
Pretty simple.
then.
That's the funny question what async function handler and db demo2.
So this is all about the handler function right here.
What are our questions?
If at a high level.
At Iowa, what does the request object contain?
basically the incoming web request to be processed.
That's it. And then what top level methods and properties of requests are used in DB number two?
So…
two properties and one method request are used.
So there's rec method.
Rec URL.
And then REC form data.
So it's using the handler route guest route post
add record
And a method is used route handles. Remember, the method is
what the method of the incoming HTTP request.
then does handler have to be asynchronous?
Yes, because it's calling a weight on other asynchronous functions and you can only use a weight
inside of an asynchronous function.
If you have questions on why this is
the case, I'm happy to explain more on any of these answers. Right now, I'm just sort of
going through them relatively quickly in class and
If you understand it, great.
But this is all stuff that's going to be on the final exam.
in one form or another.
make sure you know the stuff.
What are two methods of dental object that we have used in class?
So here I went through and actually looked up where all the things are. You only had to give
But you look for the dento thing and what was a read text files thing read
Text file, exit, read file no
add signal listener. So these are all like kind of operate operating system things
basically correspond to
the little file operations
DenoServe starts the built-in
web server.
And then consider this code.
What permission does this need? Allow, read and allow write.
You don't need file system. You don't need any network permission because
That's Denno doing it rather than your application doing it.
Will this coat ever cause debtor to access the network?
now it has to download the SQLite module
Well, SCOTA will create a file.
It'll create the SQLite database.
is after this code is executed, can we be certain that DB is ready for queries? Why or why not?
You cannot be certain.
Because if the DS didn't exist, it'll be created with no data tables.
So what this question is basically asking is.
It's one thing to just do it open
But in order to make sure the database is ready for queries, you have to set it up.
And that's what this code does, because it creates the table
if it doesn't exist.
How can the push method be used to store a collection of JavaScript objects?
will elements of that collection be ordered or unordered? Explain with code snippets or references
to code covered in class.
This is just talking about
you know this is a DB demo, but if we go back to
form demo.
And you recall that you recall
we had this thing called state
then we, you know, everything that was added
We just added it using it.
you know we have the object here. We got it from the, and then we did a state dot push
So that's all this is.
this is talking about.
So you could have either explained it manually, you could have said that's what we didn't
you know in tutorial three
How can SQL insert be used to store a collection of JavaScript objects?
And this is just talking about how you know we use
So we go back to db demo.
this is how we add.
a record. We do an insert into table
with the values of this, this is our
is the record that actually came from
What was it?
We'll add record. So add record builds up an object
The object here gets past a template add
Well, I think I'll put it, but odd record db is takes DB table object
And then add record db is add record
what actually does the insertion.
So that's all I'm asking you.
to refer to here with this answer.
and then
What is the slice method used for
used for the mime types functions in DB Demo 2. So what are these things doing?
So if we're looking at mime
Here's monotone. So what is slice doing?
Slice is saying we want the last, if you just give slice and um
a number so this is a number
This first of all, says I want the index
of the last index of a period in there. So if you go through the string, it's starting
Now at the beginning of the string, we're really looking at the end of the string and going backwards.
until it sees a period.
And then we offset that index by one.
And then we want starting at that position there to the end of the string, we want a new string.
So this extracts these together the file extension.
And that's because we want that file extension because
it's used in here. And then we use to lower here because these are all lowercase, but file extensions could be uppercase or lowercase.
So let's make sure that we get, we don't require the file extension to be lowercase.
And then will a browser always follow the mime type of requested document
So again, this is just talking about
assignment one, we saw that even if you didn't have the correct mime type
return for a PDF document. Oftentimes browsers would do the right thing.
So this is where we can say it's a broadway follow the mind type of the requested document.
So notice how I've constructed these midterm
questions. The questions go directly back to concepts that are
in the assignments.
that's how it, or the tutorials indirectly or something but it's
It's all in the material you've seen in class. I don't just go off to random things.
Because I don't think that's very fair.
You know, I'm teaching you this thing well
test your what I teach.
In what JavaScript content is the syntax used, this dollar curly brace?
And where we use this, we've used this
In templates.
So here we've got the
Here's the curly here's the reference. It's inside of a back tick.
which in order to make an HTML template.
What's the process for adding a static HTML document to db demo 2?
When we changed our way, it's just put a file in.
the static subdirectory and you're done.
nothing else to do.
How would you add a new header x email which so this one I realized I messed up.
And I wrote the test. I should have been
I should have said, how do you add a new HTTP header?
Because there isn't an HTML document, a header portion but
I gave, I accepted answers
with both interpretations.
So the hv header
You could add an email as a property to the response object.
And then a handler add it.
added in. So what we're saying here is
you would just add
handler has all these
things for inserting things here. And so you would just add something here
to
deal with this in this portion.
Oh yeah, my cursor really doesn't track, does it?
What happens if I move it up here?
No.
Oh, that's really annoying.
Anyway, sorry my mouse cursor is old. I'll try highlighting things instead of that. That's just so dumb.
Anyway, so this
this is the
we'd have to handle it here.
Okay, so how can you get the
Oh, sorry. And then for the HTML header, you could just add an X email tag, the address contained with it to the header of the template.
Sorry, nope. Sorry, I think I missed what you're referring to there. I didn't.
see the message in time.
But then question 12
Oh, yeah. Yes, it is misaligned.
Can you explain the HTML header bit in more detail?
The HTML header, so if we look at
Oh.
there is um there is
this is technically the head
of it. And so you could consider that to be
the header of the document
And so you could just say.
We'll just add a
that is called the header or the head.
So it's not quite right.
you just add an X email tag. This is really something I was just trying to
figure out how to map that on because honestly, I really didn't think about that much.
But you could add an X email tag with the email address.
tell you what the header template add record
So I'm just saying when you go here
If you go to the template.
See, it has head.
So this is the header of the versus the
body and you could put in x dash email in here beside title or something.
And then have it take as an input.
the email into the template header.
as a second argument and then maybe test to say if there's nothing there you just
leave it blank as opposed to being undefined.
I was reaching, trying to realize that interpretation wouldn't be correct. I think
I think most of you did the HTTP header.
But…
Then in question 12, how could you change get slash ListenDB demo2 so it lists the ID of each record?
So a key part of this question.
that a lot of you missed.
was that um was that
If you look at the get all records.
It does a select
which includes the ID.
And it's put into there and it's pushed as part of the object. So there is an ID field
in the state objects
that are being passed. So you don't have to do anything to extract that data out there.
When we go to when we go to
If we go to this this list records
And it has state. The ID is already in there.
So all we have to do is just add a row here for the ID
And then change the title here to add an ID here.
So you have to add
add another line like right before
and then add another line just before row push.
That's all you had to do.
The data was all there. So part of this question was understanding what functionality was there in the code.
As opposed to saying, I'm going to go to the database and grab it.
And a lot of you
miss that.
Anyway, overall.
Let me see if I can, one second here.
Let's window.
So this is so this is
how people did.
So…
the median grade
is a B.
you know, that's a median median
the average is
What was the mode?
So median 75% mode.
Minimum, maximum average is 72.
So the average is brought a bit lower than the median grade.
So you see here it's see here
It's a bit of a bell curve-ish, although it's definitely
fatter on the right.
So people did prayer. So there's definitely some of you who are not doing great
But there's a lot of people
you know are doing well.
So this is what here. So there was some questions. So overall.
When I see this sort of grade distribution.
I'm pretty happy.
Because…
If the average is like…
us you know like a C or a D or something a lot i mean a lot
then I don't feel like I'm doing my job right because a lot of you are messing up but
You know, little B, most common grades like a a minus, you know, it's like
This is, you know.
we're doing okay. Now there's a question that is on the final. So the final exam will be basically the same kind of thing. It will cover however
the midterm, you know, basically assignments one through four, it'll be there. You will have additional time
But the…
difficulty of it.
should be comparable. I mean, of course, there's more material
But this course is cumulative, and so you'll need to make sure you
understand the assignments.
And if now one thing is
What?
So it'll work.
So here's a secret of my open book policy.
you shouldn't consider you shouldn't consider
the…
you shouldn't consider the test to be open book.
When you're doing it most of the time.
You should do it as if it's a closed book exam and should just
think and answer.
Everything is there. I'm referring to specific code. So look at that.
Maybe look a little bit the other class materials if you try to remember something like some of the ones like what methods did we use in class or something, but you just had to go to like
one or two things where you saw the dento stuff.
Well, actually, even any of the code
had Denno serve at least
and deno.read file. So you could have just looked at any of them
any of the web applications and
had two methods for that one.
So…
you shouldn't be doing searches
during the midterm.
And if you're not doing searches.
there's plenty of time to do this.
know what you're doing. If you're trying to figure it out, I mean, you can burn arbitrary amounts of time.
That's why you study in advance.
And the question is, is there going to be additional marks
So just big thing to know is
So if you do better on the final exam.
Your final exam grade will replace your midterm grade.
So you are not
If you do well in the final exam, that will bring your entire grade up. You're not completely screwed.
Typically, I find for most people, the final exam is
comparable
or a slight bit lower.
than the midterm grade. That just tends to be how that works.
But if you change your studying habits and really, you know, you didn't quite match the material, but then you mask the material for an exam.
You know, you can really bring your grade up.
And the final will be delivered in the same format as the midterm, yes.
uh…
Again, I regard the amount of time I gave you for the midterm and the fact that
you know the average was a b
A lot of people got A's and, you know, A pluses
It's like people did pretty well.
Definitely people who got yet. I don't think Max Rio was 95 but you know.
A lot of people got in the A's A pluses.
So during the final exam.
During the midterm, I did give, it was supposed to be originally like
105.
a little bit of extra, give a little bit of extra time afterwards.
I extended it by a little bit at the very end just because
there were people who I was actively talking to who couldn't get the format right.
And so literally that was just, that wasn't really an extension that was more like
Let's fix the format of your midterm exam so that we can rate it properly.
I'm hoping again, given the assignments in the last latter half that you have figured out.
how to get a properly formatted
submission at this point.
So, um.
So now I want to discuss interviews.
So I'm so i'm
So I'll be emailing ourselves.
I will let you all know when the emails are done.
It should be all done by next class.
You will be asked to do an interview. If you are asked to an interview
you got to do an interview.
If you also, if you
volunteer to do an interview
that's also permitted. And I'll explain why you might want to volunteer to do an interview.
So I'll post a spreadsheet on teams
for interview signups.
Oh.
So it'll…
So there'll be 15 minute slots for me.
Our discussions say take about 10 minutes. And what we're going to do
so you'll
look through you know you'll look at the questions you missed in your midterm. Maybe some of you got right, and we're just going to go
And really what this is, is this is the appeals process, like your midterm
If you want me to go through and you think that something is
not properly graded or something, sign up for an interview.
Just, you know, like the i only if an interview goes badly
All the way an interview goes badly is if I start thinking the answer you wrote
Your answers don't correspond to what you actually know.
And so I was like, wait, is this actually what you know? Like, where'd this come from? So if I suspect that somehow you have been dishonest.
then, you know.
that I'll potentially be getting the dean involved.
But I don't expect that to happen.
I have had to report people
to the dean in past years
for academic integrity violations
But I haven't had to do it through interviews.
Which has made me happy about it.
So, you know.
there's always a first time. I'm hoping there isn't because it's a pain in the ass for me, but I…
I feel like I give you all a lot of latitude.
for doing this material. I put a lot of trust in you all to put a lot of
To be honest. And so when
when you violate my trust
I get kind of pissed.
So, um.
So yeah.
So will we go over all of them?
I generally allocate about 10 minutes. I mean, if you missed a few questions, we'll go through all of them. If you missed a lot of questions, we probably won't go over all of them.
you know.
I think this is supposed to be about a 10-minute conversation.
But…
if necessary that we have more to do, I'll schedule another time
to go through more things.
I'm hoping before I do the interviews to be completely caught up on grading because I know there's a few of you
We have some unmarked things that for various reasons didn't get
completely marked. Some of it's due to like
Either you turn it in late or you turn it in badly formatted and so it didn't get properly distributed to the TAs or something.
So I'm the one who's cleaning up those messes.
And I'll be doing that.
I'll be doing that soon. So I first want to finish making sure we have all the content for you to be studying.
And then I can go through and clean up things
at the end of the semester.
So, um.
which is assignments well it's whatever assignments
I mean, it's the assignments that are graded at that time. Right now, I'm going to be giving out assignment three
grading on grading on
I would give assignment three grading
by the end of this weekend.
And so the TAs will need
probably close to the end of classes.
to get those done. So my plan is to give you grades for assignment three
by the last day of classes, December 5th.
Which is what assignment four is due and then they get assignment four grades to you
before the final exam.
Which is on the 12th.
So…
Yeah, just just uh you know just
the sequencing of things.
I'm happy to talk about. But if you have questions about things i mean
I'm happy to talk about it. Again, if you just want to talk to me about stuff.
and you haven't gotten your answer from a tier or something, I respond to messages on teams
And I'm happy to jump on a
on a Zoom call with you to discuss things.
So if you want to interview, you can sign up voluntary, but otherwise there's a chance you uh
there's a chance you'll get selected as well. Exactly.
Some
In general, if you get an email
I want to do as many interviews as I can.
I enjoy doing these as a chance for me to actually talk to you and see how you're doing in the class and
give you give you direct feedback.
So in the past, I've done all the interviews. This class is so large. I think the TAs
may want to help me with some but may want to help me with some
And so I've still figured exactly how that's going to work.
I'll be doing most of the interviews.
But yes, please sign up for an interview
If you want to have your midterm evaluated, if you look through solutions, you go like, wait.
I understood this.
Or, you know, I think my answer is right.
I don't understand what's going on. I understand the other answer
name correct.
Yes, definitely.
Mistakes definitely happen.
But hopefully most of the mistakes went in your favor
We'll see.
Other questions?
Well, I'll announce when the you'll see the spreadsheet in the slot. So when the slots are gone, then the interview slots are gone.
So I'll be announcing that soon.
I need to, you know, so I got the assignment
So I got the midterm grading out
I need to make sure the last tutorial gets out.
And then your last assignment gets out.
And then I'll make sure I do the interviews. So that's kind of my sequencing. I'm hoping to get
both the tutorial, last tutorial and the assignment done next day or so, and then I'll focus my energy on interviews.
Because then I won't have any material I have to create until
The, um.
And, you know, until the final exam.
Okay, sorry, just to make sure anyone asked you an interview, we'll schedule a time for the interview
And it won't be a surprise. There's no surprise interviews. You're just signing up for a time to come in.
How much was a midterm worth? I don't know.
Don't pay attention to those calculations of bright space. They're basically not meaningful. In terms of how much
It counts.
The course outline.
here is the so this is the standard grade
distribution here. 20% for tutorial participation, 16% for assignments.
Some central lecture quizzes, 24% for the midterm, 30%
for the final exam.
Oh.
So 24%.
ended up being marked out of 36 points, so I had to
But that nicely means every
point on the exam counts for me.
Is that right?
I'm not going to try doing math in my head right now.
So I say, it's just going to be a spreadsheet and I'm probably going to be doing interviews
for most of the rest of the term.
That's supposed to be. So it's going to be all slots. I'm going to be fitting them in wherever I can in my schedule to talk to you all.
Because if you think about it, I do four interviews. If I could do at most four interviews an hour.
If I want to interview 20 of you, that's like.
you know, five, you know.
4 times 5 is 20.
I may want to do some more. So it's a good number of hours for me to talk to you all.
And so that will be, but I'll be spreading them out.
If you…
If your feedback does not list questions
Do not list some questions.
Oh, yeah, yeah, yeah.
I think the feedback lines are sorted um
are sorted alphabetically.
not numerically.
that's probably something I should fix.
Yeah, check your feedback because it's probably like
maybe 10 through 12, then 1 through 9, but…
They all should be in there.
Again, that's a stupid alphabetic versus numeric sorting thing.
Um…
you know uh
I think it's actually the sort actually I think it's using is the sort on the command line.
Where I just do q star dot text
as input. And it just does it in that order. So I probably should um
be a little more careful with that when I generate the
the feedback files.
Any other…
Questions?
So what I want to do now then.
is talk about
the format's the final is the same as a midterm
Exactly the same.
I spent all this time training you how to do these things. Why would I change things up?
And just also
The final exam is now scheduled.
December 12th at 9 a.m.
was not my choice. That's what the um
you know, the exam schedulers did.
So it'll start at 9 a.m.
on December 12th.
It'll be on Brightspace.
I'll be on Zoom to take questions.
if you have accommodations
to have your exams at different time periods
I will be just doing the normal Brightspace thing of giving the different times and if you have
extra time at this thing i will just
program the additional time into Brightspace.
And at least a few days before I should have that
finalized, I'll post a note to team saying
please check for your accommodations make sure
You can do that but that's
You know, that's a few weeks away.
Oh.
Is that time just for the synchronous section?
I assume the time is for…
everyone, well, let's
Can someone check the exam schedule does
Because I said formally scheduled exam for 2406A and B.
Both sections have the same time. Okay, good.
Yeah, I was thinking that was for everyone.
everyone has a scheduled time.
If you need, for some reason you need to have any issues with that time.
preferably you get that dealt with
formally
But if you have issues with that, let me know. But I'm basically going to say whatever time and the amount of time the exam services say, that's what you'll get through Brightspace.
I do this manually because I do my own weird thing but
I'm happy to accommodate these things.
It's pretty easy to do these sort of accommodations.
with the format I have.
Yep.
It'll be two and a half hours.
Again, the reason I'm giving you two and a half hours is because I don't want you to feel
time stressed. I mean, it's going to be about
They'll be longer than the midterm, but it's not going to be
it's not going to be double the length.
Well, maybe it will be.
I haven't made it yet. But again, you…
If you are time stressed on the midterm.
You're going to be time stressed on the final.
It's all about how you use your time. If you're sitting there going online and searching for every answer.
In general, so in general
This is one thing I don't think I've actually stated this. Hold on.
Share my Emax window real quick.
So general…
General heuristic.
If the ratio of time you spend on things
is if you're not spending most of your time actually thinking and coding, doing experiments.
you know if you're not spending most of your time on that
And you're spending most of your time searching online
doing searches or consulting AI or doing nothing else
you're probably doing it wrong.
You're trying to look for an answer for someone else to give you
and to put into it as opposed to you figuring out the answer.
Everything in this course is structured towards you building up your own mental model and not relying on the
mental models of others.
And if you're running out of time doing things, spend a lot of time doing the assignments, a lot of times it's like.
you're probably spending too much time looking for someone else to tell you the answer rather than you figuring out the answer.
So…
Watch yourself when you do this.
Are there mock finals? There's no mock final.
It's going to be exactly the same format. It's going to be based on the
assignments.
So you'll know exactly what material it's on. You've now seen the midterms. You know the style of questions I ask.
Yeah.
So people in this class and most not all of them found that the time we had for the midterm was almost not sufficient.
Personal Bot was typing spi typed fairly fast.
Um…
So one thing to remember
with the midterm, I give relatively verbose answers in the solutions.
Because I want it to be very clear and I see the solutions
has.
as being part of the material I give you to learn from.
your answers for most of the questions
On that midterm could have been very short.
there was no need for very long answers on the midterm.
So let's see.
what are those so
I don't check you on grammar. I don't do things so like
There you go.
How can this explain with code snippets or reference the code class. So say, this question you could have gotten full marks for
collection objects you could have just said
We saw this in tutorial 4 this line four
what elements of the collection are ordered or unordered
you know say ordered or unordered because based on
be ordered by this. I mean, this may be
This is one of the more verbose one, but it's most like a sentence.
there.
reference ordered by all these things like my answers are probably twice as long
as what's needed.
you can have very concise answers.
You will have more slack time
on the
on the final exam.
But not a lot more.
and
you're supposed to be under time pressure.
That's part of the point of this.
This is not a time for you to be figuring out a lot of things. You're supposed to be
drawing upon the experience you've had up to the class in order to answer these things.
So that's why there is
it is going to be a time pressure you've got to like
get the answers out and show that you know it.
that's part of the design and partially because i
I mean, it is to help a little bit with cheating if you spend your time all looking up answers, you won't have enough time to answer all these.
all of them.
But there's a lot of material to cover as well.
Yeah, exactly. This is on the assignments i expect you to
Explain your reasoning.
with how you do these things, like explain the whole process by which you do things
And that's why I say all explanations should be concise and to the point. It's only no more than a few sentences, sometimes much less.
So…
you're not you can't explain the whole pro you're not supposed to give them the whole explanation like you do on assignments. This is an exam.
It's time limited. You want to get the answer and show that you know it and move on.
And…
You'll notice that my answers that are longer are ones that are providing
more detail
than is needed by the question.
So I don't need to know how you know these things.
That's what we do on the assignments. On the exam, you're just
dumping what you have.
If a simple answer doesn't convey your ideas.
Or answer…
you're probably thinking of the question wrong.
I mean, these questions are not meant to be
hugely ambiguous.
they're actually supposed to be pretty straightforward.
The later questions that are worth more points
I mean, this one I gave two basic answers for 11.
But even this is like, this is just giving a very quickly like what code you change.
So these are not philosophical questions. They should be pretty direct
you should be able to answer. And actually, that's actually
That's actually a measure of how well you know the material.
If you know something really well, you should be able to give a very
tight, concise answer.
If you don't.
then you're trying to like go here, go here and figure things out.
and it's um
Yeah, noted.
The exam, again, is, again, it's not supposed to be super simple but
Listen, the average was a B.
you all did pretty well
If you look at the
how I've structured this class.
The way I've structured it with this grading scheme
This 20% for tutorial participation. So one thing to know about tutorials also when I calculate your final grade.
is that will not bring down your grade.
That 20% was…
to be easy marks.
Because it's a participation mark.
Supposed to show that you made an effort on it
And if you've done that consistently through it, you can get 20%
20% of your grade is 100% that boosts your mark. So if you're diligent.
You get this.
Some of you aren't, so don't do that but then you aren't
it falls on these other things. Again, these little quizzes
These quizzes you should have mostly gotten perfect or near perfect scores. You should basically have an A.
For this 10%.
tutorial visit there and then you know where we really mark you more harshly is
the assignments, the midterm and the final.
And with the final exam, you know, potentially replacing the midterm so there's
There's all these things that like you get a
on the carefully graded things
with you know with
potentially 30% of your mark on these more easy things
you know you're getting into the a territory
So there's this built-in things that if you're diligent, it raise up your mark. But I also do it so if you don't do those more
consistently things that you just show that you know stuff, I can also give you a good grade.
No, no, no. The interview is just going, the interview is not me asking you new questions. The interview is just
Looking at what you put on
you know the midterm
maybe assignments if you want to, but mainly the midterm
looking at your answer
you know particularly the ones you got wrong and just sort of understanding
what went wrong for the ones you got wrong, for the ones maybe some ones you got right, how did you come up with the answer
We're just sort of having a discussion.
And as part of that discussion.
oftentimes i find oftentimes
Not always, but significant fraction of the time, I'll find questions like, oh.
Because maybe you could get a little more points there.
And I'll increase your grade.
Okay.
So good.
Now, what I want to talk about
this thing a little different.
There we go. It was fresh.dento.dev. That's why I wasn't sure about what the extension was.
I want to talk about fresh.
And fresh as a…
as a simple, you know, as a framework
And when you do web development.
This is kind of the standard way people do web dev today on the server side.
They use frameworks.
And the idea of the frameworks is it provides a scaffolding
And integrations, scaffolding for putting your code there and integrations with standard
third-party code that people use in order to provide base level functionality so you don't have to reinvent the wheel.
It's a very nice idea. And so remember doing things like managing sessions or managing
security or doing routing in particular, integrating with a CSS library and stuff like that.
That's all.
provided through these things.
I haven't been using, I have used frameworks in the past. In the past, I used Express.
with Node.
I have not used any frameworks.
In this class up to this point.
Over the next couple lectures, I think we're going to do more stuff.
with frameworks because so you can kind of see the advantages and disadvantages
of using these.
And the kind of functionality and
As you will see.
they do a lot of cool things.
But oh my God, do they add complexity.
I mean, you thought my code was complicated. Once you see this stuff, you're going to go like.
Oh, really?
And so first let me go to a terminal
I've got a little terminal here i'm going to
Let's switch over to that. And I'm just going to do what they say to get started.
Okay.
So here we are.
I'm going to now, so they say.
do this.
I'm going to call this fresh
brush demo.
Do you want to use us up your new fresh product? Do you want to use a styling library? Yes.
Let's use Tailwind.
Tailwind is a standard CSS library that people use.
Well, I use VS Code. Sure.
We're going to use VS Cut, although I'm not going to, but I'll show you what it does.
And there it does. So the manifest has been generated for five routes and one islands project initiated.
I think your project ranking is seedy fresh
Demo. Run demo task start to start a product. Control C to stop.
Stock.
So there you go there.
So this is, I want to show this is how you run it there i have a
And then if we go into
this is what we get.
And look at this.
This is the base thing.
the components
There's there, look at islands.
There's stuff there, LS Routes. There's stuff there, a lot of static.
There's stuff there.
there's a, you know, we've got, you know.
One, two, three, four directories.
We've got all these top level files and all these files
Yes, we're going to see, yes, this is code is TypeScript.
And so I'm going to be showing that.
So let's, and then if you do an ls-LA, you'll see that it also added in a .vs code directory.
And the .vs.
you see there's very, very set up for
VS Code.
So…
What is all this? Well, let's first
First, let me just show you how you run this.
So I'm just going to run this locally right now.
Over here.
Police.
I certainly want to say no here.
And so now, oh, demo.
So now if you say no, you don't get a
a VS Code directory.
Let's start looking at these files here.
Actually, first let me show you, I want to show you it running.
So you say
So all you do is you demo
So I have it running here.
So here is so here is
the out running.
So we have a counter
We have a little starting thing. We have some things we have some nice
The fonts and stuff look kind of pretty. You've got this nice soap.
This is our hello world.
app.
It is nicely themed, I will say.
Not particularly complicated, though.
you should be able to mean other than the styling
you should have no problem
doing something kind of like this.
But now let's look at the code.
Yes.
So first, let's start off with
dev.ts. So this is all TypeScript.
No.
I was trying to do some stuff for getting the
understand TypeScript. My Emacs is a little messed up for that
So this is basically making as a shell script so it can
So you can just run this as a binary and it will
run it and then has these imports
And then this A weight.
And then, you know, dollar fresh
seems to be defined already.
And these things so
And then you go to mainland.
So dev is what you're supposed to run
directly if you're in development mode.
But main.ts is the entry point
for if you're running it.
not as…
So this is all as
This is all JavaScript.
There's nothing really TypeScript about this yet.
This is all comments above.
What file is this, the one before main?
This one, dev.ts
This is supposed to set up
import dev from fresh dev, so config. This is all about
setting up a setting up a
a development version of the server. So typically when you run
code in development mode in
production mode. In development mode, you want to have more instrumentation. You want to get be able to debug it better. You want to have more verbose
error messages and stuff and so
You normally configure the server to run in a different way. So the way one convention for doing this
is you have a way of running the app
as
when you're running the app in developer mode versus running the app in
Yeah, in main mode.
And then they've also got this
So here, if I just type, no, actually.
So here we got bash here. So now if i type here
So how do I run this? So this demo task start.
This is a way Denno actually has of just
automatically you can configure Deno
And you can configure tasks in it.
And…
it just does this.
Now, you might notice I got these errors here.
These errors are referring to
What is it?
You see this thing that says node model directory true
Since I'm running Datto 2.0 locally, I'm running Datto 146
in the VM on my local machine, I'm running Denno 2.
This is a little compatibility thing. It still works, but it gives you these errors well these
Warnings?
So we do this.
And now we run it again.
Oh, oh.
put it in quotes.
much better.
So now it starts and we don't have any errors.
And we have our server running.
So running the server in debug mode, exactly.
So why is the dollar fresh?
So let's go to the um
So when you
Is this doing string interpolation?
So what this is, this is a variable here.
And I think that's actually incorporating
I think it's incorporating a variable there that fresh is import fresh from dollar search dev.ts.
import config from here.
So I think the trick is to find the
Where's that task defined?
So this is part of the thing you have to do.
when you have these sort of frameworks.
there's all this stuff in here.
So here we have deno.json. This is a set of definitions.
So lock, false. So tasks.
So if we say deno
start, say, a dental
tasks start, what it's actually doing is doing a demo run
dash capital A dash watch this
dev.ts.
That's what it's doing.
If you type Denno task update.
It'll do this.
I think the dash capital A gives it all permissions.
So it doesn't ask you about like to access one file or another.
And then the imports
This is where it defines all the variables.
So what's dollar fresh
it's this.
What's pre-opt? What's this? What's Tailwind? It's this.
So…
So this is all defining the imports
So why is that imports mean is that when you go to dev.ts
We're doing an import.
When we say dollar fresh there.
that is now defined as something to be substituted in.
So instead of saying
So when we say dollar fresh
this is going to be replaced
with this. And that's the real import line.
Which is more in line of what we've seen previously.
But again, this is what i'm
showing you
This gets messy.
very fast.
So there's a lot of stuff you have to learn. None of it is using concepts
that you haven't seen.
But it's all kind of in there. The only thing you have to know is that Denno loads
deno.json.
on start if it sees it in the current directory.
If it sees there, it uses this and gets state from this.
And this is where we get our task thing. This is where we get our imports.
The node module directory, it's like, why do I need the node module directory?
You see this node modules thing?
This is downloaded code. So if you play with node.js
node modules is a very big thing.
by default
Deto doesn't play with this, but Denno has backwards compatibility, can support node modules.
But you don't actually have to specify anything of managing this.
Denno takes care of all this for you. All you have to do is have the proper imports and it will manage the node module directory. That's one thing you have to do with
node, you'd normally have to run a separate command npm
to set up the node modules. And then you do that with Denno, you don't have to worry about that.
But if you go in this, you'll see it's loaded in all this other code.
And these are, you know, it's going, you know, and again, this is all the stuff that Denno is automatic, nor Deno does this automatic loading of stuff.
So I put in Denno and these are the versions
Denno downloaded these modules and then made them available here.
So what are node modules?
Let's…
This is important stuff to understand.
So.
So the question here is, is Deto JSON imports change automatically when we run Denno run
dash a dash r in our dev environment.
When we…
So when we ran this command.
The…
you know?
So when we…
So just to understand, when we ran this dental run
a fresh theory. It asks those questions. It downloaded some code from
Ask us some questions and then created an empty project
Well, not an empty product, basically a hello world project
And that's this. I didn't create these files.
directly. I just ran that thing that
this dental run, you know.
you know from that website and it just made all this for me
it's all there.
Just understand how big this is.
This is 42 megabytes.
This is hello world.
This is 42 megabytes.
Node modules is most of that code.
If you go into node
all right, these are all SIM links.
Wait, what?
I'll write the demo.
So this is in .deno in the node module. So it's downloaded
all these different packages.
all these different modules.
Some of which are Denno modules, some of which are more classic node modules.
it can support both of them seamlessly.
Look at this.
This is modern
web development.
I'm not saying that these things are not…
useful.
I'm not saying they don't.
they can't make things up but
Look at all this code.
I mean, this is a lot.
And…
This isn't like, you know, you think you have a runtime like Denno, and of course it has lots of functionality doing things but
It has well-defined APIs that are relatively stable and
you can kind of counter that being debugged and that shouldn't normally break in your operations but
you hope all this other code is also debugged and works but you know
Anyway, we'll be going through this stuff more.
and succeeding lectures to understand how these
frameworks work.
and how you work with them and how you get them
to the level of functionality
that we achieved already in this course
using these frameworks. And you'll see that it does provide some nice features.
But it does so at the cost of a lot of bloat.
And really, unless you're willing to use all of those
features.
it may not be worthwhile.
Anyway, we're out of time. I will stop here and I will see you all on Tuesday.
Good luck finishing up assignment three.
And keep working on Tutorial 8.
And tutorial 9 will come out.
Very soon.
Take care.