Week 1 (v3)

WHO WE ARE
Will Gaybrick
• Currently: Thrive Capital / YLS ’12

• Previously: Harvard ’07 (math) => ﬁnance (Blackstone) =>
startups (hunch.com, jumo.com, milewise.com)

Bay Gross
• Currently: BlueFusion / Yale ’13

• Previously: Various web apps, magnum opus =>
isitchickentendersday.com

WHY HACKYALE?

Good ideas + good developers => good
tech companies
• Yale ⊃ many students with good ideas

• Yale ⊅ many students who can implement those ideas

GOALS

Practical, not theoretical / academic
• Zero => prototype

• Prototype => full application

• Not training CTOs

GOALS

Focus on processes and psychology of web
development more than content
• Learn by doing; learn by immersion

• Memorization as the emergent byproduct of experience

• We can’t make you successful developers

• We can equip you with kernel of knowledge and key
resources with which to makes yourselves successful
developers

GOALS

80% of web development is knowing where
to look
Most common answer => Google
• Things to Google:
--Error messages
--Syntax
--Entire problems. Ex: “javascript dropdown menu”

Anatomy 101
[for web applications]

TERMINOLOGY

Client-server model
• Client == (you and your) browser

• Server == machine sending (or “serving”) you the
data and ﬁles you request

“Host” ~== “server”
• “to host” (code, ﬁles, applications) ~== “to serve”

“Local” => hosted on the machine in question
“Remote” => hosted on a different machine

REQUEST-RESPONSE CYCLE
(1) Client (browser) makes a “request”
• “Request” == textual message whose syntax and
semantics are deﬁned by HyperText Transfer Protocol
(“HTTP”)

(2) Server issues a “response”
• “Response” == textual message whose syntax and
semantics are deﬁned by HTTP

• Contains status code. Ex: 404 (“Not Found”), 200
(“Okay”), 500 (“Internal Server Error”)

(3) Cycle repeats itself

THE CLIENT-SERVER MODEL
REQUEST FOR

- html, css, js
- image
- document
- etc…

RESPONSE FROM

CLIENT SERVER
- requested
content… or
- some other
reasonable response
based on context (ex.
404 Not Found)

KEY TECHNOLOGIES

Anatomy 101
[for web applications]

ON THE CLIENT SIDE
REQUEST FOR

- html, css, js
- image
- document
- etc…

RESPONSE FROM

CLIENT SERVER
- requested
HTML content… or
CSS - some other
JAVASCRIPT reasonable response
404 Not Found)

ON THE SERVER SIDE
REQUEST FOR

- html, css, js
- image
- document
- etc…

RESPONSE FROM

CLIENT SERVER
- requested
PYTHON
HTML content… or
RUBY (ON RAILS)
CSS - some other
JAVASCRIPT reasonable response JAVA
404 Not Found)

JAVASCRIPT ON BOTH!
REQUEST FOR

- html, css, js
- image
- document
- etc…

RESPONSE FROM

CLIENT SERVER
- requested
PYTHON
HTML content… or
RUBY (ON RAILS)
CSS - some other
JAVASCRIPT reasonable response JAVA
based on context (ex. JAVASCRIPT
404 Not Found)

The Command Line
[brief intro to
operating systems]

OPERATING SYSTEMS

Operating systems sit between application
software and computer hardware
• Examples: Mac OSX, Linux (UNIX), Windows 7

{
memory
operating system CPU
hard disk

OPERATING SYSTEMS
“System calls” are the interface by which a
program communicates with an OS
• Ex: open, read, write, close, fork, kill

Applications consist of code:
• (1) “Lower level” languages (C, for example)
making such calls directly; or

• (2) “Higher level” languages (Python, for example)
making such calls indirectly via “compilation” into
lower level languages

THE COMMAND LINE

• The command line is a program that provides a text-only
interface to communicate dynamically with the operating system

• Several different command line programs or “shells”: BASH
(most common), sh (Bourne shell)

{
memory
operating system CPU
hard disk
BASH, sh

THE COMMAND LINE

• On OSX, the command line program is “Terminal” (in Utilities), a
BASH implementation

• On Windows7, cmd.exe (native) or “Cygwin” (open source
BASH implementation)

The Front End
[client side code]

Front-End Development

An interaction between three “languages”
• HTML - the content of the internet

• CSS - the style of the internet

• Javascript - the logic and action of the internet

HTML

The “content” of the internet
• just text, no formatting.

Coding in HTML

Tags delineate ‘code’ from content.
• <div> I’m inside a tag! </div>

• Tags have “properties,” and these
properties are then passed on to the
content within the tags

Popular Tags

• <div> the delineating blocks of html
<div>This content will be in an div block!</div>

• <a> links
<a href=”http://www.hackyale.com”>Home</a>

• <img> images
<img src=”http://www.hackyale.com/logo.png” />

• <p> paragraphs
<p>This text will be in a nice paragraph</p>

Form Tags

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="checkbox" name="sex" value="female" /> Female
</form>

<form name="input" action="/signup">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

HTML in action!

But there’s no styling...

Enter, CSS
“Cascading Style Sheets”

<p> Hello World! </p>

<p> Paragraphs are great! </p>

<p> Totally </p>

Now make them red.
Alright, no problem sir!

Now make them red.

<p style=”color:red”> Hello World! </p>

Now make them red.


<p style=”color:red” > Paragraphs are great! </p>

Now make them red.


<p style=”color:red” > Paragraphs are great! </p>

<p style=”color:red” > Totally </p>

Meh. Now make them blue.
But I just changed them all!


<p style=”color:blue”> Hello World! </p>



<p style=”color:blu” > Paragraphs are great! </p>



<p style=”color:blu” > Paragraphs are great! </p>

<p style=”color:red” > Totally </p>

In-line styling is sloppy
CSS lets us get “DRY” =>
don’t repeat yourself!

Styling in CSS

Two Beneﬁts

Styling in CSS

Two Beneﬁts
1. Cleaner code

Styling in CSS

Two Beneﬁts
1. Cleaner code

2. Flexible code

Selectors in CSS

Styles are applied to selectors.

Selectors in CSS

1. tags, i.e.: div, a, p

Selectors in CSS


2. classes, non-unique identiﬁers

Selectors in CSS


2. classes, non-unique identiﬁers

3. ids, unique identiﬁers

Javascript
[making web pages
dynamic]

Overview

Javascript introduces logic into the client side
• Ex: If page element A is clicked, make page element
B disappear

• Ex: When a person submits their name to this box
(“input”), hide the input and display “Thank you!”

Brief History of Javascript
See: this excerpt from Metaﬁlter
• Created by Brendan Eich at Netscape in less than
two weeks => a little rough around the edges

• Has almost nothing to do with Java

• During the web 1.0 days, was much derided /
blocked

• Web 2.0 was really all about Javascript

• Currently the most important language in existence

Javascript

A general purpose programming language
• Unlike HTML / CSS, which are domain speciﬁc

• Contains variables & logical statements

• “Event driven” => structured around “callbacks”

• A “callback” is a function or code snippet executed
upon the occurrence of some speciﬁed event

Server Side Javascript

Thanks to Google & Joyent, Javascript is now
commonly used server side
• Google’s V8 engine => Javascript lightning fast

• Joyent => Node.js, a web application framework
based on V8

Deployment
[going live with your
code]

ESSENTIAL ASIDE: GIT
“Git” is a document version control tool
• Created by Linus Torvalds & team to manage
distributed development of Linux kernel

• Consists of (1) a command line executable, and (2) a
domain speciﬁc language (“DSL”) (“add,” “commit,”
“push,” “pull,” “merge,” “checkout,” etc.)

• Maintains a local repository of “diffs” allowing you to
reconstruct the state of your code at the moment of
any “git commit [ﬁle or directory]” command

ESSENTIAL ASIDE: GIT
“Git” will be confusing at ﬁrst
• Don’t get frustrated

• Don’t start by reading a Git reference

• You will grasp the basic commands quickly via
example

• Then feel free to supplement your knowledge by
reference to resources section of HackYale.com

GITHUB

Deployment
[going live with your code]

GITHUB

Website (github.com) that hosts application
code
• Free if you share it

• Pay to protect it

GITHUB

As the name suggests, Github is integrated
with the git utility
• Genius customer acquisition strategy => slip
seamlessly into existing workﬂow

• Send your code to github: git push [remote] [branch]

• Get some code from github: git pull [remote] [branch]

GITHUB

“Github is the hacker resume” -Clever person

GITHUB

We will be using Github
Part of your homework for this week is to
install git and make a Github proﬁle

HEROKU

Deployment
[going live with your code]

HEROKU

Cloud based service that hosts applications
• Hosting code != hosting applications

• A “front end” to Amazon EC2

• HackYale.com lives on Heroku

HEROKU

Incredibly fast deployment via command line:
• (1) $ gem install heroku

• (2) $ heroku create

• (3) $ git push heroku master

HEROKU
Fantastic business
• Integrated with Github => genius customer
acquisition strategy

• Free to host an app. Pay for “add-ons” and scale =>
another genius customer acquisition

• Targeted Rails apps at outset => a third genius
customer acquisition strategy

• Hosted on Amazon’s servers => no Capex or server
maintenance costs => high margins

• Sold to Salesforce.com for $200mm after some
matter of months

HEROKU

We will use Heroku
• Supports both Node.js and Rails

• More broadly, supports Rack middleware based
applications

• Part of this week’s homework is to create an account
on Heroku and deploy a “static” page

QUESTIONS?
contact will_and_bay@hackyale.com

Week 1 (v3)

More Related Content

What's hot (16)

Viewers also liked (6)

Similar to Week 1 (v3) (20)

Recently uploaded (20)

Week 1 (v3)

Editor's Notes