2. LESSON ONE
Web Apps 101

3. Course Overview

4. WHO WE ARE
Will Gaybrick
• Currently: Thrive Capital / YLS ’12
• Previously: Harvard ’07 (math) => finance (Blackstone) =>
startups (hunch.com, jumo.com, milewise.com)
Bay Gross
• Currently: BlueFusion / Yale ’13
• Previously: Various web apps, magnum opus =>
isitchickentendersday.com

5. WHY HACKYALE?
Good ideas + good developers => good
tech companies
• Yale ⊃ many students with good ideas
• Yale ⊅ many students who can implement those ideas

6. GOALS
Course Overview

7. GOALS
Practical, not theoretical / academic
• Zero => prototype
• Prototype => full application
• Not training CTOs

8. 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

9. GOALS
Google is your friend

10. 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”

11. Anatomy 101
[for web applications]

12. TERMINOLOGY
Client-server model
• Client == (you and your) browser
• Server == machine sending (or “serving”) you the
data and files you request
“Host” ~== “server”
• “to host” (code, files, applications) ~== “to serve”
“Local” => hosted on the machine in question
“Remote” => hosted on a different machine

13. REQUEST-RESPONSE CYCLE
(1) Client (browser) makes a “request”
• “Request” == textual message whose syntax and
semantics are defined by HyperText Transfer Protocol
(“HTTP”)
(2) Server issues a “response”
• “Response” == textual message whose syntax and
semantics are defined by HTTP
• Contains status code. Ex: 404 (“Not Found”), 200
(“Okay”), 500 (“Internal Server Error”)
(3) Cycle repeats itself

14. 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)

15. KEY TECHNOLOGIES
Anatomy 101
[for web applications]

16. 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
based on context (ex.
404 Not Found)

17. 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
based on context (ex.
404 Not Found)

18. 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)

19. The Command Line
[brief intro to
operating systems]

20. OPERATING SYSTEMS
Operating systems sit between application
software and computer hardware
• Examples: Mac OSX, Linux (UNIX), Windows 7
{
memory
operating system CPU
hard disk

21. 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

22. 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

23. 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)

24. THE COMMAND LINE

25. The Front End
[client side code]

26. 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

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

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

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

30. 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

31. 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>

32. 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>

33. 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>

34. HTML in action!

35. HTML in action!
But there’s no styling...

36. Enter, CSS
“Cascading Style Sheets”
<p> Hello World! </p>
<p> Paragraphs are great! </p>
<p> Totally </p>

37. Enter, CSS
“Cascading Style Sheets”
<p> Hello World! </p>
<p> Paragraphs are great! </p>
<p> Totally </p>

38. Now make them red.
Alright, no problem sir!

39. Now make them red.
Alright, no problem sir!
<p style=”color:red”> Hello World! </p>

40. Now make them red.
Alright, no problem sir!
<p style=”color:red”> Hello World! </p>
<p style=”color:red” > Paragraphs are great! </p>

41. Now make them red.
Alright, no problem sir!
<p style=”color:red”> Hello World! </p>
<p style=”color:red” > Paragraphs are great! </p>
<p style=”color:red” > Totally </p>

42. Now make them red.
Alright, no problem sir!
<p style=”color:red”> Hello World! </p>
<p style=”color:red” > Paragraphs are great! </p>
<p style=”color:red” > Totally </p>

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

44. Meh. Now make them blue.
But I just changed them all!
<p style=”color:blue”> Hello World! </p>

45. 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>

46. 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:red” > Totally </p>

47. 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:red” > Totally </p>

48. In-line styling is sloppy

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

50. Styling in CSS
Two Benefits

51. Styling in CSS
Two Benefits
1. Cleaner code

52. Styling in CSS
Two Benefits
1. Cleaner code
2. Flexible code

53. Selectors in CSS
Styles are applied to selectors.

54. Selectors in CSS
Styles are applied to selectors.
1. tags, i.e.: div, a, p

55. Selectors in CSS
Styles are applied to selectors.
1. tags, i.e.: div, a, p
2. classes, non-unique identifiers

56. Selectors in CSS
Styles are applied to selectors.
1. tags, i.e.: div, a, p
2. classes, non-unique identifiers
3. ids, unique identifiers

57. Selectors in HTML

58. Selectors in CSS

59. Without CSS

60. With CSS

61. Javascript
[making web pages
dynamic]

62. 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!”

63. Brief History of Javascript
See: this excerpt from Metafilter
• 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

64. Javascript
A general purpose programming language
• Unlike HTML / CSS, which are domain specific
• Contains variables & logical statements
• “Event driven” => structured around “callbacks”
• A “callback” is a function or code snippet executed
upon the occurrence of some specified event

65. 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

66. Deployment
[going live with your
code]

67. 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 specific 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 [file or directory]” command

68. ESSENTIAL ASIDE: GIT
“Git” will be confusing at first
• 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

69. GITHUB
Deployment
[going live with your code]

70. GITHUB
Website (github.com) that hosts application
code
• Free if you share it
• Pay to protect it

71. GITHUB
As the name suggests, Github is integrated
with the git utility
• Genius customer acquisition strategy => slip
seamlessly into existing workflow
• Send your code to github: git push [remote] [branch]
• Get some code from github: git pull [remote] [branch]

72. GITHUB
“Github is the hacker resume” -Clever person

73. GITHUB
We will be using Github
Part of your homework for this week is to
install git and make a Github profile

74. HEROKU
Deployment
[going live with your code]

75. HEROKU
Cloud based service that hosts applications
• Hosting code != hosting applications
• A “front end” to Amazon EC2
• HackYale.com lives on Heroku

76. HEROKU
Incredibly fast deployment via command line:
• (1) $ gem install heroku
• (2) $ heroku create
• (3) $ git push heroku master

77. HEROKU
Fantastic business
• Integrated Insert to Githubto=> genius customer
with sell Heroku
taken
amount of time
acquisitionSalesforce
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 [X months]

78. HEROKU
Lookup Rack middleware.
Routes to server?
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

79. QUESTIONS?
contact will_and_bay@hackyale.com