Use this time to check over the success page this module. You can find the module success page at the top level of your module

At The Docs we expect you to register your attendance at the start of each day. If you don’t sign in, you will be marked as absent.

👣 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.

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.

In software development, we break down complex projects into smaller, manageable parts, which we work on for a week or two. These periods are called “sprints.”

A sprint backlog is like a to-do list. It lists what the team has decided to work on this sprint. It’s chosen from a larger list, usually called the “product backlog,” which holds the entire project to-do list.

For your course, the mandatory work has been scheduled already. You will add any other tickets you want to work on to your backlog and schedule them according to your own goals and capacity. Use your planning board to do this.

You will find your backlog in the Backlog view on every sprint.

Copy the tickets you are working on to your own backlog. Organise your tickets on your board and move them to the right column as you work through them. It’s a flowchart:

Online Version of this game

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

What we will learn today?

• What is a computer program?
• Getting started with JavaScript

What is a computer program

Intro to programming logic – Making a sandwich (Source: http://static.zerorobotics.mit.edu/docs/team-activities/ProgrammingPeanutButterAndJelly.pdf)

1. Ask the trainees what they think a program is at its most basic level
   • Guide, if necessary, towards the idea that its instructions or an action etc.
2. Focus on the idea of instructions:
   • Explain that like with a physical activity - tools and steps are required to carry out instructions
   • Introduce the group activity of programming the activity of making a sandwich
3. Ask the trainees what items we will need to make a sandwich:
   • As they shout them out list them on the screen for the whole class to see
   • Introduce the concept of objects and classes. Tie into the idea of how in a program these would be the ’tools’ required for an activity and how for our sandwich making task the items we have listed previously are our classes
4. Now that we have all of the tools we need to make a sandwich ask the trainees to shout out what they think the first step or instruction is:
   • Write the instruction out on the screen and ask the trainees which object would be needed to carry out that instruction
   • Copy the instruction and place it under the object that the trainees have decided is responsible for it and introduce the idea of methods
   • Continue asking the trainees for instructions and listing them under the objects that would be responsible for them (in the case where two objects are required to carry out an instruction try and break it down further with the trainees until only one object is responsible for any one instruction – could be a good way to introduce the idea of how specific you need to be in programming and the concepts that are detailed in the source example of this exercise)
5. Once the trainees are satisfied with the instructions take the best formed class and ask the trainees to come up with a one word summary for each instruction that is has. Explain the benefits of well named methods in programming and (maybe?) touch on naming conventions.

Getting started with JavaScript

We will spend most of this lesson in Codepen. To get started, go to https://codepen.io/pen to create a new Pen. On the bottom left, click the “Console” button to open the console.

You can place your cursor right behind the > sign. Type a simple expression, such as 2 + 2 and hit enter. You will see expression, as well as its result, in the window above.

You will be able to follow most of this session along just entering expressions in the console like this.

Variables and assignments

For an expression or a value to be of any use to us, we need to store it in a variable.

Variables have a name (identifier) that we can use to refer to a value. You can assign a value to a variable with the following statement:

var x = 3;
^   ^ ^ ^
|   | | value
|   | assignment operator
|   identifier
declaration statement

Let’s break this statement down:

• var: With the var statement we tell the JavaScript engine that x is now a variable
• x: The variable name/identifier. It can be short or long, but must not contain spaces and must not start with a number.
• =: The equal sign is the assigmnent operator
• 3: The value that we assign to the variable. This can be any number, string or boolean, or any more complex data type that we will introduce later. You can also use an existing variable here.
• ;: THe semicolon is not strictly needed, but is generally used to terminate a statement.

Now you can use the identifier instead of the actual value in an expression:

x + x, x * x, console.log(x)

Simple data types & Expressions

Numbers

Let’s start with something seemingly simple - numbers. Here are some:

1;
15;
3195803798;
1.4;
0.0000005;
0 - 23;

You will see that there are whole numbers (no decimal point) and real numbers (decimal point), which in JavaScript are so-called “floating point” numbers. Numbers can be positive or negative and they support all the basic math operators that you would expect:

2 + 2; // 4
2 - 5; // -3
2 * 3; // 6
10 / 2; // 5
3 * -2; // -6

Operators have the same precedence as in algebra: * and / have higher precedence than + and -.

• TODO: Do math exercise
• TODO: What about Infinity, Math.PI, IEEE floating points, NaN

Strings

Strings represent any sort of text. They are delimited by single quotes (') or double quotes (”) and can be of any length.

""; // empty string
""; // empty string
"Hello";
"I am learning JavaScript";
'It\'s been a great journey so far!';
"Double quotes work as well";

If you need single or double quotes inside the string, you need to “escape” them by putting a backslash in front of them. If you don’t do this, the JavaScript engine will think the string ends here, because it encounters a quote.

The most common operation on strings is to append one string to another. This is called string concatenation. It’s achieved by the plus (+) operator:

"Hello" + "World"; // "HelloWorld"

• TODO: Introduce string concatenation
• TODO: What about basic string functions, like substr, replace etc?

Booleans

Booleans are a data type that can only have two values: true and false.

Like numbers, they can be combined using operators, but there are different operators for booleans (analoguous to Boolean algebra). The most important ones are:

• ! (NOT), which negates a value:

!true; // false
!false; // true

• && (AND), which is only true if both operands are true:

false && false; // false
true && false; // false
false && true; // false
true && true; // true

• || (OR), which is true if at least one of the operands is true:

false && false; // false
true && false; // true
false && true; // true
true && true; // true

TODO: When to introduce truthiness and falsiness? Probably in comparisons?

Exercise: Put simple mathematical expressions into the console: 2 * 2, 2 + 2, 5 * 7 - 13 > Exercise: Calculate the area of a circle (r * r * pi). Do a quick Google search on how to use PI in JavaScript.

See what happens when you “add” two strings together

Research the JS Math library. sqrt, floor, ceil, round

Write an expression that outputs the percentage of trainees who are female. Make it so it outputs it as 58%, and make sure you use the actual numbers of women and the total number of trainees. Solution: console.log(Math.round(7 / 17 * 100) + "%");

From REPL to console.log

• Single expressions are not very useful, you want to write applications
• More than one statement? Move it to the JS box in Codepen
• Now you don’t get any immediate feedback
• Use console.log to print to the console: console.log(3 + 3);
• Write statements below each other

THOUGHT: Codepen does not have a “run” button, so it’s quite intransparent when it actually re-runs a program. Maybe a different tool is better? A simple jsbin configuration, maybe?

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.

You can use this time to work on the issues in your backlog. Now is the time to focus on your blockers and overcome these challenges with support from the community. Remember to focus on your 🔑 issues first before focusing on other Mandatory assignments from your backlog.

At The Docs 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 both for interviews and for getting promoted later on.

⏰ Timekeeper

The timekeeper will keep the groups on track.

Split randomly into groups of no more than 5 people. Each person will have 2 minutes to demo their work to the group. After the demo, the group will give feedback for 10 minutes. Then the next person will demo their work.

🧑🏼‍🎓 Trainees

1. Demo

You will demo 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 10 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 your demo 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.

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.

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.

🧑🏼‍🎓 Trainees

(If you don’t have a guest expert, do study group instead.)

Share your questions in a Slack thread by Friday 10am. This is an Ask Me Anything 🧶 🧶 Ask Me Anything Ask Me Anything. style session.

🦸🏾 Expert(s)

Read over the questions and prepare your answers before class if possible.

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. Set: a game of visual perception
4. Mastermind: a game of deduction
5. Sudoku: a game of logic
6. Mancala: a game of strategy

1. 🎙️ Nominate a facilitator (trainee or volunteer)
2. ⏰ Nominate a timekeeper (trainee or volunteer)

🎙️ Facilitator

Your role is make sure that everybody gets the chance to speak. Start the discussion by asking the group:

• What are the key ideas in this sprint that you want to discuss?
• What’s the biggest blocker you have right now?

Invite the group to spend ⏰ 5 minutes writing down key ideas and blockers on a board.

Vote on the focus

Give the group ⏰ 2 minutes to vote on what to discuss. +1 on the question is fine.

🐇 Begin with the most popular topic

Give the group ⏰ 10 minutes to discuss the most popular topic. Move the discussion on if it gets stuck. If the group is struggling to come up with ideas, ask them to think about:

• What documentation relates to this topic?
• What other problem is this problem like, that you have met before?
• Is there another way to solve this problem?

🕳️ Move on to the next topic

Keep the discussion moving and help the group to stay on track. Your job is to prevent “rabbit holing” on one topic.

⏰ Timekeeper

Keep the discussion on track by keeping an eye on the time. Use a stopwatch and give the group a 30 second warning before the end of the session.

The goal of a kata is to practice a specific skill, such as refactoring, or to learn a new language or framework.

Kata are often used in coding dojo, a practice where a group of programmers work together to solve a programming problem. Today we will use kata to practice TDD, using a simple kata from our Codewars collections.

🧰 Check your setup

• You must have a UNIX operating system (MacOS or Linux). Don’t use Windows.
• You must have VSCode installed. Don’t use another editor.
• You must have the CYF VS Code extension pack installed and Prettier enabled. Don’t use another formatter.

🧹 Linting and formatting

Using a shared formatting convention makes sure your “diffs” ( differences between the codebase and your changes) only show the code you intentionally wrote, and not a bunch of spaces or tabs. It will also help you read your own code as you work on it.

Ask for help on Slack if you are having trouble with Prettier. If you can find a group also blocked by this, schedule a thirty minute study session to set this up together.

Your pull requests may be automatically rejected if your code is not formatted and linted.

This is a local block example. You can write anything in here using markdown and use shortcodes to access extra formatting.

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

This placeholder is for the PD session, which will be added by PD from their platform https://cyf-pd.netlify.app/

Retro on the class day and the sprint

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

Communication is hard. Today, let’s explore some ways we communicate with each other in software development. It’s not enough to draw a picture of a website and assume the other person will build what you imagine. It’s never a good idea to assume shared context or shared interpretations.

So how do we understand what to do? By understanding requirements.

Formalising Requirements

Today we’re going to think about requirements. We’re going to ask these questions:

• why we’re working on a project
• who we’re making it for
• what they’re going to use it for.

Before starting to solve a problem (how), step back and ask yourself those why, who, and what questions.

We’re going to think about a few projects and discover some requirements. This is really important in order to do technical work, but you don’t need to have any coding experience, or be thinking about coding, when doing this.

This page aims to give you the best links for working as a developer and improving your skills.

• This developer roadmap gives a very good overview of what a senior developer should know or be aware of in the modern front-end, back-end or devops world. It’s useful as something to aim for, but remember it’s impossible to be extremely good at all of this so don’t feel overwhelmed!

Front-end development

• The Front-end Developer Handbook is an amazing resource containing everything related to front-end development. There’s a lot here so only focus on the sections you want to learn.
• DevDocs is great for quickly finding documentation
• HTML Tag Periodic Table is an interesting way to visual all of the HTML tags in use on browsers.

Software craftsmanship

• You should code with these programming principles in mind. Focus on what’s in the Generic section.
• decent-code is a thorough guide on good programming practices to create quality code
• commit-messages-guide is a guide on good practices for writing commit messages

Professionalism

• Don’t Call Yourself A Programmer is a really excellent article which gives you advice on how to be professional and confident

Algorithms and data structures

• bigocheatsheet.com — Big-O cheat sheet
• visualgo.net — visualises data structures and algorithms through animation

Free developer resources

• free-for.dev — contains a list of software that have free tiers for developers
• public-apis — contains a list of free APIs

Developer tools

• Remote Tools — contains a list of tools useful in the life of a developer
• Awesome Design Tools — contains a big list of design tools

Surveys

• Stack Overflow Developer Survey Results 2019
• State of JS 2019
• State of CSS 2019
• Screen Reader User Survey #7 Results

Games and quizzes

• CSS Diner — practice CSS selectors
• Flexbox Froggy — practice CSS flexbox
• Flexbox Defence — practice CSS flexbox
• Grid Garden — practice CSS grid
• SQL Zoo — practice SQL
• SQL Bolt — practice SQL
• Learn Git branching — practice Git branching
• Front End Web Development Quiz
• JavaScript Web Quiz (advanced)

Imagine a coursework tracker

As trainees, you have coursework to do. Imagine a website which tracks how coursework is going for you all. Thinking about that website, some user stories could be:

• As a trainee, I can ask for help with a topic or task.
• As a mentor, I can see who needs extra support.
• As a trainee, I can see what coursework I need to complete and when.
• As a mentor, I can see what coursework has not been completed.

These each take the form “As [who], I can [what]”. They don’t say why yet.

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

Reflecting

This space is for a workshop activity of your choosing. In order for this to actually happen, you must organise it ahead of time.

👷🏿‍♀️ No lectures

Code Your Future workshops are designed to be interactive. Developed by volunteers and trainees, they are not about listening to a lecture. They are about doing, discussing, and learning together.

💪🏾 No spoonfeeding

Workshops are also not tutorials, where you follow along step-by-step. CYF workshops are meant to expose gaps and mistakes in your understanding, so mentors can help you fix them. This means you should expect to be challenged and to make mistakes. This is the main value of mentor-led workshops.

👂🏿 Responding to needs

You can run a workshop in person on class days, or online in the week. Mentors volunteer to run workshops on Slack, and learners propose topics they need help with. There are a huge number of workshops available at workshops.codeyourfuture.io/.

Organise a workshop on Slack

This is a project you will build in a team. First form your team, then start the project by forking the repo.

1. Form your team

1. Split into teams of 3 or 4. Use a random team generator.
2. Get together with your team during class day and agree on your way of working for this project.

2. Agree your Way of working

This is the most successful strategy

• Create a temporary Slack channel for your team. Use this channel and your class time for communication about the project management and the product development.
• Each team member must understand the requirements of a ticket before moving it from the Backlog to Ready. Make use of your class time to discuss the tickets as a team.
• Decide whether you are going to work on tickets individually or as a pair. You may work faster on your own but may learn more as a pair.
• Each feature must be reviewed by another member of your team . Set a branch protection rule on your main branch to enforce this.
• Each team member can pick up a new ticket only when their old ticket is in review. Work on one thing at a time.

3. Set up the repo

1. One person should fork the project repo to their own GitHub account.
2. Add the other team members as collaborators to the repo.
3. Now someone else should make a copy of the example planner and link it to your project repo.
4. All the tickets for your project are created as issues in this repo. Batch clone the tickets into your project planner.

On your branch protection settings:

Require a pull request before merging. When this is enabled, all commits must be made to a non-protected branch and submitted via a pull request before they can be merged into a branch that matches this rule.

Require approvals: 1. When this is enabled, pull requests targeting a matching branch require a number of approvals and no changes requested before they can be merged.