DEV Community: WEI FENG

Javascript method Implementation

WEI FENG — Tue, 07 Dec 2021 14:35:54 +0000

"Let's take a deep dive to the most basic javascript method implementation. Hope it will help you to understand the language better"

1. Object.create()

The Object.create() method creates a new object, using an existing object as the prototype of the newly created object.

Object.prototype.newCreate = fucntion (obj) {
    // create a new function object as 
    function F(){}

    //bind the function object's prototype to the obj
    F.prototype = obj

    //return the newly created object based on F()
    return new F()
}

2. instanceof

The instanceof operator tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object. The return value is a boolean value.

function myInstanceOf (left, right) {
    //access left object's prototype chain
    let leftProto = left.__proto__
    //access right constructor's prototype method
    let rightProto = right.prototype

    //check if rightProto is on the left object's prototype chain
    while (leftProto) {
        if (leftProto === rightProto) return true
        else leftProto = leftProto.__proto__
    }
    return false
}

3. new

The new operator lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.

function myNew (context, ...args) {
    //create a empty object 
    let obj = {}
    //link the new object's prototype chain to the constructor's prototype
    obj.__proto__ = context.prototype
    //call the constructor function on new object.
    let result = context.call(obj, ...args)
    return typeof result === "object" ? result : obj
}

4. promise.all()

The Promise.all() method takes an iterable of promises as an input, and returns a single Promise that resolves to an array of the results of the input promises. This returned promise will resolve when all of the input's promises have resolved, or if the input iterable contains no promises. It rejects immediately upon any of the input promises rejecting or non-promises throwing an error, and will reject with this first rejection message / error.

//takes in an array of promises
function myPromiseAll(arr){
    // return a new promise
    return new Promise(function (resolve,reject) {
        let len = arr.length
        // setup a array to record the result
        let result = []
        let resolvedCount = 0
        for (let i = 0; i < len; i++) {
           //wrap the value from array in case it is not a promise 
           Promise.resolve(arr[i]).then(function(value){
               result[i] = value
               //resolve the result when finish resolving everything 
               resolvedCount++
              if (resolvedCount === len) return resolve(result)
          }, function(error) {
             // if there is an error, reject immediately
             return reject(error)
          })
       }
  })
}

5. promise.race()

The Promise.race() method returns a promise that fulfills or rejects as soon as one of the promises in an iterable fulfills or rejects, with the value or reason from that promise.

//takes in an array of promises
function myPromiseRace(arr){
    return new Promise(function (resolve,reject) {
        for (let i = 0; i < arr.length; i++) { 
           Promise.resolve(arr[i]).then(resolve, reject})
       }
  })
}

6. Debounce function

The debounce() function forces a function to wait a certain amount of time before running again. The function is built to limit the number of times a function is called.

function debounce (func, delay) {
   // set a timer variable in the clousure to keep track
   let timer = null
   //return a debounced function
   return function debounced (...args) {
        //if timer is not null, clear the timer
        if (timer) {
                clearTimeout(timer)
                timer = null
            }
        //set a delay to run the function
        timer = setTimeout(()=> {
           func(...args)  
        }, delay)   
   }
}

7. Throttle function

To throttle a function means to ensure that the function is called at most once in a specified time period (for instance, once every 10 seconds). This means throttling will prevent a function from running if it has run “recently”. Throttling also ensures a function is run regularly at a fixed rate.

function throttle (func, wait) {
    let timer = null
// set a flag in clousure to decide whether the current throttled program is running
    let flag = true

    return function throttled (...args) {
// if the flag is true, call the function and set the flag to false
        if (flag) {
            flag = false
            func(...args)
            timer = setTimeout(()=>{
            //set the flag back to true once finished waiting
                flag = true
                timer = null
            }, wait)
        }
    }
}

8. Function.prototype.call()

The call() method calls a function with a given this value and arguments provided individually.

Function.prototype.apply() is similar to call, we just need to change the seperate arguments to array.

Function.prototype.newCall = function (context, ...args) {
   // this is pointing to the function that call this newCall method, when we assign this function as context's property, this will point to the context.
    context.fn = this
    let result =  context.fn(...args)
    delete context.fn    
    return result
}

9. Function.prototype.bind()

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Function.prototype.bind = function (context,...args) {
    let func = this
    //save the rest of the parameters
    return function binded (...rest) {
        //concat the arguments
        return func.call(context,...args,...rest)
    }
}

10. a function to determine the type of an object

Using toString() to detect object class
toString() can be used with every object and (by default) allows you to get its class.
To use the Object.prototype.toString() with every object, you need to call Function.prototype.call() or Function.prototype.apply() on it, passing the object you want to inspect as the first parameter (called thisArg).

function typeOf(obj) {
// use array destructuring to extract the result
    let [,result] = Object.prototype.toString.call(obj).split(" ")
//slice out unnecessary characters
    return result.slice(0,-1)
}

11. curried function

Currying is an advanced technique of working with functions. It’s used not only in JavaScript, but in other languages as well.
Currying is a transformation of functions that translates a function from callable as f(a, b, c) into callable as f(a)(b)(c).
Currying doesn’t call a function. It just transforms it.

function curry (func) {
    return function curried (...args) {
      //compare the current arguments length with the function's required parameters. 
        if (args.length >= func.length){
            return func(...args)
        } else {
            // concat the rest of the arguments
            return function (...rest) {
                return curried(...args,...rest)
            }
        }
    }
}

12. AJAX request

AJAX update a web page without reloading the page
Request data from a server - after the page has loaded
Receive data from a server - after the page has loaded
Send data to a server - in the background

let url = "/server"

let xhr = new XMLHttpRequest();

xhr.open("GET", url, true)

xhr.onreadystatechange = function (){
// if readyState is 4 and status 200 means the request has been sucessfully executed. We can proceed to handle the response.
    if (this.readyState == 4 && this.status == 200) {
            handle(this.response)
        }
    }
}

xhr.onerror = function(){
    console.log(this.statusText)
}

xhr.send();

wrap the ajax in a promise

function ajaxPromise (url) {
    return new Promise(function (resolve,reject) {
        let xhr = new XMLHttpRequest()
        xhr.open("GET", url, true)
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                return resolve(this.response)
            }
        }
        xhr.onerror = function(){
            return reject(this.statusText)
        }
        xhr.send()
    })
}

13. Shallow Copy

using slice

let arr = [1,2,3,4];
console.log(arr.slice()); // [1,2,3,4]

use spread operator

obj = {first: 1, 
       second: 2}
let cloneObj = { ...obj };

14. Deep Copy

handwritten deepcopy

function deepCopy (obj) {
     let newObj = Array.isArray(obj) ? [] : {}

     for (key in obj) {
         newObj[key]=typeof obj[key]==="object"?deepCopy(obj[key]):obj[key]
     }

    return newObj
}

JSON.parse(JSON.stringify(obj))

But this method has a problem. If there are functions, undefined, and symbols in the copied object, they will disappear after processing with JSON.stringify().

15. randomize the item sequence in array

function randomOutput(arr) {
    let len = arr.length
    for (let i = 0; i < len; i ++) {
        let randomNum = Math.floor(Math.random()*(len - i)) + i
        [arr[i], arr[randomNum]] = [arr[randomNum], arr[i]]
    }
    return arr
}

16. How to flatten array

recursively flatten the array use array reduce method

function flatten (arr) {
    return arr.reduce((accum,element)=>{
        let flag = Array.isArray(element)
        return accum.concat(flag?flatten(element):element)
    },[])
}

17. Event publisher and subscriber model

this is not a complete implementation

class EventEmitter {
    constructor () {
        this.events = {}
    }

    on (eventName, callbackFn) {
        if (!(eventName in this.events)) this.events[eventName] = []
        this.events[eventName].push(callbackFn)
    }

    emit (eventName, ...args) {
        this.events[eventName].forEach(fn => fn(...args))
    }

    off(eventName, callbackFn) {
        this.events[eventName] = this.events[eventName].filter(fn => fn != callbackFn && fn.initialCallback != callbackFn)
        if (this.events[eventName].length == 0) delete this.events[eventName]
    }

    once (eventName, callbackFn) {
        const one = (...args) => {
            callbackFn(...args)
            this.off(eventName, callbackFn)
        }
        one.initialCallback = callbackFn

        this.on(eventName, one)
    }
}

18. Inherit from parent constructor

function Human (name,age) {
    this.name = name
    this.age = age
}

function Man (name,age) {
    Human.call(this,name,age)
}

Man.prototype = Object.create(Human.prototype)
Man.prototype.constructor = Man

19.Convert Json to Tree

source = [{
            id: 1,
            pid: 0,
            name: 'body'
          }, {
            id: 2,
            pid: 1,
            name: 'title'
          }, {
            id: 3,
            pid: 2,
            name: 'div'
          }]

function toTree(src) {
    let map = {}
    src.forEach((ele)=>{
        map[ele["id"]] = ele
    })
    let result = []
    src.forEach((ele) => {
        let parent = map[ele.pid]
        if (parent) {
            if (!parent.children) parent.children = []
            parent.children.push(ele)
        } else {
            result.push(ele)
        }
    })


//Use React.createElement API

function tree(props){
  return React.createElement(props.name, props.props, props.children.map( child => tree(child)))
}
    return result
}

20.Quick Sort

const quickSort1 = arr => {
    if (arr.length <= 1) {
        return arr;
    }
    //find the mid index
    const midIndex = Math.floor(arr.length / 2);
    //retrieve the mid index value
    const valArr = arr.splice(midIndex, 1);
    const midIndexVal = valArr[0];
    const left = []; //save those smaller than midIndexVal
    const right = []; //save those bigger than midIndexVal
    //iterate the array, push them into respective side. 
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] < midIndexVal) {
            left.push(arr[i]); 
        } else {
            right.push(arr[i]); 
        }
    }
    //recursively sort the array until array length < 1
    return quickSort1(left).concat(midIndexVal, quickSort1(right));
};
const array2 = [5, 4, 3, 2, 1];
console.log('quickSort1 ', quickSort1(array2));
// quickSort1: [1, 2, 3, 4, 5]

21.Merge Sort

22.Create Element tree with react

function tree(props){
  return React.createElement(props.name, props.props, props.children.map( child => tree(child)))
}

Web Optimization Concepts - The one and only guide you need (In progress)

WEI FENG — Mon, 06 Dec 2021 19:52:57 +0000

"How to fully optimize web performance? You'll understand after reading this article"

1. What is and how to use CDN

1.1 What is CDN exactly?
1.2 What's the benefits of CDN

2. Why do we need Lazy Load
3. Reflow and Repaint

Browser Concepts - The one and only guide you need (In progress)

WEI FENG — Sat, 04 Dec 2021 13:00:47 +0000

"How can our web application run without the browser? That's a good question.. Here are some useful concepts and articles i think a web developer should read regarding browsers. I know i know this is very tedious but trust me some day you will need this :)"

1. Browser Safety

1.1 Cross Site Scripting attack(XSS)
1.2 Cross-site request forgery(CSRF)
1.3 What is a man-in-the-middle attack?

2. Thead and process

2.1 The difference between thread and process
2.2 Service Worker

3. The mechanism behind browser cache

4. Cookie, Session and LocalStorage

5. Browser same origin policy

6. Garbage Collection in Javascript V8

7. How to Keep user logged in credential

8. What happened when Access-Control-Allow-Origin is * (wild card)

9. Communicate Across Browser Tabs

2.1 The difference between thread and process

2.2 Service Worker

3. The mechanism behind browser cache

The process of browser caching:

The browser loads the resource for the first time, the server returns 200, and the browser downloads the resource file from the server, and caches the resource file and response header for comparison and use in the next load;
The next time when client request to load resource, the time difference between the current time and the last return of 200 response is first compared. If it does not exceed the max-age set by cache-control, it will hit the cache and load resources locally. If the browser does not support HTTP1.1, use the expires header to determine whether it has expired;
If the resource has expired, it means that the cached resource is may no longer valid, and a request with If-None-Match and If-Modified-Since section is sent to the server;
After the server receives the request, it first validates whether the requested resource has been modified based on the Etag value. If the Etag value is the same, there is no modification 304 is returned; if E-tag value is inconsistent which means there is a change, and the new resource will be directly returned with a new Etag and status code 200.
If the request received by the server does not have an Etag value, it will compare If-Modified-Since with the last modification time of the requested resource. If it has not changed, server will return 304; if they are inconsistent, server will return the response header with new last-modified, resource and return status code 200;

Where are cache stored?

Service Worker: Note that if resource is not cached in service worker, it will call the fetch api to look for the cached resource in memory cache.
Memory Cache: memory cache will be erased once the tab is closed
Disk Cache: reading from disk cache is much slower than memory cache but it can store the resource for longer period.

Why do we need browser cache?

For better loading speed of the web page
relieve the server's pressure
avoid unnecessary network transmission

4. Cookie, Session and LocalStorage

read more about it here

Cookie attributes: We can set the cookie attributes in Server response header Set-cookie section

domain
Includes the Domain attribute in the cookie to specify the domain for which the cookie is sent.
path
Includes the Path attribute in the cookie to specify the path for which this cookie is sent.
secure
Includes the Secure attribute in the cookie to set whether the cookie is transmitted only over an encrypted connection.
httponly
Includes the HttpOnly attribute in the cookie to set whether the cookie is exposed only through HTTP and HTTPS channels.
max-age
Includes the Max-Age attribute in the cookie to specify the duration of the cookie.
expires
Includes the Expires attribute in the cookie to set the cookie expiration date.
custom
Includes custom attributes in the cookie to specify additional attributes.
sameSite
The SameSite attribute of the Set-Cookie HTTP response header allows you to declare if your cookie should be restricted to a first-party or same-site context.

5. Browser same origin policy

Same-origin policy

The same-origin policy is a critical security mechanism that restricts how a document or script loaded by one origin can interact with a resource from another origin.

It helps isolate potentially malicious documents, reducing possible attack vectors. For example, it prevents a malicious website on the Internet from running JS in a browser to read data from a third-party webmail service (which the user is signed into) or a company intranet (which is protected from direct access by the attacker by not having a public IP address) and relaying that data to the attacker.

6. Garbage Collection in Javascript V8

click here to read more

V8 divides the heap into two parts: young space and old space. When you perform an operations that requires V8 to allocate memory, V8 allocates space in the first portion.

- In the new space,
the memory space is divided into two parts, the From space and the To space. Of these two spaces, one space must be used and the other space is idle. The newly allocated objects will be put into the From space. When the From space is full, the new space Garbage Collector will start. The algorithm will check the surviving objects in the From space and copy them to the To space. If there are inactivated objects, they will be destroyed. When the copy is completed, swap the From space and To space, so that the GC is over.

Once the objects ‘survive’ a few(two to be exact) scavenges in new space, they get promoted to old space, which gets garbage collected in a separate cycle when full.

- In the old space,
When the old space does not have enough space for object being moved from new space or the object in the space exceeds a certain limit. A mark and sweep garbage collection algorithm will be used.

In this stage, all objects in the heap are traversed, and then the live objects are marked. After the marking is completed, all unmarked objects are destroyed. This will cause some performance problems in large memory. To solve this problem, in 2011, V8 switched from the stop-the-world flag to the incremental flag. During the incremental marking, the GC breaks the marking work into smaller modules, allowing the JS application logic to execute for a while between modules, so as not to cause the application to be blocked. But in 2018, GC technology has another major breakthrough, this technology is called concurrent marking. This technology allows GC to scan and mark objects while allowing JS to run.

7. How to Keep user logged in credential

- Browser in-memory scenarios

Token is actually a credential for accessing resources.

Generally, after the user successfully logs in through the user name and password, the server digitally signs the login credentials, and the encrypted character string is used as the token.

Store in the localStorage:
Web storage (localStorage/sessionStorage) can be accessed through the same domain provider through Javascript. This means that any JavaScript running on your website can access the web storage, so it is vulnerable to XSS attacks.

Store in Cookie
We can store it in a cookie and let it be sent automatically on every request, we can specify httponly to prevent it from being read by JavaScript or we can specify secure to ensure that the token is only transmitted under HTTPS to prevent being attacked by XSS, but the disadvantage is that it cannot cross domains and vulnerable to CSRF attacks.

Recommended Solution
Auth0 recommends storing tokens in browser memory as the most secure option. Using Web Workers to handle the transmission and storage of tokens is the best way to protect the tokens, as Web Workers run in a separate global scope than the rest of the application. Use Auth0 SPA SDK whose default storage option is in-memory storage leveraging Web Workers.

8. What happened when Access-Control-Allow-Origin is * (wild card)

When Access-Control-Allow-Origin is *. The client side will not be able to carry the cookies in request even setting XMLHttpRequest's withCredentials: true.

The withCredentials flag of XMLHttpRequest is set to true in order for the client to send cookies to the server. Access-Control-Allow-Credentials: true in the response is for the client to be able to receive cookies. Without these settings, the browser will not return the response content to the sender of the request.

Therefore, for the client to carry cookies to the server, three conditions are required:

Access-Control-Allow-Origin cannot be *, it should be a specific domain name
Server Access-Control-Allow-Credentials should be true
withCredentials=true of the client XMLHttpRequest

9. Communicate Across Browser Tabs

click here to read more

1. Local Storage Events

window.localStorage.setItem("loggedIn", "true");

The other Tabs which listen to the event will receive it, as shown below.

window.addEventListener('storage', (event) => {
 if (event.storageArea != localStorage) return;
 if (event.key === 'loggedIn') {
   // Do something with event.newValue
 }
});

This event is not triggered for the Tab, which performs the storage set action.
For a large chunk of data, this approach has adverse effects since LocalStorage is synchronous. And hence can block the main UI thread

2. Broadcast Channel API

The Broadcast Channel API allows communication between Tabs, Windows, Frames, Iframes, and Web Workers. One Tab can create and post to a channel as follows.

const channel = new BroadcastChannel('app-data'); channel.postMessage(data);

And other Tabs can listen to channel as follows.

const channel = new BroadcastChannel('app-data');
channel.addEventListener ('message', (event) => {
 console.log(event.data);
});

3. Service Worker Post Message

Using Service Workers, you can send a message like shown below.

navigator.serviceWorker.controller.postMessage({
 broadcast: data
});

And in the receiving Worker in the other Browser Tab can listen to the event.

addEventListener('message', async (event) => {
 if ('boadcast' in event.data ) {
  const allClients = await clients.matchAll();
  for (const client of allClients) {
   client.postMessage(event.broadcast);
  }
 }
});

This method gives more control and is a reliable way of passing messages.

4. Window Post Message

One of the traditional ways of communicating across Browser Tabs, Popups, and Iframes is Window.postMessage() method. You can send the message as follows.

targetWindow.postMessage(message, targetOrigin)

And the target window can listen to the events, as shown below.

window.addEventListener("message", (event) => {
  if (event.origin !== "http://localhost:8080")
    return;
  // Do something
}, false);

One advantage of this method over the others is the support for cross-origin communication is possible.

When we want to communicate between two tabs from different origin, we can use iframe as a bridge, post message to the iframe and listen to the message received from iframe.

Computer Network Concepts - The one and only guide you need

WEI FENG — Thu, 02 Dec 2021 21:47:59 +0000

"To become a Web Frontend Developer, we can never survive without Computer network knowledges. Frontend is never solely about Javascript or CSS. We work closely with network protocol and http request daily"

1. Common HTTP request that we will use
2. Inheritable and non-inheritable properties in CSS
3. HTTP respond Header
4. Common HTTP respond status code
5. Key differences between HTTP=1.0, HTTP=1.1, 2.0
6. What Happens When You Type URL into the browser
7. How do we understand keep-alive connection
8. What's the pros and cons for HTTP request
9. HTTPS protocol
10. Understand the OSI 7-layers model
11.TCP and UDP
12. Websocket
13. Domain Name System (DNS)

Other Contents

HTML - The one and only guide you need (in progress)
React Concepts Part.1 - The one and only guide you need
React Concepts Part.2 - The one and only guide you need
CSS Concepts - The one and only guide you need
Web Optimization Concepts - The one and only guide you need
Browser Concepts - The one and only guide you need

1. Common HTTP request that we will use

> - What is HTTP? Refer to the W3school for full detail

The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers.
HTTP works as a request-response protocol between a client and server.

Request Method	Explaination
GET:	GET is used to request data from a specified resource.
POST：	POST is used to send data to a server to create/update a resource.
PUT：	PUT is used to send data to a server to create/update a resource.
DELETE：	The DELETE method deletes the specified resource.
HEAD：	HEAD is almost identical to GET, but without the response body.
OPTIONS：	The OPTIONS method describes the communication options for the target resource. (used for CORS preflight)

Difference between GET and POST : Noted that if URL length does not exceed 2,083 characters, then GET request will be good with almost every browser.

2. HTTP request Header

Refer to this documentation

GET /home.html HTTP/1.1 

// Http method, path of the resource, protocol 

Host: developer.mozilla.org

// Domain of the current page who sends the request

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0

// Browser'user Proxy 

Accept: text/html,application/xhtml+xml,application/xml;q=0.9

//accepted content type for the browser

Accept-Language: en-US,en;q=0.5 

//accept language for the browser

Accept-Encoding: gzip, deflate, br 

//accepted encoding method

Referer: https://developer.mozilla.org/testpage.html

//the URL that make the request

Connection: keep-alive 

//the connection type between sever and client

If-Modified-Since: Mon, 18 Jul 2016 02:36:04 GMT
If-None-Match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a"
Cache-Control: max-age=0

//for cache control

3. HTTP respond Header

200 OK

// HTTP response status codes, short description

Access-Control-Allow-Origin: *

// CORS

Connection: Keep-Alive

//connection type

Content-Type: text/html; charset=utf-8

// document type

Date: Mon, 18 Jul 2016 16:06:00 GMT

//responding time

Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a"
Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT
//for cache control

Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure

// set cookie expire time and other related information

4. Common HTTP respond status code

Refer to this documentation for details

Successful responses

- 200 OK
The request succeeded.

- 204 No Content
There is no content to send for this request, but the headers may be useful. The user agent may update its cached headers for this resource with the new ones.

- 206 Partial Content
This response code is used when the Range header is sent from the client to request only part of a resource.

Redirection messages

- 301 Moved Permanently
The URL of the requested resource has been changed permanently. The new URL is given in the response.

- 302 temporary moved
A 301 redirect means that the page has permanently moved to a new location. A 302 redirect means that the move is only temporary.

- 304 Not Modified
This is used for caching purposes. It tells the client that the response has not been modified, so the client can continue to use the same cached version of the response.

Client error responses

- 400 Bad Request
The server could not understand the request due to invalid syntax.

- 401 Unauthorized
Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.

- 403 Forbidden
The client does not have access rights to the content; that is, it is unauthorized, so the server is refusing to give the requested resource. Unlike 401 Unauthorized, the client's identity is known to the server.

- 404 Not Found
The server can not find the requested resource. In the browser, this means the URL is not recognized. In an API, this can also mean that the endpoint is valid but the resource itself does not exist.

Server error responses

- 500 Internal Server Error
The server has encountered a situation it does not know how to handle.

- 501 Not Implemented
The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are GET and HEAD.

- 502 Bad Gateway
This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response.

- 503 Service Unavailable
The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded.

5. Key differences between HTTP=1.0, HTTP=1.1, 2.0

Refer to the full article here

1. PersistentConnection
HTTP 1.0 stipulates that the browser and the server only maintain a short connection. The server immediately disconnects the TCP connection after processing the request.

HTTP 1.1 supports Persistent Connection, and Long connection is used by default.For HTTP 1.1 long connections, new request headers need to be added to help achieve this. The value of the Connection request header is Keep-Alive, the client informs the server to keep the connection after returning the result of this request; the value of the Connection request header is close When, the client notifies the server to close the connection after returning the result of this request.

2.Pipelining
　　 Request pipeline (Pipelining) processing, multiple HTTP requests and responses can be transmitted on a TCP connection, reducing the consumption and delay of establishing and closing connections.

3.host field:
　　 In HTTP1.0, it is believed that each server is bound to a unique IP address. Therefore, the URL in the request message does not convey the hostname. But with the development of virtual host technology, there can be multiple virtual hosts (Multi-homed Web Servers) on a physical server, and they share an IP address. With the host field HTTP1.1 can send request to different host on the same server

4.Bandwidth optimization:
　　 In HTTP/1.0, there are some phenomena of wasting bandwidth. For example, the client only needs a part of an object, but the server sends the entire object.

　　 The range header field is introduced in the request message in HTTP/1.1,It allows to request only certain part of the resource. If the server correspondingly returns the content requested by the object, the response code is 206 (Partial Content), which can prevent the Cache from mistaking the response as a complete object.

5.Cache:
HTTP/1.1 adds the Cache-Control header field which supports an extensible instruction subset: for example, the max-age instruction supports relative timestamp.

HTTP 2.0

1.Multiplexing:
　　 HTTP 2.0 uses multiplexing technology to process multiple requests concurrently on the same connection, and the number of concurrent requests is several orders of magnitude larger than HTTP 1.1.

2.data compression:
　　 HTTP 1.1 does not support header data compression, HTTP 2.0 uses HPACK algorithm to compress header data, so that the data volume is smaller and the transmission on the network will be faster.

3.Server push:
　　 When we request data from a web server that supports HTTP2.0, the server will push some resources needed by the client to the client by the way, so that the client will not create a connection again and send a request to the server to obtain it. This method is very suitable for loading static resources.

4.Binary framing:
　　 HTTP/2 adds a binary framing layer between the application layer (HTTP/2) and the transport layer (TCP or UDP).
　　 Without changing the semantics, methods, status codes, URI and header fields of HTTP/1.x, it solves the performance limitations of HTTP 1.1, improves transmission performance, and achieves low latency and high throughput.

6. What Happens When You Type in a URL into the browser

1. URL parsing: The browser will extract the protocol and path of the requested resource.

2. Cache Validation: Then browser will verify whether such requested resource has been cached and still valid. If yes it will return the cached result immediately or else it will send a new request to the server.

3. DNS query: The browser checks the browser cache for a DNS record to find the corresponding IP address. If not found, it will proceed to the OS cache followed by router cache. Lastly, ISP(Internet Service Provider)’s DNS server initiates a DNS query to find the IP address.

4. Get the MAC address: After the browser gets the IP address, the data transmission also needs to know the destination host's MAC address.

5. The browser initiates a TCP connection with the server. It will require a three way handshake to establish the TCP connection between them.

6. The browser sends an HTTP request to the webserver. Once the TCP connection is established, the browser sends a HTTP request. Refer to the above section regarding HTTP request.

7. Server handle the request and sends out an HTTP response.
The server response contains the web page you requested as well as the status code, compression type (Content-Encoding), how to cache the page (Cache-Control), any cookies to set, privacy information, etc. Refer to the above section regarding HTTP response.

8. The browser parse and paint the HTML content The browser displays the HTML content in phases. First, it will render the DOM tree and CSSOM tree through the respective files and construct a render tree base on them. Once this is done the browser will layout the page through the render tree and use its api to paint the user interface on viewport.

9. TCP four way handshake to stop the connection Once the client thinks it has received everything it needs, it will start a four way handshake with the server to close the connection. Refer to the TCP section below for more information.

7. How do we understand keep-alive connection

In HTTP1.0, by default is to create a new connection between the client and the server for each request/response, and disconnect immediately after completion, which is a short connection.

When the Keep-Alive mode is used, the Keep-Alive function keeps the client-to-server connection valid. When a subsequent request to the server occurs, the Keep-Alive function avoids establishing or re-establishing a connection, which is a long connection. The method of use is as follows:

The client sends the request to the server while adding the Connection field to the header. The server sends the Connection: Keep-Alive field back to the client. The client receives the Connection field and then Keep-Alive connection established successfully.
To close the connection, client side will send connection:closed inside of its request, server will respond and close the keep-alive connection.

Pros of long connection

less cpu and memory usage as there are less connections
allows pipelining (refer to the above session about pipelining)
let congestion control will be needed
less delay in the subsequent request as the client side do not need to perform the three way handshake on every request.

Cons of long connection
The long tcp connection may waste resources if it stays idle for long period.

8. What's the pros and cons for HTTP request

Pros

1.Simple and fast: When a client requests a service from the server, it only needs to transmit the request method and path. Because the HTTP protocol is simple, the HTTP server request processing time will be very fast.

2.connectionless: No connection means it limits each connection to only process one request. After the server has processed the client's request and received the client's response, it will disconnect. This method can save transmission time.

3.Stateless: HTTP protocol is a stateless protocol, where the state refers to the context information of the communication process. The lack of state means that if the previous information is needed for subsequent processing, it must be retransmitted, which may result in an increase in the amount of data transmitted per connection. On the other hand, if the server does not need previous information, its response is faster.

4.Flexible: HTTP allows the transmission of any type of data object. The type being transmitted is marked by Content-Type.

Cons

Clear text transmission: The messages in the protocol are in text form, which is directly exposed to the outside world and is not safe. It may be manipulated by third party that's listening to the connection.

9. HTTPS protocol

> What is HTTPS?

Hypertext transfer protocol secure (HTTPS) is the secure version of HTTP, which is the primary protocol used to send data between a web browser and a website. HTTPS is encrypted in order to increase security of data transfer. This is particularly important when users transmit sensitive data, such as by logging into a bank account, email service, or health insurance provider.

What happens during a TLS handshake?
During the course of a TLS handshake, the client and server together will do the following:

1.Specify which version of TLS (TLS 1.0, 1.2, 1.3, etc.) they will use

2.Decide on which cipher suites (see below) they will use

3.Authenticate the identity of the server via the server’s public
key and the SSL certificate authority’s digital signature

4.Generate session keys in order to use symmetric encryption after the handshake is complete

10. Understand the OSI 7-layers model

Click here for more information on each layer's functionality

The Open Systems Interconnection (OSI) model describes seven layers that computer systems use to communicate over a network. It was the first standard model for network communications, adopted by all major computer and telecommunication companies in the early 1980s

The modern Internet is not based on OSI, but on the simpler TCP/IP model. However, the OSI 7-layer model is still widely used, as it helps visualize and communicate how networks operate, and helps isolate and troubleshoot networking problems.

11.TCP and UDP

What is the Difference Between TCP and UDP?

TCP retransmission mechanism

Each byte of data sent in a TCP connection has an associated sequence number. This is indicated on the sequence number field of the TCP header.

When the receiving socket detects an incoming segment of data, it uses the acknowledgement number in the TCP header to indicate receipt. After sending a packet of data, the sender will start a retransmission timer of variable length. If it does not receive an acknowledgment before the timer expires, the sender will assume the segment has been lost and will retransmit it.

TCP congestion control

The TCP congestion control mechanism is consists following four mechanisms (refer to the link above to get more details):

Slow start
Congestion avoidance
Fast retransmission
Fast recovery

TCP 3-way handshake and close connection

Three way handshake (refer to this link for details)

Step 1 (SYN): In the first step, the client wants to establish a connection with a server, so it sends a segment with SYN(Synchronize Sequence Number) which informs the server that the client is likely to start communication and with what sequence number it starts segments with
Step 2 (SYN + ACK): Server responds to the client request with SYN-ACK signal bits set. Acknowledgement(ACK) signifies the response of the segment it received and SYN signifies with what sequence number it is likely to start the segments with
Step 3 (ACK): In the final part client acknowledges the response of the server and they both establish a reliable connection with which they will start the actual data transfer

Close connection (refer to this link for details)

Step 1 (FIN From Client) –
Suppose that the client application decides it wants to close the connection. (Note that the server could also choose to close the connection). This causes the client to send a TCP segment with the FIN bit set to 1 to the server and to enter the FIN_WAIT_1 state. While in the FIN_WAIT_1 state, the client waits for a TCP segment from the server with an acknowledgment (ACK).
Step 2 (ACK From Server) –
When the Server received the FIN bit segment from Sender (Client), Server Immediately sends acknowledgement (ACK) segment to the Sender (Client).
Step 3 (Client waiting) –
While in the FIN_WAIT_1 state, the client waits for a TCP segment from the server with an acknowledgment. When it receives this segment, the client enters the FIN_WAIT_2 state. While in the FIN_WAIT_2 state, the client waits for another segment from the server with the FIN bit set to 1.
Step 4 (FIN from Server) –
The server sends the FIN bit segment to the Sender(Client) after some time when the Server sends the ACK segment (because of some closing process in the Server).
Step 5 (ACK from Client) –
When the Client receives the FIN bit segment from the Server, the client acknowledges the server’s segment and enters the TIME_WAIT state. The TIME_WAIT state lets the client resend the final acknowledgment in case the ACK is lost. The time spent by clients in the TIME_WAIT state depends on their implementation, but their typical values are 30 seconds, 1 minute, and 2 minutes. After the wait, the connection formally closes and all resources on the client-side (including port numbers and buffer data) are released.

12. Websocket

The WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.

WebSocket mechanism: The client notifies the WebSocket server of an event with all recipient IDs, and the server immediately notifies all active clients after receiving it, only those client whose ID is in the recipient list will handle the event from websocket server.

The advantage of WebSocket are as follows:

Support two-way communication, real-time data streaming
We can send text or binary data
Built on the TCP protocol, the implementation at the server side is relatively easy
The data format is relatively lightweight, the resource required is small
There is no same origin restriction, the client can communicate with any server
It has good compatibility with HTTP protocol. The default ports used by websocket are also 80 and 443.

13. Domain Name System (DNS)

DNS is the abbreviation of Domain Name System, and it provides a host name to IP address conversion service. It is a distributed database composed of hierarchical DNS servers.

It is an application layer protocol that defines how the host queries this distributed database. DNS makes our life easier for not having to remember the IP address.

Function: Resolve the domain name into an IP address. The client sends a domain name query request to the DNS server (the DNS server has its own IP address), and the DNS server informs the client of the IP address of the Web server.

2. Does DNS use TCP and UDP at the same time?
DNS takes port 53 and uses TCP and UDP protocols at the same time.
(1) Use TCP protocol for zone transfer

The secondary domain name server will regularly (usually 3 hours) to query the main domain name server to find out whether the data has changed. If there is a change, a zone transfer will be performed for data synchronization. The zone transfer uses TCP instead of UDP, because the amount of data transferred synchronously is much more than the amount of data in a request response.
TCP is a reliable connection, which guarantees the accuracy of data.

(2) UDP packets are smaller in size. UDP packets can't be greater than 512 bytes. So any application needs data to be transferred greater than 512 bytes require TCP in place. For example, DNS uses both TCP and UDP for valid reasons described below. UDP messages aren't larger than 512 Bytes and are truncated when greater than this size. DNS uses TCP for Zone transfer and UDP for name, and queries either regular (primary) or reverse. UDP can be used to exchange small information whereas TCP must be used to exchange information larger than 512 bytes. If a client doesn't get response from DNS, it must retransmit the data using TCP after 3-5 seconds of interval.

click here to read more

CSS Concepts - The one and only guide you need

WEI FENG — Thu, 02 Dec 2021 13:50:08 +0000

"I'm just summarizing my CSS learning routine here, your follow will be my motivation to update. Hope it will help you to improve your understanding towards CSS as well. Feel Free to check the rest of my content as well(updates regularly)"

1. CSS selector Priority
2. Inheritable and non-inheritable properties in CSS
3. Difference between display's block, inline and inline-block
4. How to hide the elements
5. What's the difference between link and @import
6. Transition and Animation
7. Pseudo class and pseudo element
8. How to understand requestAnimationframe
9. Content box vs Border box
10. Why Moving Elements With Translate() Is Better Than position:absolute Top/left
11.How do you understand CSS Sprites
12.What are the measures to optimize CSS performance
13.Why are we using css preprocessor and postprocessor
14.How to determine whether an element has appeared in our viewport
15.Understand the media query
16.When does z-index not work
17.CSS layout unit
18.How to achieve a two column layout
19.How to achieve a three column layout
20.Horizontal and vertical centering
21.Understanding Flex box model
22.Responsive Design
23.Position and Floating

Selector	Syntax	Weightage
Inline Style	`style="color`	1000
Id selector	`#id`	100
class selector	`.classname`	10
attributes selector	`d[ref=“abc”]`	10
pseudo class selector	`li:first-child`	10
HTML tag selector	`div`	1
pseudo element selector	`li:after`	1

React Concepts Part.2 - The one and only guide you need

WEI FENG — Wed, 01 Dec 2021 16:03:21 +0000

"I'm just summarizing my React learning routine here and this is the second part,your follow will be my motivation to update. Hope it will help you to improve your understanding towards React as well. Noted that the React version discussed here starts from 16.8 onwards. Concept such as HOC and class components are not included. (updates regularly)"

1. What are the Lifecycle of Components?
2. React Hooks in Function components

2.1 The differences between Function components and Class components
2.2.Why are we using array instead of object in useState()
2.3 What problems have been solved by Hooks
2.4 Rule of Hooks
2.5 Difference between useEffect and useLayoutEffect
2.6 Relationship between life cycle and hooks

3. Difference between React.map and JS.map
4. Why are we using JSX
5. Communication between Components
6. React Routers (In progress)

6.1 Client router concept
6.2 Switch between different routes
6.3 Redirection in React Router

7. Redux (Coming soon)

Class Components	Hooks
`getDerivedStateFromProps`	`useState`'s update function
`shouldComponentUpdate`	`useMemo`
`componentDidMount`	`useEffect` with empty dependency
`componentDidUpdate`	`useEffect`
`componentWillUnmount`	`useEffect`'s return function

React Concepts Part.1 - The one and only guide you need

WEI FENG — Wed, 01 Dec 2021 07:05:14 +0000

"I'm just summarizing my React learning routine here, your follow will be my motivation to update. Hope it will help you to improve your understanding towards React as well. Noted that the React version discussed here starts from 16.8 onwards. Concept such as HOC and class components are not included. (updates regularly)"

1. Why do we choose to use React?
2. React Synthetic Events
3. Why should we use hooks in React?
4.How do we understand React-Fiber and what problems has it solved?
5. What's the difference between Component and Element
6.When will component rerender in react?
7. What will happen during re-rendering

7.1 What is React key?

8. Stateless Component
9. How to get the DOM element in React 16.8?
10. React Portals
11. How to avoid unnecessary re-renders in React 16.8?
12. The mechanism behind React context
13. Uncontrolled Components

2. React Synthetic Events

Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser’s native event.

Synthetic events are delegated to document instead of the real DOM node. Therefore native events are triggered first and the events bubble up to doucment, after which the synthetic events are triggerd.

It provides better cross-browser compatibility as it provides a uniform api and consistent behavior on top level.
It provides better performance as for the native broswer events, the browser will create a new event object for the listener and bind it to the node. If we have multiple listener, multiple objects will be created and require a lot of resources from the memory.

However, the synthetic events objects are pooled and managed together. SyntheticEvent object will be reused and all properties will be nullified after the event handler has been called.

To stop the native broswer event from bubbling, we should use event.preventDefault()

3. Why should we use hooks in React?

Hooks are easier to work with and to test.
Code looks cleaner, easier to read.

4.How do we understand React-Fiber and what problems has it solved?

In previous React Engines' rendering process (V15), it will recursively compare the virtual DOM's change and update to the real DOM in one shot. This process wouldn't stop in any case. The events triggered by users such as inputting text will not be respond as browser's resources are occupied which cause lagging and drop in frame.

To improve this, Fiber now allows React to pause, resume, and restart the work on a component. It has a priority-based update system which allows the React to fine tune the renderer process.

However fiber is not equal to thread. It represents a mechanism to give up the execution rights of the CPU so that the CPU can perform other operations during this time. The rendering process can be interrupted and control can be returned to the browser, giving way to high-priority tasks such as user triggered events, and rendering can be resumed when the browser is idle.

5. What's the difference between Component and Element

Element: An element is a plain object describing a component instance or DOM node and its desired properties. It is a way to tell React what you want to see on the screen. They are not the actual instances.
Component: Component encapsulate element trees, but generally it can be deemed as a function which takes props as arguments and return a Element tree.

(Never create a instance, React will help us do it)

6.When will component rerender in react?

React components re-render whenever there is a change in their state or props.

A simple update of the state (e.g using setState()), causes the component and all its child components to be re-rendered automatically.

7. What will happen during re-rendering

Recursively Compare the previous VDOM with the current VDOM by DIFF algorithm. (using DFS to traverse every node, put the difference in an object if there is any.)

React's basic concept for processing renders is to re-render the entire application whenever there is a change. It is not saying that Virtual DOM is faster than direct manipulation of the DOM

No matter how the data changes, it will try to update the DOM with the least cost. When the DOM tree is huge, traversing the previous and current trees is still quite expensive, especially when it is just a small modification at the top level by setState() leads to traversing the entire tree by default. (We can improve this by using memo hooks)

7.1 What is React key?

Keys are identifiers used by React to track which elements in the list have been modified, added, or removed. During the development process, we need to ensure that the key of an element is unique among its sibling elements.

In the React Diff algorithm, React will use the Key value of the element to determine whether the element is newly created or moved, thereby reducing unnecessary element re-rendering

key must be unique to each element in the array
do not use the index
do not use an unstable key such as random number

8. Stateless Component

A stateless component has no state (:)), it means that you can’t reach this.state inside it. It also has no lifecycle so you shouldn't use those methods and hooks.

9. How to get the DOM element in React 16.8?

const refContainer = useRef(initialValue);

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

We can't visit the refs during render phase as the DOM has not been stablished.

10. React Portals

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

ReactDOM.createPortal(child, container)

Elements need to be insert into a different location in the DOM. A typical use case for portals is when a parent component has an overflow: hidden or z-index style, but you need the child to visually “break out” of its container. For example, dialogs, hovercards, and tooltips.

An event fired from inside a portal will propagate to ancestors in the containing React tree, even if those elements are not ancestors in the DOM tree.

11. How to avoid unnecessary re-renders in React 16.8 ?

React.memo is a new API comes from React 16.6. It is used to cache component rendering and avoid unnecessary updates. It is a high-level component that's very similar to PureComponent. The difference is that React.memo can only be used for functional components.

12. The mechanism behind React context

We can use the Javascript clousure as an analogy, the Context object provided by the React component is actually like a clousure provided to child components to access. The properties of the Context object can be regarded as active objects in the scope.

Since the Context of a component is composed of all the components on the parent node chain through getChildContext（）, the Context object returned by the component can access the Context properties from all its parent component.

13. Uncontrolled Components

In most cases, we recommend using controlled components to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.

Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.

HTML - The one and only guide you need (in progress)

WEI FENG — Wed, 01 Dec 2021 05:14:21 +0000

Sharing the concept I've picked up for HTML. Updates regularly.

1. How does Doctype work?

DOCTYPE also known as the html document type declaration. The doctype declaration would tell the browser which rendering mode to use for that document to be analysed by the browser.

Syntax example for HTML5: <!DOCTYPE html>

Full standards mode renders pages according to the W3C web standards.
Quirks mode renders pages in a non standards compliant way.
Almost standards mode is close to full standards mode, but features support for a small number of quirks.

2. What's the difference between src and href?

The src attribute is used to embed a resource, usually URLs into a document for <img> and <script> tags. The loading and processing of the page is paused until this the browser fetches, compiles and executes the file.

href (Hypertext Reference) attribute specifies the location of a Web resource. The browser understands that this resource is a stylesheet and the processing parsing of the page is not paused (rendering might be paused since the browser needs the style rules to paint and render the page).

3. Async vs Defer in script tag?

click here to read more

Both async and defer load scripts asynchronously without blocking the DOM, but there are two differences between async and defer.

Defer waits for the DOM to be loaded. Async doesn’t.
The difference is async doesn’t care whether the DOM is fully loaded. defer waits for DOM to be loaded before it executes.

This means:

You should use defer if your script requires the DOM.
If you use async and you need the DOM, you run the risk that the element you need cannot be found (which is a potential source of bugs).

You should use async if your script contains the following conditions:

The DOM you need is already present (or the script doesn’t need the DOM)
The script doesn’t depend on other scripts

4. Frequently used meta tags

The meta tag is defined by the name and content attributes, used to describe the attributes of the web page document, such as the author of the web page, web page description, keywords, etc.

Commonly used meta tags:
(1) charset, used to describe the encoding type of HTML documents:
<meta charset="UTF-8">

(2) keywords, page keywords:
<meta name="keywords" content="keywords" />

(3) description, page description:
<meta name="description" content="page description content" />

(4) Refresh, page redirection and refresh:
<meta http-equiv="refresh" content="0;url=" />

(5) viewport, adapted to the mobile terminal, can control the size and ratio of the viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Among them, the content parameter has the following types:

width viewport: width (device-width)
height viewport: height (device-height)
initial-scale: initial scale
maximum-scale: maximum zoom ratio
minimum-scale: minimum zoom ratio
user-scalable: Whether to allow the user to zoom (yes/no)

(6) Search engine indexing method:

The content parameter has the following types:

all: The file will be retrieved, and the link on the page can be queried;
none: The file will not be retrieved, and the link on the page cannot be queried;
index: the file will be retrieved;
follow: The link on the page can be queried;
noindex: The file will not be retrieved;
nofollow: The links on the page cannot be queried.

5. Why we use HTML Semantic Elements

click here to read more

Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way.

First, it is much easier to read. This is probably the first thing you will notice when looking at the first block of code using semantic elements.

It has greater accessibility. Search engines and assistive technologies (like screen readers for users with a sight impairment) are also able to better understand the context and content of your website, meaning a better experience for your users.

*Common semantic elements: *

1.<header></header>

2.<nav></nav> 

3.<section></section>  

4.<main></main>  

5.<article></article> 

6.<aside></aside> 

7.<footer></footer>

6. Pros and Cons for Iframe

The <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Pros:

It can load resources with huge volume such advertisements as iframe can load the scripts concurrently.
It can achieve cross-subdomain communication

Cons:

iframe will block the main page's onload event
if third party websites were embedded, there may be safety concerns such as CSRF attack.

7. What does the label do?

The element is used to associate a text label with a form field.

8. What is New in HTML5?

Semantic elements such as header, nav and footer.
media element:

audio : <audio src='' controls autoplay loop='true'></audio>
video : <video src='' poster='imgs/aa.jpg' controls></video>
source: <video> <source src='aa.flv' type='video/flv'></source> <source src='aa.mp4' type='video/mp4'></source> </video>

DEV Community: WEI FENG

Javascript method Implementation

Web Optimization Concepts - The one and only guide you need (In progress)

Table Of Contents

Other Contents

1. What is CDN and how to apply CDN

2. Why do we need Lazy Load

3. Reflow and Repaint

Browser Concepts - The one and only guide you need (In progress)

Table Of Contents

Other Contents

1. Browser Safety

2. Thread and process

2.1 The difference between thread and process

2.2 Service Worker

3. The mechanism behind browser cache

4. Cookie, Session and LocalStorage

5. Browser same origin policy

6. Garbage Collection in Javascript V8

7. How to Keep user logged in credential

8. What happened when Access-Control-Allow-Origin is * (wild card)

9. Communicate Across Browser Tabs

Computer Network Concepts - The one and only guide you need

Table Of Contents

Other Contents

1. Common HTTP request that we will use

2. HTTP request Header

3. HTTP respond Header

4. Common HTTP respond status code

5. Key differences between HTTP=1.0, HTTP=1.1, 2.0

6. What Happens When You Type in a URL into the browser

7. How do we understand keep-alive connection

8. What's the pros and cons for HTTP request

9. HTTPS protocol

10. Understand the OSI 7-layers model

11.TCP and UDP

12. Websocket

13. Domain Name System (DNS)

CSS Concepts - The one and only guide you need

Table Of Contents

Other Contents

1. CSS selector Priority

2. Inheritable and non-inheritable properties in CSS

3. Difference between display's block, inline and inline-block

4. How to hide the elements

5. What's the difference between link and @import

6. Transition and Animation

7. Pseudo class and pseudo element

8. How to understand requestAnimationframe

9. Content box vs Border box

10. Why Moving Elements With Translate() Is Better Than position:absolute Top/left

11.How do you understand CSS Sprites

12.What are the measures to optimize CSS performance

13.Why are we using css preprocessor and postprocessor

14.How to determine whether an element has appeared in our viewport

15.Understand the media query

16.when does z-index not work

17.CSS layout unit

18.How to achieve a two column layout

19.How to achieve a three column layout

20.Horizontal and vertical centering

21.Understanding Flex box model

22.Responsive Design

23.Position and Floating

React Concepts Part.2 - The one and only guide you need

Table Of Contents

Other Contents

1. What are the Lifecycle of Components?

2. React Hooks in Function components

3. Difference between React.map and JS.map

4. Why are we using JSX

5. Communication between Components

6. React routers (In progress...)

7. Redux

React Concepts Part.1 - The one and only guide you need

Table Of Contents

Other Contents

1. Why do we choose to use React?

2. React Synthetic Events

3. Why should we use hooks in React?

8. How to understand `requestAnimationframe`