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.

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

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

Learning Objectives

Discuss hard and soft skills in a tech team
Describe different roles in tech teams
Explain the importance of agreeing on clear goals for the team

Preparation

You must have done the prep work.

Introduction

Collaborative software development equals higher-quality products and efficient development cycles. Team synergy, knowledge, and diverse skills are crucial to achieving this. We are going to talk about these roles and their responsibilities.

Brainstorm about teamwork in the tech industry.

🎯 Goal: Discuss teamwork in the tech industry. (30 minutes)

Think about the teams you will work with in tech. Discuss in your team:

What is your dream job?
What professional roles will be in your team?
What other people/teams will you interact with?
What non-technical skills will you bring?
What non-technical skills should you develop while at CYF?
Which of the Belbin’s tole do you identify strongest with?

Define which team member will be the time keeper for your team.
Work in your teams for about 10 minutes and write down brief answers to each question.
Assign one of the team members as speaker to deliver your answers back to the class in maximum 2 minutes.

Discuss the roles in a product team

🎯 Goal: To discuss the importance of different roles in tech teams. (15 minutes)

The following are the roles typically found within a development team. As you see, there are plenty of roles other than ‘Full-Stack Developer’.

Discuss as a class the responsibilities of the following tech roles.

Write a brief description for each of them on a post-it and share the post it on a collaborative board:

Front-end web developer
Back-end web developer
UX/UI designer
UX researcher
Product manager
Quality Assurance/Quality Engineer (tester)
Tech lead

Team Charter

🎯 Goal: To discuss the importance of setting clear goals and responsibilities within a team. (15 minutes)

You might come across a ceremony called “team charter” in your future work.

Team charters define roles, responsibilities and ways of working. If these are not clear to you when you join a new company, you should ask and seek clarification urgently.

Discuss as a class:

Why is it important for your team to understand their main goal?
Why is it important for everybody on your team to understand the role each other plays?
What happens when you are not clear about these two points?

Spend the rest of your time clarifying any questions about the project and the coursework for the first week.

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

Learning Objectives

Evaluate your current progress against previous modules

You must check in with yourself and evaluate your progress as you move through the course.

Check your progress against your past self: go back to and tackle a problem from a previous part of the course.

Pair up and check progress

Setup 🧰

Trainees need to split up into pairs
In your pairs, nominate a driver and a navigator. A driver will type out the code. A navigator will use the prep to steer you in your solution.

Activity

Find a problem from 2 modules ago and familiarise yourself with it
Test and implement a solution to the chosen problem

Pay attention ❗🔍

Write tests first and run your tests frequently to get feedback
Swap driver and navigator roles often - perhaps after every test
Use your unit tests to break down the problem - don’t try implementing everything all at once
Discuss your strategy together before writing any code
Check the learning objectives in each block. Do they make sense? Discuss them together as a pair

🛎️ Code waiting for review 🔗

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

NW-6 | Fikret Ellek | JS3| [TECH ED] Array Destructuring | 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

NW-6 | Fikret Ellek | JS3| [TECH ED] Programmer Humour | 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

NW-6 | AREEB-SATTAR | JS3| [TECH ED] Programmer Humour | 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

NW6 | Hadika Malik | JS3 | Programmer humour | 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.
Completed the fetch and rendered the image

Questions

Ask any questions you have for your reviewer.

Start a review

NW-6 | AREEB-SATTAR | JS3| [TECH ED] Array Destructuring | 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

See more pull requests

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.

Components are Functions

Today we’re going to think some more about components. We’re going to build a page using a design system and we’re going to collaborate on a sub branch, feature branch workflow. We’re going to identify the difference between HTML and the DOM using Devtools. And we’re going to create new DOM nodes using JavaScript functions. Oh my goodness, it’s so many things! That’s why it’s best to do this workshop after you’ve done:

And in particular, these workshops:

If you missed these workshops in your cohort, it’s a good idea to try to do them in the week (online) first. Record your session for people that can’t attend. Everyone should try to do the workshops first, either in groups or solo if necessary.

The overall mission is to compose “components” / groupings of HTML elements to build a page in together.html.

But this time, we’re going to use JavaScript functions to build our components.

Learning Objectives

🎄 Work on a complex sub-branch workflow
🛳️ Import a function from a module
🪄 Create a component on a web page
📖 Write a function to build a component from a documented pattern
👪 Collaborate to build a page

Set up your working branch 15m

Set up your working branch

Everyone should do this so everyone is set up correctly.

You will be working on a special branch called FOR-USE-IN-CLASS.
First, clone the workshops repository
Checkout git switch FOR-USE-IN-CLASS
Your cohort has a named sub branch. Everyone, check that out next with git switch --create COHORT (eg NW6). This is your working branch.

Check you are in the right place with GitLens!

Visualise this Git workflow

gitGraph
    commit "main"
    branch FOR-USE-IN-CLASS
    checkout FOR-USE-IN-CLASS
    branch NW6
    checkout NW6
    branch feature/header
    commit
    commit
    checkout NW6
    branch feature/footer
    commit
    commit
    commit
    checkout NW6
    branch feature/card
    commit
    commit
    commit
    checkout NW6
    branch feature/menu
    commit
    commit
    commit
    checkout NW6
    merge feature/header
    merge feature/footer
    merge feature/card
    merge feature/menu

Your working branch is your cohort name

Your COHORT branch is your cohort name. It might be NW6, WM5, GL7… You’ll be making branches starting from your COHORT branch and NOT starting from main.

Get set up to work in teams

Next, divide the class into four teams: header, footer, card, menu. Use the team generator to help you do this.

Set a whole class timer for 10 minutes.

Set up your branch 10m

Each team, choose a driver

Driver, ask everyone in your team to confirm you are in the right working branch.
Driver, from this branch, create and checkout a new branch for your team named like this: feature/cohort-component, where cohort is your cohort name and component is the component you’re building, for example: feature/nw6-header

git switch --create feature/cohort-component

Now you’re all set up to make changes to together.html.

Find your docs

Set a whole class timer for 10 minutes.

Find your docs 10m

Deployed from this repo is a mini design system. This design system has several documented components, and some also have JavaScript files.

Your mission is to find the docs for each component with an associated script file, and read them. Discuss your findings. Here are some things to consider:

Look at the pages on the website with Devtools. Compare the Inspect view with the source code you can see in the files. How are they different? How are HTML and the DOM different?

What is a module? What does this code do <script type="module">import Header from "./docs/header/header.js";</script> ?

Together separately

Set a whole class timer for 30 minutes.

Parallel Development 30m

Now build your component. Elect a new driver.

Find together.html in the /components-2 directory. Your mission is to complete this page.
In the correct portion of the page, make your changes to build your feature on together.html.
Driver, commit your changes to your feature branch.
Open a pull request from your branch to the COHORT branch, with your changes. Ask for help!
Remember, docs will help you too.
Do the simplest thing that could possibly work to begin with. You can always update your PR with more changes.

Review and merge

Now we’re going to review each other’s work and merge to our cohort branch.

Your COHORT branch is your cohort name. You’re working in your COHORT branch and not in main. Open your pull request to your COHORT branch.

Your working branch is your cohort name

Don’t open PRs to main. If you do open a PR to main and it is merged then it would break the exercise for other trainees.

Visualise this Git workflow

gitGraph
    commit id: "start"
    branch FOR-USE-IN-CLASS
    branch COHORT
    branch feature/component
    commit id: "import component function"
    commit id: "import data"
    commit id: "lighthouse revisions"
    checkout COHORT
    merge feature/component

Set a whole class timer for 20 minutes.

Review 20m

Go to the pull requests for this repo.
Either individually or as a group, review each other’s PRs.
Once you’re all happy with the PR, merge it.
Did it work? Why/why not? What does “work” mean for this workshop? Discuss.

Acceptance Criteria

We have worked in teams to build a page using JavaScript components and modules
We have used an advanced sub-branch feature branch workflow to collaborate
We have reviewed each team’s PR

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.

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.

NW-6 | Fikret Ellek | JS3| [TECH ED] Array Destructuring | 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

NW-6 | Fikret Ellek | JS3| [TECH ED] Programmer Humour | 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

NW-6 | AREEB-SATTAR | JS3| [TECH ED] Programmer Humour | 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

NW6 | Hadika Malik | JS3 | Programmer humour | 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.
Completed the fetch and rendered the image

Questions

Ask any questions you have for your reviewer.

Start a review

NW-6 | AREEB-SATTAR | JS3| [TECH ED] Array Destructuring | 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

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.