Session 1 The Stack, Keyboard Shortcuts, Googling, and Data Types

Goals

By the end of this session, you will be able to:
  • understand the full stack of web development at a high level
  • use keyboard shortcuts to navigate your computer and Chrome
  • brainstorm classes for specific objects
  • refine searching and filtering skills to Google programming questions
  • define and identify use cases for basic data types

Agenda

Materials

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

Intro

  • Instructor intros: Eric, Alice, and Ellen
  • Goals for session (see above)
  • Follow along by clicking the lesson plan in slack

Housekeeping and Follow-ups

  • Change display name in Zoom by clicking the Participants menu and choosing Rename. Make sure to match the following format:
    • Color Status 🟢 🟡 🟠 🔴
      • To open the Emoji menu on Mac, click in any text field and press CONTROL + COMMAND + SPACE
      • Search for Green, Yellow, Orange, or Red to pick the appropriate color based on your current status
    • First name
    • Last initial
    • Pronouns
    • Program (FE or BE)
    • Example: 🟡 Eric W (he/him, FE)
  • Sessions will be recorded and posted in Slack
  • No computer yet? Don’t fret for today. If you don’t have a mac, please reach out to me! (Eric Weissman or @ericweissman)

Breakout Rooms

This is a feature in zoom that we’ll use throughout the mod 0 sessions. They allow for small group discussion, where y’all can solidify concepts or work through challenges. You’ll be kicked out into smaller group with 2 or 3 of your classmates. When they’re finished you’ll get a 30 second warning where you can rejoin the main session, or you’ll automatically rejoin at the end of the 30 seconds. During these, we may broadcast messages or pop in to see how we are doing time-wise.

Some norms before heading in:

  • Be aware and try not talk over others.
  • Leave space and time for everyone to share.

Breakout groups can be a bit awkward at first, but try to embrace them and have fun!

Try It: Break out rooms

5 minutes (groups of 3 or 4)

1. Introduce yourself (name, pronouns, program)

2. Where do you call home

3. What were your takeaways from the orientation video that you watched in preparation for class?

4. Done? What questions do you still have?

Other things to note as we go through Mod 0:

  • Zoom: turn video on, turn mic off unless speaking
  • You can raise your hand using zoom: go ahead and try it now!
  • Problems or individual questions during the Zoom session? Send a message in the chat!

“The Stack”

People talk about being back-end, front-end, or full-stack devs, but what does that mean? What technologies are you working in? Where does your code run?

Let’s break it down.

At Turing, we teach web development. This means that we build applications that live on the internet.

If you’re in the Front-End Program, you’re going to be writing code that lives on the user’s computer. For the sake web apps, it’ll live within their web browser (ie. chrome). The Front-End is user facing, and can be thought of as the presentation layer. Fun frontend things include data visualization and interesting user interactions. Often, the front-end is referred to as client side.

If you’re in the Back-End Program, you’re likely writing code that lives on a server somewhere. This may not interact with the end user directly. Instead, it’s often the back-end’s job to store and manipulate data that’s sent from the front-end. Or search through data and present it to the front-end. Often, the back-end is referred to as server side.

Front-End and Back-End technologies communicate via a protocol called http. This stands for hypertext transfer protocol. Which in simple terms means that it is a standard for how data is sent back and forth over the internet.

The stack in practice

Try It: Break out rooms

7 minutes (groups of 3 or 4)

What happens when we go to `airbnb.com`, and fill out the form with a location and dates, and then click enter?

What is happening on the front-end/client side?

What is happening on the back-end/server side?

In what order?

Technologies

Front-End languages include:

  • html
  • JavaScript
  • css

Does anyone know what front-end technologies are taught at Turing?

Back-End languages include:

  • Ruby
  • PHP
  • Java

Does anyone know what back-end technologies are taught at Turing?

You won’t be tested on any of the above, but it’s nonetheless great context for what you’re going to be learning over the next 7 plus months. In mod 0, we’ll focus on Ruby and JavaScript as they have the most similarities. And we try to keep things as program agnostic as we can in mod 0.

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.

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"

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 "how do you find out the length of a string in javascript?". Be ready to jot down tips for sifting through results.

Classes

Defining and Identifying Classes

Note: This is a topic that we will revisit in bite-size chunks leading up to Session 4. 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, deep dish, new york, and pan are all different versions or instances of a Pizza (class).

Bandit the dog and Pumpernickel the cat are different instances of a Pet (class).

My copy of Lonesome Dove by Larry McMurtry and my copy of Becoming by Michelle Obama (instances) are different instances of a Book (class).

Class names are always singular and PascalCase: Pizza (instead of pizzas), Pet (instead of pets), and GolfCourse instead of Golf Course.

Try It: Classes Practice

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 instance of a Pizza (class) has a crust, sauce, and toppings (attributes).
  • Each instance of a Pet (class) has a color, species, size, number_of_legs, temperament, and age (attributes).
  • Each instance of a Book (class) has a title, author, publisher, published_date, and total_pages (attributes).

Try It: Attributes Practice

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

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

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.

Data Type Use Cases and Syntax

Luckily for us, the syntax (the way we write) for these basic data types 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?

EXTENSION Hash/Object Definition (click here)

Syntax Practice

We’ll go into program specific breakout rooms to briefly discuss the how to check correct syntax for datatypes in Ruby and JavaScript.

In addition to practicing writing out our data types, we’ll also touch briefly on what it looks like to assign a variable. This allows us to reference a word in our computer’s memory that returns the data we’ve stored.

// Javascript examples of variable assignment
var bestFood = "ramen";
var isDelicious = true;
var inventory = 20;

// re-assignment
bestFood = "pizza";
# Ruby examples of variable assignment
best_food = "ramen"
is_delicious = true
inventory = 10

# re-assignment
best_food = "pizza"

Videos on variable assignment:

After watching a brief demo from an instructor on how to write variables on your computer in either ruby or javascript, try out the following:

  • Assign a variable called pizza a value of ‘the best food of all time’
  • Assign a variable called is_hungry a value of true
  • Assign a variable called number a value of 5
  • Reassign that number variable so that is has a value of 4
  • Assign a variable called teachers a value of an array with the names ‘Ellen’, ‘Robert’, and ‘David’
  • Try the following (these may take some googling):
    • Create another string variable and add combine it with your pizza variable
    • Create another integer variable and multiply it by your number variable
    • Remove the last item from your teachers array

Answer Keys:

Close Out

Key takeaways from today:

  • You should now understand what people mean when they talk about “the stack” at a high level
  • You should understand how to google programming questions
  • You should understand what data types are and how you can use them with variables

Homework

Find the homework in your Mod 0 Trello Board. Contact your instructors if you’re stuck (or better yet, post in the public slack channel as you’re likely not the only one running in to that issue)

Also, if you haven’t already, I would encourage you to start your mod 1 pre-work, as it’ll help you work on your program specific skills and it is due in a few weeks

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

Rectangle

Start by making sure Rectangle is running with (command + spacebar) then type rectangle and then return. You should see a window 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 + enter
  • 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 (command + 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

This video from Technical Programs Instructor Amy Holt gives some great screen management tips.