Code Your Future - Home

🧑🏿‍🤝‍🧑🏾 day-plan

Iteration means to repeat. Developers do many small iterations to build software, each time adding or changing some small thing.

🔖
  1. Discovering blockers
  2. blockers
  3. Morning break
  4. MVP
  5. Lunch
  6. Using the Slack app
  7. Slack Rota
  8. pairing
  9. Afternoon break
  10. CYF Blocks
  11. Ship It
  12. Retro

Blockers!

Learning Objectives

Online Version of this game

Activity 25 minutes

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 5 minutes per round and then swap.

Reflection

Back in the main room.

Discussion 20 minutes

What did people think about this game? Let’s go around and each group share one thing you noticed about it.

You can do this workshop in person, online, or a mix of both. You can run this workshop 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.

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

Example reflection

This game interests me because to be successful you have to identify the blockers, which is something we all need to get better at. In this game, the blocker is often not the immediately obvious car ‘in the way’. To find it you might have to trace backwards around the board, thinking: to move this one I need to move that one, to move that one, I need to move this next one… And then you need to explain that to your team!

It’s a good reflection on blockers and planning.

More resources

Sharing Our Blockers

Learning Objectives

We call problems that stop our progress “blockers”. We talk through our blockers regularly and help each other get “unblocked” or “unstuck”.

Sharing Our Blockers

Join the Jam board or grab some sticky notes. Add your blockers.

Make sure to add only one blocker per note.

Morning Break

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

MVP

Learning Objectives

Recap - user stories

Can you remember the structure of a typical user story?

As a [who], I can [what] so that [why]

Favourite App (10 minutes)

Split into groups and think about one of your favourite phone apps. Agree on one you all know. Come up with as many user stories as you can for it.

You must come up with at least 10, but try for more. Set a timer for 10 minutes and write them on a new Jamboard or post-it notes.

Defining the Minimum Viable Product

Come back into the main room, now we have a long list of user stories, how do we decide what to do first? Where do we start? As always with software development, we start with the simplest thing possible. Let’s define the MVP.

What’s the minimum set of user stories we could implement for this product to be useful? Another way to say this is: “What is the minimum viable product?

Prioritise! (10m)

  1. Swap your Jamboard with another group.
  2. Now go back into breakout rooms, with another group’s Jamboard of user stories
  3. Set a timer for 10 minutes
  4. Choose the stories that make up the MVP for that app
  5. Are there any missing? Note them down

Now come back into one group.

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.

Using the Slack app 🔗

Learning Objectives

Preparation

Everyone must have their laptops connected to the internet and the Slack app open.

Introduction

Slack is a collaboration platform that enables efficient team communication, file sharing, and integration with various tools.

It’s important because it enhances productivity, fosters collaboration, and centralises communication for remote and distributed teams.

Let's share our knowledge about Slack

🎯 Goal: Share your knowledge about Slack (10 minutes)

Trainees should discuss the below questions about Slack and how to use it to share their knowledge with others.

  • What is a thread? 
  • How do we find a particular channel? 
  • Where do we look for notifications?
  • How can I turn off notifications so I am not overwhelmed?
  • Why is it important to react to a channel/message/thread?
  • Why do we need to check Slack daily?
  • Why should I avoid long texts and use short titles/paragraph with details in a thread? 
  • Why should we avoid using private messaging?

Let's practice using a thread

🎯 Goal: For everyone to actively use Slack and reply in a thread (10 minutes)

  • One trainee posts something on the cohort Slack (for example, do you like Slack? or What is your favourite colour?)
  • Every trainee must reply to it - this exercise only finishes if we have the same number of replies as the number of trainees in the class!

Organising the cohort thread

🎯 Goal: Organisation of tasks whilst using Slack (10 minutes)

Someone should post this question on Slack: “What would you do if you come to a class and there are no volunteers to guide it? How would you organise yourselves?”.

  1. Add on the thread one suggestion of what could be do
  2. React with a pertinent emoji to the suggestions you think should be adopted
  3. React with an emoji showing the suggestions you think should not be adopted

Discuss how you would organise your lesson

🎯 Goal: Understand how the cohort will self-organise (15 minutes)

With the input of the previous discussion in the thread, in groups of 4, discuss:

  1. List the 5 actions that are the highest priority, if you arrive and there is no volunteer available.
  2. Define what steps would you take to solve the 5 steps.
  3. 1 team to share their reflection and importance of knowing this
  4. Other teams to their complementary reflection

Remember: self-organisation is a goal for the cohort!

Google sheet for Slack rota 🔗

Learning Objectives

Preparation

One trainee must volunteer to create the Google Sheet.

Introduction

Knowing how Google Sheets work is essential as it enables efficient data organisation, analysis, and collaboration, enhancing productivity and enabling effective decision-making.

Effectively using Slack is also important since it will be part of your journey at CYF - and in your tech journey too. So let’s practice posting simple things.

This is our Slack Rota spreadsheet

🎯 Goal: Have 1 shared file in which trainees can organise the Slack rota (10 minutes)

One trainee will set up a Google sheet on the cohort drive

  • The title of the spreadsheet should be XXX Rota (substitute XXXX for the region initials and cohort number, for example, GLA 6)
  • Save the file on the cohort drive
  • The name of the tab should be “Slack Rota”
  • The first tab must have at least the columns Date and Name
  • Add all the dates for the Fundamentals course months
  • Post a message on the cohort Slack with the shared spreadsheet and the instructions on what to do (see below)

Instructions

  • Go to the tab Slack rota and add your name against one date.
  • Be carefule not to overwrite if someone else is adding their name.
  • Once you have done so, add a “Done” emoji on this post. You should have the same number of emojis added as trainees in your cohort.
  • If you know people who haven’t added their names yet, tag them in this thread to remind them.
  • This file will be the rota of that person’s daily messages posted on Slack. You have more information about it in your Coursework.

Pairing

Learning Objectives

It’s good to code with a friend. You learn SO much. Programmers call this pair programming and many professional teams program in pairs for a part of each day. Mentors will demonstrate pairing now.

Pairing (20 minutes)

In pairs, iteratively develop a solution to the CYF Blocks problem you are given.

  • Switch between driver and navigator roles after 10 minutes
  • The “driver” is the person typing on the keyboard, just thinking about what needs to be written
  • The “navigator” reviews what the driver is doing and is thinking about to write next
  • Don’t dominate - this is teamwork

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.

CYF Blocks

Learning Objectives

Now we have started to think about the idea of MVP, how can we use this to help us build working software?

Tip

It’s important that software works and that we and other people can use it!

In software development, we start with the smallest, simplest thing we can build that works. Then we incrementally improve it. This is iteration.

You all built a personal home page in Intro to Digital, and last week you shipped it. Now let’s iterate on your websites.

Point (10m)

In pairs, define some user stories for your own websites, to improve it. These should be:

  • a small change
  • that is achievable with the CYF Blocks seen in the course so far
  • but a complete feature
  • try for at least one feature that updates or changes the page when an action is taken (e.g. clicking when a button)

Tip: Read ahead

Read ahead to Ship It to see where to paste your code.

Click! (25m)

In the same pairs, try to implement one user story. While implementing, try to break down into steps where you can visually check that your code runs as expected.

Ship It

Learning Objectives

Websites don’t just stay the same forever - we make changes to them, and we want our users to be able to see and use our changes.

You just built some new feature for the website you shipped last week - let’s integrate those changes into your website, and push them to GitHub. Last week, we configured Netlify to automatically deploy a new version any time you push changes to GitHub. This means that when you push your changes to GitHub, your website should automatically update, and people can use your changes.

You will need:

  • The folder with your website from last week (you can re-export it from CodePen if you’ve lost it)
  • An account with GitHub and to be logged in
  • The generated code from your CYF Blocks work - click the “Generated Code” tab to see it

Exercise

First you’ll integrate the code you made in CYF Blocks into your website locally, then you’ll push it to GitHub to update your deployed website.

Step by step

Step One : Integrate the code locally

  1. Open up VSCode (which you should already have installed).
  2. In VSCode, open up the folder where your website is saved (File > Open Folder and choose the unzipped folder).
  3. Now your IDE shows your code just like Codepen did. Take a look.
  4. By default, VSCode doesn’t show you how the code renders (i.e. what the page looks like), only the HTML iteslf. But VSCode has extensions which can help with this! Install the Live Preview extension. After it’s installed, right-click on your code and click the “Show Preview” menu item. Now you can also view the rendered view right in your browser. Take a look! In the future you will find more VSCode extensions which are useful too - feel free to experiment with them!
  5. Try changing your HTML in some way. Make sure you see the change reflected in the preview.
  6. If one doesn’t already exist, create a new file called script.js (File > New File) in the same directory as your index.html.
  7. From CYF Blocks, click the “Generated Code” tab to see the JavaScript you created by putting together your blocks. Copy it all, and paste in in your new script.js file, and save the file.
  8. In your index.html page, add the following HTML, just before your the end of your body tag (before the </body>):
    <script src="script.js" type="text/javascript"></script>
  9. If the code you wrote needs elements from your CYF Blocks page, in CYF Blocks switch back to the “Static HTML” tab and copy that into your index.html wherever it makes sense. (You may not need to do this if you were already using elements and IDs that were already in your page).
  10. Test it out! Use your website locally and make sure it works as you expect. Fix anything that doesn’t work.

Step Two : GitHub

  1. Go to the same page as you used last week to upload your website (https://github.com/YOUR_GITHUB_NAME/YOUR_PROJECT_NAME/upload).
  2. Find the directory your website is in locally on your computer, and drag any new or changed files (probably index.html and script.js) into the page.
  3. Press “Commit changes”.
  4. Netlify should automatically deploy a new version with your changes - wait a minute then open up the netlify website you set up last week.
  5. 🎉 Congratulations! You shipped it! Your website has new features!

Retro: Start / Stop / Continue

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.

  1. Set a timer for 5 minutes.
  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.