codeveloper-ysf
diff --git a/‎week2/MAKEME.md
Lines changed: 7 additions & 8 deletions b/‎week2/MAKEME.md
Lines changed: 7 additions & 8 deletions
diff --git a/‎week2/README.md
Lines changed: 3 additions & 5 deletions b/‎week2/README.md
Lines changed: 3 additions & 5 deletions
diff --git a/‎week3/LESSONPLAN.md
Lines changed: 46 additions & 23 deletions b/‎week3/LESSONPLAN.md
Lines changed: 46 additions & 23 deletions
@@ -205,25 +205,24 @@ This week's homework we will expand on that, in 2 parts:
 
 Since we've already loaded in our package `express-handlebars`, we can get started immediately. If at any point you're stuck, try reading the [documentation](https://github.com/ericf/express-handlebars) or ask a question in Slack!
 
-1. We first have to make Express aware of the templating engine. We do this by using the `engine()` and `set()` functions. Paste in the following (and figure out what it does):
+1. We first have to make Express aware of the templating engine. We do this by using the `engine()` and `set()` functions. Paste in the following (and figure out what it does, by checking the [documentation](https://github.com/express-handlebars/express-handlebars)):
 
 ```js
 app.set('view engine', 'handlebars');
-app.engine('handlebars', exphbs({ defaultLayout: 'main' }));
+app.engine('handlebars', exphbs({ defaultLayout: false }));
 ```
 
-2. In the root of the project folder, create a new folder called `views`. Inside of this create another folder called `layouts`.
-3. Create 2 `.handlebars` files: inside layouts create `main.handlebars` and outside of the folder `index.handlebars`
-4. The content of `main.handlebars` should be the complete HTML document. Write a basic structure, including a `<head>` and `<body>`. As a final part, inside the `<body>` paste in the following: `{{ body }}` (this injects the HTML from `index.handlebars)` into the body)
-5. The content of the `index.handlebars` should be a `<form>`. Make sure it has an `<input>` field, which should be of `type="text"` and have a `name="cityName"`. Also add a submit button. The form should be submitted to our `POST` request endpoint, which is `/weather`. Let the form know about this endpoint by passing it as a value to the `action` property: `action="/weather"`
-6. Test out your work! Make sure it renders a form in your browser
+2. In the root of the project folder, create a new folder called `views`.
+3. Create 1 `.handlebars` file inside the `views` folder, named `index.handlebars`
+4. The content of `main.handlebars` should be a regular, complete HTML document. Write a basic structure, including a `<head>` and `<body>`. The latter should include a `<form>`. Make sure it has an `<input>` field, which should be of `type="text"` and have a `name="cityName"`. Also add a submit button. The form should be submitted to our `POST` request endpoint, which is `/weather`. Let the form know about this endpoint by passing it as a value to the `action` property: `action="/weather"`
+5. Test out your work! Make sure it renders a form in your browser
 
 ### 4.2 The Backend
 
 In this part we'll add another endpoint, with a `POST` method.
 
 1. First let's modify our `/` route. Instead of sending a string, send a template using the `render()` function. Pass in the name of the template, which is `index`
-2. To make Express aware of what data type the incoming data is (which is JSON). We do that using the `urlencoded()` method on the express object. Using the `use()` function from `app`, pass in the `urlencoded()` from `express`. Give the `urlencoded()` function the following argument: `{ extended: true }`
+2. To make Express aware of what data type the incoming data is (which is JSON). We do that using the `json()` method on the Express object. Using the `use()` function from `app`, pass in the `json()` from `express`.
 3. Create a `POST` route, that has as an endpoint: `/weather`
 4. Inside the callback function of the route, get access to the `cityName` and put it inside a variable. Hint: use the `body` object from the request to find it.
 5. Send the the form input back as a response to the client
 
@@ -31,7 +31,7 @@ REST also enables clients to take actions on those resources. We call these acti
 The most important features of REST are:
 
 - An application has a `frontend` (client) and a `backend` (server). This is called [separation of concerns](https://medium.com/machine-words/separation-of-concerns-1d735b703a60): each section has its specific job to do. The frontend deals with presenting data in a user friendly way, the backend deals with all the logic and data manipulation
-- The server is `stateless`, which means that it doesn't store any data about a client session. Simply put, when you refresh the page you won't keep the data you requested before (unless it's saved in the browser). Whenever a client sends a request to the server, each request from the client to server must contain all of the information necessary to understand the request, and cannot take advantage of any stored context on the server. This makes it possible to handle requests from millions of users.
+- The server is `stateless`, which means that it doesn't store any data about a client session. Simply put, when you refresh the page you won't keep the data you requested before (unless it's saved in the browser or in a file on the server). Whenever a client sends a request to the server, each request from the client to server must contain all of the information necessary to understand the request, and cannot take advantage of any stored context on the server. This makes it possible to handle requests from millions of users.
 - Server responses can be temporarily stored on the client (a browser) using a process called `caching`: storing files like images or webpages in the browser to load the next time you enter a website (instead of getting them from the server, which generally takes longer to do). Certain user data can also be saved through the browser's `localStorage` or `cookies`
 - Client-server communication is done through `Hypertext Transfer Protocol` (more on that later), which serves as the style (the how) of communication.
 
@@ -120,7 +120,7 @@ For more information check out the following resources:
 
 # 6. Postman
 
-When creating APIs it is important to test if they work as intended. The easiest way to do this is send a request and check the APIs response.
+When creating APIs it is important to test if they work as intended. The easiest way to do this is to send a request and check the API's response.
 
 Normally, you would send a request using the browser or the command line. But there's a tool we can use that's made especially for these testing purposes: [Postman](https://www.youtube.com/watch?v=i1jU-kivApg)
 
@@ -132,9 +132,7 @@ As you can see in the image below, when you enter a request in Postman and click
 
 ![postman illustration](https://s3.amazonaws.com/postman-static-getpostman-com/postman-docs/anatomy-of-a-request.png)
 
-Check [this guide](https://learning.getpostman.com/docs/postman/launching_postman/sending_the_first_request/#sending-a-request) to learn how to send a request with Postman.
-
-Alternatively, [watch this video guide](https://www.youtube.com/embed/YKalL1rVDOE?list=PLM-7VG-sgbtBsenu0CM-UF3NZj3hQFs7E).
+Watch this [video guide](https://www.youtube.com/embed/YKalL1rVDOE?list=PLM-7VG-sgbtBsenu0CM-UF3NZj3hQFs7E) to learn about how to start sending your first requests with Postman!
 
 ## Finished?
 
 
@@ -14,47 +14,68 @@ FIRST HALF (12:00 - 13:30)
 
 ### Middleware
 
-**Explain**
+**Explanation**
+
+Middleware is a general term for software that serves to "glue together" separate, often complex and already existing, programs.
+
+In Express, middleware are functions that execute during the lifecycle of a request to the Express server.
+
+Each middleware has access to the HTTP request and response for each route (or path) it’s attached to.
+
+![middleware](https://d33wubrfki0l68.cloudfront.net/a22bb45df146d43b57f2f6c90182d19e7394cd96/d6e10/assets-jekyll/blog/express-middleware-examples/middleware-30b3b30ad54e21d8281719042860f3edd9fb1f40f93150233a08165d908f4631.png)
+
+Additionally, middleware can either terminate the HTTP request or pass it on to another middleware function using the `next()` function (more on that soon). This “chaining” of middleware allows you to compartmentalize your code and create reusable middleware.
+
+**Example**
+
+Try out the following code and use Postman to make the request. Show the student the importance of `express.json()` to parse the request and makes the form data available in the `req.body`.
 
+```js
+const express = require('express');
+const app = express();
 
-* [Middleware](https://medium.com/@jamischarles/what-is-middleware-a-simple-explanation-bb22d6b41d01)
-* [Middleware II](https://www.youtube.com/watch?v=9HOem0amlyg)| 
+app.use(express.json());
+app.post('/test', (req, res) => res.json(req.body));
 
-https://d33wubrfki0l68.cloudfront.net/a22bb45df146d43b57f2f6c90182d19e7394cd96/d6e10/assets-jekyll/blog/express-middleware-examples/middleware-30b3b30ad54e21d8281719042860f3edd9fb1f40f93150233a08165d908f4631.png
+const PORT = process.env.PORT || 3000;
+app.listen(PORT, () => {
+  console.log(`Server listening on port ${PORT}`);
+});
+```
 
-Express middleware are functions that execute during the lifecycle of a request to the Express server. Each middleware has access to the HTTP request and response for each route (or path) it’s attached to. In fact, Express itself is compromised wholly of middleware functions. Additionally, middleware can either terminate the HTTP request or pass it on to another middleware function using next (more on that soon). This “chaining” of middleware allows you to compartmentalize your code and create reusable middleware.
+**Exercise**
 
-**Examples**  
+**Essence**
 
-* express.json() - parses the body of request with type application/json and makes it available as a javascript object
-* body-parser    - parses the body of request with type form-data and makes it available as javascript object
+Middleware allows the web server to modify the request gets in order to make it better interpretable within the route. For example,
 
 ### Consuming web APIs
 
-**Explain**
+**Explanation**
 
-Traditional server architecture one client one server that does anything: 
+Traditional server architecture one client one server that does anything:
 https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/27f810ea-2722-455a-9a0d-bb5b54c28393/api-based-platforms-api-diagram.png
 
 https://cdn.darknet.org.uk/wp-content/uploads/2018/08/HTTP-Security-Considerations-An-Introduction-To-HTTP-Basics.png
 
-In reality the server does not do everything on its own. Instead it uses services from other servers 
+In reality the server does not do everything on its own. Instead it uses services from other servers
 https://www.notion.so/gajduk/Hosting-b4025782198b494ba6bd053953c8933b#f8f31bc004ab46199639d914daad79fe
 
 Why do we need server-server communication?
-* reuse - we do not want to write new code if someone has already done that in the past and we can just use it
-* separation-of-concerns - especially in big organizations like netflix etc
 
-**Examples**
+- reuse - we do not want to write new code if someone has already done that in the past and we can just use it
+- separation-of-concerns - especially in big organizations like netflix etc
 
-* Location services - https://api.postcode.nl/documentation/json-rest/v1/Address/viewByPostcode
-* Process payments (Stripe)  - https://stripe.com/docs/api/invoices
+**Example**
+
+- Location services - https://api.postcode.nl/documentation/json-rest/v1/Address/viewByPostcode
+- Process payments (Stripe) - https://stripe.com/docs/api/invoices
 
 **Exercise**
 
 1. Get the image from https://randomfox.ca/floof/ and redirect to it
 
-2. Instead of redirecting show in inside an html
+2. Instead of redirecting show it inside HTML
 
 This is prelude to part 2, mention how it is ugly that the HTML and javascript are all mixed up
 
@@ -80,12 +101,14 @@ How to use them in Node - https://www.npmjs.com/package/handlebars
 
 **Exercise**
 
-- Use handlebars to build a simple UI for reading books from the Library app
-   - get the books with axios/fetch
-   - EXTRA: buttons to create, edit, delete book
-   
+- Use Handlebars to build a simple UI for reading books from the Library app
+  - get the books with axios/fetch
+  - EXTRA: buttons to create, edit, delete book
+
 # !!!IMPORTANT!!!
 
-Ask students to prepare for database course by installing mySQL.
+Before class ends, ask the students to prepare for the next module ([Databases](http://github.com/hackyourfuture/databases)) course by installing MySQL:
 
-   
+- On Windows: download this [MySQL Community Server](https://dev.mysql.com/downloads/mysql/)
+- On Linux: download this [MySQL Community Server](https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql-server_8.0.19-1ubuntu19.10_amd64.deb-bundle.tar)
+- On MacOS: download this [MySQL Community Server](https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql-8.0.19-macos10.15-x86_64.dmg)