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

πŸ”–
  1. Energiser
  2. Morning orientation
  3. Teamwork Project Sprint 1
  4. Morning break
  5. Evaluate
  6. Code Review
  7. Lunch
  8. πŸ’‘ Components are functions
  9. Afternoon break
  10. Study Group
  11. Code Review
  12. Retrospective

✍🏽 Register

Energiser

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.

  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.

🎑 Morning orientation

Learning Objectives

info

🧭 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

Teamwork Project S1

Learning Objectives

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. (35 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?
  1. Define which team member wο»Ώill be the time keeper for your team.
  2. Work in your teams for about 10 minutes and write down brief answers to each question.
  3. 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. (10 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 is the importance of having clear ways of working?
  • What happens when you are not clear about these three points?

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

Morning Break

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

Evaluate ✏️

Learning Objectives

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.

activity

Setup 🧰

  1. Trainees need to split up into pairs
  2. 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

  1. Find a problem from 2 modules ago and familiarise yourself with it
  2. 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.

WM5 |ELMIRA ZANGENEH| MODULE-JS3 | PROGRAMMING HUMOUR | WEEK 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
WM5 | Abdihamid Ali | Modul-JS3 | Programmer Humour | week3 πŸ”—

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

I’m getting confused about this “Quality Gate failed” from sonarcloud can anyone explain it to me ? do I have to do anything about it ? Ask any questions you have for your reviewer.

Start a review
NW6 | Nazanin Saedi | object-destructuring | Module-JS3 | Exercise 3 | Week 3 πŸ”—

one explanation :

The console.log(“QTY\tITEM\t\t\tTOTAL”); line is used to print the header of the receipt, which includes the titles for each column: “QTY” for quantity, “ITEM” for item name, and “TOTAL” for total cost.

Here’s a breakdown of what each part of the string does:

\t: This is an escape sequence representing a tab character. It adds spacing between the columns. “QTY”: This is the title for the quantity column. “ITEM”: This is the title for the item name column. “\t\t\t”: This adds extra tabs to provide additional spacing between the item name column and the total column. “TOTAL”: This is the title for the total cost column.

Start a review
NW6 | Nazanin Saedi | object-destructuring | Module-JS3 |Exercise 2 | week3 πŸ”—
In both tasks, destructuring is used when filtering the hogwarts array and when iterating over the filtered results to extract the necessary properties (firstName and lastName) Start a review
NW6 | NazaninSaedi | Module-JS3 | JS3 | object-destructuring |Exercise-1 |Week3 πŸ”—

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

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.

πŸ’‘ Components are functions πŸ”—

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

activity

Set up your working branch

Everyone should do this so everyone is set up correctly.

  1. You will be working on a special branch called FOR-USE-IN-CLASS.
  2. First, clone the workshops repository Checkout git switch FOR-USE-IN-CLASS
  3. 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

πŸ’‘ tip

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.

activity

Each team, choose a driver

  1. Driver, ask everyone in your team to confirm you are in the right working branch.
  2. 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.

activity

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.

activity

Now build your component. Elect a new driver.

  1. Find together.html in the /components-2 directory. Your mission is to complete this page.
  2. In the correct portion of the page, make your changes to build your feature on together.html.
  3. Driver, commit your changes to your feature branch.
  4. Open a pull request from your branch to the COHORT branch, with your changes. Ask for help!
  5. Remember, docs will help you too.
  6. 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.

⚠️ warning

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.

activity

  1. Go to the pull requests for this repo.
  2. Either individually or as a group, review each other’s PRs.
  3. Once you’re all happy with the PR, merge it.
  4. 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

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.

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

πŸ›ŽοΈ 0 PRs available. Open some pull requests! πŸ”—

Retro: Start / Stop / Continue

  activity</span>

A retro is a chance to reflect. You can do this on a FigJam (make sure someone makes a copy of the template before you start) or on sticky notes on a wall.

  1. Set a timer for 5 minutes. There’s one on the FigJam too.
  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.