 Resources from Jamund Ferguson in 2021

Learn how to build a simple REST API to store notes using the latest built-in node features including native ES modules, the fs/promises API, async/await, the nullish coalescing operator, and destructuring. No compilers, no build steps, pure code.

This collection of lessons is great for beginners to Express as long as they are familiar with JavaScript and the HTTP protocol. Those more familiar with node and express will appreciate a fast-paced, modern take on using these popular tools and will likely benefit most from the lessons on input validation, models (which emphasizes a lot of new syntax), using fs/promises to serialize a `Map`, and accessing asynchronous data with `async/await`.

Pre-requisites:

- [Install curl](https://curl.haxx.se/)
- [Install node 14](http://nodejs.org/)
- Be familiar with the terminal

View the source for this project in the [project's github repo](https://github.com/xjamundx/egghead-express).

**Notes**:

- I'm not very pedantic about REST and basically just mean an API over HTTP
- [Express 5](https://expressjs.com/en/guide/migrating-5.html) is still in alpha (and has been for over two years), but most of these lessons apply to Express 4 as long you use something like [express-async-errors](https://www.npmjs.com/package/express-async-errors) to add support for `async` routes and middleware

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

Build a REST API with Express 5 and node 14

Redux was [announced back in 2015](https://www.youtube.com/watch?v=xsSnOQynTHs) and immediately took off as the de-facto state management solution for React. As it gained widespread traction, it also became clear that in many cases it was brought into applications prematurely. The community in some ways started to push back on its use and recommended the built-in `setState` method as an alternative. Several other state libraries also started popping up around this time. Finally, as React Hooks were announced with a built-in `useReducer` method it appeared that Redux's time was up. However, these claims have proven to be premature. Redux is not dead and instead remains React's most popular state management library`*`.

Recent updates to redux exposing a [hooks-based API](https://react-redux.js.org/api/hooks) address some of its most serious drawbacks and make it even more appealing. This course will show you how to apply redux to a modern react hooks application. I hope you leave this course with a continued appreciation for React Hooks and renewed enthusiasm for Redux.

Thanks for watching 📺.

---

**Notes**

- This content has been inspired by the incredible work done by [Mark Erikson](https://twitter.com/acemarke) on modernizing redux and the fantastic [Redux Style Guide](https://redux.js.org/style-guide/style-guide).

- `*` Comparing [redux](https://www.npmjs.com/package/redux) with [mobx](https://www.npmjs.com/package/mobx),  [xstate](https://www.npmjs.com/package/xstate) and [flux](https://www.npmjs.com/package/flux)

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Redux with React Hooks

[Lodash](https://lodash.com/docs/) is a collection of utilities that have become a staple of modern web development. This collection will show you how to re-create its most common methods using simple JavaScript techniques available in any modern web browser. In addition to re-building tools like `_.merge`, `_.get` and `_.debounce` from scratch you will also learn how to replace them completely in some cases with modern syntax such as [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining), [nullish coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) and [Object.fromEntries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries).

This collection should interest the following groups:
- Those who want to better understand common JavaScript patterns
- Engineers who want to reduce their dependence on Lodash (for performance or other reasons)
- Candidates preparing for a technical job interview (where it is common to be asked how to implement some of these methods).

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Recreating Popular JavaScript Utility Methods from Lodash

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

`git reflog` helps developers recover from their mistakes. The reflog keeps track of any changes or commits to each branch since cloning a repository. It's frequently used to keep track of changes made locally that are sometimes wiped out when pulling in remote changes.

This lesson demonstrates how to use git reflog to restore git commits and branches that have been lost. We will clone a repo, make some changes with commits and branches, remove all of those changes, and then use data from the reflog to restore them.

Restore Commits with git reflog

This lesson demonstrates how to use the git rebase command to reword a commit message deep in your git history.

Reword a Commit with Git Rebase

In this lesson we'll build a basic web server in 2 minutes using Express 5 and node 14's native ES module support. 

We'll start by creating a new project using `npm init` and then add `"type": "module"` to our package.json file to opt-in to ES Module support. From there we'll create an index.js file where we create an instance of the express module and add a single `GET` route that sends the response `"hello"`. Finally we listen on port 3000 and confirm that our route responds to requests using both curl and a web browser.

Pre-requisites:

- Install [node 14](http://nodejs.org/)
- Make sure you have [curl installed](https://curl.haxx.se/)
- Can use a terminal

---

**Express 5** Express 5 offers very few changes from version 4. The main one I'm interested in is built-in support for async/await, which greatly simplifies how we handle network and file system I/O calls in our web application. Read more at [Migrating to Express 5](https://expressjs.com/en/guide/migrating-5.html)

**async/await** Read more about these recent JavaScript language additions in [Getting Started with async/await](https://www.freecodecamp.org/news/getting-started-with-async-await-b66385983875/) on FreeCodeCamp.

Serve a Basic Route with Express 5 and node 14

This lesson demonstrates using the [morgan](https://github.com/expressjs/morgan) library to add basic logging to an express 5 application. We also log when the app starts up by passing a second argument to the `app.listen()` method. 

**morgan**

The [morgan logger](https://github.com/expressjs/morgan) has a whole list of [pre-defined logging formats](https://github.com/expressjs/morgan#predefined-formats) that you can use listed on their website. You can also build your own custom format. The format we chose for this lesson `dev` is a short-hand for the following `:method :url :status :response-time ms - :res[content-length]`.

**Middleware**

Middleware are tiny programs that inspect and manipulate incoming requests in an express application. They can run before, after, or even in-between your other routes. They are commonly used for logging, authentication, and form processing.

A thorough list of common middleware can be found on the express website here:
http://expressjs.com/en/resources/middleware.html

Middleware are typically added to your application with `app.use()`, but can also be added added to individual routes using `app.get("/", middleware, routeHandler)`. While not recommended, multiple middleware can be added that way: `app.get("/", middleware1, middleware2, routeHandler)`

While not covered in this lesson creating a middleware is easy and they have a lot in common with route handlers. Here is a simple logging middleware:

```
app.use(function(res, res, next) {
    console.log(req.path);
    next();
});
```


Add Basic Logging to an Express 5 App with morgan

In this lesson you'll learn how to add a custom 404 handler to your express app. You'll also learn how to define a general error handler that is called when any of your routes or middleware have errors.

Express provides an [excellent reference on error handling in express](https://expressjs.com/en/guide/error-handling.html) on the [Express website](https://expressjs.com/en/guide/error-handling.html).


**404 Handler**

A 404 error handler is basically a route handler defined after all of the others without a path associated with it. These handlers naturally become a catchall for any request that isn't handled by existing routes. You define it like this:

```
app.use(function(req, res) {
     res.status(404).send("Not Found");
});
```

Read more in [the express API doc](https://expressjs.com/en/5x/api.html#res.status).


**Error Handler**

Express allows you to register a general error handler that catches any errors thrown in the course of running your application* including both routes and middlewares. It's common to think of this as your `500` error handler, which is the HTTP status code for `Internal Server Error`. Think of this as something going wrong that is not the users fault.

To register the error handler call `app.use` with a function taking these 4 arguments: `err`, `req`, `res`, `next` as in this short example:

```
app.use(function(err, req, res, next) {
    console.error(err.stack); // log the error to the STDERR
    res.send(err.message); // send back a friendly message to the client
})
```

**Note:** express error handlers can't usually catch errors thrown in an async callback function such as a `setTimeout` call or `process.nextTick` function. Errors thrown in these situations will typically crash your server.

Add Basic Error Handling to an Express 5 App

This lesson will cover how to add & organize routes in an express app.

We'll create an instance of `express.Router()` in its own `routes/index.js` file and use `app.use(routes)` to include those in our main application. The route handlers will live in their own file `routes/notes.js`.

The lesson will cover CRUD routes (create, read, update, delete) and go over some of the HTTP verbs supported by the express router.

We will be stubbing the following routes needed to power a note-taking application:

```
GET /notes
GET /notes/:id
POST /notes
POST /notes/:id
DELETE /notes/:id
```

The routes won't themselves do anything but return sample data. This approach is often helpful when building a new API, instead of building out the full functionality, first define the shape of the URLs and structure of the responses. Mock data can be used to simulate the response and ensure the routes are going to serve the needs of your application without having to build it all.

---

[More on the verbs supported by HTTP here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods)
[More on the express routes capabilities here](http://expressjs.com/en/guide/routing.html)





Add and Organize New Routes in an Express App

In this lesson we'll cover how to access route params (`/users/:id`) and then use `express.urlencoded()` to give express the ability to process [URL encoded form data](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST) that we'll need to add and update notes in our application. The POST body will be made available on `req.body`. A mention is also made about how to read query parameters from `req.query`.

---

**express.urlencoded()**

The `extended` option we pass into the `urlencoded` method adds the following capabilities according to the docs:

> This option allows to choose between parsing the URL-encoded data with the querystring library (when false)
> or the [qs library](https://github.com/ljharb/qs) (when true). The “extended” syntax allows for rich objects and arrays to be encoded into the URL-encoded format, allowing for a JSON-like experience with URL-encoded


**body-parser**

In earlier versions of express it was encouraged to use the `body-parser` middleware package which is published separately from express. The common functionality is now built-in however as `express.urlencoded()` and `express.json()`.

---

More info:

- https://expressjs.com/en/api.html#req.params
- https://expressjs.com/en/api.html#req.query
- https://github.com/expressjs/body-parser


Access Form Data and URL Parameters with Express

Whenever you're designing an API that receives input, there's a chance people are going to use it maliciously or incorrectly.

This lesson will look at some common problems that can occur when we assume input exists that doesn't and how to pro-actively handle it by sending status code `400 Bad Request` with custom response messages. A popular library for input validation is [Joi](https://github.com/hapijs/joi).

A few notes:

- Always assume query params and post bodies are `undefined`
- Set defaults or check that they exist
- When required values aren't found send a `400` status code and appropriate message
- When you use `urlencoded({ extended: true })` with express it tries to parse numbers and booleans into those primitives instead of strings, so be ready for that.
- Always validate each value that is sent as input into your API, don't assume it's safe to use it without checking (see below for an example).

---

One simple strategy for validating input is to put the correct values in an Array or Set:

```
const { sort = "desc" } = req.query;
const validSorts = new Set(["desc", "asc"]);
if (!validSorts.has(sort)) {
    return res.status(400).send("Invalid Sort Param");
}
```

---

One of the worst things you can do in your express app is forget to `return` when you call `res.send()`. It leads to this dreaded `Error: Can't set headers after they are sent to the client` error which can be very hard to trace.


---

Another important concept is to never ever ever blindly pass in the results of `req.query` or `req.body` to some other object. It's potentially a massive security vulnerability. Imagine a scenario like this:

** DO THIS **
```
const { squareFootage, numRooms} = req.body
const house = new House({ squareFootage, numRooms})
```

**DO NOT DO THIS**
```
const body = req.body // someone could pass in price: 0
const house = new House(body) // free house for me!!
```



Validating Input to an Express API

We'll create a `new Map()` data structure to store Notes that are passed into our API in memory. With that in place we'll create a model called `Note.js` that has the responsibility for saving and manipulating those notes and saving them back into our data store. After we hook up the our routes to call into our Note model and confirm that it all works.

To power our API we use some modern JavaScript syntax:

- [nullish coalescing operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)
- [Map.prototype.values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/values)
- [array and object spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
- [Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)




Create a Model to Manage Data for an Express API

We have an API that allows us to return a list of notes at `/notes`. We want to add the ability to sort that list by passing in the `sort` query param, which we read off of `req.query`. Once we know the expected sort order we pass a function to `Array.prototype.sort` that compares two notes' `lastEdited` values to decide which item comes first.

A quick refresher about how [custom Array sort functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) work in JavaScript. Sort takes a function with two params (which are items in the array). If the function returns true, the `a` item will be placed higher in the sorted array. If the function returns `false`, the `b` item will be placed higher.

View the source for this project on the [projects github repo](https://github.com/xjamundx/egghead-express/).

Sort and Return an Array of Objects with a Query Param in an Express API

We create a class called `MapStore` that serializes the [JavaScript Map object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) to JSON and stores that on the filesystem using node 14's [fs/promises API](https://nodejs.org/api/fs.html#fs_fs_promises_api).

In future lessons we'll use this class to persist our in-memory notes.


View the source for [MapStore.js](https://github.com/xjamundx/egghead-express/blob/master/lib/mapstore.js) on the [projects github repo](https://github.com/xjamundx/egghead-express/).

Use the fs/promises node API to Serialize a Map to the Filesystem

This lesson will rely on the built-in support for async functions found in Express 5 to demonstrate how an API can easily work with data asynchronously. By the end of the lesson our API will have the ability to save its notes to disk as they're added and read them when the server starts up again.

First we'll update our Note model to persist data to the filesystem using the `MapStore` class created in a previous lesson. Then we'll access those updated methods on the Note model using the `await` keyword in our routes. We'll also briefly discuss the importance of catching errors that come from promises and async functions.

**Resources**

- To learn more about `async/await` read [Getting started with async/await](https://www.freecodecamp.org/news/getting-started-with-async-await-b66385983875/).
- You can learn a great deal more about error handling in express in their guide to [error handling in express](http://expressjs.com/en/guide/error-handling.html).

Access Asynchronous Data in an Express API with async/await

This lesson will demonstrate how to recreate a simplified version of the popular [lodash.merge](https://lodash.com/docs/4.17.15#merge) method from scratch.

First we'll create a test file with two objects that we want to merge together and demonstrate the output after running them through lodash.merge , then we'll go about creating our own version of the function.

Our initial version will support only one `source` object to merge in, and will support only the subset of JavaScript syntax supported by the JSON spec, including the following types:
- `boolean`, `number`, `string`
- object literal
- array

After getting basic types to merge we'll show off two methods for merging arrays, either using [concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) or recursively going through the children and merging them.

Finally we'll build our own `isObject` function to check for object literals and recursively apply our `mergeJSON` function to any object literals in our `source` object.

And last we'll add support for multiple `source` objects to be merged in using a `for...of` loop.


**Note**

The `mergeJSON` method we create approximates the `lodash.merge` functionality but does not seek to replace it. It may be useful for some use cases, but primarily it's meant to be a tool for understanding how to merge objects with recursion.

Build lodash.merge from Scratch

This lesson will demonstrate how to replace common uses of [lodash.get](https://lodash.com/docs/4.17.15#get) with [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) syntax.

`_.get` is by far my favorite lodash method. I've been on so many projects where the results of a network call was a large and often unreliable blob of data. After countless attempts to reign in errors caused by trying to access non-existent properties I've come to rely on _.get as a simple & safe way to retrieve data from those objects. However, as is always the case in web development, times are changing and the tools we need to safely access properties of complex objects are now being built into the platform. [Optional chaining syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) gives us the power of _.get without several of the tradeoffs. It doesn't require an extra library to use, it plays nicely with TypeScript and it can be used when calling methods as well as when accessing properties.

This lesson covers 4 common use cases of `lodash.get` and converts them to using optional chaining syntax.

1. Nested Object and Array Access
2. String and Variable Property Access
3. Calling a Method on an Object that may Not Exist
4. Providing a Default Value when a Property does Not Exist 

---

 ### Resources

- [Nullish coalescing operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)

Replace lodash.get with Optional Chaining Syntax

This lesson will demonstrate how to recreate a simplified version of the popular [lodash.get](https://lodash.com/docs/4.17.15#get) method from scratch.

Our function takes 3 parameters `obj`, `string` and `defaultValue`.

The primary technique we discuss is splitting the `string` on any kind of separator we might see such as `[`, `]`, or `.` and then filtering out any empty strings we get in our array. Once we have that array of path parts, we can loop through each part with a `for..of` loop then keep reaching into object until we either a) run out of parts to try 🎉 or b) hit a dead end (`null` or `undefined`). The entire function is very simple to write, but can be incredibly powerful when you're safely trying to access large and complex blobs of data that might be coming from a database or server response. 

Build lodash.get from Scratch

This lesson will demonstrate how to recreate a simplified version of the popular [lodash.debounce](https://lodash.com/docs/4.17.15#debounce) method from scratch. **I literally failed a job interview by messing up this question, so watch carefully!**

Debounce is an incredible tool most commonly used to prevent responding too quickly to user input that is in motion. For example, preventing excessive AJAX requests made while a user types into an autocomplete field or quickly responding to window resize events without bringing your browser to a halt.

Our approach is to build the simplest `debounce` method possible using a [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) which gets cleared each time the supplied function is called thereby delaying the execution of our function until input stops for a given amount of time.

The [Lodash implementation of debounce](https://lodash.com/docs/4.17.15#debounce) includes support for a number of options including `leading`, `maxWait`, and `trailing` which we have not covered in this video, but may in future lessons.

### Variations

Modern implementations of `setTimeout` include support for additional arguments which get passed into your function so an alternative to the approach used in this lesson would be `setTimeout(fn, wait, ...args)`

### ES5 Compatbility

If you are in an es5 environment skip the rest/spread syntax and use:

```
var args = Array.prototype.slice.call(arguments)
```

And later, in your setTimeout function:

```
fn.apply(null, args)
```

----

There are some really great resources out there to learn more about debounce, here are my two favorites:

- https://css-tricks.com/debouncing-throttling-explained-examples/
- http://benalman.com/projects/jquery-throttle-debounce-plugin/


Build lodash.debounce from Scratch

Bite-size video tutorials for badass web developers.

egghead

This lesson will demonstrate how to recreate a simplified version of the popular [lodash.throttle](https://lodash.com/docs/4.17.15#throttle) method from scratch.

Throttle is used to limit the number of times a function is called within a given period time. This is often helpful when dealing with forms of user input that trigger many events in a short period of time such as scroll and resize events. Another common use is helping to avoid logging errors too many times in a short period of time.

Our approach is to build the simplest `throttle` method possible using a boolean flag to indicate if the function has already been called and a [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) to reset the flag after a set period of time.

The [Lodash implementation of throttle](https://lodash.com/docs/4.17.15#throttle) includes support for a number of options including `leading` and `trailing`, which specify when the throttle method will be called (either before or after the delay). We will not be implementing these in this video.

By the way the ending is not super satisfying because the 5fps animation doesn't look great, however performant it may be. One solution, which I left out of the video would be to add a [CSS transition](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) which can nicely smooth out the animation:

```
#kitty {
   transition: transform 0.2s ease-in;
}
```

----

There are some really great resources out there to learn more about throttle, here are my two favorites:

- https://css-tricks.com/debouncing-throttling-explained-examples/
- http://benalman.com/projects/jquery-throttle-debounce-plugin/


Jamund Ferguson

Topics

Instructors

Content Type