Skip to content
This repository has been archived by the owner on Jul 21, 2020. It is now read-only.

Latest commit

 

History

History
119 lines (83 loc) · 4.59 KB

week-2.md

File metadata and controls

119 lines (83 loc) · 4.59 KB

Week 2

Roses are red
Violets are blue
Unexpected { on line 32

— @kvlly

HTTP cat by @girlie_mac.

Table of Contents

Slides

Playground

Before you start you'll probably want to read a bit about Express, routing, and templating. We'll cover this in the lecture but make sure you fully understand these concept, the resources below can help. You can do these exercises before you start working on the assignments to get comfortable with the topics covered in class.

🎦 Watch a video about request and response.

Assignments

Query

Query banner

Learn about URLS, query's and parameters to do some advanced (dynamic) routing.

Synopsis

  • Time: 3:00h
  • Goals: subgoal 2, subgoal 3
  • Due: before week 3

Description

You can determine how an application’s endpoints (URIs) respond to client requests, you already created routes but you can create more endpoints.

  1. Try out some different route paths to send different file types when a user goes to a specific route.
    • Not sure where to start? If somebody goes to /mp3 you can send an mp3 file instead of a html page.
  2. See if you can enter different parameters in the URL and retrieve (log) those route parameters to the server.

Additional resources

Templating

Templating Banner

Learn how to use a templating engine to dynamically render data and create components and partials for your application

Synopsis

  • Time: 6:00h
  • Goals: subgoal 2, subgoal 3
  • Due: before week 3

Description

  1. Try out a couple of templating engines such as pug, ejs or handlebars. Pick one with your team and install it in your project.

  2. Then, instead of responding with html files (previous week) create views and try to render a page using the templating engine.

  3. Render dynamic data using your templating engine.

    • Not sure where to start? You can store an array or object on the server and inject the data into the view.

  4. Explore features of the templating engine. Many templating engine have:

    • includes; insert contents of files into another.
    • conditionals; if statements
    • mixins; create reusable blocks of html

  5. Create different partials and lay-outs (includes) for components of your page e.g. header, footer or a form.

Ask yourself upon completion:

  • How does express combine the data from the server with the templating?
  • How do partials work? Can you set-up a folder structure for your component system?

Additional resources

Hand-in

  1. Push your changes:
    Hand in your progess in your repository on GitHub under your username.

  2. Create an issue:
    Mark this assignment as complete by opening an issue on our GitHub issue tracker. Fill in the issue template with the correct information. Include what you did in the description of the issue.

  3. Feedback:
    Let us know what you thought of the homework, what part you spend a lot of time on and give us any feedback. Your project will be reviewed and receive feedback, so expect people to read it, and be ready for tips and tops!