βπ½ Register
π‘ Morning orientation
Learning Objectives
Planning during the week
π£ 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
WIP and Feedback
π€π½ FeedbackLearning Objectives
Preparation
Introduction
Design-A-Snack
π― Goal: Design and improve a biscuit or drink using feedback from your customers. (45 minutes)
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.
The Drink Team will be designing a delicious drink for the Biscuit Team, who will be designing a wonderful biscuit for the Drink Team.
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
Designs should be made on paper and consider:
- Name
- Ingredients
- Price
- Graphics
- Branding
- Anything else that your customer wants
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)
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:
- 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?
- 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?
- 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 π
Learning Objectives
Pokedex 3
Stepping through the Pokedex app, we will learn about fetching data, useEffect, and forms. This workshop takes at minimum 90 minutes.
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)
- Open the
pokedex
React application again. - Create a new file
src/PokemonMoves.js
, and copy/paste the code from this CodeSandbox. - Render the
PokemonMoves
component inside theApp
component (underneathCaughtPokemon
). - Take a few minutes to read the code in the new
PokemonMoves
component. Discuss with another trainee why you think it doesn’t work. - Create a new state variable called
pokemonData
and initialise it tonull
. Click here if you are stuck.Check last week’s lesson for a reminder on creating state variables. - 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. - Inside the
useEffect
callback, call thefetch
function with this URL:https://pokeapi.co/api/v2/pokemon/1/
. - Add a
.then
handler into thefetch
function (remember this needs to come immediately after thefetch
call) which converts the response from JSON (hint:.then(res => res.json())
). - Add a second
.then
handler after the one we just added, where the callback function will receive an argument calleddata
. - 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). - Still within the second
.then
callback, set thepokemonData
state to be thedata
object we received from the API. - 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)
- Open the
pokedex
application and thesrc/PokemonMoves.js
file. - 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)
- Open the
pokedex
React application. - Create a new file
src/PokemonMovesSelector.js
. Copy/paste the code from this CodeSandbox into the new file. - Open
src/App.js
and replace thePokemonMoves
component with thePokemonMovesSelector
component (remember to update theimport
too!) - 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. - 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 - 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. - 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.
- Fix the bug by adding
props.pokemonId
to theuseEffect
dependencies array inPokemonMoves
. 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
- Open the
pokedex
React application. - Create a new file
src/PokemonCity.js
. Copy/paste the code from this CodeSandbox into the new file. - Open the
src/App.js
file and render the newPokemonCity
component (underneathPokemonMovesSelector
). - Take a few minutes to understand what the
PokemonCity
component does. - Add an
<input type="text" />
element above the<p>
element. - Set the
value
attribute of the<input>
to thecity
state. - Create a function within the component called
updateCity
. Pass this function to theonChange
event handler. - Change the
updateCity
component so that it has a parameter namedevent
. - Add a
console.log
to inspect the value ofevent.target.value
. What happens when you type in the input? - 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
- Open the
pokedex
React application again and open thesrc/CaughtPokemon.js
file. - Render an
<input>
before the<button>
(hint:<input type="text" />
). - Create a new state variable called
pokemonNameInput
and initialise to an empty string (""
). - Add a
value
attribute to the<input>
which is set to thepokemonNameInput
state variable. (Hint:value={pokemonNameInput}
) - Create a new
handleInputChange
function within the component. - Add a
onChange
handler to the<input>
that will callhandleInputChange
. - Add a parameter called
event
to thehandleInputChange
function. Set thepokemonNameInput
state variable toevent.target.value
. Try typing in the<input>
again. What happens now? - Change the
catchPokemon
function to add thepokemonNameInput
state to thecaught
array (hint: change the value that we are passing to theconcat
method) - 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? - Empty the
<input>
after clicking on the button. To do this, set the state ofpokemonNameInput
to an empty string""
after we have added it to thecaught
array in thecatchPokemon
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 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
Learning Objectives
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 | 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 reviewWM5 | 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 reviewBump vite from 5.0.10 to 5.0.13 in /high-score-tables π
Bumps vite from 5.0.10 to 5.0.13.
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
.
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.
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 reviewWM5 | ADNIYA YOUSAF | FROM SCRATCH | WEEK 3 π
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 reviewAfternoon 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)</span>