🧑🏿‍🤝‍🧑🏾 day-plan

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.

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. (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?
  1. Define which team member will 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. (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.

Morning Break

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

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.

Bump @babel/traverse from 7.21.4 to 7.23.2 🔗

Bumps @babel/traverse from 7.21.4 to 7.23.2.

Release notes

Sourced from @​babel/traverse's releases.

v7.23.2 (2023-10-11)

NOTE: This release also re-publishes @babel/core, even if it does not appear in the linked release commit.

Thanks @​jimmydief for your first PR!

:bug: Bug Fix

  • babel-traverse
  • babel-preset-typescript
  • babel-helpers
    • #16017 Fix: fallback to typeof when toString is applied to incompatible object (@​JLHwung)
  • babel-helpers, babel-plugin-transform-modules-commonjs, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime

Committers: 5

v7.23.1 (2023-09-25)

Re-publishing @babel/helpers due to a publishing error in 7.23.0.

v7.23.0 (2023-09-25)

Thanks @​lorenzoferre and @​RajShukla1 for your first PRs!

:rocket: New Feature

  • babel-plugin-proposal-import-wasm-source, babel-plugin-syntax-import-source, babel-plugin-transform-dynamic-import
  • babel-helper-module-transforms, babel-helpers, babel-plugin-proposal-import-defer, babel-plugin-syntax-import-defer, babel-plugin-transform-modules-commonjs, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime, babel-standalone
  • babel-generator, babel-parser, babel-types
  • babel-generator, babel-helper-module-transforms, babel-parser, babel-plugin-transform-dynamic-import, babel-plugin-transform-modules-amd, babel-plugin-transform-modules-commonjs, babel-plugin-transform-modules-systemjs, babel-traverse, babel-types
  • babel-standalone
  • babel-helper-function-name, babel-helper-member-expression-to-functions, babel-helpers, babel-parser, babel-plugin-proposal-destructuring-private, babel-plugin-proposal-optional-chaining-assign, babel-plugin-syntax-optional-chaining-assign, babel-plugin-transform-destructuring, babel-plugin-transform-optional-chaining, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime, babel-standalone, babel-types
  • babel-helpers, babel-plugin-proposal-decorators
  • babel-traverse, babel-types
  • babel-preset-typescript

... (truncated)

Changelog

Sourced from @​babel/traverse's changelog.

v7.23.2 (2023-10-11)

:bug: Bug Fix

  • babel-traverse
  • babel-preset-typescript
  • babel-helpers
    • #16017 Fix: fallback to typeof when toString is applied to incompatible object (@​JLHwung)
  • babel-helpers, babel-plugin-transform-modules-commonjs, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime

v7.23.0 (2023-09-25)

:rocket: New Feature

  • babel-plugin-proposal-import-wasm-source, babel-plugin-syntax-import-source, babel-plugin-transform-dynamic-import
  • babel-helper-module-transforms, babel-helpers, babel-plugin-proposal-import-defer, babel-plugin-syntax-import-defer, babel-plugin-transform-modules-commonjs, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime, babel-standalone
  • babel-generator, babel-parser, babel-types
  • babel-generator, babel-helper-module-transforms, babel-parser, babel-plugin-transform-dynamic-import, babel-plugin-transform-modules-amd, babel-plugin-transform-modules-commonjs, babel-plugin-transform-modules-systemjs, babel-traverse, babel-types
  • babel-standalone
  • babel-helper-function-name, babel-helper-member-expression-to-functions, babel-helpers, babel-parser, babel-plugin-proposal-destructuring-private, babel-plugin-proposal-optional-chaining-assign, babel-plugin-syntax-optional-chaining-assign, babel-plugin-transform-destructuring, babel-plugin-transform-optional-chaining, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime, babel-standalone, babel-types
  • babel-helpers, babel-plugin-proposal-decorators
  • babel-traverse, babel-types
  • babel-preset-typescript
  • babel-parser

:bug: Bug Fix

  • babel-plugin-transform-block-scoping

:nail_care: Polish

:microscope: Output optimization

  • babel-core, babel-helper-module-transforms, babel-plugin-transform-async-to-generator, babel-plugin-transform-classes, babel-plugin-transform-dynamic-import, babel-plugin-transform-function-name, babel-plugin-transform-modules-amd, babel-plugin-transform-modules-commonjs, babel-plugin-transform-modules-umd, babel-plugin-transform-parameters, babel-plugin-transform-react-constant-elements, babel-plugin-transform-react-inline-elements, babel-plugin-transform-runtime, babel-plugin-transform-typescript, babel-preset-env

v7.22.20 (2023-09-16)

... (truncated)

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
London 10 - Paulina Wywrot - Unit Testing - JS3 - Week 4 🔗

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
London 10 - Paulina Wywrot - Using Fetch - JS3 - 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
London 10 - Paulina Wywrot - Programmer-Humour - JS3 - 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
London_10 | Andrius Isin | using-fetch | JS3 | 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

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.

💡 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

Set up your working branch 15m

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

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

  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.

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.

  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.

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

  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

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.

Bump @babel/traverse from 7.21.4 to 7.23.2 🔗

Bumps @babel/traverse from 7.21.4 to 7.23.2.

Release notes

Sourced from @​babel/traverse's releases.

v7.23.2 (2023-10-11)

NOTE: This release also re-publishes @babel/core, even if it does not appear in the linked release commit.

Thanks @​jimmydief for your first PR!

:bug: Bug Fix

  • babel-traverse
  • babel-preset-typescript
  • babel-helpers
    • #16017 Fix: fallback to typeof when toString is applied to incompatible object (@​JLHwung)
  • babel-helpers, babel-plugin-transform-modules-commonjs, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime

Committers: 5

v7.23.1 (2023-09-25)

Re-publishing @babel/helpers due to a publishing error in 7.23.0.

v7.23.0 (2023-09-25)

Thanks @​lorenzoferre and @​RajShukla1 for your first PRs!

:rocket: New Feature

  • babel-plugin-proposal-import-wasm-source, babel-plugin-syntax-import-source, babel-plugin-transform-dynamic-import
  • babel-helper-module-transforms, babel-helpers, babel-plugin-proposal-import-defer, babel-plugin-syntax-import-defer, babel-plugin-transform-modules-commonjs, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime, babel-standalone
  • babel-generator, babel-parser, babel-types
  • babel-generator, babel-helper-module-transforms, babel-parser, babel-plugin-transform-dynamic-import, babel-plugin-transform-modules-amd, babel-plugin-transform-modules-commonjs, babel-plugin-transform-modules-systemjs, babel-traverse, babel-types
  • babel-standalone
  • babel-helper-function-name, babel-helper-member-expression-to-functions, babel-helpers, babel-parser, babel-plugin-proposal-destructuring-private, babel-plugin-proposal-optional-chaining-assign, babel-plugin-syntax-optional-chaining-assign, babel-plugin-transform-destructuring, babel-plugin-transform-optional-chaining, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime, babel-standalone, babel-types
  • babel-helpers, babel-plugin-proposal-decorators
  • babel-traverse, babel-types
  • babel-preset-typescript

... (truncated)

Changelog

Sourced from @​babel/traverse's changelog.

v7.23.2 (2023-10-11)

:bug: Bug Fix

  • babel-traverse
  • babel-preset-typescript
  • babel-helpers
    • #16017 Fix: fallback to typeof when toString is applied to incompatible object (@​JLHwung)
  • babel-helpers, babel-plugin-transform-modules-commonjs, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime

v7.23.0 (2023-09-25)

:rocket: New Feature

  • babel-plugin-proposal-import-wasm-source, babel-plugin-syntax-import-source, babel-plugin-transform-dynamic-import
  • babel-helper-module-transforms, babel-helpers, babel-plugin-proposal-import-defer, babel-plugin-syntax-import-defer, babel-plugin-transform-modules-commonjs, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime, babel-standalone
  • babel-generator, babel-parser, babel-types
  • babel-generator, babel-helper-module-transforms, babel-parser, babel-plugin-transform-dynamic-import, babel-plugin-transform-modules-amd, babel-plugin-transform-modules-commonjs, babel-plugin-transform-modules-systemjs, babel-traverse, babel-types
  • babel-standalone
  • babel-helper-function-name, babel-helper-member-expression-to-functions, babel-helpers, babel-parser, babel-plugin-proposal-destructuring-private, babel-plugin-proposal-optional-chaining-assign, babel-plugin-syntax-optional-chaining-assign, babel-plugin-transform-destructuring, babel-plugin-transform-optional-chaining, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime, babel-standalone, babel-types
  • babel-helpers, babel-plugin-proposal-decorators
  • babel-traverse, babel-types
  • babel-preset-typescript
  • babel-parser

:bug: Bug Fix

  • babel-plugin-transform-block-scoping

:nail_care: Polish

:microscope: Output optimization

  • babel-core, babel-helper-module-transforms, babel-plugin-transform-async-to-generator, babel-plugin-transform-classes, babel-plugin-transform-dynamic-import, babel-plugin-transform-function-name, babel-plugin-transform-modules-amd, babel-plugin-transform-modules-commonjs, babel-plugin-transform-modules-umd, babel-plugin-transform-parameters, babel-plugin-transform-react-constant-elements, babel-plugin-transform-react-inline-elements, babel-plugin-transform-runtime, babel-plugin-transform-typescript, babel-preset-env

v7.22.20 (2023-09-16)

... (truncated)

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
London 10 - Paulina Wywrot - Unit Testing - JS3 - Week 4 🔗

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
London 10 - Paulina Wywrot - Using Fetch - JS3 - 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
London 10 - Paulina Wywrot - Programmer-Humour - JS3 - 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
London_10 | Andrius Isin | using-fetch | JS3 | 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