πŸ§‘πŸ½β€πŸ€β€πŸ§‘πŸ½ day-plan

πŸ”–
  1. Orientation
  2. Energiser
  3. Problem Solving
  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. 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

Energiser

Every CYF session begins with an energiser. Usually there’s a rota showing who will lead the energiser. We have some CYF 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.

Problem Solving πŸ”—

Learning Objectives

Preparation

Do the prep.

Introduction

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

Brainstorming technique

🎯 Goal: Learn how to use the Brainstorming technique to solve problems. (30 minutes)

Brainstorming is a group or individual creativity technique. It helps to find a conclusion for a specific problem by gathering a list of ideas spontaneously contributed by the member(s).

ο»ΏForm groups of 4 or 5 people. Read the following problem and follow the steps below:

β€œYour company is trying to beat a competitor to secure a contract renewal with a high-paying client, but the client is leaning towards your competitor. You have a short time to change their mind before they make the official decision.”

  1. Come up with the dumbest/crazy ideas you can think of to address the problem. Write them all down. Ideally, use Post-its to stick all ideas on the wall or on an online board.Β 
  2. Withhold criticism, there are no bad ideas!
  3. Build on other people’s ideas. Listen to them first and then add β€œYes and….!”.
  4. Look for opportunities to combine ideas.
  5. Now, group members should vote for the best 3 ideas. Do not vote for your own ideas! If the groups use Post-its, just put a dot with a marker on the top 3 ideas.
  6. Now, pick the top 3 ideas with the most votes. If there is time and you want to improve these ideas further, go for another round using these top 3 ideas as a starting point to build on them. Look for gaps in these ideas and find ways to improve them until you have solid ideas to solve the problem.
  7. 5-6 people from different groups to share their top ideas.

IDEA model to solve problems

🎯 Goal: Learn how to use the IDEA model to solve problems. (30 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?”

  1. 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.

  2. 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.

  3. 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.

  4. 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.

Morning Break

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

Pokedex Workshop πŸ”—

Pokedex 2

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

Learning Objectives

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.

Exercise 1

  1. Open your pokedex React application and open the Logo.js file.
  2. Add a function named logWhenClicked within the Logo component.
  3. In the logWhenClicked function, console.log a message (it doesn’t matter what the message is).
  4. Add an onClick handler to the <img> that will call logWhenClicked. (Hint: look at the ClickLogger component above).
  5. In your web browser, try clicking on the logo image. What do you see in the JavaScript console?
  6. 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.

Exercise 2

  1. Open the pokedex React application and open the Logo.js file.
  2. Copy and paste the logWhenClicked function from the Logo component to the App component.
  3. Pass the logWhenClicked function reference as a prop to the Logo component. (Hint: look at the ClickLoggerApp component above for an example).
  4. In the Logo component change the onClick prop so that it passes props.handleClick. (Hint: look at the FancyButton component above for an example). |
  5. 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.

Exercise 3

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

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.

Exercise 4

  1. Open the pokedex React application and open the CaughtPokemon.js file.
  2. Change the useState to be initialised to an empty array ([])
  3. 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.
  4. Change the JSX to instead render caught.length. Does this fix the bug?
  5. 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.
  6. 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

Hint insideThis StackOverflow post may be helpful.

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

Community Lunch

Every Saturday at CYF 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.

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

πŸ›ŽοΈ Code waiting for review πŸ”—

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

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
NW6 | Pedro Eugenio | Eslint and Prop-types section πŸ”—

Changelist

Added “Eslint and Prop-types” section to the README.md to address issues where Eslint shows red marks below variables due to the demand for prop-types in React projects.

The added section provides clear instructions for resolving this issue by modifying the .eslintrc.cjs file in the project’s root folder. It instructs users to disable the ‘react/prop-types’ rule, thus eliminating the red marks.

Start a review
Bump vite from 5.0.10 to 5.0.12 in /high-score-tables πŸ”—

Bumps vite from 5.0.10 to 5.0.12.

Changelog

Sourced from vite's changelog.

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
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.

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.

πŸ›ŽοΈ Code waiting for review πŸ”—

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

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
NW6 | Orlando Morales | Feature add more pizzas - ReactProject | Week2 πŸ”—

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: 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.