Learning Objectives

Introduce and welcome new volunteers
Nominate a timekeeper
Check the morning day plan and group structures

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:

Assemble the entire group (all volunteers & all trainees) in a circle
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}”
Ask any newcomers to introduce themselves to the group, and welcome them.
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.
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

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.

Traffic Jam: re-order the cars to unblock yourself
Telephone: draw the words and write the pictures
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.

Learning Objectives

Apply IDEA approach to solve a problem

Preparation

Do the prep.

Introduction

Problem-solving techniques serve as a template to solve a variety of problems of different nature and complexity.

IDEA model to solve problems

🎯 Goal: Learn how to use the IDEA model to solve problems. (60 minutes)

IDEA is a simple yet effective four-step problem-solving process to identify the problem, develop solutions, execute a plan and then assess your results.

I: Identify the problem

D: develop solutions

E: execute your plan

A: assess the extent to which the plan resolved the problem

Form groups of 4 or 5 people, with different people. Read the following problem and follow the steps below.

“Our oceans are full of plastic waste. A lot of them are eaten by fish. This causes uncertain effects on our health. According to The Economist newspaper, by 2050, the oceans could contain more plastic than fish, measured in weight. So: How can we reduce the plastic waste in our oceans today?”

Identify and understand the problem you are trying to solve. Is the oceans being polluted the symptom or consequence? What is the root cause? Ask “Why?” as often as necessary until you get to the bottom of the issue.
Brainstorm to come up with a few possible solutions. Determine the Pros and Cons for each of them until everyone agrees on which one would be the most appropriate. Once you have determined the solution, come up with goals that we can execute and will help us solve the problem.
Discuss how the goals you set in the previous step can be executed. If one of your goals was to remove 10% of plastic waste in our oceans in 1 year, you must explain how you will accomplish this goal.
The final step is to assess if the solution addresses the problem. We won’t be able to solve the problem in 30 minutes, but instead, identify the ways you could monitor and assess progress on solving the problem on an ongoing basis.

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

Pokedex 2

Stepping through the Pokedex app, we will learn about events and interactivity.

Learning Objectives

Attach event handlers to React components
Pass function references between components
Update state based on events and user interactions
Render lists from state

Requirements

This workshop is to practice building a React app from scratch. You will be building a Pokedex app that displays information about Pokemon. It's a staged workshop which can be run over multiple weeks. This stage focuses on events, which are covered in the prep work for this sprint. If you haven't done the prep or the previous workshop, you will find this workshop hard to understand.

Handling events

In this exercise we will extend our Logo component to log to the console when clicking on the image. Split into your React groups. Set a whole class timer for 10 minutes.

Open your pokedex React application and open the Logo.js file.
Add a function named logWhenClicked within the Logo component.
In the logWhenClicked function, console.log a message (it doesn't matter what the message is).
Add an onClick handler to the <img> that will call logWhenClicked. (Hint: look at the ClickLogger component above).
In your web browser, try clicking on the logo image. What do you see in the JavaScript console?
Discuss what would happen if you changed your code to onClick={logWhenClicked()}. Can you explain why?

Passing functions as props

In this exercise, we'll move the logWhenClicked function in the Logo component to the App component. Then we'll make App pass those variables as props to the sub-components. Your app should still look the same as before. Set a whole class timer for 10 minutes.

Open the pokedex React application and open the Logo.js file.
Copy and paste the logWhenClicked function from the Logo component to the App component.
Pass the logWhenClicked function reference as a prop to the Logo component. (Hint: look at the ClickLoggerApp component above for an example).
In the Logo component change the onClick prop so that it passes props.handleClick. (Hint: look at the FancyButton component above for an example). |
Discuss what you think will happen when you click the logo image now. Predict and then test. Can you explain why?

useState

In this exercise, we'll add a button to the CaughtPokemon component which adds one to the number of Pokemon you have caught. Set a whole class timer for 20 minutes.

Open the pokedex React application and open the CaughtPokemon.js file.
Create a new state variable with useState. It should be named caught and be initialised to 0
Within the JSX, there should be a "hard-coded" number 0. Replace it with your new caught state.
Add a button to the component with an onClick handler that calls a function called catchPokemon.
Create the catchPokemon function and have it update the caught state so that it is increased by 1 on each click. <details><summary>Click here if you are stuck.</summary>You will need to call the set state function (the 2nd item in the useState array) with caught + 1.</details>
Write down the things that will happen when you click the button. Compare your list with your group and discuss.

<details><summary>Hint inside.</summary>The state will be updated to be the current state + 1. React is notified that our state has changed, so it re-renders. When rendering, the current state will be different and so React updates the DOM.</details>

Showing a list of Pokemon

In this exercise, we'll change the CaughtPokemon component to show a list of Pokemon that we have caught instead of a number. Set a whole class timer for 15 minutes.

Open the pokedex React application and open the CaughtPokemon.js file.
Change the useState to be initialised to an empty array ([])
There will now be a bug in your app! We don't see how many Pokemon we have caught. Discuss with another trainee what you think the problem is.
Change the JSX to instead render caught.length. Does this fix the bug?
Let's now show the names of the Pokemon we have caught. Render a <ul> element within the component. Then use the map method to loop through each item in the caught array and render it in an <li> element.
Change the catchPokemon function to add a new Pokemon (it doesn't matter which one) onto the caught array. (Hint: use the concat method.)

(STRETCH GOAL) Generate a random Pokemon each time you click the button <details><summary>Hint inside</summary>This StackOverflow post may be helpful.</details>

Acceptance Criteria

The logo click handler is passed from App as a prop function
CaughtPokemon tracks a caught state variable with useState
Clicking catch adds a Pokemon name to the caught array
Caught Pokemon names are rendered in a list

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

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.

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

🛎️ 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

I have read the contributing guidelines
I have checked my spelling and grammar with an automated tool
I have previewed my changes to check the markdown renders as I intend
I have run my code to check it works
My changes follow our Style Guide

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)
fix: fs.deny with globs with directories (#16250) (d2db33f), closes #16250
5.0.12 (2024-01-19)
fix: await configResolved hooks of worker plugins (#15597) (#15605) (ef89f80), closes #15597 #15605
fix: fs deny for case insensitive systems (#15653) (91641c4), closes #15653
5.0.11 (2024-01-05)
fix: don't pretransform classic script links (#15361) (19e3c9a), closes #15361
fix: inject __vite__mapDeps code before sourcemap file comment (#15483) (d2aa096), closes #15483
fix(assets): avoid splitting , inside base64 value of srcset attribute (#15422) (8de7bd2), closes #15422
fix(html): handle offset magic-string slice error (#15435) (5ea9edb), closes #15435
chore(deps): update dependency strip-literal to v2 (#15475) (49d21fe), closes #15475
chore(deps): update tj-actions/changed-files action to v41 (#15476) (2a540ee), closes #15476

Commits

80b1b07 release: v5.0.13
d2db33f fix: fs.deny with globs with directories (#16250)
ee81e19 release: v5.0.12
91641c4 fix: fs deny for case insensitive systems (#15653)
ef89f80 fix: await configResolved hooks of worker plugins (#15597) (#15605)
b44c493 release: v5.0.11
d2aa096 fix: inject __vite__mapDeps code before sourcemap file comment (#15483)
2a540ee chore(deps): update tj-actions/changed-files action to v41 (#15476)
5ea9edb fix(html): handle offset magic-string slice error (#15435)
49d21fe chore(deps): update dependency strip-literal to v2 (#15475)
Additional commits viewable in compare view

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

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.

Learning Objectives

Work in a team to build a React app

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.

🛎️ 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:
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 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)
fix: fs.deny with globs with directories (#16250) (d2db33f), closes #16250

Commits

80b1b07 release: v5.0.13
d2db33f fix: fs.deny with globs with directories (#16250)
See full diff in compare view

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

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.

Set a timer for 5 minutes.
Write down as many things as you can think of that you’d like to start, stop, and continue doing next sprint.
Write one point per note and keep it short.
When the timer goes off, one person should set a timer for 1 minute and group the notes into themes.
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.
Finally, set a timer for 8 minutes and all discuss the top three themes.