Forem: Emmanuel Chikwendu Onah

Demystification of JavaScript Code processing using V8 as the targeted engine 🔬

Emmanuel Chikwendu Onah — Wed, 01 Feb 2023 20:25:36 +0000

So, we will be looking at how your JavaScript code gets processed. From you writing your Js code to the computer understanding it and doing what you asked 💻.

It's all about bringing you closer to the system 🔎.

Phase 1: Coding Js

You write your Js code e.g:

 function checkIsAValidObject(obj){
    return typeof obj == "object" && !Array.isArray(obj)
  }

Phase 2: Host env setup

You take your code to a JavaScript host-env e.g Browser/Node. The host will do what we call the "initial time branch", during the initial time branching it gets the required components required to run your JavaScript code e.g core V8 engine, APIs(e.g DOM API, libuv API).

Phase 3: Compilation

Your JavaScript code gets compiled to AST(Abstraction Syntax Tree). Its a format that Our ISA(Instruction Set Architecture) machine/engine can process, the idea is similar to when you want to use Theo-design-token-engine to compile from one style-model to another e.g from CSS to XML styles, it means you must write in a model that theo understand. Here is a link if you wish to see the AST in action:Click me

Sample of Js code to AST

After your code is converted to AST, the next thing is the hoisting of expressions and statements.

Phase 4: Generation of Executable Bytecode from the AST code

At this stage, the JavaScript engine takes the AST code and generates a bytecode following an Instruction Set Architecture. For the v8 engine, we make use of ARMV8 which is a framework(i call it a framework because it's focused on specific machines and specific instruction architecture type) that implements a reduced instruction set. These executable bytes are instructions(see it as a language) that the CPU understands and decodes. Note, the CPU CAN NOT execute this instruction (they are usually in hexadecimal format 0-f), what the CPU does is pull the our instruction from the memory and decode it to 0-1(which is the language the CPU understand). So, have it at the back of your mind that the CPU can not understand either reduced or complicated instructions until the CPU has decoded/translated it into a machine-code of 0-1.

To generate an executable bytecode for a Js code

I will be sampling with macOS:

brew install v8
run: d8 --print-bytecode your-js-file-absolute-path.js

Sample of how to generate an executable bytecode for a Js code

The Js code

Install v8

Generate the bytecode

Phase 5: Interpretation and Execution

This is the stage we all have been waiting for. This is what distinguishes a compiled language and an interpretable language. When you hear an interpretable language, it doesn't mean your program doesn't get compiled to instruction, but rather it means you write your program, send it to your language runtime and the language engine does the compilation for you at the point of execution. On the other hand, a compiled language needs to be compiled to an instruction and then sent to a machine that needs it(e.g sending a Java Jar executable to run on android Os).

At this stage, The JavaScript engine executes the executable file by running each instruction line by line e.g it sends an instruction that says create a primitive variable called name and assign it a value "Emmanuel". The computer will execute the instruction which in simple terms means telling the computer to do what you want(i can write a detailed article on how the modern computers are architected to process instructions. Feel free to comment in the section below if the article would be useful to you).

Phase 6: Hot Optimization stage

This stage is more of optimization, caching of frequently used bytecode. The Js engine will store the result of frequently interpreted bytecode so the computer doesn't need to reprocess it.

Summary

You write Js code
The JavaScript engine turns your Js code to bytecode Instructions(0-f)
The Computer CPU(Usually the Control Unit) turns the bytecode instructions to machine code(0-1)
Then the computer executes the machine code
Then you get the result of the execution

Functional React.Js Execution flow

Emmanuel Chikwendu Onah — Wed, 01 Feb 2023 19:30:12 +0000

Table of Content

What is ReactJs
ReactJs Life Cycle
ReactJs Flow

1. What is ReactJs

ReactJs is a JavaScript declarative UI library that makes it easier to create performant front-end applications.

2. ReactJs Life Cycle

ReactJs life cycle consists of:

Mounting: this is the first time a component gets painted into the virtual DOM and then the actual DOM.
Updating: this is when a component gets updated into the virtual DOM(using the diffing algorithm) and then gets injected into the actual DOM(using the reconciliation algorithm). This is what causes RERENDER but doesn't cause REMOUNT. usually caused by a component state update, component props update or a component parent update(that is when a wrapper component updates, the wrappedChildComponent gets re-rendered also).
Unmounting: this is the phase when a component gets removed from the virtual DOM and then gets removed from the actual DOM too. e.g when we navigate to another path, the previous path component gets unmounted.

Keywords to take note of:

Mounting: I mean the first time a component gets constructed into the virtual DOM.
Update: I mean when a component gets updated in the Virtual DOM.
Unmounting: when a component gets removed from the Virtual DOM.

3. ReactJs Flow:

I will break this into 8 phases for better understanding:

1. Virtual DOM construction: this is the phase where ReactJs program constructs the virtual DOM for the FIRST TIME.

How is the virtual DOM constructed

It takes the returned element from a component(i mean the ReactElement) and then maps each element object hierarchically with a unique key attached to them.
If any Element object uses the component prop or state, the initial value of them will be present in the virtual DOM.

2. After Virtual DOM construction: this is the phase when the virtual DOM has just been constructed for the first time. And this is the phase when your useLayoutEffect runs

3. Actual DOM construction: this is the phase when React takes the content of the virtual DOM and injects it into the actual DOM.

4. After Actual DOM construction: this is the phase when the actual DOM construction has just finished. At this phase is when the useEffect gets to run. And that is why when you have a code let's say a setState in useLayoutEffect and useEffect, that of useEffect update will replace the update of useLayoutEffect after a successful run.

5. Virtual DOM update: this is the phase when the virtual DOM needs to be updated because a component and its returned element object have been updated.
Note: an update to virtual DOM is an update to actual DOM. If nothing new changes in your component, virtual DOM will not update thanks to ReactJs diffing algorithm.

what causes the virtual DOM to update?

When a component state which is used "by a returned element" gets updated
When component props which are used "by a returned element" get updated
A parent component gets updated and the child component is not memoized(React.memo)

How virtual dom is updated?

ReactJs program doesn't just take the returned element object of a component to update the old virtual DOM content. But rather, it tries to check if the incoming object has different content from the current one and it only changes the new part e.g it picks the prop that has changed. And this whole process is termed the "diffing process".

6. After Virtual DOM update: useLayoutEffect runs

7. Actual DOM update: at this phase, ReactJs doesn't just take the virtual DOM content and inject it into the actual DOM. But rather, it uses what we call the "reconciliation algorithm" to determine the node that needs to be updated in the actual DOM and then it updates only the changed part.

8. After the Actual DOM update: this is the phase when the useEffect gets run.

Power of the "new" keyword during constructor instantiation in JavaScript

Emmanuel Chikwendu Onah — Sat, 04 Jun 2022 04:38:49 +0000

What we will discuss

What is the new keyword in constructor instantiation
What happens if we don't use the new keyword during constructor instantiation
How to resolve the issue caused when we miss the new keyword
More on Es5 constructor pattern

1. What is the new keyword in constructor instantiation

The new keyword in JavaScript is used to create an instance of a constructor. In other words, a new keyword helps us to create a fresh variant of a constructor(either built-in constructors or custom defined constructors by we JavaScript developers).

Code example

const emmanuel = new Person({name:"Emmanuel"});

2. What happens if we don't use the new keyword during constructor instantiation

Before answering the second question, i will like to breakdown in simple steps what the new keyword causes JavaScript to do to its constructor behind the hood:

A dunder/dondo(__proto__) object gets created
The dunder(__proto__) object will inherit the content of the constructor prototype
And finally, the this global object of the constructor will now inherit from the dunder(__proto__) object

Code example

 function Linkedin() {
   if (!new.target) return new arguments.callee();

 /***********************************
  * When you instantiate this constructor
  * with the new keyword, the below steps
  * gets executed like a magic 🪄:
  *
  * STEP 1: a dunder object is created:
  *       const __proto__ = {}
  *
  * STEP 2: the dunder object inherits
  * from constructor prototype
  *       Object.assign(__proto__,
  * Object.create(Linkedin.prototype))
  *
  * STEP 3: the "this" object inherits from the dunder object
  *     Object.assign(this,__proto__)
  *
  * Sumary of what happens behind the hood, i will use Es6 
  * for this summary so you understand better:
  *
  *     const __proto__={
  *             ...Component.prototype
  *       } /*Hey, do you know i am the new object which 
  * can only be accessible by my Constructor instance 
  * e.g new Func().__proto__*/
  *
  *    (function transferDunderToThis(){
  *       for(const prop in __proto__){
  *            this[prop] =__proto__[prop]
  *         }
  *     })()
  ****************************************/

  //private variables in es5
  const features = ['CAN_POST', 'CAN_CHAT'];

  //public methods in es5
  Linkedin.prototype.getFeatures = function getFeatures() {
    return features;
  };
}

const linkedin = Linkedin();

console.log(linkedin.getFeatures());// [ 'CAN_POST', 'CAN_CHAT' ]

Now back to question 2, this is what happens if we don't use the "new" keyword during constructor instantiation

New __proto__ object is prevented from being created
Because __proto__ object is not created, it doesn't get binded or inherits from Component.prototype
Because __proto__ object is not created, the this object automatically has nothing related to our constructor to be returned/consumed

3. How to resolve the issue caused when we miss the `new` keyword during constructor instantiation

The solution i use personally is to detect if new was used, if not return i then instatiate the constructor using its declaration signature(that is, if its expecting argument a, i will just pass down the argument like a parameter 😄) if need be. Just like below


function Linkedin() {
  if (!new.target) return new arguments.callee();// so here is the magic
}

4. More on Es5 constructor pattern

For more on Es5 patterns, checkout my eBook

Everything you need to know about var, let and const.

Emmanuel Chikwendu Onah — Wed, 05 Jan 2022 04:31:09 +0000

Key points used in this article

Scope: Refers to a lexical environment at which variables and functions (be it expression or statement) are declared and made accessible as precedence.

Hoisting: A mechanism used by the JavaScript engine to take all variables and function declarations to the top of their respective scopes. If an engine supports JIT compilation, then it's in the JIT compilation phase that hoisting happens else during interpretation.

Things to know about var

var is global and function scoped based only, e.g:

var allows variable redeclaration(which doesn't make sense) and redefinition(which makes sense) within a singular scope, e.g:

during hoisting, if a variable is accessed before its declarations as var variable, the compiler will hoist the var variable to the top of its scope with an implicit value of undefined, e.g:

var variables declared inside block scope like if-statement, loops are not scoped meaning they can be accessed outside the block. e.g:

Things to know about let

let is global, and block(anything with { }) scoped e.g:

let doesn't allow redeclaration within a singular scope but allows redefinition, e.g:

during hoisting, if a let variable is accessed before the declaration, the compiler throws a Reference error, unlike the var where an undefined value will be implicitly assigned, e.g:

Things to know about const

const has the same features as the let above. The only difference is that its read-only and doesn't allow redefinition, but allows mutation for objects(e.g obj.propertyOrMethod =newValue ) if not frozen(Object.freeze(obj)) e.g:

In conclusion, var, let and const is not bad in my opinion it just depends on how you understand your program, but rarely do we use var this day.

Core OOP in JavaScript

Emmanuel Chikwendu Onah — Sat, 15 May 2021 11:10:02 +0000

Hello,
I just released the first phase of my JavaScript eBook titled Core OOP in JavaScript, with respect to JavaScript as a prototyped based language. Go check it out here: https://lnkd.in/eF6mVQv

NB: read the docs to find your way around!

Clarification of Typescript and JavaScript with respect to the mathematical term Set

Emmanuel Chikwendu Onah — Thu, 04 Feb 2021 05:54:21 +0000

Hello Js Community,

Today we will be going theoretical and mathematical. It's quite unfortunate of how the downgrading/explanation of JavaScript has become since the release of Typescript due to the misinterpretation of the major keyword in Typescript definition "SUPERSET".

Table of Content

1. Mathematical Set
2. Mathematical SuperSet
3. Mathematical SubSet
4. Javascript as a SubSet
5. Typescript as a SuperSet

Before I proceed, I will love to remind you that the mastermind behind computer science is mathematics and will always remain mathematics, so it's good to go mathematical when you fall into confusion in computer science.

1.Mathematical Set

In mathematics,a Set is a single collection of a distinct element,it can be string, numbers, flowers etc 😊.

In JavaScript Programming, a Set is an object of distinct keys, and mind you the distinct keys can have the same value as their sibling key.

2.Mathematical SuperSet

In mathematics,we say A is a SuperSet of B when all B elements are present in A set.

In JavaScript Programming (lets key the class aside), we say object A is a SuperObject of object B when Object A has a complete extension of object B properties either by spreading, using the Object constructor which makes the object unenumerable(like Object.property or Object.properties, or Object.create), or & symbol.

3.Mathematical SubSet

In mathematics,we say B is a SubSet of A when all B elements exist in A set but A primary element doesn't exist in B Set. On the other hand, B makes up the existence of A but B exists without A.

In JavaScript Programming, we say Object B is SubObject of Object A when all the properties of Object B exist in Object A but the primary properties of A don't exist in Object B. Meaning Object B enables the existence of Object A.

4.JavaScript as a Subset of Typescript

I will like to conclude that from the mathematical representation, JavaScript enabled the existence of Typescript which we both know and that's why everything javascript gets transpile to javascript and shipped as javascript except interface which has no representation in Javascript(the interface is a good example of SuperSet primary element not being present in Subset)

5.Typescript as a Superset of Javascript

I will like to draw a simple conclusion from the mathematical standard, that there can be no SuperSet without SubSet as such there can be no reason why Typescript exists if not for Javascript.

So in a nutshell, Typescript and Javascript is a mathematical representation of SuperSet and SubSet. So I hope from now you start looking at this two Combinatorics as turn-around for Js community and not the other way round, if you are coming from a primarily-typed-language like me i am certain you know what I am talking ☕️😀🍻

Main differences between the two common ways of passing in a functional based prop-value in React with respect to buttons.

Emmanuel Chikwendu Onah — Sun, 31 Jan 2021 05:21:09 +0000

Note: for this article, we will be using the button and its onClick property aka attribute or prop.

The main difference between passing in a function to be executed on an operation based(e.g: on button click) and invoking it to executed at render time in React is that "one waits for an action to execute it" and "one executes itself at render time" e.g:

   <button onClick ={func()}>Button</button> : this will execute at render time then the essence of click event will be abused which is not what you want. 

   <button onClick ={func}>Button</button> : this will be executed when a button click is triggered.

Note: this is a pure JavaScript thingy and has nothing to do with react.

This is a similar behavior below:

To rewrite this <button onClick ={func()}>Button</button> in the case of  legacy code:

<button onClick ={()=>func()}>Button</button> /***what is actually happening here is pure javascript logic which means:

1. A function can only run when its invoked and the anonymous  function of the button which is “()=>” will only run when the invoker(the click event is the invoker) invokes it.
2. It's only when a function is invoked that the internal operation will be executed, meaning it's only when the anonymous function runs that it will execute the "func()".**/


So thank you for stopping to read this ☕️ 👨🏿‍💻🙂

Meanwhile let me give you a little clue as my appreciated follower: So i haven't been releasing articles for a while now because i started contributing to an open-source javascript/react library during my freetimes/weekends after work. So the clue is that,you should get ready to use alot of wonderful and mighty open-sourced projects which will be coming your way soon from "elegant-ui library" a library with contributors from Sony-ericsson, check24,Twilio,myself and....🍾 🍻

DAY 3 of building the Higher Order Functions in Javascript. the find Higher Order Function.

Emmanuel Chikwendu Onah — Wed, 06 Jan 2021 23:19:45 +0000

Hello community,

today we will be implementing the find Higher Order Function.

//find function
/********************
 *@_find prototype is a javascript higher order function   that returns the first value that mets the condition i.e it takes it out of the prepended array because tnen its no more a  collection but rather just a singular value
 *@_find takes in a callback function
 *@callback: the callback takes in the finded value,index     of the finded value,the array
 *@author: Emmanuel Onah
 ********************/

Array.prototype._find = function(callback){
  for(let i = 0; i < this.length;i++){
     const expectedValue = callback(this[i],i,this);

     /*if the index is found i.e expected value exist in   the array, then return it and break        out.Note: i did not  use the break keyword because it will then be redundant in the   scope of return keyword but outside the scope of return  keyword you can use the break keyword.
      */
       if(expectedValue){
          const indexOfExpectedValue =     this.indexOf(this[i]);
   return this[indexOfExpectedValue];
   }
 }
 //if user computation is invalid, then lets just return   the function operation.
 return;
}

const names =  ["Jerry","Jude","Joe","CreativeDams","SashaBlanca"];
//test
const newValue = names._find((name,index,names)=>name.length > 3);
console.log(newValue);

Day 1: the map array prototype
Day 2: the filter array prototype
Day 4: The reduce prototype

DAY 2 of building the Higher Order Functions in javascript. the filter Higher Order Function.

Emmanuel Chikwendu Onah — Wed, 06 Jan 2021 02:23:52 +0000

Hello community,

So today we will be implementing the filter HOF.

//filter function
/******************
*@_filter prototype is an array prototype that returns a new array from the prepended array(or better still the object)  that met the condition
*@_filter prototype takes in a callback function
*@callback arguments:the iterated-value,the iterated-  index,the prepended array itself
*@author Emmanuel Onah
******************/

Array.prototype._filter = function(callback){
   const newArray = [];

   for(let i = 0; i < this.length;i++){
       const fullfilledValue = callback(this[i],i,this);
       if(fullfilledValue){
          newArray.push(this[i]);
    }
} 
 return newArray;
}
const names= ["Jerry","Joe","Jude","SashaBlanca"];
//testing 1
const newArray1 =    names._filter((name,nameIndex,arr)=>name.length===3);
console.log(newArray1);


//testing 2
const newArray2 = names._filter((name,nameIndex,arr)=>name.includes("Sa"));
console.log(newArray2);

//testing 3
const newArray3 = names._filter((name,nameIndex,arr)=>name.length <=5);
console.log(newArray3);

Day 1: the map array prototype
Day 3: the find array prototype
Day 4: The reduce prototype

DAY 1 of building the Higher Order Functions in javascript. the map Higher Order Function.

Emmanuel Chikwendu Onah — Tue, 05 Jan 2021 03:52:20 +0000

Hello community,

its been a while but i assure you this year contents gonna be lit 👨🏿‍💻🍺☕️.

So today we will be implementing the map HOF.

//map function
/**********
* @prototype _map method
* @prototype _map takes in a callback function as an   argumanet
* @callbal function of _map prototype takes in the Array   function
* @author: Emmanuel Onah
**********/
Array.prototype._map = function(callback){
    const newArray = []
    for ( let i = 0; i < this.length;i ++){
         newArray.push(this[i]);
         callback(this[i],i,this);
   }
 }
 const names = ["Jerry","Joe","Jack","sashaBlanca"];
 const newMappedArray =     names._map((eachArrayVal,index,array)=>{
 console.log(eachArrayVal,index,array)
 });
 newMappedArray;

Day 2: The filter array prototype
Day 3: The find array prototype
Day 4: The reduce prototype

How to Dynamically Validate Form Input Using RegExp and Object Evaluator | RegExp | Form Validation

Emmanuel Chikwendu Onah — Tue, 29 Sep 2020 05:03:02 +0000

Welcome to my dynamic form validation tutorial using object evaluator.

Note: this tutorial is not for RegExp but to help you understand the best use case of “[ ]” to access object properties.

Quick information: there are two possible ways to access an object which includes:

objName.objProperty
objName[objProperty]

But the question here is what is the best use case?

The answer is: use the "dot" syntax when you want to access a property directly(that is static) and use the square bracket when you want to access a property dynamically. Dynamically means the property to be accessed changes as the user changes the value. E.g:

const STAFF_NAMES ={
      staffOne:”CreativeAdams”,
      staffTwo:”CreativePerete”,
      staffThree:”CreativeJerry”
}

const getStaffName=staffKey=>{
   return STAFF_NAMES[staffKey]
}

Below example is simply one of the dynamic ways to access properties

getStaffName(“staffOne”);//CreativeAdams 
getStaffName(“staffTwo”);//CreativePerete

Link to the complete code on how to dynamically validate your form using RegExp and object evaluator syntax.
Click Me

Quick note: the form validation could be performed in many ways e.g:
By validating each of the inputs which is a pain to developers.
By Looping through the inputs element and accessing their type or name, then deciding on the validation. But I bet you, that will cause a time-complexity issue.
The best solution is provided here by me: Click Me

Quick Explanation

The most important thing inside the code is at line 13, that’s where the evaluation and validation happens.

So this RegExp[e.target.name] is what enables the dynamism. This is a javascript syntax for object/variable evaluation. Also, if you are from React community you definitely have come across dynamic input value-handling to state by simply doing this:
this.setState({…this.state,

///So this is simply same thing(evaluation).

Thanks and have a wonderful day.

Must Read Article for Every Frontend Engineer

Emmanuel Chikwendu Onah — Wed, 16 Sep 2020 16:15:59 +0000

Hello mate,

In this article, we will be looking into the most important processes a frontend developer should know apart from writing code.

Table of Content

HTTP
HTTP/HTTPS Scheme
URI
URL
SSL/TLS
CORS with respective to environment target development.

1. HTTP(Hypertext Transfer Protocol):

this is simply a set of network principles placed between a browser and a server where a data is located, which allows transport of hypermedia (hypermedia document are images, videos, graphics, audio, plain text…) documents between the two environments(browser and server). In summary, HTTP is a network protocol lying between a browser and a server for the purpose of allowing the transfer of hypermedia documents if the set-aside protocols are abided.

2. HTTP/HTTPS Scheme:

HTTP Scheme:

This is part of a URI(Uniform Resource Identifier e.g http://youmustknowjs.com/article) that decides the security state at which your resources are been transported to the server through a network connection. Any website with Http scheme is at risk because any resources from the website get transported un an unencrypted connection.

Note: Http scheme is different from the first HTTP we spoke about. This one is in-charge of applying security protocols to a website resource because of data-bridge.

In summary, the Http scheme is responsible for encrypting all your resources on a network because you need a network connection to perform server operations. And if you notice, you always get a warning when visiting a URL with Http scheme and not https scheme(we will talk about https scheme in the next session).

HTTPS Scheme:

This is the https you see prefixed on every URI/URL and what this does, is to ensure that your resource transportation is encrypted(anonymised) via a network connection.

In summary, do not provide sensible data on a website with HTTP Scheme.

General Information for Companies or website owners: Unfortunately, the recent security update by chrome broke a lot of HTTPS configuration on many websites(and this is likely to be a proxy related issue)

3. URI(Uniform Resource Identifier):

This is a string of characters full of foo bar baz 😃
(Don’t mind me I love the word foo bar baz because my mentor uses it a lot Kyle Simpson). So, a URI is simply a string of characters used to identify your resources(in other words your website or server….). For example https://i-am-a-resource-identier.com.

But what’s the ambilguousity of URI?

It has many ambiguous statements which often gets confused or interchanged with the URL(Uniform Resource Locator).

Clarification of the Ambilguousity of URI

URI: from the name identifier it tells it all. Look at this as a name used to identify someone in school. But if I may ask you, if you know the name of a person does it grantee you finding the person’s home or house? The answer is no because you will need an address and that is what a URL provides and not a URI.

4. URL: from the name It tells it all “locator”. This is like a home address for locating resources wherever its located.

In summary, a URL can serve as both URI and URL but URI can-never play both role.

5. SSL(Secure Sockets layer)/TLS(Transport Layer Security): This is a layer that lay on https scheme, and this is what enables the encryption(anonymization) of your resources transported between your browser and server. Note, TLS is just an upgraded version of SSL and this is what differentiates the Http(unsecured) scheme and Https(secured) scheme.

6. CORS(Cross-Origin Resource Sharing):

This a mechanism manually built into the server and automatically built into every browser that tells if a resource should be shared between servers. For Examples: The CORS Mechanism tells if:

There should be a resource sharing between your local server(http://localhost:8080) and a live server (e.g: a live backend server hosted on https://example.digital-ocean.com)

There should be a resource sharing from one server to another e.g: frontend is hosted on https://sample1.com and backend is hosted on https://sample2.com

There should be a resource sharing between resources of different protocol e.g: secured protocol(https://sample.com) and unsecured protocol(http://sample.com)

There should be a resource sharing between servers running on a different port

So, its the CORS mechanism that allows all of these operations and if the CORS mechanism set or designed by the backend doesn’t allow a certain connection or operation from a specific URL, then that operation will never succeed and that’s why most frontend developers have to contact the backend engineers to add some certain locators to the CORS mechanism.

In summary, if you noticed, most APIs have their initial directory similar to the frontend locator e.g a frontend locator might be https://myserver.com and the API locator will be https://myserver.com/api/. So the idea here is that, they are located on the same server but the API is located on a sub-directory called “/api” and this is similar to navigation to about or home page.

So what Next?

Hmmm from my end, I will say this is an intro to networking and networking is a little bit related to cloud computing and cloud computing is the present and the future and that’s my passion(web & cloud computing).

So stay tuned I will be releasing an article on an intro to web and cloud computing and why its the present and future of data management and storage e.g distribution systems **Horizontal scaling.

Meanwhile, you can follow me on instagram where i plan to start releasing a quick daily updates & tips on web development and Javascript + its ecosystem Follow me.

Forem: Emmanuel Chikwendu Onah

Demystification of JavaScript Code processing using V8 as the targeted engine 🔬

Phase 1: Coding Js

Phase 2: Host env setup

Phase 3: Compilation

Sample of Js code to AST

Phase 4: Generation of Executable Bytecode from the AST code

To generate an executable bytecode for a Js code

Sample of how to generate an executable bytecode for a Js code

The Js code

Install v8

Generate the bytecode

Phase 5: Interpretation and Execution

Phase 6: Hot Optimization stage

Summary

Functional React.Js Execution flow

Table of Content

1. What is ReactJs

2. ReactJs Life Cycle

Keywords to take note of:

3. ReactJs Flow:

How is the virtual DOM constructed

what causes the virtual DOM to update?

How virtual dom is updated?

Power of the "new" keyword during constructor instantiation in JavaScript

1. What is the new keyword in constructor instantiation

2. What happens if we don't use the new keyword during constructor instantiation

3. How to resolve the issue caused when we miss the new keyword during constructor instantiation

4. More on Es5 constructor pattern

Everything you need to know about var, let and const.

Key points used in this article

Things to know about var

Things to know about let

Things to know about const

Core OOP in JavaScript

Clarification of Typescript and JavaScript with respect to the mathematical term Set

1.Mathematical Set

2.Mathematical SuperSet

3.Mathematical SubSet

4.JavaScript as a Subset of Typescript

5.Typescript as a Superset of Javascript

Main differences between the two common ways of passing in a functional based prop-value in React with respect to buttons.

DAY 3 of building the Higher Order Functions in Javascript. the find Higher Order Function.

DAY 2 of building the Higher Order Functions in javascript. the filter Higher Order Function.

DAY 1 of building the Higher Order Functions in javascript. the map Higher Order Function.

How to Dynamically Validate Form Input Using RegExp and Object Evaluator | RegExp | Form Validation

Below example is simply one of the dynamic ways to access properties

Quick Explanation

Must Read Article for Every Frontend Engineer

Table of Content

1. HTTP(Hypertext Transfer Protocol):

2. HTTP/HTTPS Scheme:

HTTP Scheme:

HTTPS Scheme:

3. URI(Uniform Resource Identifier):

But what’s the ambilguousity of URI?

Clarification of the Ambilguousity of URI

4. URL: from the name It tells it all “locator”. This is like a home address for locating resources wherever its located.

6. CORS(Cross-Origin Resource Sharing):

So what Next?

3. How to resolve the issue caused when we miss the `new` keyword during constructor instantiation