<style type="text/css">
@import url("https://use.typekit.net/kwj4ujf.css");

body {
background-color: #FF3700;
}

.reveal h1 {
font-size: 3em;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
font-family: Gibson, BlinkMacSystemFont, sans-serif;
font-weight: 700;
color: white;
}

.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
font-weight: 600;
}

.reveal h3 {
/*color: rgba(255, 255, 255, 0.7);*/
}

.reveal > *, .reveal *, .reveal > * > * {
color: white;
font-family: Gibson, BlinkMacSystemFont, sans-serif;
}

.logo {
position: absolute;
right: 50px;
bottom: 50px;
width: 75px;
z-index: 9999;
}

.reveal .controls {
left: 120px;
right: auto;
}

.reveal .slide-background.stack .slide-background:not(:nth-child(1)) {
background-color: white;
text-align: left;
}

.reveal .slides
> section.stack
> section:not(:first-child) {
/*margin-left: -10%;
margin-top: -10%;*/
text-align: left;
}

.reveal .slides
> section.stack
> section:not(:first-child) * {
color: black;
font-family: Gibson, BlinkMacSystemFont, sans-serif;
}

.reveal .slides
> section.stack
> section:not(:first-child) h1 {
font-size: 48pt;
color: white;
background-color: #FF3700;
padding: 5px 20px;
display: inline-block;
}

.reveal code, .reveal pre {
font-family: "Source Code Pro", monospace;
}
</style>

# Week 1: Introduction to Ruby & The Web

---

# Ruby on Rails Decal
## Lecture 1: Intro to Ruby and the Web

---

# Agenda

- Course Logistics
- Lab Groups
- Intro to Web Development
- Environment Setup
- Learning Ruby
- What is Rails?
- (Optional) Intro to Git

----

# Instructors

<div style="display: flex; align-items: center;">
<img src="https://cl.ly/8c6f002a29b8/Image%202018-09-13%20at%2010.02.53%20AM.png" width="100" height="100" style="border-radius: 100%; margin: 20px;">
<h2>Aivant Goyal</h2>
</div>
<div style="display: flex; align-items: center;">
<img src="https://cl.ly/4400a9404f0f/Image%202018-09-13%20at%2010.01.03%20AM.png" width="100" height="100" style="border-radius: 100%; margin: 20px;">
<h2>Ethan Lee</h2>
</div>

----

# Teaching Assistants

<div style="display: flex; flex-wrap: wrap">
<div style="display: flex; align-items: center; margin-right: 35px;">
<img src="https://cl.ly/a31a52706613/Image%202018-09-13%20at%2010.08.00%20AM.png" width="75" height="75" style="border-radius: 100%; margin: 20px;">
<h4>Arpan Pal</h4>
</div>
<div style="display: flex; align-items: center; margin-right: 35px;">
<img src="https://cl.ly/a31a52706613/Image%202018-09-13%20at%2010.08.00%20AM.png" width="75" height="75" style="border-radius: 100%; margin: 20px;">
<h4>Pooja Nagpal</h4>
</div>
<div style="display: flex; align-items: center; margin-right: 35px;">
<img src="https://cl.ly/893fa9105797/Image%202018-09-13%20at%201.28.12%20PM.png" width="75" height="75" style="border-radius: 100%; margin: 20px;">
<h4>Melody Wei</h4>
</div>
<div style="display: flex; align-items: center; margin-right: 35px;">
<img src="https://cl.ly/ffa15231f3a2/Image%202018-09-13%20at%201.27.39%20PM.png" width="75" height="75" style="border-radius: 100%; margin: 20px;">
<h4>Adhiv Dhar</h4>
</div>
<div style="display: flex; align-items: center; margin-right: 35px;">
<img src="https://cl.ly/0bb162047bb4/Image%202018-09-13%20at%201.29.03%20PM.png" width="75" height="75" style="border-radius: 100%; margin: 20px;">
<h4>Tommy Poa</h4>
</div>
<div style="display: flex; align-items: center; margin-right: 35px;">
<img src="https://cl.ly/c3839394e67d/Image%202018-09-13%20at%201.29.58%20PM.png" width="75" height="75" style="border-radius: 100%; margin: 20px;">
<h4>Jessica Hsiao <sup style="font-size: 12pt">*OH only</sup></h4>
</div>
<div style="display: flex; align-items: center; margin-right: 35px;">
<img src="https://cl.ly/a31a52706613/Image%202018-09-13%20at%2010.08.00%20AM.png" width="75" height="75" style="border-radius: 100%; margin: 20px;">
<h4>Joshua Yang <sup style="font-size: 12pt">*OH only</sup></h4>
</div>
</div>

---

# Course Logistics
- Weekly Lecture: Kroeber 160 Thurs 5-7
- If you need to leave early, please do so quietly. It's your responsiblity to look up slides and catch up on material!
- 11 Classes Total (No class on 11/22 for Thanksgiving!)
- Weekly Attendance (20% of grade)
- 0-1 unexcused = 20/20
- 2 unexcused = 10/20
- 3 unexcused = 0/20
- 4+ unexcused = Automatic NP :(
- Soft Pre-req: CS 61A (Highly Recommended!)
- Let us know if you have any concerns and we'll do our best to support you
- Optional Corresponding Textbook: http://guides.rubyonrails.org/index.html

---

# Course Resources
- Course Website: railsdecal.herokuapp.com
- Will have lecture slides, homework, and other resources
- Attendance taken through here
- Syllabus: https://goo.gl/oVz9Ux (Needs updating to Fall 2018)
- Slack! Check email for invite
- Lab Group Channels
- Public Question Channels
- Contact staff by messaging us privately
- Staff Weekly Office Hours: TBA! (Needs updating)

---

# Grading
- 4 Homeworks, 2 Projects
- Four slip days for any type of assignment - at most 2 allowed for final project
- Grade Breakdown
- 20% Attendance
- 25% Homework
- 25% Project 1 (Individual)
- 30% Final Project (Group) [no submission = automatic NP]
- 2 Units P/NP - 70% or higher is passing

---

# In-Class Labs + Discussions
- Two hours of lecture is boring
- Interspersed Discussion Questions and Mini-Labs
- Starting next week we'll be grouping each of you with a TA
- They will be your go to person + group for in-class and out-of-class questions and support!

---

<!-- .two_col -->
# Let's Talk About The Web!
- *Discussion Question* What happens when you type http://www.facebook.com in your browser and press `enter`?
- Understanding the language of the web: Text!
- We communicate with websites and web applications through requests (structured text)
- A simpler static site will return text in the form of html
- Our browser reads the html and makes it look pretty for us
- The issue of templating
- When any of us go to facebook.com, we see different text come back to us.

- Structure of Web applications
- Web applications have a data store and building a web application involves coordinating between what the user is asking for, what data is involved, and how to show the relevant "text" for the browser to display

---

# Communicating with Web Applications
- Requests!
- Requests have 3 main components
- Type (e.g.: GET, PUSH, PUT)
- Headers (Dictionary of key-value pairs)
- Body (Plain-text)
- Let's see how this looks! (Telnet Demo)
- Browser is simply sending requests to websites asking for the text to display to the user
- We can also send requests and get back text!
---

# Try it yourself now!
- In-Class Mini-Lab
- Use telnet or a similar terminal application to send a GET request to railsdecal.com

---

# What is Ruby?
- In-Class Demo!

<div id="container">
<div id="shell">
<div id="output">
</div>
<div id="command">
<span class="prompt">&gt;&gt;</span>
<div id="editor"></div>
</div>
</div>
</div>

---

- High level programming language
- Dynamically Typed (like Python!)
- Object-Oriented (like Java!)
- Focus on humans, not machines
- Everything is an object
- `{ 1 => Integer, ‘String’ => String, :symbol => Symbol, [] => Array, {} => Hash, nil => NilClass }`
- Learn more: https://www.codecademy.com/articles/glossary-ruby

---

# Common Ruby Objects
- `nil` : representation of nothingness; similar to null, undefined
- `“String”` : Mutable sequence of characters
- `:symbol` : Strings, sort of (see next slide)
- `1` : Integer
- `true && false` : Boolean
- `[]` : Array
- Can contain multiple types of objects ( example: `[ 1.0, “foo”, :baz ]` )
- `{}` : Hash or Dictionary
- `{:foo => "bar", baz: :buzz} # two syntax styles`