🧑🏾‍🤝‍🧑🏾 day-plan

🔖
  1. Energiser
  2. Demo
  3. Morning break
  4. Kickoff
  5. Group Project: Days Calendar
  6. Development
  7. lunch
  8. Development
  9. Afternoon break
  10. Development
  11. Wrap

✍🏽 Register

🚗 Blockers!

Learning Objectives

Online Version of this game

🚗 Traffic Jam Gameplay

In groups or breakout rooms of 4 trainees maximum.

One person will share their screen and be the driver. The driver can only move the pieces where you are told by the navigators. The driver cannot make any decisions!

The others will be the navigators. Together, the navigators must figure out a strategy to unblock the car, and tell the driver how to do it!

Each person must drive so set a timer for and then swap.

You can do this energiser in person, online, or a mix of both. You can play this completely offline using this kit: Rush Hour.

Start on Level 6 or above and get everyone to load the page before you go into breakout rooms/groups. Put your adblocker on!

Facilitator Check in questions

Model ways of thinking about the game strategically instead of just trying stuff randomly
  • Which car is the blocker? Everyone guess!
  • What shall we do first?
  • What do you notice about the cars? Are they different sizes?
  • What do you notice about the board? What does this mean for our choices?
  • Is it frustrating being the driver?
  • Are we there yet? Shall we play another round?
  • What one thing shall we say we noticed about this game, back in the main room?

Evolve the game

Evolve the game each time you play to guide the players to insights
  • Round 2: You must discuss for 1 minute before you make any moves
  • Round 3: A single navigator can make no more than three moves in one go
  • Round 4: Try to solve the puzzle in as few moves as you can

More resources

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.

🫖 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: Days Calendar

Days calendar project

There are some commemorative days which occur annually, but not on a fixed date.

For example, Ada Lovelace Day happens on the second Tuesday every October.

The date that it occurs is different every year. But it has a fixed pattern.

We have supplied a JSON file (data.json) which contains descriptions of several of these days.

The goal of this project is to present this data usefully to users.

Requirements

This may be an individual or a team project - your class leaders will tell you which you are doing.

Some of the requirements of this project are only required if you are working in a group of at least a certain size.

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.

You must be able to explain every line of code in your project, even ones other people in your group wrote.

Requirements for everyone

Regardless of your group size, you must:

  • Create an HTML page which, when loaded, displays a calendar.
  • The calendar must show every day of the current month, each as a rectangle. Each row of rectangles must show one week. The first column must show Mondays. The first day of the month must be shown in the first row.
  • There must be two buttons which, when clicked, switch what is displayed. One button must change the display to the previous month. The other button must change the display to the next month. On repeated clicks, these buttons must keep moving back/forwards in time, one month per click.
  • There must be a way to jump to a particular month and year, e.g. “October 2020”. For example, you could use a <select> tag for each of the month name and a reasonable range of years.
  • The days from the JSON file must appear correctly when the month they fall in is displayed. For example:
    • If October 2024 is being shown, October 8th must show Ada Lovelace Day.
    • If October 2025 is being shown, October 14th must show Ada Lovelace Day.
  • The calendar should work for every year - if someone goes to 1900, or 2050, or any other year, the commemerative days should be correctly displayed.
  • The calendar must be dynamically generated by reading the JSON file. You must not hard-code any days in the HTML file.
  • Other than the above styling requirements, no styling is required.

Requirements for groups of at least 2

As well as all previous requirements, you must:

  • Produce a script that can be run in a terminal via node, which outputs to standard out (via calls to console.log) an iCal format file containing entries for every day in the JSON file. You must not use recurring events. There must be one entry per commemorative day per year from 2020 until 2030 (inclusive).
  • If you save this output to an .ics file, and import it into Google Calendar, it should show the days correctly in the calendar. There is a suggested workflow for testing this listed below.
  • Logic for calculating dates must be shared between the web generator and the iCal generator.

Requirements for groups of at least 3

As well as all previous requirements, you must:

  • Fetch a description of the day from the URL supplied in the JSON file.
  • In the HTML page, if you click on a listed commemorative day, the page should show a description of the day, for instance in the calendar event or as a modal dialog in the page.
  • In the iCal file, the DESCRIPTION field should contain the description of the day.

How to test Google Calendar imports

Go to https://calendar.google.com

We recommend you create a new empty calendar for testing. To do this:

  1. In the bar on the left next to “Other Calendars”, click the “+” and then “Create new calendar”.
  2. Give your calendar a name like “Test calendar”.

Import your .ics file into the calendar. To do this:

  1. In the bar on the left next to “Other Calendars”, click the “+” and then “Import”.
  2. Select your test calendar from the “Add to calendar” drop down".
  3. Select the .ics file you have created.
  4. Press “Import”.

Each time you do this, you probably want to delete your Test calendar, and create a new one.

Supplied scaffolding

We have supplied a few sample files in the repo to demonstrate how you can define functions in one file, and use them both from a web page and a Node application. Feel free to use these files in your solution if you want, or to just use them for inspiration for your own solution.

Note that when running locally, in order to open a web page which uses modules, you must serve the directory over HTTP e.g. with https://www.npmjs.com/package/http-server - you can’t open the index.html file using a file:// URL.

Rubric

For everyone

  • On the web page, open October 2024. Observe:
    • A grid of 5 rows x 7 columns.
    • The first row contains Tuesday October 1 - Sunday October 6. Monday is either labelled for September 30 or is blank.
    • The last row contains Monday October 28 - Thursday October 31. Friday - Sunday are either labelled for November or are blank.
    • October 8th: Ada Lovelace Day.
    • October 25th: World Lemur Day.
  • On the web page, open October 2020. Observe:
    • October 13th: Ada Lovelace Day.
    • October 30th: World Lemur Day.
  • On the web page, open May 2030. Observe:
    • May 11th: International Binturong Day.
  • The following months start and end on these dates, and do not have extra days or padding boxes outside of the weeks they’re meant to cover:
    • 2025-01: Wednesday (two days before, labelled or blank) - Friday (two days after, labelled or blank)
    • 2025-03: Saturday (5 days before) - Monday (6 days after)
    • 2025-09: Monday (no empty days before) - Tuesday (5 empty days after)
    • 2025-11: Saturday (5 empty days before) - Sunday (no empty days after)
  • Functioning previous and next buttons.
  • A usable way of jumping to a month+year.
  • UI is generated by DOM manipulation.

For groups of at least 2

  • Run the supplied file with node, sending the output to a file named generated-days.ics. Import that file into a Google Calendar (see instructions above). Verify the same dates as in the web UI.
  • Logic for calculating dates must be shared between the web generator and the iCal generator.

For groups of at least 3

  • Clicking an Ada Lovelace Day in the web UI displays the below text.
  • Clicking a Google Calendar event for Ada Lovelace Day displays the below text.

Text for Ada Lovelace Day (which must be fetched via API):

Ada Lovelace was a mathematician who made contributions to the field of computing in its very early days. On Ada Lovelace Day we celebrate and raise awareness of the contributions of women to STEM fields.

🧑🏿‍🔧 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.

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.