Forem: Sarvesh Dubey

How we manage Backend Services at Fusion

Sarvesh Dubey — Sun, 21 Nov 2021 17:54:13 +0000

It’s been around 1.5months we shifted the entire backend services to AWS, being previously on Heroku. Coming from Heroku background it’s quite different to have your services running on AWS!!

We have 5 different services running on a single Kubernetes cluster with three nodes of t2.medium and all in autoscale mode!!

Also a big thanks to porter.run for making it as simple as Heroku to deploy stuffs!

What all services are currently running at Fusion?

Event-collector service (tracking engine) — Javascript
Query Service (query engine) — Javascript
Email service — Python
User service — Python
Payments service — Python
Chat Service (Currently running on Heroku)

What type of services are these and how much intensive?

Event-collector (this is the most intensive service bearing a lot of requests being made in a single interval of time)
Query Service (DB LookUp service)
Email Service (A SMTP server for email campaigns)

How we do use event collector?
It’s purely asynchronous, also will be adding queuing service of Redis/RabbitMQ. As we can register events in a lazy manner!

How do we use Query Service?
This is something where we are entirely dependent on the DB service/RDS which we use for PostgreSQL. We will be soon shifting to ClickHouse(Column based DB)

How do we use Email Service?
Currently we are only using queuing to scale the email service and this can be used to pretty large number of emails to be sent in a batch!

RDS Used?
Currently we are entirely using AWS RDS for PostgreSQL. But will be soon moving to ClickHouse DB!

How far we are at Fusion?

#1 product of the week on Remote.Tools
#1 product of the day on BetaList
Featured on Product Hunt

What are we trying to do?
We are bringing an open source alternative for Amplitude/Mixpanel, Hotjar/Smartlook, Mailchimp, CleverTap/WebEngage

Also we are open-source, soon to be releasing the newest patch of codes!! Stay Tuned in for more engineering blogs!

Video Analytics - Future of Analytics?

Sarvesh Dubey — Mon, 15 Nov 2021 08:13:15 +0000

Hello from Sarvesh - one of the co-founders at https://fusionhq.co, excited to share some deep insights into the world of video analytics!

What is Video Analytics?

Video Analytics can be understood something related to monitoring the user's behaviour for your product! Often it happens you have event analytics turned on giving you the product usage in an abstracted manner but doesn't provides the exact sense of product usage leading to less behavioural insights of product usage.

Let's take a scenario?

You have a product XYZ and you are tracking a certain KPI of login dropoff on the platform! And you have certain A tool tracking events for that purpose. Now let's assume two scenarios.

a. A person clicks on the Login button
b. A person doesn't clicks on the Login button

But you get to know that you have a high dropoff on that step. Now you are bound to see what was the behaviour of users dropping off at the location/instance!! But you can't simply do it with a regular event analytics tool!

Let's assume now you want to run an A/B testing for that section. But you don't have any POC of what you should do to incur a lower dropoff than before! You can do it in random but not in targetted manner leading to more time wastage.

How does Fusion helps in Video Analytics?
At Fusion we care for both company's time and also development effort and minimize the efforts with larger output and assured success!

We provide with the visual analysis of your product through small video recordings and help to see the visual journey of a particular user and then convert him by either engaging him or running an A/B testing for a certain set of users. (A/B testing in pipeline yet to be developed).

You can view product usage videos and take actions according to that with backing of event analytics to confirm you POC and run engagement in a certain targetted manner!

Hope you like the article and definitely visit https://fusionhq.co for more insights.

Building FusionHQ - All-in-one user analytics & engagement platform.

Sarvesh Dubey — Fri, 01 Oct 2021 19:06:42 +0000

Hello All, I am Sarvesh, one of the co-founders of Fusion. We have been building Fusion for the last 5 months and really excited to share about it!!

Let's answer some questions to get the vision and idea of the product clear.

What is Fusion?

Fusion is an all-in-one user behaviour analytics and engagement suite.

It's built upon a lightweight no-code mixpanel-like analytics engine but we are not another analytics platform, Fusion uses it to gather users' personal & product usage data and share it with built-in live-chat, push-notification, and email/micro survey tools.

Fusion shows how your users interact with your web-based products eg: page-views, button clicks, form submissions, etc. But apart from this, Fusion lets you run targeted engagements with a specific user or group of users in real-time over live-chat, push in-app notification & email/micro-surveys or you can set up to trigger these engagements automatically.

These targeted users could be people who have something in common(eg: users from a specific country/marketing referral) or users who performed a particular action on the website (eg: visited pricing page but did not sign up).

Fusion helps small teams in these ways:

No need to continuously monitor multiple SAAS tools and jump tabs, manage everything from one lightweight dashboard or directly from slack (or teams etc) instead of going back and forth between multiple windows.
No-code auto-capture requires zero engineering efforts for tracking. Just copy-paste one snippet on your website and that works for analytics, chat, CRM & email instead of coding up 5 different trackers on your product.
Run real-time targeted engagements with single-user/specific type of users or users who performed a particular action, ensuring less spam and more conversion. And again analyse how users reacted to those campaigns.
Reduced SAAS bills as Fusion is one platform so you pay one base subscription instead of multiple.
Teams can avoid crappy built-in plugins for connecting multiple SAAS tools or using expensive CDPs like Segment.com . Seamless user data flows between analytics, CRM, marketing stack as they are in one platform.

Where can you find Fusion?

Fusion is available here or the github is available here

Where are we on building Fusion?

We have completed the Analytics Engine and currently chat service is being developed and other lots of features coming soon!!

Interested in using the product? Connect here. Show us your love here

So let's connect to give some more info on the product!!

VueJS + Tailwind Basic Modal in 5 mins

Sarvesh Dubey — Thu, 07 Jan 2021 03:27:00 +0000

Modals can be used for various purposes right from showing instructions with a pop-up or getting some form inputs. I will be building a modal that you can use for any sort of purpose and using any type of modal from instructions to form input collection.

We will use VueJS and TailwindCSS for this purpose. Also if you suck at creating styles just go and grab a modal style from here.

I have grabbed this as I want to make a pop-up instruction as soon as the DOM is ready. Let's grab the code!

<style>
  dialog[open] {
  animation: appear .15s cubic-bezier(0, 1.8, 1, 1.8);
}

  dialog::backdrop {
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(54, 54, 54, 0.5));
    backdrop-filter: blur(3px);
  }


@keyframes appear {
  from {
    opacity: 0;
    transform: translateX(-3rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
} 
</style>

<dialog id="myModal" class="h-auto w-11/12 md:w-1/2 p-5  bg-white rounded-md ">

   <div class="flex flex-col w-full h-auto ">
        <!-- Header -->
        <div class="flex w-full h-auto justify-center items-center">
          <div class="flex w-10/12 h-auto py-3 justify-center items-center text-2xl font-bold">
                Modal Header
          </div>
          <div onclick="document.getElementById('myModal').close();" class="flex w-1/12 h-auto justify-center cursor-pointer">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
          </div>
          <!--Header End-->
        </div>
          <!-- Modal Content-->
           <div class="flex w-full h-auto py-10 px-2 justify-center items-center bg-gray-200 rounded text-center text-gray-500">
             This is a text inside the modal. You can add your content here.
          </div>
          <!-- End of Modal Content-->
        </div>
</dialog>

We will not use the button as we don't have to use the button to get the modal content on to the DOM. We will use the VueJS Lifecycle method to do so!

First, let's go through the above code, we are using animation open once it's open we have to set the background and we use backdrop and background to see the blur and background color.

We also use keyframes to show a certain transition in the X direction as when the modal appears on the DOM it has a certain transition of 3rem on the screen.

Now we will use VueJS to show the modal as soon as all the elements have been rendered on the DOM.

var app = new Vue({
    el: '#app',
    mounted() {
        this.openModal();
    },
    methods : {
        openModal: function() {
            document.getElementById('myModal').showModal()
        }
    }
})

You can find the above code on my github. The code is basically using the mounted lifecycle method.

What is mounted? : Basically executes the code once the elements are rendered on the DOM

Other Lifecycle methods : updated, mounted, destroyed, activated. You can see all the API's here

Do share the article if you find it useful! 😍

Interview JS Part 5 - Map, Reduce, Filter

Sarvesh Dubey — Fri, 01 Jan 2021 07:59:02 +0000

Sorry, this article came to the blog a lot later than expected. We shall cover a small topic in this part regarding most use functions or let's most used and useful thing while writing JS and particularly React.

What is a Map?

Map according to the definition should be mapping some value to something. Similarly here too we have a function mapping to each individual element in the array. Map in JavaScript binds to each value and the value can be considered as the returned value of that function and thus the Map returns the array of function bind values.

If the above seems something not very obvious to you let's go through an example:-

array.map(function(elem, index, array) {
      ...
}, thisArg);

Let's do it by halving each element of the array in JavaScript

const numbers = [4, 8, 12, 14];
const halves = numbers.map(x => x / 2);
// halves = [2, 4, 6, 7]

What is Filter?

Filter in real life means to remove something that does not follow a particular function. Similarly, in JS we have a filter that is used to remove the none required elements in the array.

Filter returns an array of filtered elements according to the given callback function. Similar to Map it's basically putting each element on test for a condition.

array.filter(function(elem, index, array) {
      ...
}, thisArg);

Let's write a code that removes the element below 5:-

const num= [1, 2, 5, 10, 15];

const nums= num.filter(newNum => newNum > 5);
// nums is [10,15]

What is Reduce?

This is something special! Generally, people use it to just find the sum of the array but this provides much more than this.

By meaning, Reduce is used to reduce something to something else.
The most famous example is obvious to find the sum of the array.

array.reduce(function(prevVal, elem, index, array) {
      ...
}, initialValue);

const tot = [1, 2, 3, 4].reduce((sum, value) => sum + value, 1);
// 10

So now what else can be done apart from this, apart from multiplying too!!

We have something called compose which uses reduce:-

const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);

const add = n => n + x;
const mult = n => n * y;
const addThenmult = compose(
  mult,
  add
);
addThenmult(2); // 6
// ((2 + x = z) * y)

Chaining Promises ( Got to know from Source)

let itemIDs = [1, 2, 3, 4, 5]; 
itemIDs.reduce((promise, itemID) => {
  return promise.then(_ => api.deleteItem(itemID));
}, Promise.resolve());

The above code resolves to:-

Promise.resolve()
.then(_ => api.deleteItem(1))
.then(_ => api.deleteItem(2))
.then(_ => api.deleteItem(3))
.then(_ => api.deleteItem(4))
.then(_ => api.deleteItem(5));

Making promises in a chain is really a unique way to use reduce.

Stay Tuned for other articles on InterviewJS.

Interview OS (Part 2A) - Important Terms in OS

Sarvesh Dubey — Thu, 24 Dec 2020 07:17:34 +0000

Disclaimer - Thanks to Love Babbar for this list of important terms that are required to be known in OS.

Compiler
Loader
Assembler
Interpreter
System Calls
API (Application Programming Interface)
Kernel
Shell
JVM
Booting

In this article, we will go through the first 4 parts of the list and then will complete the rest in the next article.

Compiler-
A compiler is a program that translates a source program written in some high-level programming language (such as Java) into machine code for some computer architecture (such as the Intel Pentium architecture). The generated machine code can be later executed many times against different data each time.

Source

Interpreter -
An interpreter reads an executable source program written in a high-level programming language as well as data for this program, and it runs the program against the data to produce some results. One example is the Unix shell interpreter, which runs operating system commands interactively.

Source

To clear some doubts the below context is taken from:- "Compilers, Principles, Techniques, & Tools", Aho, Lam, Sethi, Ullman, (Pearson International Edition, 2007), pages 1, 2

The two basic mechanisms for processing a program are compilation and interpretation.

Compilation takes as input a source program in a given language and outputs a target program in a target language.

source program --> | compiler | --> target program
If the target language is machine code, it can be executed directly on some processor:

input --> | target program | --> output
A compilation involves scanning and translating the entire input program (or module) and does not involve executing it.

Interpretation takes as input the source program and its input and produces the source program's output

source program, input --> | interpreter | --> output
Interpretation usually involves processing (analyzing and executing) the program one statement at a time.

In practice, many language processors use a mix of the two approaches. E.g., Java programs are first translated (compiled) into an intermediate program (byte code):

source program --> | translator | --> intermediate program
the output of this step is then executed (interpreted) by a virtual machine:

intermediate program + input --> | virtual machine | --> output
To complicate things even further, the JVM can perform just-in-time compilation at runtime to convert byte code into another format, which is then executed.

Also, even when you compile to machine language, there is an interpreter running your binary file which is implemented by the underlying processor. Therefore, even in this case, you are using a hybrid of compilation + interpretation.

So, real systems use a mix of the two so it is difficult to say whether a given language processor is a compiler or an interpreter, because it will probably use both mechanisms at different stages of its processing. In this case, it would probably more appropriate to use another, more neutral term.

Loader-
A loader is a major component of an operating system that ensures all necessary programs and libraries are loaded, which is essential during the startup phase of running a program. It places the libraries and programs into the main memory in order to prepare them for execution. Loading involves reading the contents of the executable file that contains the instructions of the program and then doing other preparatory tasks that are required in order to prepare the executable for running, all of which takes anywhere from a few seconds to minutes depending on the size of the program that needs to run.

Source

Not all code and libraries are loaded at program startup, only the ones required for actually running the program. Other libraries are loaded as the program runs, or only as required. This is especially true for applications such as games that only need assets loaded for the current level or location that the player is in.

Responsibilities of Loader:-

Validate the program for memory requirements, permissions, etc.
Copy necessary files, such as the program image or required libraries, from the disk into the memory
Copy required command-line arguments into the stack
Link the starting point of the program and link any other required library
Initialize the registers
Jump to the program starting point in memory

Assembler-
Source

An assembler is a program that converts assembly language source code into an executable program.

This is comparable to a high-level computer language compiler. A compiler converts code into a program.

However, assembly language is different because each line of code corresponds to a single low-level CPU OpCode.

Interview OS (Part 1)

Sarvesh Dubey — Sun, 20 Dec 2020 13:35:02 +0000

In this article, we will talk about the types of OS and how they can be asked in the interviews.

The types of OS that we will discuss are:-

Batched OS
Time Sharing OS
Distributed OS
Network OS
Real-Time OS

Batched OS

As you can see in the above image first the jobs with similar functions or similar types are segregated and put forward in queue and then the Operating system from time to time releases them to the batch system.
So the question arises who will segregate the similar function jobs and how is it sent to the batches.
- Firstly the operator has to segregate the jobs with similar functionality
- Secondly the batch system steps in the form of a Queue and similar jobs are sent in the form of a queue.
What is the advantage of such an Operating System? - The time required for the completion of the whole process is unknown generally but here, precisely for each queue it is known which can ultimately be taken as an advantage, Also if the job is very complex and will require a large amount of time for completion, then such process can be even completed in the absence of humans. Also, the Idle time of the OS is less. This system also gives the freedom of multiple users using the OS.
What are the disadvantages? - The batch system is really hard to debug. This system doesn't allow direct interaction between the user and the OS. Suppose an error occurs in one of the jobs of a batch. Then, all the remaining jobs get affected i.e; they have to wait until the error is resolved.

Time Sharing OS

As you can see in the above image that there are multiple users or what you can say is multiple jobs and thus called multitasking OS, is used to minimize time response and in turn making sure the maximizing usage of the processor ( which is the objective of multi-programming systems)
In this OS, every user is given time of the CPU and equal time is allocated which is called quantum and once this time is over the OS switches to the next job.
What is the advantage of such an OS?- They minimize the response time i.e; greater the response time. Since it's a time-sharing OS, the system is idle for very little time and each task gets equal time for execution.
What is the disadvantage of such an OS?- Maintaining Synchronization is a challenge and also security must be maintained

Distributed OS

As you can see in the above image that different systems interact through a communication network like LAN or WAN to share the same resource and if needed provide the resource to the user.
** One important point to note about distributed systems is that they are loosely-coupled i.e; hardware and software may communicate with each other but they need not depend upon each other.**
The connected systems to the central system need not be of the same size and capacity.
The major advantage of such OS is that to access a file that is not actually present in the processor can be very easy.
What are the advantages of such OS?- Resources are being shared, computation is highly fast and durable, Reduced load on the host computer, Resources are easily accessible, System is scalable and a promising and better service to the user and failure of one of the processors don't affect the system.
What are the disadvantages?- Very complex structure and network security. Failure of the main host can lead to the failure of the system.

Network OS

As you can see in the above image there needs to be a centralized system for employing such type of OS.
One more important aspect of Network Operating Systems is that all the users are well aware of the underlying configuration, of all other users within the network, their individual connections, etc. and that’s why these computers are popularly known as tightly coupled systems.
What are the advantages of such OS?- The entire central system is very much stabilized, The entire configuration can be done at the central system. New technology and hardware integration are very easy.
What are the disadvantages?- Very costly system. Need for central location even for the smallest of the computation, Regular maintenance is required.

Real Time OS

There are two types of RTOS:

Hard RTOS:- Time constrained and strict and no delay acceptable
Soft RTOS:- These are much less strict than Hard RTOS

What are the advantages of such OS?- Maximum usage of the system, task shifting in case of some issues with current running task or thread, more focus on running the current thread rather than the queue, good memory allocation system
What are the disadvantages? - Very complex system, limited task execution, heavily embedded systems needed, having thread priority rather than switching tasks.

In the next, we will be going through some important OS terms needed to be known, till then subscribe to the newsletter so that you don't miss any updates!

Creating a Virtual Environment in Python (Ubuntu)

Sarvesh Dubey — Wed, 16 Dec 2020 03:14:14 +0000

Creating a virtual environment is really very easy in Ubuntu

Step 1:-

First, we have to install the virtual environment using the following command:-

sudo apt install python3-venv

Step 2:-

From the previous step, you have installed the virtual environment on the system, now you have to create a project using it:-

python3 -m venv new-project

Step 3:-

Now for activating the above virtual environment you just have to use:-

source new-project/bin/activate

You will see the following output:-

$ source new-project/bin/activate
(my-project-env) $

Now just install whatever dependencies you want to install like any other library and work on the project.

Happy Coding!

SASS (Syntactically Awesome StyleSheets)- Basics (Part 2)

Sarvesh Dubey — Sat, 12 Dec 2020 10:38:17 +0000

In the previous article, we covered some basics of SASS and defined the learning outcomes from the articles. We will cover the rest in this article.

What we will learn:-

for loop
each
while
Splitting styles into different files
Extend properties of other class

We will finish off with all the basics in this article.

For Loop

We can use for loop in Sass which is not possible in CSS, Let's say you have a particular naming convention of a class and it can be easily written using for loop, Sass gives us the power to write for loops. Let's see how we can do it:

<style type='text/scss'>
    @for $i from 1 to 6 {
        .text-#{$i} {font-size: 15 * $i};
    }

</style>

<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>

As you can see the last number in for loop is not taken into consideration. So be careful of using the loop extremes and parameters.

While Loop

As in the previous example, we had the loop running from 1 to 6 and we had a common class naming convention which helped us apply the looping logic. Similarly we can do it here as well i.e. we can set the condition for the while loop. Let's see how we do it:

<style type='text/scss'>
  $i : 1
  @while $i < 6 {
      .text-#{$i} {font-size: 15 * $i};
      $i : $i + 1;
  }
</style>

<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>

Each loop:

Each loop works according to the values in the list that we want to iterate through. Let's say an example:

<style type="text/scss">
   @each $color in blue, black, red {
      .#{$color}-bg {color: $color;}
    }
</style>

<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>

Here you can see we have three div which can individually be colored accordingly using for loop.

Splitting Styles in different files

This is fairly easy to do as this provides a structured format of the code and how we can split the codes accordingly.

Let's say you have component.scss file and you want to import it, you can simply use the @import directive.

@import component

That's it and you are done importing the file.

Extending properties of other class

Let's say you want to have some properties to that of some other class, in CSS we had write that whole again but in Sass we can use the @extend directive and directly use all the properties in other class or what we can say is inherit the properties of the class. Let's see how we can do this.

.p{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}

.bp{
  @extend .p;
  width: 150px;
  font-size: 2em;
}

As you can see that we have inherited the properties of the upper class to the next class that we have written.

This is all about the basics of Sass, I will be going through much deeper concepts of Sass later. Do stay tuned 😊

SASS (Syntactically Awesome StyleSheets)- Basics (Part 1)

Sarvesh Dubey — Thu, 10 Dec 2020 05:53:41 +0000

What we will learn:-

Store Data in variables
Nesting CSS with Sass
Reusable CSS using Mixins
if, else
for loop
each
while
Splitting styles into different files
Extend properties of other class

We will keep the articles short so that we can make this a short series of articles. For this article, we will be going through the first 4 parts of the above learning objectives.

Storing Data in variables:-

In CSS if we want to declare some style for a particular class we had to write all the particular styles for it though we might have the necessity to have some of the style properties the same for the next class. This gives rise to problems when the style needs to be changed in the future.

CSS doesn't support variables for the above-mentioned problems. In Sass, we can mention a variable that can be used and assigned like any normal programming language.

So how we do so? Let's dive into some code -

$fonts: Arial, sans-serif;
$headings-color: green;

//To use variables:
h1 {
  font-family: $fonts;
  color: $headings-color;
}

We can see how the variable is being used in place rather than using the actual property value.

Nesting CSS with Sass

For any normal CSS, we don't have the unique way to nest CSS into other CSS, rather we follow writing each class and then defining the properties for each of them. For example:-

nav {
  background-color: red;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}

For the above code, we have all the classes like ul and li nested in but the above code is the normal CSS code and doesn't follow the nesting architecture. If we were to write this code in Sass form we will have:-

nav {
  background-color: red;

  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

Reusable CSS using Mixins:-

This is similar to what we can say as defining the function and using it again and again with different parameters. This gives a lot of flexibility and control over the use of different styles and can reuse again and again. Let's see how we can do this.

<style>
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

// To reuse it again
div {
  @include border-radius(15px);
}
</style>

Using if-else

This works exactly similar to what we normally see in the if-else statements. Let's see how we can implement it in Sass

@mixin text($v) {
  @if $v == danger {
    color: blue;
  }
  @else if $v == alert {
    color: red;
  }
  @else if $v == success {
    color: yellow;
  }
  @else {
    color: black;
  }
}

In here we use mixins and we can just do normal if-else to make conditions on the styling we want to achieve.

Stay Tuned for the next article we will go through the next 4 sections that we haven't yet covered 😊😊

Interview JS Part 4 - DOM and Layout Trees

Sarvesh Dubey — Mon, 30 Nov 2020 08:20:51 +0000

What is the DOM?

At the most basic level, a website consists of an HTML document. The browser that you use to view the website is a program that interprets HTML and CSS and renders the style, content, and structure into the page that you see.

In addition to parsing the style and structure of the HTML and CSS, the browser creates a representation of the document known as the Document Object Model. This model allows JavaScript to access the text content and elements of the website document as objects.

Let's see an example:-

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
  </body>

</html>

The above is the simple HTML code, and also you might be knowing that almost all the webpages have their structure defined in HTML. Now just inspect the element on this page and see the elements tab on the right-hand side of the browser. Whenever you hover over some line you can see some effect on the webpage depicting the element you are hovering at.

You might also see the arrows in the HTML page on the elements tab. The HTML follows the parent-child relationship between the elements.

The Document Object

A document object is a built-in object that has many properties and methods that we can use to access and modify websites.

These include:-

getElementById()
getElementsByClassName()
getElementsByTagName()
querySelector()
querySelectorAll()
Events
clicks
select

Some inbuild methods to traverse the DOM include:-

.firstChild
.nodeName
.nodeValue
.nodeType

The Elements include:-

.parentNode
.firstElementChild
.lastElementChild

In the next article, I will brief each and every DOM method from elements to manipulating the DOM.

In the above example where we wrote the HTML code. Just go to the console and type in

document.body.style.backgroundColor = 'fuchsia';

And you can see the background color to be fuchsia. This is one of the examples of DOM manipulations

Stay Tuned for the next article

Interview JS Part 3 - Message Queue and Event Loop (Inspired by Philip Roberts)

Sarvesh Dubey — Sat, 28 Nov 2020 05:47:25 +0000

Disclaimer: This article is a mixture of two articles and important points are extracted from both and some new are also added to make it complete

In this article, we will cover the following stuff:

What the heck is the event loop?
How do JS works? V8 engine, JS is single-threaded then how is a callback in JS
What is JS? - A single-threaded non-blocking asynchronous concurrent language
JS - It has a call stack, an event loop, a callback queue, and some other APIs and stuff.

Architecture of Chrome

Let me go through different parts of the chrome (image above)

Heap: Unstructured region of memory
Stack: Represents the single-threaded call stack.
Browser of Web API: They are not part of the JavaScript language itself, rather they are built on top of the core JavaScript language, providing you with extra superpowers to use in your JavaScript code

Go through this below example carefully:-

function main(){
  console.log('A');
  setTimeout(
    function display(){ console.log('B'); }
  ,0);
    console.log('C');
}
main();
//  Output
//  A
//  C
//  B

The call to the main function is first pushed into the stack (as a frame). Then the browser pushes the first statement in the main function into the stack which is console.log(‘A’). This statement is executed and upon completion, that frame is popped out. Alphabet A is displayed in the console.
The next statement (setTimeout() with callback exec() and 0ms wait time) is pushed into the call stack and execution starts. setTimeout function uses a Browser API to delay a callback to the provided function. The frame (with setTimeout) is then popped out once the handover to the browser is complete (for the timer).
console.log(‘C’) is pushed to the stack while the timer runs in the browser for the callback to the exec() function. In this particular case, as the delay provided was 0ms, the callback will be added to the message queue as soon as the browser receives it (ideally).
After the execution of the last statement in the main function, the main() frame is popped out of the call stack, thereby making it empty. For the browser to push any message from the queue to the call stack, the call stack has to be empty first. That is why even though the delay provided in the setTimeout() was 0 seconds, the callback to exec() has to wait till the execution of all the frames in the call stack is complete.
Now the callback exec() is pushed into the call stack and executed. The alphabet C is displayed on the console. This is the event loop of javascript.

Another Example:-

function init() {
  var link = document.getElementById("foo");

  link.addEventListener("click", function changeColor() {
    this.style.color = "burlywood";
  });
}

init();

%[https://www.youtube.com/watch?v=8aGhZQkoFbQ]

Thanks for reading follow the Interview JS series for more core concepts of JavaScript.