"Swift Enums and Structs" was retired on May 31, 2020. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Build a Simple Dynamic Site with Node.js!
You have completed Build a Simple Dynamic Site with Node.js!
Preview
In software development it's best to keep your code organized so that it's not duplicated. This is what as known as the _don't repeat yourself_ principle or DRY.
Further Reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
There's often a lot of repetition in
dynamic or even static websites.
0:04
A lots of the head tags contain the same
stuff and the footers are the same too.
0:09
We're going to use a principle called DRY,
or Don't Repeat Yourself.
0:14
There's no need to have this duplication
in multiple files.
0:18
We'll split up our HTML into unique parts
and
0:22
we'll add placeholders for dynamic
information.
0:25
This will form the templates for our
dynamic site.
0:28
Okay.
So
0:32
we've got our design files here in the
design folder.
0:32
We'll take a look at each one
individually.
0:36
And then see what common patterns we can
pull out.
0:38
And we'll extract them and put them into a
views folder.
0:42
So let's just quickly create that folder
now.
0:46
[BLANK_AUDIO]
0:48
And let's take a look at our error page.
0:53
And as you can see at the top here there's
some CSS embedded,
0:57
then there's the body, and then there's
the error.
1:01
Then there's this search form, and then
body in HTML.
1:05
In the index, we've got the same header
again
1:10
the image with the search, and this footer
here.
1:17
And with the profile, we've got all the
embedded CSS, as well.
1:23
And there's a new div called profile with
information in it and the bottom.
1:30
So the commonality between all three is
that they've got this same header
1:35
of html head.
1:40
All this stuff here, all the way up to the
top of the body.
1:44
So, we'll extract all of that into a
header.html.
1:49
So let's do New File.
1:56
Header.html.
1:59
And I just copied all that from the top of
the other page and pasted it in.
2:04
Save.
2:09
Now let's create the footer.
2:11
So New File, footer.html.
2:14
And in this one we want just the body and
the html.
2:22
And just ignore the red because that's
just saying that we don't have an opening
2:34
and closing, we'll be dynamically
generating this from these pages.
2:37
We're gonna put the header at the top and
the footer at the bottom,
2:41
so when it gets sent to the client it will
be valid html.
2:44
Now, let's look at some of the parts which
are common in both places.
2:49
If we look at the error, we've got this
image here, which is the search image.
2:54
And we've got this form here.
3:01
So, we could extract that out and call
that search,
3:04
because we already have that here on the
home page.
3:07
So, we can just copy all that, and
3:12
then create a new file called search.html.
3:16
[BLANK_AUDIO]
3:22
And make sure it's in the views folder.
3:26
And paste in the image.
3:30
So you can hover over the image to see
what it is.
3:33
And you can see that, that's the form and
it posts to the home route, which is cool.
3:36
And that's it.
3:42
Let's take a look at the error page again.
3:44
And we have this one error message here,
this div, so
3:48
we could extract that into its own HTML
file as well, so
3:51
let's call it error.html.
3:56
And we just paste that in.
4:04
And the only thing that we're missing now
is the profile page,
4:07
so if we look at the top of the profile
page,
4:10
we've got the header and then we've got
the profile information.
4:14
So let's just go from that div, the
profile div to the end of the profile div,
4:18
because the body and HTML are the footer.
4:23
And we can copy that.
4:26
Create a New File, profile.html.
4:28
Here's the n.
4:33
Save it.
4:37
And, I think that's it when we come to our
views, we've kept our views dry and cool.
4:39
That's it.
4:46
What we need to do now is we need to
generify or make generic the profile page.
4:47
Cuz at the moment its got an image of
Waldo, we want a picture of the username,
4:54
so we can just swap out this with anything
that we want.
4:59
We can put in maybe two squiggly brackets,
so that when we search
5:04
through this later on in our code, we can
just swap out with whatever we want.
5:10
So we can call this avatarUrl,
5:15
just like what we did in our router, if
you remember.
5:17
In the home not the home route,
5:23
the user route we had avatarurl, username
but it's in javacriptPoints.
5:26
So let's keep to that same standard that
we did before.
5:30
So in here we can put username.
5:35
[BLANK_AUDIO]
5:37
In here we can put badges.
5:42
[BLANK_AUDIO]
5:44
In here we can do javascriptPoints.
5:49
[BLANK_AUDIO]
5:52
And the error.
6:00
It can be also a number of reasons why
there's an error.
6:03
There could be a parsing error, there
could be a not found, etc.
6:05
We can change this with to whatever we
want.
6:09
So let's just do errorMessage.
6:12
Like that.
6:17
Cool.
So what we've done is,
6:19
we've gone through all of our designs.
6:21
We've found the common parts.
6:23
We've extracted them, into their own
separate,
6:26
distinct view files, which we're gonna
read in later on.
6:29
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up