DEV Community: Hihi

DNS resolution - How does it work basically?

Hihi — Sat, 11 Nov 2023 06:32:49 +0000

The process of typing url to browser bar and then enter, wait for a little bit and you get your webpage in front of you seems like to be simple but there's a lot of communication and works between computers under the hood, and more amazingly, these complex stuffs are done in a time counted by just milliseconds!

When you type in the url, for example gg.com to browser and go, the browser first will ask the DNS resolver (usually your ISP) if he saved a cached IP address gg.com or not.

If he say yes, he will return the IP address to the browser and then the browser can go to that address to fetch assets of gg.com;
If not, he has to proceed on finding the url's IP address

That process of IP finding is called DNS resolution.

Find the IP address

Overall, the DNS resolver (now I will call it resolver) has to scope down the zone of searching: he will search for where is containing all the .com domains among others (.net, .co,...) first, then go to that .com domains container and search for gg.com's address and finally go to that final address to retrieve assets.

The resolver asks the first information bar (rootname server) where contains all the .com domains, the RS returns the IP address of the .com container - this container's address is called Top Level Domain server.
The resolver goes to the Top Level Domain server address, asking for the address of gg.com. The TLD server returns the IP address where containing the gg.com domain - This address is called authoritative name server, the information bar knows where gg.com is living.
The resolver go to the Authoritative name server, asking the exact address of gg.com, the ANS return the exact IP address of gg.com.
Having the final IP address of gg.com, the resolver saves that IP address for a limited time (cached), then tell the browser "hey, this is where gg.com lives, go here to find him".
Browser go to that IP address and retrieve gg.com assets.

Next time when we want to access gg.com, the resolver will check if there's a time-valid cached IP address of gg.com or not, if the cached IP is not obsolete the resolver will return that cached IP to browser, or else it will start the DNS resolution process.

Some takes

DNS servers communicate with address in IPs type, not human url.
An IP address points to a specific computer containing the url's assets (HTML, CSS, JS files).
A certain url can have multiple IP address in ANS, each of these IP address is called A record. When requested, the ANS will choose 1 of these A records and return to resolver. By doing this the loads among servers containing assets of the url can be shared and balanced and avoid failures when one or more of the servers are down. For example: beside 9.9.9.9, the IP address of gg.com can be 8.8.8.8 or 7.7.7.7. We can go to one of them to get the same assets for gg.com

References

Javascript - interpretation and JIT

Hihi — Sun, 09 Jul 2023 10:54:23 +0000

We hear about Javascript as it is an interpreted language and the JIT engine made up of it. But did you know that Javascript is also considered either a compiled or an interpreted language thanks to the JIT engine?

What is JIT?

JIT stands for Just-in-time, it is a dynamic compilation which is being done before the code execution. In the normal process of translate Javascript into machine readable code, the interpreter translates the human code (Javascript) line by line and execute that code (bytecode - 0 and 1) immediately, so there's no room for optimization, just translate and run. The JIT leans in this process to do the optimization between the translation and execution.

How JIT helps

The JIT engine plays a vital role in the optimization. It will do assumptions and estimations in parts of our code, then decide what code can be sent directly to execution and which one should be hold to optimize.
The JIT holds some assumptions for our code when it's doing the optimization. With some code is run frequently, the engine will capture the code, make assumption and optimized version for each of its assumption. If the assumption is correct, the optimized code will be pushed to the compiled code and ready for execution, if it's not, the wrongly-optimized code will be trashed out - this is called deoptimization.
Elaborate more on how JIT works - A crash course in just-in-time (JIT) compilers.

The process of op-deop may cause the engine to slow down the run time of the code due to making to many assumptions by the JIT. The browsers solve this problem by limiting how many time the op-deop should occur, if it reaches the limit, the op-deop should be stopped trying and use the baseline code.

Conclusion

We studied what is JIT and how it helps transform Javascript in to a well-balanced between compiled and interpreted language. Each browser or server engine has different ways of implementing JIT but in general, they have the same core idea which includes the op/deoptimization with the baseline compiler and optimization compiler.

References:

Javascript compile time and runtime

Hihi — Sat, 08 Jul 2023 07:50:42 +0000

In this article I will give a brief about Javascript compilation and runtime. I recommend you to elaborate to these terms to have a deep knowledge of how Javascript is run under the hood.

Compile time:

The phase when Javascript is parsed into machine code - set of instructions for the machine to do as follow.
The compilation process has 3 phases: - Tokenizing/Lexing - Parsing - Code-Generation.
All the checking and optimization is done in this compile time.

Runtime:

The phase when the code is done compiled and is invoked to execute.
In Javascript specifically, the runtime system facilitates storing functions, variables, and managing memory by using data structures such as queues, heaps, and stacks. All these engines are provided by Javascript v8 if you run code in Chrome.
Ex: NodeJS and Browser runtime provide all the things need to run our Javascript code. The run kit is comprise of Event loop, callback queue and Javascript engines (heap and callstack).

=> When we type and run the JS code in the console browser, the browser will firstly compile the code into machine code, and then run the byte code (compiled code) in the environment (JS v8) - which means this in runtime. How JS v8 works

Ref:

Javascript Object - Prototype

Hihi — Sat, 17 Jun 2023 06:08:10 +0000

Firstly, keep in mind that in the Javascript world there are only 2 types:

Primitives: number, string, boolean, undefined and null.
Objects: Objects, functions and its standard built-in Objects (all these built-in are Object-extended);

So we can say that Javascript is an Object-based language.

When creating an object, we usually do this:

const myOb = {
    name: 'John Doe',
    age: 20,
}

This will create an object with the default constructor of Object in Js. To check this we can simply console.log(myOb.__proto__)

So, what is __proto__ and why all Js Objects have that property? We usually hear the term Prototype but what it actually is?

Prototype

The concept of prototype relating to the inheritance of Javascript's objects and its extends. For example, Array is an extend of Object, so it also inherited some property of Object and have some built-in methods like push, pop, shift, unshift,.... The Object is not having these Array's built-in methods.

const ar = [];

console.log(typeof ar) // 'object', not 'array'

So, each instance of Object or Object-extends has a special property called __proto__ which will drive us to the inheritance information of the instance.

console.log(ar.__prototype__) 
// [constructor: ƒ, at: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, …]

Here we can see that the constructor of Array, all the built-in methods that inherit from the Array standard object. However, __proto__ is also an object, and like I said before every object has the __proto__ property:

console.log(ar.__proto__.__proto__)
// {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

Now we can see the construction and built-in methods of the __proto__, it is an object itself, so what if we go deeper?

console.log(ar.__proto__.__proto__.__proto__)
// null

Haaa! we reached the end of inheritance chain, the Object itself is the final node. We can say Object is the final boss in Javascript. I recommend that you should copy & run all above snippet in your browser's console and see the result and do the exploration yourself.

That inheritance chain is usually called Prototype chain.

In the upcoming post, I will show you the application of Prototype and some syntactic sugar syntax relating to Object. Stay tuned!

References:

JavaScript object basics - MDN
Javascript Object Prototype - MDN

Javascript event loop - approach the first meet

Hihi — Sun, 30 Apr 2023 09:13:47 +0000

Let's take a context in a browser where we can execute JS directly in the console. Browsers provide JS runtime engine so that we can run the code in the console. Beside the JS engine, browsers also have alot of other built-in tools like HTML parsers, networking, storages,... And the Web API is one of the pieces in the browsers tools.
To this point we can note that JS runtime and Web API is 2 separately tools in the browser. This is important to acknowledge before we continued to the Event loop.

Now consider this snippet:

console.log('start')

setTimeout(() => {
    console.log('Time is up!')
}, 0);

console.log('end')

When we execute the snippet, the log now shows:

start
end
Time is up!

Why shouldn't the log be this order start - time is up! - end although we set the timer to 0 in setTimeout?

Debug the event loop

Firstly, keep in mind that JS doesn't provide the setTimeout function. It's part of the Web API that provided by browser. So it has nothing to do with the Javascript things.

When the code run, the functions are gradually added to the Callstack and then executed immediately.
While the console.log() functions are freshly executed right away and log the texts, the setTimeout is a special function from Web API. When it's called, the Web API will get the hands in: it holds the callback passed in setTimeout for a t second.

After t second, the callback is pushed to the callback queue, waiting in it to be executed:

The Event loop is constantly checking the callstack: if the callstack is empty, the callback queue will dequeue it, bringing the instance waiting in the queue to the callstack and then execute it

And finally, the console.log('Time is up!') is executed.

Conclusion

From the snippet above, we can see that if we use the special functions (setTimeout, setTimeInterval) from the Web API kit, the comprised instances (callbacks) in these function must go to the Web API, then go to the waiting queue from the callback queue, waiting for the callstack to be empty and then dequeue to the callstack for execution.
In the meanwhile, the JS native functions (console) will take place in the callstack, no waiting for the setTimeout. This is called Asynchronous/Non-blocking

Scope & Closure in Javascript - Army of functions challenge

Hihi — Thu, 20 Apr 2023 05:09:41 +0000

While researching about scope and closure, I came across this challenge from javascrip.info, The question is shown below:

function makeArmy() {

    let shooters = [];
    let i = 0;

    while (i < 10) {
        let shooter = function() { // create a shooter function,
            alert( i ); // that should show its number
        };
        shooters.push(shooter); // and add it to the array
        i++;
    }
    return shooters;
}
let army = makeArmy();

// all shooters show 10 instead of their numbers 0, 1, 2, 3...
army[0](); // 10 from the shooter number 0
army[1](); // 10 from the shooter number 1
army[2](); // 10 ...and so on.

So, what is really happening?

As we can see, each iteration of the while loop we initialized and assigned the shooter function and then store them in the shooters array. Each instance has the reference to the i variable.

Let's dive in the action of function.

When we invoke army[0](), it firstly search the i variable in its local memory (which is the function's inner scope). When it cannot find i in its local scope, it continues to populate to the outside scope and searching for i, the current scope is now in the while loop (inner the {...}). In this scope there's still not any i. It continues to search in the broader scope, which is the makeArmy 's environment, now there's one i holding the value of 10, and yet the 10 is logged in the alert(i) function.

How to make the `i` unique value as we wanted?

Simply we will create a copied local variable of i in the iteration scope (while loop's scope)

function makeArmy() {

    let shooters = [];
    let i = 0;

    while (i < 10) {
        let j = i; 👈
        let shooter = function() { 
            alert( j ); 👈
        };
        shooters.push(shooter);
        i++;
    }
    return shooters;
}

The j is now living in the iteration scope and each iteration it holds a new value of i incremented. And each instance of shooter has its own unique j but not using the outer i

j is encapsulated in each instance of shooter.

Conclusion:

Be careful when using the shared variable between instances of function.
Each block scope has it own scope

{
  let scopedContent = 'Hello scope'
}

console.log(scopedContent) 
// ReferenceError: scopedContent is not defined

Javascript scope and closure

Hihi — Wed, 12 Apr 2023 05:06:27 +0000

To understand closure, let's take a look at the term Lexical scope.

Lexical scope of a function comprises of inner scope of function and ability to access its nearest surrounding environment

The access ability is a hidden feature that cannot be access normally as object in JS (some says it's optimization engine from V8)

function outerFunc() {
    let counter = 0;
    return function inc() {
        counter++;
    }
}

// - the inc()'s lexical scope is its inner scope 
// (within the {...}) and the ability to 
// bound out and search for the counter;

Once the inc() is returned to an instance, it encapsulates the counter value and bring it along - to a permanant memory, which means any of it instance from the same invocation can access to counter

const newFunction = outerFunc();

newFunction(); // counter = 1
newFunction(); // counter = 2

Different invocations can not share the same reference to counter

const newFunction = outerFunc();

newFunction(); // counter = 1
newFunction(); // counter = 2

const anotherFunc = outerFunc();

anotherFunc(); // counter = 1, not 3
anotherFunc(); // counter = 2

anotherFunc creates new Execution context, and the counter is set to 0 in that new EC.

When a function is invoked, it firstly search for its inner local memory (inner scope), then if not found it will populate to its encapsulated memory, then if not found, it gradually bounce back to the broader nearest scope.

Source: Closure - Javascript.info

In short:

Lexical scope: the inner scope and ability to access surrounding scopes (this is called Closure) ;

References

Variable scope, closure
JS the hard parts - Frontend master course

Lazy Initialization in React

Hihi — Wed, 12 Apr 2023 03:45:47 +0000

I read about lazy init lately when enrolled in FrontendMaster course from Brian Holt. It is said that lazy init is used when you want to perform some heavy calculation actions rather than primitive values in the useState hook. For example calculating some complex formula, creating some DOM elements,...

const [currentDOM, setCurrentDOM] 
  = useState(React.createElement('div'))

Keep in mind that useState's value is init-ed only once when the component is loaded up, after that it will behave naturally with its inner state. So, with the heavy actions or results of complex calculation, we would like to calculate - or init them once until further next changes to save some performance by not re-calculating these costly actions. This can be improve by using Lazy Initialization: passing the return value in a callback function

const [currentDOM, setCurrentDOM] 
  = useState(() => React.createElement('div'))

Currying in Javascript

Hihi — Wed, 12 Apr 2023 03:44:23 +0000

Currying in Javascript It can be understood as function caching. Consider the snippet below:

// utils.js

const submitForm = (formName: string) => (submittedFormData) => {
    const currentForm = getForm(formName);
    return submit = () => {
        validateForm(currentForm, submittedData)
        callSubmitFormAPI(submittedFormData)
    }
}

Firstly, we gonna get the form object from formName; Let's say if we have multiple formData waiting for submission (with diffrerent submittedFormData), we can use this function and not having to re-call the getForm function to get the same form:

import { submitForm } from 'utils';

const registerForm1Data = { ...someFormData1 };
const registerForm2Data = { ...someFormData2 };

// return the function `submit` function
const formSubmission = submitForm('REGISTER_FORM'); 

if (user === isSomeFlag) {
    // can be seen as submitForm('REGISTER_FORM')(registerFormData1)
    formSubmission(registerFormData1) 
} else {
    formSubmission(registerFormData2)
}

References:

Understand Currying - blogrocket;
Javascript Currying - javascript.info

My quick note on Redux

Hihi — Wed, 12 Apr 2023 03:43:09 +0000

Redux is a state management library that helps us to solve the problem of state usage from many places in app and passing props to a deep nesting component.

Redux ensures 3 pillars in its pattern: 1-way binding data & single source of truth & immutability;

Everything in Redux is communication with actions. Action is an object that describe what to do and return the new state from reducer

Actions Creator is a function returning a specific action object => prevents wrong typing when typing action objects again and again.

Reducer: A pure function takes in the current state object and a callback function which defines logic and returns new states; the idea of reducer comes from Array.reduce method.

Redux toolkit: compact action creators, reducer, and selectors into a slice - opinionated architecture.

We can create multiple stores in redux but it will violate the single source of truth.

thunk: a middleware that listens to dispatched events and sees if the arguments passed is a function or not. If it's a function then it will be executed (asynchronously)

> Redux with normal action:
UI dispatch ---> Actions ---> Reducer receive action and return new state;

> Redux with thunk (passing a function to dispatch instead of object):
UI dispatch ---> thunk ---> middleware executes thunk ---> dispatch action to reducer ---> reducer returns new state.

> Redux with thunk (passing a function to dispatch instead of object):
UI dispatch ---> thunk ---> middleware executes thunk ---> dispatch action to reducer ---> reducer returns new state.

Ref:

My notes on Javascript functions and related things.

Hihi — Tue, 28 Mar 2023 12:27:47 +0000

I write some writeup thoughts while learning on frontendmaster.

Execution context

When a function is invoked, keep in mind that that function will attach to 2 things:

thread: the ability to run the code in the function from top to the bottom;
local memory: where the function saves their local variables & inner reference values. That 2 things is called execution context.

Block scope

Only the functions can create its own execution context, other code block, loops,... don't create.
So all the variables and values once involved in that function will be locked in and can't be accessed outside.

Closure

The ability of accessing values from outer scope. To deeply understand closure you should have a notion of what execution context is.

Higher order function

HOF is an idea of passing function as an argument to another function. This concept give us an idea of freely modification make our code more reusable.

`useState` and `prevState`

Hihi — Tue, 28 Mar 2023 12:09:19 +0000

There's a way to update your React state more efficiently using the prevState with a callback in setState function.

const [name, setName] = useState('');
const [address, setAddress] = useState('');
const [phone, setPhone] = useState('');

// we have to update them separately in handlers
const handleNameChange = (arg) => setName(arg);
const handleAddressChange = (arg) => setAddress(arg);
const handlePhoneChange = (arg) => setPhone(arg);

In the above case, if we have more fields that means the handlers will grow in a repetitive way. To solve this problem, I have a clever way to nest them in an object and make use of prevState in setState.

const [formData, setFormData] = useState({});

const handler = (formProps) => (newValue)
 => setFormData(prevState => 
   ({...prevState, [formProps]:newValue})
 );

DEV Community: Hihi

DNS resolution - How does it work basically?

Find the IP address

Some takes

References

Javascript - interpretation and JIT

What is JIT?

How JIT helps

Conclusion

Javascript compile time and runtime

Compile time:

Runtime:

Ref:

Javascript Object - Prototype

Prototype

References:

Javascript event loop - approach the first meet

Debug the event loop

Conclusion

Scope & Closure in Javascript - Army of functions challenge

Let's dive in the action of function.

How to make the i unique value as we wanted?

Conclusion:

Javascript scope and closure

In short:

References

Lazy Initialization in React

Currying in Javascript

References:

My quick note on Redux

Ref:

My notes on Javascript functions and related things.

Execution context

Block scope

Closure

Higher order function

`useState` and `prevState`

How to make the `i` unique value as we wanted?