CS 351 Fall 2019 Homework 6

Templates, Networking, and Static Sites

Dr. Greg M. Bernstein

Due Wednesday, October 16th, 2019 by 11:59PM, 50 points.

General Instructions

In this homework we will continue to use Templates, JSON and Node.js to help us automate the creation of the website for your fictitious tour company. However, we will further automate the process using a static site generator.

Create and Use a new Branch hw6

We will create a new git branch called hw6 for use in this assignment. The branch you create must exactly match the one I’ve given you for you to receive any credit for this homework.

Prior to creating this new branch make sure your working directory is “clean”, i.e., consistent with the last commit you did when you turned in homework 5. Follow the procedures in GitHub for Classroom Use to create the new branch, i.e., git checkout -b hw6. Review the section on submission for using push with a new branch.

Use README.md for Answers

You will modify the README.md file to contain the answers to this homework.


Question 1. (10 pts) Template concepts

(a) Templates and HTML

What are the three primary contexts (situations) where we use templates to help us generate HTML? (Hint: see course slides)

(b) Template Process

In the last homework we had at least one template file (base.njk), a bunch of content files, and JavaScript program (runIt.js). Explain the purpose of each of these files and why they were necessary in the production of the web site.

(c) Other JS Template Engines

Do a web search for “JavaScript template engines” pick any two that come up at random. Do a quick review. Then do a high level comparison to Nunjucks (what we’ve been using). Give the link to the engines followed by your opinions on the engine, I don’t want to read the “sales pitch” from the engines web site.

Question 2. (10 pts) Networking Concepts

(a) Difference between Ethernet and IP

When we look at the diagrams of the Ethernet and IP packets in the course slides we see a number of similarities. Both contain source and destination addresses, a data payload, and a field to indicate what higher layer protocol the data payload is carrying. Why do we use IP for the worldwide Internet and only use Ethernet in limited networks?

(b) Packet size limits

Packets have size limits. These usually stem from physical layer considerations. Most Ethernet packets have a “maximum transferable unit” (MTU) of around 1500 bytes. How can we transmit an image on our website with a size of 200KB with this limitation. How would you solve this problem from a high level perspective? What network layer would you think should have this functionality?

(c) Difference between UDP and TCP

UDP and TCP both provide source and destination port numbers for “multiplexing” purposes. From an end user perspective what extra functionality does TCP provide over UDP and why do we use TCP to carry web traffic?

(d) TCP ports

Why would we need both a source and destination ports in TCP? Illustrate this with an example. (Hint: think in terms of multiplexing and telling the difference between information flows.)

Question 3. (10 pts) Static Site Generation

Static Site Generator directory setup, installation, and initial testing. Note that my examples are with my clubProject your work is with your tourProject.

(a) Directory Structure

The first thing we need to do is slightly adjust our directory structure from that used in HW#5. In particular rename the output directory to build, the content directory to src, and the views directory to layouts take a screenshot. I get something like this:

Next move an CSS and image files out of the build directory and into the src. Take a screen shot of the contents of your src directory. I get something like this:

(b) Metalsmith Install

Install Metalsmith package with npm install metalsmith --save. Caution: make sure you run this command in your clubProject directory. I messed this up initially. Take a screen shot of your package.json file. I get something like this:

(c) Initial Test (file copy)

Update your old runIt.js file in your tourProject directory or come up with a new JavaScript file in that directory to test basic Metalsmith functionality. I used the following code from the course slides:

Run this file with Node.js and then take a screenshot of your build directory once you have things working. Does it match your src directory? I get:

(d) Our Own Plugin

Let’s see for ourselves that Metalsmith is doing more than a simple file copy. Create an informational plugin for Metalsmith like that done in the course slides. I put mine in a file called infoPlugin.js and used the following code from the slides:

Update your runIt.js (or equivalent) file to use this plugin (see course slides for how to do this). Run it and take a look. If you have really large image files this may produce too much output. Scroll to the output showing some content from one of your HTML files, verify that the file contents is really getting put into a JavaScript object. Take a screen shot. I get something like:

Question 4. (10 pts)

Plugin installation, Markdown processing, template usage

(a) Using Markdown

Take your existing HTML content files in the source folder and turn them into Markdown files, except the newsletter signup file. Remember you are allowed to have most common HTML elements in a Markdown file. Make sure to add some real Markdown too. Show part of one of your Markdown files here. You will generally need to add in a few extra line breaks when putting HTML in Markdown files. You may also need to remove the indentation on some of your HTML elements if the Markdown processor starts thinking this is code you want to display. You’ll “debug” your pages in the next step. I had something like this for my main page:

(b) Install and Use the Markdown Plugin

In the proper directory use the command npm install metalsmith-markdown --save. Update your runIt.js file to use the Markdown plugin. Look at the output files and fix any issues that arose with the mixture of HTML and Markdown.

(c) Install, Configure and use the Nunjucks Plugins

We will now need to install two plugins. Per the course slides use the commands

Now you need to set the options to the plugin:

You may also need to adjust your template, since Metalsmith puts the content of the file into a variable named content which may be different from what you had in your template. Get your pages to process successfully. Show the contents of your package.json here. I get something like:

Question 5. (10 pts)

Adding metadata and using it in your template.

(a) Title

Using YAML front matter add title metadata to each of your Markdown pages. Make sure that your template file uses this to set the <title> tag in the <head>. Check that all your pages render with the proper title.

(b) Deploy your website

Provide a link directly to the new website. Note all page links must work and all pages must render correctly to receive full credit for this portion of the assignment. You may enhance the styling of your site over that used in homework #5 in any way you like.