# Web Fundamental
WWW
HTML
```
<html>
<head>
<link rel="stylesheet" src="app.css" />
<script defer type="javascript" src="app.js" />
</head>
<body>
<h1>Title</h1>
<section>
<p></p>
</section>
<script src="b.js" />
</body>
</html>
```
rccc.org
- index.html (1st request from browser)
- app.css
- app.js
HTTP2
HTTP
- stateless
- no session build in
Verbs: GET / POST / DELETE / PATCH
```
// client
GET /
HOST rccc.org
HEADER ... (cookie, authentication, accepts: json, x-api-key)
BODY ...
```
```
cache/
web-fund-tab/
index.html
app.css
app.js
```
Web - C/S architecture
Client
- Browser: Chrome/Safari/Edge
- Program
- Search Engine Spider
Server
- Host: Java Server / NodeJS Server / Ruby Server
- CDN: distribution
How Browser Renders A Page
- index.html
- css/js/image/video (head blocking, body non blocking): time to first impression TTFI
- layout computation(css: width/height/float/padding/flex, <img src="a.jpeg" width="200" height="100" />) content layout shifting CLS web performance metric
DOM
jQuery
- heavy JS
- window.onLoad = function() { console.log("haha") }
- $.ready(funtion() {
DOM operation
node.on("click", function() { alert("haha"); })
})
- getElementById / querySelector (CSS selector)
AJAX API
Single Page Application
- request / => index.html (20k)
- request /about => about.html (20k)
- request / => index.html (js) 30k
- /about => onClick
- window.history.push("/about")
- trigger page React re-render, now with /about context
React
- Virtual DOM (js maintained dom) => native dom
- to list
- DOM / Page Data
- todo application state
- array
- description
- state (closed/open)
- component(function)
- input: state data
- output: virtual dom
```
// react version
function TodoItem(props) {
const [state, setState] = useState("open")
return (
<div onClick={() => setState("closed")}>{props.description} is {props.state}</div>
)
}
```
```
// DOM based version
<body><div id="todos"></div></body>
app.js
function onClick(event) {
const todoItemNode = event.target
const oldDescription = todoItemNode.innerHTML
"fix computer-open"
"fix computer-closed"
const newDescription = oldDescription.replace(/open/, "closed")
todoItemNode.innertHTML = newDescription
}
fetch("/todos").then(items => {
items.forEach(item => {
const todosNode = document.getElementById("todos")
todosNode.createElement(
"div",
{onClick},
item.description + "-" + item.state
);
})
})
```
```
<html>
<head>
<script src="app.js" /> // react framework, app
</head>
<body>
<div id="root"></div>
</body>
</html>
```
Security
- HTTPS
- RSA (asymetric encryption)
- public key
- private key
- encode("public key", "helloword") => "xxxxooo"
- decode("private key", "xxxxooo") => "helloworld"
- Handshake
- browser => cn.rccc.org SSL certificate => public key
- browser == (encrypted) => cn.rccc.org
Web3 (no much relationship)
Build Time
- git repo commit => build => html/js/css
- getStaticProps
- /courses/a.html
- /courses/b.html
- getServerSideProps
- /courses/*.html
- netlify will execute the code with given context
- serverside render
- virtual renderString <html>
Runtime
- getServerSideProps
Sign in with Wallet
Connect another wallet