Your project this week is to build a frontend for one of the APIs from REST API week. It should be a single-page app rendered with client-side JavaScript.
If your team don't have a finished API, or don't want to use it, you can use the Dogs API from the workshops. The readme contains documentation of all the endpoints.
As a user, I want to: see all the resources
As a user, I want to: sign up for an account
As a user, I want to: log in to my account
As a user, I want to: add my own resources
As a user, I want to: update my own resources
As a user, I want to: delete my own resources
Since this project is open-ended you'll need to write your own more specific user stories once you know what you want to build.
Time | Activity | Learning outcomes |
---|
Time | Activity | Learning outcomes |
---|
Time | Activity | Learning outcomes |
---|
Time | Activity |
---|
Time | Activity |
---|
09:45 | Check-in |
10:00 | Project |
13:00 | Lunch |
14:00 | Project |
17:45 | Check out |
09:45 | Check-in |
10:00 | Team code review |
10:45 | Expert Feedback - Live code review |
11:15 | Respond to issues |
12:00 | Role circles |
12:15 | Presentation prep |
13:00 | Lunch |
14:00 | Presentations |
15:15 | Cohort SGC |
16:00 | Team SGC |
16:45 | Update user manuals |
17:00 | Speaker |
17:45 | Check out |
How can we modularise our client-side JavaScript?
What are the different ways we can import/export code? What does "dynamic import" do?
Why might using hundreds of small modules in the browser cause performance problems?
What is the "critical rendering path" in browsers?
How does the browser render an HTML page containing links to CSS and JavaScript files?
What does "render blocking" mean?
What do the async
and defer
keywords do?
How can we avoid unnecessary network requests?
What is HTTP caching?
How can our server tell browsers to cache our responses?
How we can efficiently serve image assets?
How can we optimise image file size?
How can we render different images at different viewport sizes?
09:45 | Check-in |
10:00 |
10:30 | Native JS modules |
11:00 | innerHTML, Template element |
13:00 | Lunch |
14:00 | Components, Stateful rendering |
16:00 |
16:15 |
17:15 | Spike presentation prep |
17:45 | Checkout |
09:45 | Check-in |
10:00 | Spike presentation prep |
10:10 | Spike presentations |
11:00 | localStorage, token auth |
13:00 | Lunch |
14:00 | Student project session |
14:30 | live regions, status updates |
16:00 | Tech for Better |
17:00 | Speaker |
17:45 | Check out |
09:45 | Check-in |
10:00 | CSS pseudo-elements |
11:00 | Project |
12:45 | Role circles |
13:00 | Lunch |
16:30 |
17:00 | Tech for Better |
17:45 | Check out |
and intro