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.

The backlog is a set of work designed to build understanding beyond the concepts introduced in the course prep. For your course, we have prepared a backlog of mandatory work for each sprint. You will copy these tasks into your own backlog. You can also add any other tickets you want to work on to your backlog, and schedule all of the tasks according to your own goals and capacity. Use your planning board to do this.

You will find the 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. Here’s a flowchart showing the stages a ticket goes through:

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.

📄 Create files for the first problem

Find the first problem in your prep for this module and create the files you’ll need to work on it.

1. In your prep directory, create a test file for the problem. For example, if the first problem is about calculating the mean, you would create a file called mean.test.js.
2. In your prep directory, create a matching file for the problem. For example, mean.js.

Do this in your VSCode terminal by running the following commands:

touch mean.test.js
touch mean.js

In the same directory, open your test file by running:

code mean.test.js

You’ll be writing in a “test driven development” style. This means you will write a test for the problem first, then write the code to make the test pass.

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.

Come on time when you’re learning

Many people give up their free time to teach us. They could be doing other things. We should respect this and always be on time.

Clean up after ourselves

Kind people let us use their space. We should keep it tidy and clean, just like our own homes.

Talk to each other (in English)

Put Slack on your phone and computer. Use it to ask for help and talk about classes. Speaking English helps everyone get better at it. Even if you know someone’s language, try to use English.

Learn to find answers yourself

We teach you how to look things up. Try to use Google to answer your own questions.

Use the computer yourself

Don’t let volunteers or peers type for you. Ask for help, but do the work on your own.

Help each other out

You’re all learning together. You can understand each other’s problems. Ask for help and offer it too. Explaining things to others helps you learn more.

We’re all part of this

This isn’t just a coding school. It’s for all of us - participants, trainees, volunteers. Try to make it better in any way you can.

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/

📂 Create a working directory for the module

1. Fork the coursework module (always linked in every backlog) and open it in VSCode.
2. In your VSCode terminal, navigate to the root of your project directory.
3. Create a new directory called prep to store all the files you’ll be working on for this module.

As you work through the module, you’ll be creating files in this directory to code along with the prep content. You are expected to code along with the prep content.

For simple one liners, use the terminal REPL to run the code. For more complex problems, create files in the prep directory and write the code there. Make commented notes as you go along explaining why you’re doing what you’re doing. Your future self will thank you.

🔑 The most important thing is to secure your understanding

The prep content is designed to help you understand the concepts you’ll be working with in the module. Don’t just read it, code along with it. Also take notes, draw diagrams, pose your own questions and try to answer them.

To really understand programming, you need to write the code yourself, and do the exercises. You must take active part in your learning to succeed.

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.

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.