Session 2 Googling, Classes, Data Types, Iteration

Goals

By the end of this session, you will be able to:
  • use keyboard shortcuts to navigate your computer and Chrome
  • brainstorm classes for specific objects
  • refine searching and filtering skills to Google programming questions
  • recognize mistakes in code
  • define and identify use cases for basic data types
  • demonstrate iteration in real-world and programming sitauations

Agenda

Materials

  • Quiet Space
  • Notebook
  • Writing instrument
  • Laptop
  • Headphones & mic

Intro

  • Intros: Rachel and Tim
  • Goals for session (see above)
  • Bookmark this page with the shortcut command + d

Housekeeping

  • Did you install Spectacle?
  • Change display name to first name, last initial, pronouns, program; ie - Rachel W. (she/her, BE)
  • Session will be recorded and posted in Slack
  • Find a typo?

Mod 0 Expecations

Mod 0 is less about code or solving difficult problems and more about developing and learning tools, procedures, systems, and learning behaviors/processes. For some of you, the technical content will be brand new. For others, it will be review.

At the end of Session 5, you’ll take a technical assessment that will showcase a subset skills you learn during Mod 0. The assessment will be performance-based rather than multiple choice. The assessment instructions will include a checklist of what we’re looking for to know that you’ve practiced and mastered the material.

Successful completion of assignments, session engagement, and the Session 5 Technical Assessment will result in a rating of “Turing-Ready.” At any point if you feel like you may not meet the expectations, or you need advice/guidance on meeting an expectation, please reach out via Slack to either Rachel, Tim, or Sarah.

Try It: Planning your Growth (Break out rooms)

1. Introduce yourself (name, pronouns, most unbelievable fact about yourself).

2. Out of the list above, which 2-3 skills will be your focus for the next week, and how will you improve them? For example, if I want to work on participation, I might share:

I will type questions into the chat box when I don't understand something and I will volunteer to share my answers even if I'm not sure I'm right.

3. How will you hold yourself accountable?

Other things to note as we go through Mod 0:

  • Zoom: turn video on, turn mic off unless speaking
  • Breakout Rooms: don’t be afraid to speak! Breakout rooms will be randomized at the beginning of each session, but continue to rely on your accountabilabuddy groups from Session 1 between sessions
  • Problems or individual questions during the Zoom session? Message the non-presenting host (either Rachel or Tim)
  • NOTE: text typed into this page will not save, so don’t refresh or close this window until you’ve reviewed your notes.

Keyboard Shortcuts

Most computer users rely heavily on the mouse to open applications, interact with programs, etc. You might think that you’re quick with a mouse, but just wait until you get good at keyboard shortcuts.

Initially, your flow will be slower as you learn and memorize each of the shortcuts. However, if you force yourself to use these shortcuts, you’ll become MUCH faster in the long run.

Try it: Shortcuts

Mac Environment

Use these shortcuts to quickly move around within your environment.

  • Open a program or search for a file:
    command + spacebar

    Then start typing the name of the program or file to search for such as "Terminal" Or "Chrome", then press return to open that program or file

  • Cycle through open programs:
    command + tab + tab ...
  • Switch between separate open windows of the same program:
    command + `
  • Quit an Open Program:
    command + Q

Spectacle

Start by making sure Spectacle is running with (command + spacebar) then type spectacle and then return. You should see a sunglasses icon at the top right of your menu bar. Click the icon to see a dropdown of your shortcuts. Click preferences to customize them.

  • Full Screen Current Window:
    command + option + F
  • Left Half Current Window:
    command + option + left-arrow
  • Right Half Current Window:
    command + option + right-arrow
  • Top Half Current Window:
    command + option + up-arrow
  • Bottom Half Current Window:
    command + option + down-arrow

Chrome Browser

Start by opening Chrome with the shortcut (comamnd + space) you already learned.

  • Bookmark Page:
    command + D
  • Open New Tab:
    command + T
  • Open New Window:
    command + N
  • Open New Incognito Window:
    command + shift + N
  • Highlight Current URL:
    command + L
  • Cycle Through Tabs:
    Right: control + tab
    Left: control + shift + tab
  • Reload Page:
    command + shift + R
  • Close Tab:
    command + W

Classes

Defining and Identifying Classes

Note: This is a topic that we will revisit in bite-size chunks leading up to Session 5. We will not talk about the technical aspects of how classes play a part in programming today; instead, we will apply the terminology and concepts to real life.

Think of a class as a category of thing. For example, my sister’s children Landon, Luca, and Arlo (instances) are all different versions of a child (class).

My Old Navy sweatshirt and my American Giant sweatshirt (instances) are different versions of a sweatshirt (class).

Great Expectations by Charles Dickens and Becomming by Michelle Obama (instances) are different versions of a book (class).

Class names are always singular: child (instead of children), sweatshirt (instead of sweatshirts), and book instead of books.

Try It: Classes

Post two sentences in the chat using this structure:

______, ________, and _______ (instances) are different versions of a ________ (class).

Attributes of Classes

An attribute of a class is a characteristic that every instance of that class has.

For example:

  • Each child (class) has a first_name, last_name, and birthdate (attributes).
  • Each sweatshirt (class) has a color, size, brand, and price (attributes).
  • Each book (class) has a title, author, publisher, published_date, and total_pages (attributes).

Try It: Attributes

Post two sentences in the chat about your two classes using this structure:

Each _______ (class) has a _______, ________, and ________ (attributes).

Googling

Believe it or not, a good chunk of your time as a programmer will be spent Googling to find answers to your questions. In fact, a somewhat experienced programmer will Google at a much higher rate than a beginning programmer. Therefore, it’s really important to get good at Googling.

For a frame of reference so that you know just how often we rely on Google (even the “easy” stuff), this is my most recent Chrome history as I’ve been building this curriculum 😂

Rachel's search history

When I Google programming questions, I usually include three things (in varying orders):

  1. What I want to do (verb)
  2. to what thing (noun)
  3. using what language or tool

For example, if I wanted to add a thick green border to a heading on my webpage and I’m using plain CSS for styling, I might google this:

how to add border to heading css

or

make border on heading element css

SUPER IMPORTANT: You might not get the results you’re looking for on the first go-around.

Try It: Writing Google-able Phrases

Write out Google-able search phrases for each of the following scenarios. Do not get hung up on being unfamiliar with the terminology for each scenario. We just want phrases to put into Google.

1. I am using Git for version control and made a typo in a commit message. I need to change it before I push my changes to GitHub.

2. I got this error message when I ran my Ruby program and I don't know what it means or how to fix it: "unterminated string meets end of file"

3. A Mod 0 homework assignment asks you to print out your git log in oneline (yes, oneline, not a spelling error) format and Rachel definitely did not teach how to do this during class.

Sifting Through Results

Once you formulate a good Google search and receive your results, there are a few things you’ll want to consider when determining which results to open.

Demo: Google Results

We'll look through some Google results for "change width of textarea in html". Be ready to jot down tips for sifting through results.

BREAK

Turn off your mics and videos and walk away from the computer. Stand up, stretch, drink water. Do a few sit-ups, squats, push-ups, jumping jacks, arm circles, stress ball squeezes, or whatever else moves your body.

Recognizing Mistakes

About 90% of the time (especially as a beginner), the reason your code won’t work is because of a typo. For this reason, it’s important to start training your eyes to recognize slight differences between correct and incorrect code.

Here’s an example. Can you spot the mistake?

document.querySelector('.ghost').classList.toggle('x');
document.querySelector('ghost').classList.toggle('x');

Try It: Recognizing Mistakes

Use the original column (left) and mistake column (right) to practice recognizing mistakes. How many can you spot?

Original Mistakes
git commit -m "Add new file" git commit -m "Add new file'
function doThings() {
  return false
}
function doThings() {
  returns false
}
#footer {
  background: url("img_tree.gif");
  border: 3px solid black;
}
#footer {
  background: url("img_tree.gif");
  border: 3 px solid black;
}
<h1>This is a REALLY large heading</h1> <h1>This is a REALLY large heading<h1>
"SELECT \"developers\".* FROM \"developers\"" "SELECT \"developers\"*. FROM \"developers\""

Be ready to share: What strategies are most effective for you personally when trying to spot mistakes?

Basic Data Types

In most programming languages, you’ll find the same basic data types. A data type represents the kind of data that you can use in the programming language. In this section, we’ll discuss five different basic data types that are applicable to both the front end and back end.

Try It: Basic Data Type Definitions

In your breakout groups, discuss and/or use Google to figure out what each of the following data types are used for in programming. Use your notebook to jot down your answer (and examples, if applicable).

1. What are strings used for in programming?

2. What are integers and floats used for in programming?

3. What is a boolean value used for in programming?

4. What is an array used for in programming?

5. If you're in the front end program, we're going to call the next data type an object. If you're in the back end program, we're going to call it a hash. What is this data type used for in programming?

Data Type Use Cases and Syntax

Luckily for us, the syntax (the way we write) for these basic data typs is almost identical in Ruby and JavaScript.

Imagine that we’re making an application for grocery stores to use (intentionally vague description 😁). For each of the data types we researched, we’ll brainstorm examples of how we might use that data type in a grocery store app.

Try It: Data Types in a Grocery Shopping App

What sorts of data would you use strings for?

String Definition (click here)

What sorts of data in your shopping app would be integer data? What about float data?

Integers and Floats Definition (click here)

Why might you use a boolean in a shopping application?

Boolean Definition (click here)

What might you want to store in an array in your shopping app? Start all of your answers with "list of..."

Array Definition (click here)

What might you want to store as a hash/object (data in key-value format) in your shopping app?

Hash/Object Whole Group Review (click here)

Iteration

Iteration (or looping for a specified number of times) is a process of repeating a task for each object in a collection. For each of the scenarios below, we’ll walk through using props to demonstrate the concept.

Iteration in Real Life

Scenario Collection For each... Do this: Then:
Grading papers papers paper
  1. read through it
  2. mark the score on the top
repeat with next paper
Feeding animals animals animal
  1. bring the animal to the food bucket
  2. allow the animal to eat
  3. bring animal back to barn
repeat with next animal

Iteration in Programming

Scenario Collection For each... Do this: Then:
Calculating max heart rate birth years year
  1. subtract birth year from 2019 to get age
  2. subtract age from 220
repeat with next year
Formatting names names name
  1. capitalize the first letter
  2. lowercase all remaining letters
repeat with next name

Try It: Iteration in Real Life and Programming

Brainstorm a real life scenario that uses iteration. Fill out the table below and be ready to share.

Scenario Collection For each... Do this: Then:

Think back to your grocery store app. What is something you said you'd keep inside of an array? Why might you need to iterate over that collection? Jot down your scenario below.

Scenario Collection For each... Do this: Then:

Iteration Syntax

We’ll go into breakout rooms to briefly discuss the syntax for iterating in Ruby and JavaScript.

Are you a or student?

The End!

After this Zoom call is over, take 15 minutes on your own to digest the content from this lesson, including the notes you wrote in the text boxes.

In addition, consider the following questions:

  • What do I understand from today?
  • When will I need what I just learned?
  • What questions do I still have?
  • What learning processes/behaviors did I exercise today?

Homework

Find the homework in your Mod 0 Project Board. Contact Rachel or Tim if you’re stuck.