---
# System prepended metadata

title: Web Fundamental

---

# 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