🧑🏽‍🤝‍🧑🏽 day-plan

🔖
  1. Orientation
  2. WIP And Feedback
  3. Morning break
  4. Pokedex Workshop
  5. Lunch
  6. Study Group
  7. Code Review
  8. Afternoon break
  9. React Hotel: Working in teams
  10. 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

WIP and Feedback 🔗

Learning Objectives

Preparation

Plenty of paper and pens

Introduction

Feedback is essential as it lets us know that our message has been properly expressed and therefore understood. It also gives us the chance to improve.

Design-A-Snack

🎯 Goal: Design and improve a biscuit or drink using feedback from your customers. (45 minutes)

  1. Divide into an even number of teams of 3-5 people according to the spreadsheet from prep that was posted on your Slack channel.  One person from each team is the Product Owner. One person in the session is the Facilitator and makes sure that all teams are following the schedule below.

  2. The Drink Team will be designing a delicious drink for the Biscuit Team, who will be designing a wonderful biscuit for the Drink Team.

  3. There are 3 sprints of 5 minutes each that are broken down as follows.

    • 3 minutes to design the drink or biscuit
    • 1 minute for the Drink Team to demo their drink design to the Biscuit Team and get feedback
    • 1 minute for the Biscuit Team to demo their biscuit design to the Drink Team and get feedback

  4. Designs should be made on paper and consider:

    • Name
    • Ingredients
    • Price
    • Graphics
    • Branding
    • Anything else that your customer wants

  5. During the demo phase, the customer team must vote using Fist to Five where each customer holds their fist with more fingers the more they like it. The product owner should record the total votes from their customers, and then ask for feedback (but you only have one minute for demo + feedback)

  6. After all sprints have been completed, get together as a whole cohort and consider the following questions:

    • If you had had a single sprint of 9 minutes, do you think your customers would have liked your snack as much?
    • How useful was the feedback from customers, and how did you improve the feedback asked for from each round?
    • How did the feedback you received influence the design of the snack?
    • What proportion of your customers did you satisfy at the end?
    • Would you have personally bought this biscuit or drink?
    • Did you let the Product Owner of your team make the prioritisation decisions? Why?
    • How did you find working in your teams?
    • Were there any features that were added that did not come from customer feedback?

WIP-Work in Progress

🎯 Goal: Discuss the use of limiting Work in Progress (WIP) in planning effective sprints. (15 minutes)

In the prep, you played a game to explore how limiting the number of tasks in progress at any time can impact the effectiveness of a team.

As a whole cohort, get together and discuss the following questions:

  1. Is it better that developers have a single task to focus on and complete, or a collection of jobs where they can show they are making progress on each one?  Why?
  2. Is it better that developers have several small tasks for each sprint or a single large one that occupies the whole sprint?  Why?
  3. When planning a new sprint, should a team only plan for the things it is confident it can deliver, or should they make sure they have enough work so that everyone will always be occupied?
  4. When a new urgent piece of work is requested by a senior stakeholder halfway through a sprint, is it better to start working on it immediately or wait till the next sprint?  Why?

Morning Break

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

Pokedex Workshop 🔗

Pokedex 3

Stepping through the Pokedex app, we will learn about fetching data, useEffect, and forms. This workshop takes at minimum 90 minutes.

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 fetching data, Effects, and forms, 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.

Fetching data

In this exercise, we’ll fetch some data about a Pokemon’s moves from the Pokemon API and render it a component. Split into your React groups. Set a whole class timer for 20 minutes.

Exercise 1 (20m)

  1. Open the pokedex React application again.
  2. Create a new file src/PokemonMoves.js, and copy/paste the code from this CodeSandbox.
  3. Render the PokemonMoves component inside the App component (underneath CaughtPokemon).
  4. Take a few minutes to read the code in the new PokemonMoves component. Discuss with another trainee why you think it doesn’t work.
  5. Create a new state variable called pokemonData and initialise it to null.
    Click here if you are stuck.Check last week’s lesson for a reminder on creating state variables.
  6. Now add a useEffect call, but leave the callback function empty for now. Make sure you remember to add the empty array after the callback function.
  7. Inside the useEffect callback, call the fetch function with this URL: https://pokeapi.co/api/v2/pokemon/1/.
  8. Add a .then handler into the fetch function (remember this needs to come immediately after the fetch call) which converts the response from JSON (hint: .then(res => res.json())).
  9. Add a second .then handler after the one we just added, where the callback function will receive an argument called data.
  10. Within the second .then callback function, log out the data that we just received (hint: console.log(data)). Inspect the data in the dev tools console. Is there any interesting data? (Hint: think about what the component is trying to render).
  11. Still within the second .then callback, set the pokemonData state to be the data object we received from the API.
  12. What happens in your browser? Do you understand why? If not, discuss it with another trainee. If you are both stuck, ask a mentor.

Conditional rendering

In this exercise, we’ll change the PokemonMoves component to use a ternary operator. Your app should still look the same in your browser as before. Set a whole class timer for 10 minutes.

Exercise 2 (10m)

  1. Open the pokedex application and the src/PokemonMoves.js file.
  2. Change the if / else statement in your JSX to use the ternary operator (condition ? outputIfTrue : outputIfFalse) instead.

fetch Moves

In this exercise, we’ll add some buttons which allow you to select which Pokemon’s moves we will fetch from the Pokemon API. Set a whole class timer for 15 minutes.

Exercise 3 (15m)

  1. Open the pokedex React application.
  2. Create a new file src/PokemonMovesSelector.js. Copy/paste the code from this CodeSandbox into the new file.
  3. Open src/App.js and replace the PokemonMoves component with the PokemonMovesSelector component (remember to update the import too!)
  4. Take a few minutes to read what the PokemonMovesSelector component does. If you have questions, ask a Teaching Assistant to help. We won’t need to make any more changes to this component.
  5. Open the PokemonMoves component again. Change the URL to use backticks (`...`) instead of double-quotes ("..."). Then replace the hard-coded number 1 with ${props.pokemonId}. What will this do?
    Click here if you don’t knowThe URL will contain the pokemonId instead of always fetching the Pokemon with id of 1
  6. Open your browser and find where the PokemonMovesSelector component is rendered. Before you click the buttons, think about what you expect will happen. Then click the “Fetch Bulbasaur” button to find out what actually happens.
  7. Refresh the page. What happens now if you click the “Fetch Bulbasaur” button, then click the “Fetch Charmander” button? Is this what you expected? Discuss with another trainee why this happens.
  8. Fix the bug by adding props.pokemonId to the useEffect dependencies array in PokemonMoves. Remember that you can test if the bug still happens by refreshing the page, clicking one of the buttons, then the other button.

Working with forms

In this exercise, we’ll create a new component where you can type in the name of a Pokemon city and see it on screen. Set a whole class timer for 15 minutes.

Exercise 4

  1. Open the pokedex React application.
  2. Create a new file src/PokemonCity.js. Copy/paste the code from this CodeSandbox into the new file.
  3. Open the src/App.js file and render the new PokemonCity component (underneath PokemonMovesSelector).
  4. Take a few minutes to understand what the PokemonCity component does.
  5. Add an <input type="text" /> element above the <p> element.
  6. Set the value attribute of the <input> to the city state.
  7. Create a function within the component called updateCity. Pass this function to the onChange event handler.
  8. Change the updateCity component so that it has a parameter named event.
  9. Add a console.log to inspect the value of event.target.value. What happens when you type in the input?
  10. Using setCity, update the city state to what was typed in the input box.

Forms with multiple inputs

In this exercise, we will change the CaughtPokemon component so that you can type in the name of a Pokemon that you caught and it will show in the list. Set a whole class timer for 15 minutes.

Exercise 5

  1. Open the pokedex React application again and open the src/CaughtPokemon.js file.
  2. Render an <input> before the <button> (hint: <input type="text" />).
  3. Create a new state variable called pokemonNameInput and initialise to an empty string ("").
  4. Add a value attribute to the <input> which is set to the pokemonNameInput state variable. (Hint: value={pokemonNameInput})
  5. Create a new handleInputChange function within the component.
  6. Add a onChange handler to the <input> that will call handleInputChange.
  7. Add a parameter called event to the handleInputChange function. Set the pokemonNameInput state variable to event.target.value. Try typing in the <input> again. What happens now?
  8. Change the catchPokemon function to add the pokemonNameInput state to the caught array (hint: change the value that we are passing to the concat method)
  9. Open your browser, type a Pokemon name into the <input> and click on the “Catch Pokemon” button. Do you see your new Pokemon being added to the list?
  10. Empty the <input> after clicking on the button. To do this, set the state of pokemonNameInput to an empty string "" after we have added it to the caught array in the catchPokemon function.

(STRETCH GOAL) Make sure the user cannot add a Pokemon to the caught state if the value of pokemonNameInput state is empty.

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

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.