🧑🏽‍🤝‍🧑🏽 day-plan

🔖
  1. Orientation
  2. Energiser
  3. Diversity and Inclusion
  4. Morning break
  5. Pokedex Workshop
  6. Lunch
  7. Study Group
  8. Code Review
  9. Afternoon break
  10. React Hotel: Working in teams
  11. Code Review
  12. Progress check-in
  13. Retro

🎡 Morning orientation

Learning Objectives

Planning during the week

🧭 During the week, create a post on Slack and get some people to take on the roles of facilitator and timekeeper. Nominate new people each time.

👣 Steps

If you haven’t done so already, choose someone (volunteer or trainee) to be the facilitator for this morning orientation block. Choose another to be the timekeeper.

🎙️ The Facilitator will:

  1. Assemble the entire group (all volunteers & all trainees) in a circle
  2. Briefly welcome everyone with an announcement, like this:

    💬 “Morning everyone, Welcome to CYF {REGION}, this week we are working on {MODULE} {SPRINT} and we’re currently working on {SUMMARISE THE TOPICS OF THE WEEK}”

  3. Ask any newcomers to introduce themselves to the group, and welcome them.
  4. Now check: is it the start of a new module? Is it sprint 1? If so, read out the success criteria for the new module.
  5. Next go through the morning day plan only (typically on the curriculum website) - and check the following things:

Facilitator Checklist

  • Check the number of volunteers you have for the morning
  • Check someone is leading each session
  • Describe how any new activities works for the group
  • Decide how best to allocate trainees and volunteers for a given block - most blocks will make this clear

⏰ The Timekeeper will:

  • Announce the start of an activity and how long it will take (check everyone is listening)
  • Manage any whole class timers that are used in an activity
  • Give people a 10-minute wrap-up warning before the end of an activity
  • Announce the end of an activity and what happens next

Notes

Learning Objectives

Energiser

Every session begins with an energiser. Usually there’s a rota showing who will lead the energiser. We have some favourite games you can play if you are stuck.

  1. Traffic Jam: re-order the cars to unblock yourself
  2. Telephone: draw the words and write the pictures
  3. Popcorn show and tell: popcorn around the room and show one nearby object or something in your pocket or bag and explain what it means to you.

Notes

Diversity and Inclusion

Learning Objectives

Introduction

Statistics show that diverse teams are more innovative and perform better. The team members feel better belonging to their company and can more comfortably bring their ideas to the table. As a result, the products and services offered by these companies satisfies consumer needs better.

Inclusion in a group

🎯 Goal: Explain feelings associated with being included or excluded in a group in five sentences; describe at least two coping methods against social exclusion (20 minutes)

Discuss in small groups for 10 minutes. Reflect on your personal experiences of feeling included or excluded in a group. Try to remember how that experience made you feel and how you dealt with it. Did someone help you? Did you help someone be included in a group?

Volunteer for your group to share with rest of the class some coping methods against social exclusion your group has discussed. This should not take longer than 10 minutes, so make sure someone is keeping time.

Inclusive and accessible products

🎯 Goal: Prepare a brief for an inclusive and accessible tech product (30 minutes)

Diversity and inclusion in your team or working with stakeholders is important. However, it is also very important when building a product and making it easily usable by as wide a user community as possible.

Work in small groups. Imagine that your group will develop a new tech product. Consider the following questions:

  1. How can you make sure that the product is as inclusive and accessible as possible?

  2. What challenges can you experience when designing an inclusive and accessible product?

  3. What essential accessibility requirements should you take into consideration?

  4. What should you consider to ensure all team members feel included?

    Prepare a pitch for your product. Name a speaker for your group. They will share your pitch and explain how you will create an inclusive and accessible product. Groups will have a maximum of 2 minutes to present their pitch.

    Ask someone to be the timekeeper, so we don’t overrun our schedule.

Morning Break

A quick break of fifteen minutes so we can all concentrate on the next piece of work.

Notes

Pokedex Workshop 🔗

Pokedex 4

Stepping through the Pokedex app, we will learn about routing with React Router. This workshop takes at minimum 30 minutes.

Learning Objectives

Requirements

This workshop is to practice building a React app from scratch. By now, you will have built an application that displays information about Pokemon. It's a staged workshop which can be run over multiple weeks. This stage focuses on creating multi-page apps with routing, which is covered in the prep work for this sprint. If you haven't done the prep or the previous workshops, you will find this workshop hard to understand.

Routing

> https://v5.reactrouter.com/web/example/basic

React Router provides some default React components that you can use to enable routing in your application. Examine the sandbox above. First, notice the top level <BrowserRouter> component which wraps everything else. Then, the <Routes> component which will choose one <Route> based on the current path. Each route is defined with the <Route> component which maps a path (defined with the path props) to a React component. You can pass an entire component including its properties to the element={...} prop. Finally, the Link component can be used to create links to navigate to different routes.

Pokedex Multi-Page App

Open the pokedex React application. Instead of displaying all your components in the same page, we will use React Router to define different pages in the pokedex application. Set a whole class timer for 20 minutes.

{{<note type="activity" title="Exercise 1 (20m)">}}

  1. In the terminal, install React Router with npm install --save react-router-dom.
  2. Open src/App.js and import BrowserRouter, Route, Routes and Link components from React Router (hint: import { BrowserRouter, Routes, Route, Link } from &#34;react-router-dom&#34;;)
  3. Wrap all the components in the render method in the &lt;BrowserRouter&gt; component.
  4. In the following, we will have CaughtPokemon and BestPokemon displayed with different route. But first, let's create some links to navigate to different pages. Still in the &lt;BrowserRouter&gt; in the render method of src/App.js, use the Link component to create 2 links: one to navigate to the URL /best-pokemon and another one to navigate to /caught-pokemon (hint: &lt;Link to=&#34;/best-pokemon&#34;&gt;Best Pokemon&lt;/Link&gt;).
  5. Open the pokedex in your browser and verify that you can see 2 links on the page. When clicking on each of these links, the URL in your browser address bar should change (but nothing will change on the screen yet!).
  6. Create a &lt;Routes&gt;&lt;/Routes&gt; component inside your &lt;BrowserRouter&gt;. This is where we will nest our &lt;Route&gt; components. It will display one of them at a time depending on the current URL path.
  7. Now let's define the routes to map a path to a React component. First, create a route to map /best-pokemon to the BestPokemon component. Then, use another route to map /caught-pokemon to the CaughtPokemon component (Hint: move the component inside the element key, as in &lt;Route element={...} path=&#34;/my-path&#34; /&gt;).
  8. Open the pokedex in your browser and verify that when clicking on each link, BestPokemon and CaughtPokemon are rendered accordingly.

{{</note>}}

URL parameters

> https://v5.reactrouter.com/web/example/url-params

In this exercise, we will create a new component to display a Pokemon information. The Pokemon name will be passed through the URL and displayed on the screen. Set a whole class timer for 10 minutes.

{{<note type="activity" title="Exercise 2 (10m)">}}

  1. Create a new component PokemonInfo.
  2. In src/App.js, create a new route which maps the path /pokemon/:name to the previously created component PokemonInfo (hint: &lt;Route path=&#34;/pokemon/:name&#34; element={&lt;PokemonInfo /&gt;} /&gt;).
  3. In the render method of PokemonInfo component, display the name of the Pokemon which is passed in the URL parameter (hint: use the hook useParams() and extract name from the object it returns ).
  4. Open the pokedex in your browser and try several URLs (such as http://localhost:3000/pokemon/Pikachu and see if the Pokemon name is displayed accordingly on your screen.

{{</note>}}

Stretch goal

If you have finished early:

Instead of passing the name of the Pokemon in the URL parameter, now pass an ID. The ID passed correspond to the ID of the Pokemon in the Poke API. For example, the ID 1 corresponds to the Pokemon Bulbasaur (https://pokeapi.co/api/v2/pokemon-species/1/). In the PokemonInfo component, use the Pokemon ID from the URL to load the corresponding Pokemon data from the Poke API and display the following Pokemon information on the screen: name, color.name, shape.name, base_happiness and capture_rate.

Acceptance Criteria

  • Fetches and displays a Pokemon's moves
  • Updates moves when a new Pokemon is selected
  • Renders a user-entered city name
  • Allows user to enter a caught Pokemon name

Note: inspiration for this workshop came from Kent Dodd's Beginner React course

Community Lunch

Every Saturday we cook and eat together. We share our food and our stories. We learn about each other and the world. We build community.

This is everyone’s responsibility, so help with what is needed to make this happen, for example, organising the food, setting up the table, washing up, tidying up, etc. You can do something different every week. You don’t need to be constantly responsible for the same task.

Notes

Study Group

What are we doing now?

You’re going to use this time to work through coursework. Your cohort will collectively self-organise to work through the coursework together in your own way. Sort yourselves into groups that work for you.

Use this time wisely

You will have study time in almost every class day. Don’t waste it. Use it to:

  • work through the coursework
  • ask questions and get unblocked
  • give and receive code review
  • work on your portfolio
  • develop your own projects

Notes

🛎️ Code waiting for review 🔗

Below are trainee coursework Pull Requests that need to be reviewed by volunteers.

Add recommended VS Code extensions 🔗

What does this change?

This PR introduces a curated list of recommended Visual Studio Code extensions to the module. The aim is to standardize the development environment for all trainees, ensuring they have access to essential tools and features that enhance their learning experience, and save our mentors’ time and energy.

Common Content?

This change does not directly modify the common content shared across modules but provides an essential resource that complements the existing curriculum. It ensures that all trainees, regardless of their module, have a consistent set of tools at their disposal.

  • Block/s

Common Theme?

  • Yes

Issue number: #368

Org Content?

Module

Checklist

Who needs to know about this?

@CodeYourFuture/itp-syllabus-team

Start a review
WM5 | LAURA_SANTIAGO | MODULE-REACT | FROM SCRATCH | WEEK 3 🔗

Learners, PR Template

Self checklist

  • I have committed my files one by one, on purpose, and for a reason
  • I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK
  • I have tested my changes
  • My changes follow the style guide
  • My changes meet the requirements of this task

Changelist

Briefly explain your PR.

Questions

Ask any questions you have for your reviewer.

Start a review
WM5 | LAURA SANTIAGO| MODULE_REACT | HIGH_SCORES_TABLE | LEVEL 1 & 2 🔗

Learners, PR Template

Self checklist

  • I have committed my files one by one, on purpose, and for a reason
  • I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK
  • I have tested my changes
  • My changes follow the style guide
  • My changes meet the requirements of this task

Changelist

Briefly explain your PR.

Questions

Ask any questions you have for your reviewer.

Start a review
Bump vite from 5.0.10 to 5.0.13 in /high-score-tables 🔗

Bumps vite from 5.0.10 to 5.0.13.

Changelog

Sourced from vite's changelog.

5.0.13 (2024-03-24)

5.0.12 (2024-01-19)

5.0.11 (2024-01-05)

Commits

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don’t alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    You can disable automated security fix PRs for this repo from the Security Alerts page.
Start a review
WM5 | AISHA_ATHMAN_LALI | MODULE_REACT | HIGH_SCORES_TABLE | LEVEL 1 & 2 🔗

Self checklist

  • I have committed my files one by one, on purpose, and for a reason
  • I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK
  • I have tested my changes
  • My changes follow the style guide
  • My changes meet the requirements of this task

This is a PR for the High-Scores Table challenge. I have completed level one where I have displayed the given data in tables as requested in the instructions

Questions

I am still struggling with the table. Is there a better way to go about it?

Start a review
See more pull requests

Afternoon Break

Please feel comfortable and welcome to pray at this time if this is part of your religion.

If you are breastfeeding and would like a private space, please let us know.

Notes

Team Project

Learning Objectives

In this module you are working in a team to build a React app. (You should have created your group already.)

Take this opportunity to work with your team on your React app. You can use this time to work on your app, to discuss your app with your team, ask questions and get help with blockers.

You can use any study group time to work on your product.

Notes

Learning Objectives

🛎️ Code waiting for review 🔗

Below are trainee coursework Pull Requests that need to be reviewed by volunteers.

Bump ws from 8.15.1 to 8.17.1 🔗

Bumps ws from 8.15.1 to 8.17.1.

Release notes

Sourced from ws's releases.

8.17.1

Bug fixes

  • Fixed a DoS vulnerability (#2231).

A request with a number of headers exceeding the[server.maxHeadersCount][] threshold could be used to crash a ws server.

const http = require('http');
const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 0 }, function () {
const chars = "!#$%&'*+-.0123456789abcdefghijklmnopqrstuvwxyz^_`|~".split('');
const headers = {};
let count = 0;


for (let i = 0; i < chars.length; i++) {
if (count === 2000) break;


for (let j = 0; j &lt; chars.length; j++) {
  const key = chars[i] + chars[j];
  headers[key] = 'x';

if (++count === 2000) break;

}


}
headers.Connection = 'Upgrade';
headers.Upgrade = 'websocket';
headers['Sec-WebSocket-Key'] = 'dGhlIHNhbXBsZSBub25jZQ==';
headers['Sec-WebSocket-Version'] = '13';
const request = http.request({
headers: headers,
host: '127.0.0.1',
port: wss.address().port
});
request.end();
});

The vulnerability was reported by Ryan LaPointe in websockets/ws#2230.

In vulnerable versions of ws, the issue can be mitigated in the following ways:

  1. Reduce the maximum allowed length of the request headers using the [--max-http-header-size=size][] and/or the [maxHeaderSize][] options so that no more headers than the server.maxHeadersCount limit can be sent.

... (truncated)

Commits
  • 3c56601 [dist] 8.17.1
  • e55e510 [security] Fix crash when the Upgrade header cannot be read (#2231)
  • 6a00029 [test] Increase code coverage
  • ddfe4a8 [perf] Reduce the amount of crypto.randomFillSync() calls
  • b73b118 [dist] 8.17.0
  • 29694a5 [test] Use the highWaterMark variable
  • 934c9d6 [ci] Test on node 22
  • 1817bac [ci] Do not test on node 21
  • 96c9b3d [major] Flip the default value of allowSynchronousEvents (#2221)
  • e5f32c7 [fix] Emit at most one event per event loop iteration (#2218)
  • Additional commits viewable in compare view

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don’t alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    You can disable automated security fix PRs for this repo from the Security Alerts page.
Start a review
Bump vite from 5.0.12 to 5.0.13 🔗

Bumps vite from 5.0.12 to 5.0.13.

Changelog

Sourced from vite's changelog.

5.0.13 (2024-03-24)

Commits

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don’t alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    You can disable automated security fix PRs for this repo from the Security Alerts page.
Start a review
Featurebookingstate 🔗

Learners, PR Template

Self checklist

  • I have committed my files one by one, on purpose, and for a reason
  • I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK
  • I have tested my changes
  • My changes follow the style guide
  • My changes meet the requirements of this task

Changelist

Briefly explain your PR.

Questions

Ask any questions you have for your reviewer.

Start a review
See more pull requests

Progress check-in 🔗

https://curriculum.codeyourfuture.io/react/success/

Why are we doing this?

🔑 The most important thing is that you are secure in your understanding.

At the end of the course, we will expect you to build novel applications using your understanding. If you cannot build things, we cannot put you forward for jobs. It is in your personal interest to make sure you have properly understood this module.

To progress to the next module you need to meet the success criteria for this module. How will you as a cohort meet the module success criteria? Discuss it in your class channel and make a plan together.

Strategies

🧑🏿‍🎤 good strategies

  • asking volunteers to review your code
  • helping each other with coursework blockers
  • arranging midweek study sessions
  • using Saturday time to review code and cohort tracker

🙅🏿 bad strategies

  • opening empty PRs
  • copying and pasting
  • breaking the Trainee Agreement
  • mistaking the measure for the target

Maximum time in hours

.5

How to get help

Discuss with your cohort. Support each other.

How to submit

In week 4 of your module you will need a representative to report to the organisation. Here’s your template, fill in your details and delete as appropriate:

Template

📈 Cohort Progress Report from @cohort-name to @programme-team

  • criterion
  • criterion
  • criterion
  • criterion

✅ We are progressing to the next module.
⛔ We are taking a consolidation week to meet our targets.

  • 🎯 Topic Code Review
  • 🎯 Topic Communication
  • 🎯 Topic Delivery
  • 🎯 Topic Requirements
  • 🎯 Topic Teamwork
  • 🎯 Topic Testing
  • 🎯 Topic Time Management
  • 🏕 Priority Mandatory
  • 🦔 Size Tiny
  • 📅 React
  • 📅 Week 3
  • 📅 Week 4

Retro: Start / Stop / Continue

Retro (20 minutes)

A retro is a chance to reflect on this past sprint. You can do this on a Jamboard (make sure someone clicks “Make a copy” before you start, and you work on that together) or on sticky notes on a wall.

  1. Set a timer for 5 minutes.
  2. Write down as many things as you can think of that you’d like to start, stop, and continue doing next sprint.
  3. Write one point per note and keep it short.
  4. When the timer goes off, one person should set a timer for 1 minute and group the notes into themes.
  5. Next, set a timer for 2 minutes and all vote on the most important themes by adding a dot or a +1 to the note.
  6. Finally, set a timer for 8 minutes and all discuss the top three themes.

Notes