🧑🏾‍🤝‍🧑🏾 day-plan

🔖
  1. Induction
  2. Energiser
  3. Morning break
  4. Kickoff
  5. Group Project: Spaced Repetition Tracker
  6. Development
  7. lunch
  8. Development
  9. Afternoon break
  10. Development
  11. Demo
  12. Wrap

✍🏽 Register

🫱🏽‍🫲🏾 Induction

Welcome to the Piscine.

Before you came to class today, you should have completed the prep and signed the Trainee Agreement and the Code of Conduct. If you haven’t done the prep, it’s time to leave. Thanks, and try again next time.

If you have done the prep, you’re in the right place. Please make sure you have signed the register. Sign it as soon as you come in. The register isn’t just for attendance rules; we need to know who is in the building if there’s a fire, so please don’t sign in for anyone else.

Next up, we need to choose a timekeeper. The timekeeper is responsible for keeping us on track and making sure we finish on time. Who would like to volunteer?

⏰ 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

Today you will kick off your first team project. At the end of the day, each person will give a two minute demo of something they have built, learned, or discovered today. Then we will wrap and go for a cup of tea together.

But first, let’s get to know each other. Stand up and find someone you don’t know. Introduce yourself and tell them one thing you are looking forward to learning in the Piscine.

⚡ Zip Zap Boing!

Learning Objectives

👉 Zip Zap Boing Gameplay

In a single group, have participants stand in a circle. This game works best with 5 or more players and must be played in person.

Make your zipzapper

Press your hands together in front of you, palms facing each other to make your energy zipzapper. Crackle! Feel the energy between your hands!

Point your zipzapper to the person next to you, and say “Zip”.

Point your zipzapper at anyone in the circle and say “Zap”.

Now, put both hands up in the air, jump, and say “Boing!” This reverses the direction of play.

Play the game

One person starts by saying “Zip” and pointing to another person in the circle. That person then has three options:

  1. Zip the person on your left or right.
  2. Zap anyone in the circle.
  3. Boing the energy back to them, which reverses the direction of play.

The game continues with players reacting quickly to keep the energy flowing.

If someone hesitates or makes a mistake, they’re out.

Evolve the game

Add variations to increase complexity and challenge
  • Round 2: Add a new word “Zop” which skips the next person in the circle
  • Round 3: Players must use a different gesture for each word (e.g., point for Zip, thumbs up for Zap, jazz hands for Boing)
  • Round 4: Increase the speed - anyone who takes more than 2 seconds to respond is out

🫖 Morning Break

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

Kickoff

Learning Objectives

At CYF we work in small teams to deliver working software with tests.

💡tip

It’s important that software works and the people can use it

🎯 Goal:

You will be split randomly into groups of 3-4.

🕹️Kickoff

  1. Review the project docs.
  2. Setup your project board.
  3. Break down the project into tasks.
  4. Assign tasks to team members.
  5. Agree on a deadline for each task.

💡 Tips:

  • Review the project docs before kickoff.
  • Keep it simple. Identify the simplest way you can meet the criteria.
  • Break it down. Split the work into small tasks on a board.
  • Communicate. Make sure everyone knows what they are doing.
  • Set deadlines. Agree on when you will have each task done.

🔗 Group Project: Spaced Repetition Tracker

Project: Spaced Repetition Tracker

At Code Your Future, we like to use a learning technique called spaced repetition. The technique involves reviewing a topic over increasing time gaps (e.g. after one week, one month, three months, six months, one year).

One of the difficulties of this approach is tracking which topic should be revised at what time. Your task is to write code which allows a user to track topics and show when they should revise these topics.

You should make a frontend, which displays an agenda of topics to revise on specific dates. You should use HTML and JavaScript only. You should not use CSS. We want to focus on your ability to create the correct logic and not spend time on creating the perfect UI.

Supplied scaffolding

We have provided a storage.js file, which contains four functions to help with data storage. storage.js is a file containing four functions:

  • getUserIds(): when called, returns an array of strings, each of which is a user id
  • getData(userId): when called with a user id string as an argument, returns an array of objects, each of which represents an agenda item for the user
  • addData(userId, data): when called with a user id string and an array of objects as arguments, it will append the agenda items data to the user’s stored agenda. Each of the objects should contain information about the agenda item, such as the date and topic that should be revised on that date. The function does not return anything
  • clearData(userId): when called with a user id string as an argument, it will clear any stored data associated with the user id. This is provided to help with development, and is not required in the final code

Note: None of the storage functions perform any validation or de-duplication, so ensure that you are sending the correct data before storing it.

Requirements

You must submit both a link to your GitHub repo, and a link to the deployed website.

Your website must be hosted on the internet, and must be automatically deployed when you merge changes to your GitHub repo.

Your website must include a drop-down to select a user to display information for. When a user is selected, you must display the agenda for that user. If there is no agenda for the user, you should present a message explaining this.

You must not implement any kind of authentication. Just a drop-down to choose which user’s information to display. You must not implement data storage yourself, as we have provided that for you.

After picking a user, your website should display the list of topics to revise in chronological order. For each revision date, it should display the date and the name of the topic to revise. Revision dates in the past should not be displayed.

Your website must include a form with a text input, a date picker and submit button that allows a user to add a new topic. This form must be accessible, so for example, hitting the Enter key will also submit the topic name, the same as clicking the submit button.

The date picker should default to today’s date, but allow selection of another date. You should use the built-in date picker for browsers, unless attempted as a bonus task. No credit is given for using an alternative date picker.

When the form is submitted, your website should calculate the date to revise for one week, one month, three months, six months and one year from the selected date. Using these calculations, your website should store the topic name and any necessary revision date data using the functions from storage.js as described above.

After the new data has been stored, the updated agenda must be displayed (including the new topic) for the relevant user.

Your GitHub repository must contain unit tests which demonstrate that your code works. End to end tests are optional.

Rubric

All of the below requirements must be met for the project to be considered complete:

  • The website must contain a drop-down which lists at least two users
  • Selecting a user must display the agenda for the relevant user (see manual testing below)
  • If there is no agenda for the selected user, a message is displayed to explain this
  • The website must contain a form with inputs for a topic name and a date picker. The form should also have a submit button.
  • The date picker must default to today’s date
  • Submitting the form adds a new topic to revise for the relevant user only. The topic’s dates to revise are calculated as one week, one month, three months, six months and one year from the selected date (see manual testing below)
  • After creating a new topic to revise, the agenda for the current user is shown, including the new topic
  • The website must score 100 for accessibility in Lighthouse
  • Unit tests must be written for at least one non-trivial function

Below are some manual testing steps and expected results, which will be run on all websites to fairly assess them.

Steps:

  1. Select User 1 from the drop-down
  2. Add “Functions in JS” to the text input
  3. Select the date 19th July 2024 from the date picker
  4. Submit the form

Expected result:

  • The agenda for User 1 is shown, with the revision dates shown as follows:
    • Functions in JS, 26th July 2024
    • Functions in JS, 19th August 2024
    • Functions in JS, 19th October 2024
    • Functions in JS, 19th January 2025
    • Functions in JS, 19th July 2025
  • Each of the revision dates show the topic name and the relevant date (styling/formatting does not matter as long as it is understandable)
  • The form remains on the website (allowing for further topics to be added)

Steps:

  1. Select User 2 from the drop-down
  2. Add “Variables in Python” to the text input
  3. Select the date 5th November 2024 from the date picker
  4. Submit the form
  5. Add “Functions in Python” to the text input
  6. Select the date 5th October 2024 from the date picker
  7. Submit the form

Expected result:

  • The agenda for User 2 is shown, with the revision dates shown as follows:
    • Functions in Python, 12th October 2024
    • Functions in Python, 5th November 2024
    • Variables in Python, 12th November 2024
    • Variables in Python, 5th December 2024
    • Functions in Python, 5th January 2025
    • Variables in Python, 5th February 2025
    • Functions in Python, 5th April 2025
    • Variables in Python, 5th May 2025
    • Functions in Python, 5th October 2025
    • Variables in Python, 5th November 2025
    • Each of the revision dates show the topic name and the relevant date (styling/formatting does not matter as long as it is understandable)
  • The form remains on the website (allowing for further topics to be added)

🧑🏿‍🔧 Team Development

Learning Objectives

This time is set aside for you to work together as a team to make progress on your project.

Remember: At your interview, you may be asked about any code in your project, not just the code you wrote. You need to understand and be able to explain the code your team mates wrote. Make sure you read their code, review it, and talk to them about it.

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

🧑🏿‍🔧 Team Development

Learning Objectives

This time is set aside for you to work together as a team to make progress on your project.

Remember: At your interview, you may be asked about any code in your project, not just the code you wrote. You need to understand and be able to explain the code your team mates wrote. Make sure you read their code, review it, and talk to them about it.

🫖 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 Development

Learning Objectives

This time is set aside for you to work together as a team to make progress on your project.

Remember: At your interview, you may be asked about any code in your project, not just the code you wrote. You need to understand and be able to explain the code your team mates wrote. Make sure you read their code, review it, and talk to them about it.

Demo

Learning Objectives

At CYF we expect you to demo your work to the class. You must have many opportunities to practice how to clearly and simply explain your work to others. This is really important for interviews and career success.

⏰ Timekeeper

The timekeeper will keep the groups on track.

Split randomly into groups of no more than 4 people. Mix up your teams. Each person will have 2 minutes to demo their work to the group. After the demo, the group will ask questions or give feedback for 5 minutes. Then the next person will demo their work.

🧑🏼‍🎓 Trainees

1. Demo

You will demo something about your work to the group.

You will have 2 minutes to explain what you did and why. It’s ok to show broken code or code that doesn’t work yet. Just make sure your demo is interesting.

2. Feedback

After the demo, the group will give you feedback for up to 5 minutes. It’s smart to suggest what kind of feedback you want by asking some “generative” questions. For example:

  • I wasn’t sure if it makes sense to try X. What do you think?
  • I liked the way I did X, but I know there are other approaches, what did you do?
  • I found X really confusing, did anyone else have the same problem?

💡 Tips:

  • Practice the format of demos before class.
  • Keep it simple. Don’t try to show everything you did. Just show one interesting thing.
  • Keep it short. Two minutes is enough.
  • Explain what you did and why.
  • Show your code.
  • Ask for feedback.

Rubric

These are some criteria we will be using to assess your demo. You must:

Clearly introduce the topic of the demo.
Someone watching should be able to state the topic of the demo in one sentence.
Explain what was done
Someone watching should be able to state what you have done in one sentence.
Explain the reasoning behind a choice.
Someone watching should be able to explain why you did at least one thing.
Show relevant code or artifacts (e.g. a website, a ticket, an discussion).
Someone watching should be able to identify at least one artifact of your work.
Ask questions.
Someone watching can state at least one question that was asked of the audience that is not "any questions?".
Stick to your time limit.
You should know how long you have for your demo, and stick to that time. You will be given a warning when you're running low on time.

Wrap

You are done for the day. Take a moment to reflect on what you have learned and achieved.

Stand in a circle and share:

  • 📛 your name
  • 💪🏽 one thing you built today
  • 👷🏾 the task you are going to work on next
  • 🛟 one thing you need help with

Give yourselves a round of applause. Now you have earned your rest. Usually people go for a drink (or a coffee) after class. You are welcome to join and wind down together.