Web Development:

An introduction

Hack Reactor, 2020-01-16

Who is this guy?

Laurie Voss

@seldo

Did things at

Yahoo
awe.sm
npm

Doing things at: Netlify

What are we talking about?

Web development:

How to do it
Why to do it

What am I going to get out of this?

By the end of this talk,

you will be a web developer.*

* A beginner, but still a web developer.

Why should I care?

Four reasons.

1. It's super fun

Why should I care?

2. The pay is good

Why should I care?

3. It's (kind of) inclusive

Why should I care?

...okay, it's more inclusive than those other jerks, anyway

Why should I care?

4. It's accessible

Why should I care?

The web belongs

to you

Why should I care?

A web journey

1 You visited Amazon.com
2 You downloaded the web page
3 Your browser ran the code
4 It rendered the page
5 You clicked a button
6 The code interpreted your click
7 Your browser told Amazon what to do
8 You got sent to a new web page

To understand the journey, you have to know

1 How the internet works
2 How the web works
3 How browsers work
4 How HTML works
5 How CSS works
6 How JavaScript works
7 How security works
8 How APIs work

Oh no,

that's a lot of stuff!

Don't worry; we got this.

How the

Internet works

1 The Internet

The web

The first web page.

The web = Hypertext + HTTP

The Internet

Computers talking to each other over wires.

It's all just

computers and wires

The Cloud is just other people's computers.

IP addresses

IP = Internet Protocol

Old style, IPv4:

157.131.152.72

New style, IPv6:
2001:0db8:85a3:0000:0000:8a2e:0370:7334

(We don't talk about IPv5)

IP

Computers passing packets around.

IP Gateway

It's another computer.

Passing packets around

Many computers, many wires, to get to a destination.

IP is optimistic

"If I just keep passing it around it'll get there"

IP doesn't know where anything is

It relies on humans to tell it.

Humans are unreliable

And sometimes evil!

Oops.

How do you find an IP address?

Use a domain name.

DNS

Domain Name System

(we are very good at naming things)

DNS is just

a lot of lists

Maintained by a very large number of computers.

Who has the authoritative list?

13 very special computers.

How do 13 independent computers agree?

They don't.

DNS cache poisoning

DNS is too trusting.

One domain can have many IPs

Domains can give you the physically closest IP

Light travels fast, but being closer is always faster.

DNS was not designed to do any of this

And it shows.

A web journey

1 You visited Amazon.com ✅
2 You downloaded the web page
3 Your browser ran the code
4 It rendered the page
5 You clicked a button
6 The code interpreted your click
7 Your browser told Amazon what to do
8 You got sent to a new web page

How the

web works

2

<b>Hello</b>, there.

HTML = HyperText Markup Language:

HTTP

HyperText Transfer Protocol

We continue to be good at names.

An HTTP request

GET /bob.html
Host: seldo.com

An HTTP response

HTTP/2 200

Hello.

A full web page

<!DOCTYPE html>
<html>
<head>
  <title>My web page</title>
</head>
<body>
  <h1>Welcome!</h1>
  <p>Hello!</p>
</body>
</html>

(Colors just for readability)

How browsers work

3 Browsers speak HTTP, and interpret HTML

A web journey

1 You visited Amazon.com ✅
2 You downloaded the web page ✅
3 Your browser ran the code
4 It rendered the page
5 You clicked a button
6 The code interpreted your click
7 Your browser told Amazon what to do
8 You got sent to a new web page

How HTML works

4

A: Parsing
B: Tree rendering
C: Layout
D: Painting
E: Interactivity

What browsers do with HTML:

What browsers do

A: parsing

What browsers do

B: tree rendering

What browsers do

C: layout

What browsers do

D: Painting

What browsers do

E: Interactivity

Real browsers have more than 5 steps

HyperText is

text with links

HTML tags have meaning

<address>
<article>
<aside>
<footer>
<header>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<main>
<nav>
<section>
<details>
<dialog>
<menu>
<summary>

Tim

Vint

Tim Berners-Lee invented the web

He was just trying to invent Wikipedia

The web was supposed to be a database

Not a presentation format.

HTML encodes meaning

I like <a href="https://apple.com">Apple</a> laptops.

You can find this book at my 
<a href="https://amazon.com">favorite bookstore</a>.

Search engines work because HTML has meaning

<select>
<option>Afghanistan</option>
<option>Angola</option>
...
</select>

HTML is accessible

By default, and for free.

A Braille screen reader

HTML is

extremely cool

Thanks, Tim.

How CSS works

5

csszengarden.com

CSS keeps presentation separate from meaning

We tried the other way and it was bad.

CSS can be

a whole career

A web journey

1 You visited Amazon.com ✅
2 You downloaded the web page ✅
3 Your browser ran the code ✅
4 It rendered the page ✅
5 You clicked a button
6 The code interpreted your click
7 Your browser told Amazon what to do
8 You got sent to a new web page

How JavaScript

works

6

You built a website!

There is

no magic to this

findtheinvisiblecow.com

Event-driven interactivity

Web apps

Web sites

A web journey

1 You visited Amazon.com ✅
2 You downloaded the web page ✅
3 Your browser ran the code ✅
4 It rendered the page ✅
5 You clicked a button ✅
6 The code interpreted your click ✅
7 Your browser told Amazon what to do
8 You got sent to a new web page

How Security

works

7 Paranoia

They are, in fact, out to get you.

Think like you're evil

You can do it. I believe in you.

MITM attacks

Monster In The Middle

TLS

Transport Layer Security

(replaces SSL, Secure Sockets Layer)

Authentication

Proof of identity

TLS relies on trust

You have to trust somebody, and that's the problem.

Certificate authorities

They're not infallible.

Authentication works both way

How do you prove you are who you say you are?

Cookies

We are really, really good at naming things.

Cookies: like a ticket from coat check

Cryptography is just really long numbers

Trust no one

Security is your job

A web journey

How APIs work

8

GET /bob.html
Host: seldo.com

HTTP Verbs

HEAD
GET
POST
PUT
PATCH
DELETE
CONNECT
OPTIONS
TRACE

POST /buythething.html
Host: amazon.com
Cookie: mysecret=nd4vbpotp

Buy book 123.

HTTP is how everything happens

HTTP/2 200

Hello.

HTTP/2 302
Location: http://amazon.com/congrats.html

A web journey

A server is just

another computer

The cloud is just lots of other computers.

Servers are

event-driven

Servers talk

to other servers

Servers talk via APIs

You need a server

Don't worry, this is the easiest part.

1. Create a folder

2. Save your HTML into a file called index.html

3. Put index.html into the folder

4. Drag and drop the folder onto

https://app.netlify.com/drop

There is no step 5.

Deploy your website

A web journey

🎉

You're a web developer now

So what next?

Self-directed learning

Specialization

Do it later.

Should I learn a framework?

And if so which one?

There is no such thing as fundamentals

Computers are frameworks upon frameworks

until eventually you get to hot sand.

Learn a framework

It doesn't matter which one.

Don't get stuck

in a rut

The web is constantly evolving.

Is learning all of this going to be worth it?

$$$

and also it's fun.

The web is unreasonably powerful

Global
Instant
Cheap

Mobile apps are fine

but the web is better

Flexible
Accessible (to humans)

Accessible (to robots)
Accessible (to you)

HyperText

Simple but world-changing.

https://seldo.com/
https://seldo.com/posts/what-is-good-code

You can't link to somebody else's desktop

Humans are social

And so is the web.

A story

about the web

...

The web

is why I'm here

You can do

amazing things

And I want you to try.

Go forth and

develop the web

-Fin-

These slides are at

slides.com/seldo/web-development-an-introduction

I'm at

seldo.com

and

twitter.com/seldo

and

hackreactor@seldo.com

Web Development: An introduction

By seldo

Web Development: An introduction

4,959