Time is a limited resource and during the past week other commitments took some precedence over my learning journey. I still squeezed in a dozen lessons from the bootcamp course but it was less than I typically strive for.
ExpressJS Middleware
Work continues on the YelpCamp project but we took some time to explore ExpressJS middleware. If you're not familiar with middleware or have heard the term but aren't clear on what it means:
middleware is a collection of functions that run at some point during the request and response lifecycle.
So middleware runs between the time a request enters Express and it leaves at which point our code stops executing.
Colt Steele, The Web Developer Bootcamp 2021
- Middleware are just functions
- Each middleware has access to the request and response objects
- Middleware can end the HTTP request by sending back a response with methods like res.send()
- OR middleware can be chained together, one after another by calling next()
If you want to explore middleware further, check out the ExpressJS documentation page.
Morgan is a handy middleware I recommend checking out. It logs HTTP request information to the terminal which can be very helpful when debugging your code.
YelpCamp
Work continues on this project! After wrapping up the middleware section we moved on to adding basic styles and using a new EJS tool for layouts.
Bootstrap 5 is our choice for an easy to use CSS Framework and a tool called EJS-Mate has been added to help us by adding functionality to EJS called layout (see more in the docs) which then allows us to define some boilerplates.
What's a boilerplate?
It's a basic file for every single page where sections of code are repeated in multiple places with little or no variation. It often includes code such as this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body></body>
</html>
Now we can insert <%-body -%> inside of our body element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<%-body -%>
</body>
</html>
Once that's added our code will pass through body content from other pages into our boilerplate so we can dynamically add content as desired.
It's a complex topic and we're still learning how to use it effectively so I recommend watching RaddyTheBrand's video to learn more.
Week In Review
It's hard to believe how quickly the weeks are moving by and though I didn't make the progress I wanted to this week, the important part is that I made steps forward. Perseverance is the key to success and every step forward is a step closer to your goals.
I hope you enjoyed the read!
Feel free to follow me on GitHub, LinkedIn and DEV for more!
Top comments (0)