User Experience

• Does the app have a coherent purpose?
• When network requests are being made, does the user see a progress indicator?
• Is the layout clean and consistent, with strong alignment?
• Are the colors and font aesthetically pleasing?
• Is the app easy to navigate?
• Is it clear what can be clicked on and what clicking will do?

Front-end

• Is global data appropriately managed with Redux?
• Is component-specific data managed via state?
• Does data owned by a parent and shared with children arrive via props?
• Is the interface cleanly decomposed into components?
• Are hooks used to selectively update the UI?
• Are actions used to update the Redux store?
• Is state changed only in immutable ways, by way of useState setters and the reducer?
• Does the DOM change dynamically as the user interacts with the app?

Back-end

• Does the database have a clean schema?
• Are the endpoints named meaningfully?
• Do the HTTP methods (GET, POST, PATCH, DELETE) reflect the operating being performed?
• Is JSON appropriately used for large data?
• Are parameters used for identifiers and the receiving of simple data?

Networking

• Does the web service support CORS?
• Is the client served on port 443?
• Does port 80 redirect to port 443?
• Is a firewall enabled so that the web service can only be accessed through Nginx?
• Is a process manager used to keep the service running?

Technical Soundness

• Is the source code readable, with a consistent style and formatting and meaningful variable names?
• Is there a steady flow of commits to Git?
• Is the JavaScript console free of errors and warnings?

We have arrived at the last big idea of the semester: managing global state. To deal with complex and shared data in our React apps, we will push the data into an object managed by Redux. With this new manage of managing the data, we’ll have to find new ways of changing state and triggering re-rendering of our components.

Here’s your TODO list:

• Watch this video, in which we create a Redux app with a global store.
• Watch this video, in which we use actions to populate the store.
• Watch this video, in which we add actions for fetching memories.
• Watch this video, in which we add actions for inserting new memories.
• Watch this video, in which we add the UI for editing memories.
• Watch this video, in which we add actions for editing memories.
• Watch this video, in which we add support for deleting memories.
• You are encouraged to post a reply in the lecture 19 thread with one of the following:
  • A question regarding Redux. This might be a question you really don’t know the answer to or one that you do know the answer to and are putting forward as a challenge to your peers.
  • An answer to a previously posted question or challenge.

  Your participation in this thread is not graded. I include it so that we can maintain some real human interaction.

See you next time.

We look at the mechanics of web services last time. Today we build up a non-toy web service for a time capsule application. Behind our web service will be a MySQL database, and our service will endpoints for the four common CRUD operations for operating on our database’s records: creating, rreading, updating, and deleting.

Here’s your TODO list:

• Install MySQL on your droplet according to these instructions from Digital Ocean. Disable remote logins if prompted. We won’t need remote access to our database.
• Watch this video, in which we set up our app’s MySQL database.
• Watch this video, in which we set up an Express-based web service that connects to our database.
• Watch this video, in which we add endpoints to our web service to interface with the four common database operations.
• Install Nginx with sudo apt install nginx.
• Watch this video, in which we add a process manager and embed our service inside Nginx. To get your SSL certificate for your service follow the next steps.
• Add a new domain name for your service using DuckDNS or some other domain name provider. In the video, I used today-api.twodee.org.
• Get a new certificate from Let’s Encrypt for your new domain name with this command: sudo certbot certonly --dry-run --apache -d NEW-DOMAIN. Replace NEW-DOMAIN with your new domain name. Once that reports success, run the command again without --dry-run. We include --dry-run initially because Let’s Encrypt blocks you if you make too many failing requests in an hour. We include --apache because our Nginx server is not set up to serve out the files that Let’s Encrypt expects to verify that you own the server.
• You are encouraged to post a reply in the lecture 18 thread with one of the following:
  • A question regarding web services or databases. This might be a question you really don’t know the answer to or one that you do know the answer to and are putting forward as a challenge to your peers.
  • An answer to a previously posted question or challenge.

  Your participation in this thread is not graded. I include it so that we can maintain some real human interaction.

See you next time.

Many websites pull down data from web services, just as we did with the News API. But how are these web services made exactly? That’s what we explore in this lecture. We’ll use Express to create our own web service that responds to HTTP requests and serves back its data through JSON. We’ll also see more advanced uses of the fetch function and overcome an issue of multi-server resource sharing.

Here’s your TODO list:

• Watch this video, in which we start making a RESTful web service.
• Watch this video, in which we tackle the CORS problem.
• Watch this video, in which we add more endpoints to our service.
• You are encouraged to post a reply in the lecture 17 thread with one of the following:
  • A question regarding Express or web services. This might be a question you really don’t know the answer to or one that you do know the answer to and are putting forward as a challenge to your peers.
  • An answer to a previously posted question or challenge.

  Your participation in this thread is not graded. I include it so that we can maintain some real human interaction.

See you next time.

Expectations

Your app must meet the following expectations:

1. You will create an app that has a coherent purpose. Its content must be original and satisfy a personal creative itch.
2. You may work with a partner or as an individual.
3. Your app will have both a back-end data store and web service and a front-end client.
4. You will create a front-end client using React’s functional components and hooks. (Do not use classes for making components.)
5. The content of your client must change dynamically as the user interacts with it. (Sites with static content really should not be written with React.)
6. You will manage state in your client using Redux.
7. You will access your web service from your client using your own calls to fetch and not through any helper library.
8. Your client must be free from all warnings and errors.
9. Your front-end client must be stored in a Git repository that you have shared with your instructor. On GitHub, GitLab, and Bitbucket, share with the user twodee.
10. Your front-end client must be deployed through a custom domain name through HTTPS over port 443. You can serve it with Apache much like you serve out project 1 and your blog. But do not include the Listen 443 line in your virtual host configuration file. This line is already included in another configuration file, and including it twice will result in an error.
11. If visitors access your client through port 80, they must be redirected automatically to port 443.
12. Your app will store its data long-term in a database—preferably MySQL, but you may petition for something else.
13. You will indicate asynchronous activity to the user via the GUI. For example, while a fetch executes, you will show a progress wheel.
14. You will provide an Express-based web service for interacting with the database. The service must only be directly accessible from your droplet, and not from outside. Use ufw to block all ports but the ones you need for SSH and your allowed web servers.
15. Your web service must be started using a process manager like pm2 so that it stays running.
16. You will create an Nginx server that allows global, encrypted access to your web service.
17. Your back-end must be stored in a separate Git repository that you have shared with your instructor. On GitHub, GitLab, and Bitbucket, share with the user twodee.

Report

By the due date, share in a direct message on Slack a brief but itemized breakdown of how you believe you have met the expectations listed above.

The first theme of this course has been learning the foundational technologies of the web: HTML, CSS, and JavaScript. Today we officially reach the second theme: designing modern web apps with React. Systems like React ease the burden of designing interactive sites with dynamic content.

Here’s your TODO list:

• Install Node.js, an ecosystem for developing standalone JavaScript applications. I have no experience installing or using this on Windows. Please ask questions on Slack if you run into trouble.
• Watch this video, in which we learn the story behind React.
• Watch this video, in which we introduce our color palette app.
• Watch this video, in which we create a component and discuss props.
• Watch this video, in which we employ many component instances.
• Watch this video, in which we add support for deleting colors.
• Watch this video, in which we add support for adding colors.
• Watch this video, in which we deploy the app to a web server.
• You are encouraged to post a reply in the lecture 16 thread with one of the following:
  • A question regarding React or the palette application. This might be a question you really don’t know the answer to or one that you do know the answer to and are putting forward as a challenge to your peers.
  • An answer to a previously posted question or challenge.

  Your participation in this thread is not graded. I include it so that we can maintain some real human interaction.

See you next time.

Today we hit up higher-order functions, a feature of modern languages that will shorten up your code considerably. Once you know a few of these higher-order functions, you may never write loops again. Why? Because so much of our looping algorithms follow certain patterns, we can generalize those patterns into reusable functions. For the parts of the algorithms that differ, we take in functions from the callers are parameters.

We’ll be using these higher-order functions frequently when we build React apps, starting next week.

Here’s your TODO list:

• Watch this video, in which we discuss the map function pattern.
• Watch this video, in which we discuss the filter function pattern.
• Watch this video, in which we discuss the reduce function pattern.
• You are encouraged to post a reply in the lecture 15 thread with one of the following:
  • A question regarding map, filter, reduce, or higher-order functions in general. This might be a question you really don’t know the answer to or one that you do know the answer to and are putting forward as a challenge to your peers.
  • An answer to a previously posted question or challenge.

  Your participation in this thread is not graded. I include it so that we can maintain some real human interaction.

See you next time.

Last time we examined objects and how to pass them around using JSON. This time, we apply these ideas by consuming a web service: News API. We’ll use JavaScript’s builtin fetch function to grab and send JSON data.

We started looking at this before spring breeeaaak happened, but I’ve re-implemented the example we started for the sake of completeness.

Here’s your TODO list:

• Watch this video, in which we get a list of sources from News API.
• Watch this video, in which we retrieve headlines for the chosen source.
• As an optional knowledge boost, investigate these ideas further by reading. Consult The Modern JavaScript Tutorial’s sections on promises and fetch.
• You are encouraged to post a reply in the lecture 14 thread with one of the following:
  • A question regarding promises, fetch, or web services. This might be a question you really don’t know the answer to or one that you do know the answer to and are putting forward as a challenge to your peers.
  • An answer to a previously posted question or challenge.

  Your participation in this thread is not graded. I include it so that we can maintain some real human interaction.

See you next time.

There’s a pandemic going on right now, and it has turned the world upside down. We are no longer able to meet in person. But we’ll try to finish out this semester through the web. How apt.

Our format for the rest of this constrained is constrained by a few things. First, we are not all in the same time zone. Second, even if we were in the same time zone, some of you don’t have control over your schedule. You may be caring for family, sharing the internet with others with less flexible schedules, or nursing orphaned lambs on the family farm. Third, not all of us have great internet connections in our bunkers. I am one of those people. Cable doesn’t reach our house, nor DSL. We don’t own a television, so a satellite doesn’t seem worth it. Our only real option is our mobile data plan, but our connection speeds do not really support streaming video. For all of these reasons, synchronous virtual lectures are simply not an option.

Instead I will be sharing pre-recorded videos that you can watch at your convenience. These will be available on YouTube—and perhaps elsewhere. I’ve chosen YouTube because it does a reasonably good job at generating transcriptions of my words, and it allows you to increase the playback speed. However, some of you are in a country where YouTube is blocked. If you are unable to access YouTube, please let me know. I will find an alternative way to share these videos with you.

So, without further ado, here’s your TODO list our first virtual lecture, in which we formally investigate objects in JavaScript:

• Watch this video introducing objects in JavaScript. Feel free to fiddle with the Playback Speed setting.
• Watch this video on importing objects via JSON.
• Watch this video on exporting objects via JSON.
• Watch this video on some advanced tricks with objects.
• As an optional knowledge boost, investigate objects further by reading. Consult MDN, The Modern JavaScript Tutorial, chapter 4 of Eloquent JavaScript, or other intellectually stimulating resources.
• On #general in our Slack workspace, post a reply in the lecture 13 thread with one of the following:
  • A question regarding objects or JSON. This might be a question you really don’t know the answer to or one that you do know the answer to and are putting forward as a challenge to your peers.
  • An answer to a previously posted question or challenge.

  Your participation in this thread is not graded.

When the semester officially resumes next week, I’ll shared a revised grading scale. Project 1 will be due April 12.

See you next time.

Last time we started looking at how JavaScript brings actions into normally sedate HTML. We used it to dynamically generate an HTML structure. Today we look at using JavaScript to deal with form input. We’ll also use it to get content from external sources. In particular, we’ll generate a web application for consuming the latest news headlines.

Event Handling

It’s not often that we generate HTML directly like we did in the preceding example. More often we write code to handle events that are triggered by the user interacting with our page.

Suppose we have a form for getting a 7-digit number for the user. We might create this HTML structure:

<!DOCTYPE html>
<html>
<head>
  <title>...</title>
</head>
<body>
  <label for="number-input">Enter a 7-digit number:</label>
  <input id="number-input" type="text">
  <input id="submit-button" type="button" value="Submit">
</body>
</html>

Let’s sanitize the user data. We’ll disable the submit button and only enable it when we get exactly seven digits using this JavaScript:

const submitButton = document.getElementById('submit-button');
const numberInput = document.getElementById('number-input');

submitButton.disabled = true;

numberInput.addEventListener('input', () => {
  if (numberInput.value.match(/^\d{7}$/)) {
    submitButton.disabled = false;
  } else {
    submitButton.disabled = true;
  }
});

Let’s include this script in the HTML file with this tag in head:

<head>
  <script src="form.js"></script>
</head>

Our script fails. That’s because the elements the script grabs handles to do not exist at the time the script is loaded. We either have to place the script tag at the bottom of the page, or we must add the defer attribute to schedule it to be executed after the HTML is parsed. The defer attribute feels like better organization. We use it like this:

<head>
  <script defer src="form.js"></script>
</head>

This works nicely, but be warned. Suppose we were going to send this data up to a server somewhere and maybe throw it into a database. Sanitizing the user input only on the client is not enough. Because the browser lets us enter the JavaScript sandbox, users can programmatically modify the page. We can execute our own code to free up the submit button. You must always verify that the data is valid on the server.

Activity

With exactly one neighbor, claim your task on Crowdsource. (Everyone will be assigned task 1.) Then recreate the following calculator:

When the operand inputs change, automatically update the sum. Build your solution off of this starter code:

<!DOCTYPE html>
<html>
<head>
  <title>...</title>
  <style>

body {
  font-family: sans-serif;
}

  </style>
</head>
<body>

  <!-- Add your HTML and JavaScript here. -->

</body>
</html>

If you are stuck, I can offer a couple of hints.

Submit your solution on Crowdsource.

After we get this working, as a class we’ll add a select menu to allow the user to pick the arithmetic operation.

Fetching Data

It’s often the case that an application must get its data from an external resource—perhaps a resource that is far away. When that resource is exposed through HTTP, we call it a web service. We can bring down data from a web service through JavaScript’s fetch function.

When we call fetch, the browser does not wait around until the result comes in. Rather, it returns immediately and the browser starts executing the next instruction. If we have code that we want to run once we have the data, we have to register that code as a callback. The mechanism that JavaScript provides to accomplish this asynchronicity is called a promise. The fetch function returns a promise of some future data, and we register our callback function with the then method, like so:

const fetchPromise = fetch(url);
fetchPromise.then(response => ...);

If our web service gives us back data in JSON form, we need to parse the JSON into an object. The response object has a json that returns not the object, but another promise because parsing might be slow. So, to actually act on the data, we need something like this:

const fetchPromise = fetch(url);
const jsonPromise = fetchPromise.then(response => response.json);
jsonPromise.then(data => {
  // ...
});

Normally we see this code chained together with no intermediate variables.

fetch(url).
  then(response => response.json).
  then(data => {
    // ...
  });

News API

Let’s create a page that consumes the News API web service. We’ll create a select menu to choose a news source, and then we’ll show the 20 most recent headlines for that source. We start with this core HTML:

<select id="sources-picker"></select>
<ul id="headlines-list"></ul>

JavaScript will be responsible for populating these elements. We load up a script with this element in head:

<script defer src="news.js"></script>

The News API requires that we get an API key to request data. We definitely should not publicly release this API key, as others could get a hold of it and do nefarious things under our name. But for today we will be irresponsible and just include it in the JavaScript. Let’s also grab handles to our two elements.

const API_KEY = '...';

const sourcesPicker = document.getElementById('sources-picker');
const headlinesList = document.getElementById('headlines-list');

The News API documentation tells us about the sources endpoint. We call fetch on the URL and provide the language parameter to get all sources that publish in English. We also need to send along our key using a custom HTTP header. The code gets a bit ugly, so we’ll hide it in a function.

function loadSources() {
  fetch('http://newsapi.org/v2/sources?language=en', {
    headers: {
      'X-Api-Key': API_KEY,
    },
  }).
    then(response => response.json()).
    then(data => {
      // ...
    });
}

In our callback, we want to turn each source into an option and append it to our select menu. Instead of crafting the literal HTML, we’ll create an element directly using the API that the browser provides.

if (data.status === 'ok') {
  for (let source of data.sources) {
    const option = document.createElement('option');
    option.value = source.id;
    option.textContent = source.name;
    sourcesPicker.appendChild(option);
  }
}

When we call loadSources, our menu fills up.

Now let’s grab articles for the selected source. News API provides another endpoint for this. We retrieve the headline data much like we retrieve the source data.

function loadHeadlines(source) {
  fetch(`http://newsapi.org/v2/everything?language=en&sources=${source}&pageSize=20`, {
    headers: {
      'X-Api-Key': API_KEY,
    },
  }).
    then(response => response.json()).
    then(data => {
      // ...
    });
}

For our callback, we want to create an a element wrapped up in an li element.

if (data.status === 'ok') {
  for (let article of data.articles) {
    const link = document.createElement('a');
    link.href = article.url;
    link.textContent = article.title;
    link.target = '_blank';

    const li = document.createElement('li');
    li.appendChild(link);

    headlinesList.appendChild(li);
  }
}

At the top-level of our script (our “main”), we must initialize the sources and handle change events.

loadSources();
sourcesPicker.addEventListener('change', () => {
  loadHeadlines(sourcesPicker.value);
});

We can now load headlines! But after selecting our second headline, we see that the first articles we grabbed are still around. We need to clear out the list before we append the new articles. Let’s add a helper method for this.

function clearChildren(parent) {
  while (parent.children.length > 0) {
    parent.removeChild(parent.lastChild);
  }
}

Then we call this method at the beginning of our callback.

clearChildren(headlinesList);

We now have a web app for consuming the news. But it’s probably not good for our mental health to actually use it.

TODO

Here’s your TODO list for next time:

• If you are feeling ill, stay home. But tell me so ahead of time in a direct message on Slack.

See you next time.

P.S. It’s time for a haiku!

The news has been grim
Disable your ad blocker
The smiles will return

P.P.S. Here’s the code we wrote together in class…