austingil.com | @heyAustinGil
austingil.com | @heyAustinGil
I work at Akamai (akamai.com)
We offer a lot of relevant services
Really hard not to mention (kind of my job)
Impossible to be 100% unbiased
This is not a sales pitch in disguise
I’m here to teach practical, general concepts
I may mention Akamai because it’s familiar
But this info applies anywhere


What’s the first thing you do before you start writing code?
Terminal + magical incantation (e.g. npm run dev)
Starts a local dev server.
file:///C:/index.html) != HTTP (http://localhost:42069)/path) vs. relative (../path)Websites don’t know when a files have changed.
In the past: ctrl+r || F5 (carpal tunnel 😱)
These days: ctrl+s => instant browser updates
Sometimes called "Hot Module Replacement" or HMR.
chokidar)<div> => dev server responds: compiling, transpiling, bundlingWebSockets)<div>You can even see this in the network tab if you’re into that sort of thing… 
// main.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
ReactDOM.createRoot(document.getElementById('root')).render(
<App />
)Modern apps have several files called modules.
These modules get stitched together by a bundler (e.g. rollup).
You provide entry point (e.g main.js)
Bundler maps out file relationship.
"Dependency Resolution"
Avoids duplicate code.
Prevents circular dependencies.
Resulting in a dependency graph…
babel)
JS program:
console.log('I love Nugget!')console.log('I love Nugget!')console.log('I love Nugget!')console.log('I love Nugget!')console.log('I love Nugget!')console.log('I love Nugget!')AST representation (by shift-js):
{
"type": "Module",
"directives": [],
"items": [{
"type": "ExpressionStatement",
"expression": {
"type": "CallExpression",
"callee": {
"type": "StaticMemberExpression",
"object": {
"type": "IdentifierExpression",
"name": "console"
},
"property": "log"
},
"arguments": [{
"type": "LiteralStringExpression",
"value": "I love Nugget!"
}]
}
}]
}===>
// main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
ReactDOM.createRoot(
document.getElementById('root')
).render(<App />)
** Example is client-side JS app, not SSR or SSG **
ctrl+s and reloadIf you're lucky, it's also ✨shiny✨
<div>Most Git services offer tools to respond to commits (e.g GitHub Actions).
With GitHub Actions:
.github/workflows/..yml file (e.g. ci.yml).Instructions for the Octocats:
# ci.yml
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- run: npm ci
- run: npm run build
- run: npm run deploy(wait… what do the build and deploy commands do again!?)
scp + Linode?)TypeScript, ESLint, Vitest?).bash + some dude named 'Larry' wrote five years ago then left and now you’re too afraid to touch)

Browser needs the IP address
.com, .net, .pizza).austingil.com’s nameserver
Caching is a thing (and can be a pain in the 🍑):
With the IP, browser can prepare packet.
Packet: a small chunk of data which is part of a larger message.
Transmission Control Protocol (TCP): Guarantees accurate delivery.
Internet Protocol (IP): Guarantees the correct address.
Your computer and the server connect using "TCP over IP" (or TCP/IP).
Secure Socket Layers (SSL): cryptographic protocol to encrypt data and authenticate a connection on the Internet
"Um, actually…"
Transport Layer Security (TLS): cryptographic protocol to encrypt data and authenticate a connection on the Internet
For HTTPS green lock, you need SSL (or TLS)

GET / HTTP/1.1
Host: austingil.com
Connection: close
[...request headers]Request using Hypertext Transfer Protocol (HTTP)
Modify request and/or response between client and server
(talk to me)
HTTP/1.1 200 OK
Content-Type: text/html
Connection: Closed
[...response headers]
<!DOCTYPE html><html><head>...Generates HTML for HTTP response
Multiple resources (fonts, styles, scripts, etc)?
Repeat process from HTTP request.
Different domains (CDN)?
Repeat process from DNS lookup.

Devtools Performance tab

<div><div> -> Git commit -> Git push -> CI/CD pipeline -> Transpile -> "Dependency Resolution" -> Bundle -> Package -> Upload to prod -> Open URL -> Browser -> OS -> Wifi -> Router -> Modem -> ISP -> DNS resolution -> Server's IP -> TCP handshake -> TLS handshake -> HTTP request -> (Edge compute) -> Akamai server -> HTTP response -> (Edge compute) -> Browser -> Download HTML -> Repeats for CSS, JS, img, etc. -> Construct DOM -> Construct CSSOM -> Run JS -> document.createElement('div'); -> Render -> Layout -> Paint -> Composite -> Celebrate that somehow we managed to get it to work!!! 🥳