DEV Community: Abhishek Raj

Running while(true) in JS

Abhishek Raj — Sat, 18 Dec 2021 11:37:53 +0000

You must be wondering this guy is MAD, we can't run while/for loop synchronously client side in javascript, it will block the main thread and will FREEZE the page.

Well, it is possible to run it but not a good way to do it and might introduce some bugs in your program.

Web Worker

Web Worker runs in a single thread isolated from the main thread, so you can run any synchronous operation without blocking the thread.

You can run the loop in Web Worker and send the send the data from Web Worker to Main Thread using postMessage method. It will run as good as main thread.

You can try it in the below code snippet

Note: Running synchronous loop is not advised in browser, unless there is a such requirement.

Connect Me @ Linkedin, Github, Twitter, Youtube 😇

Sending Web Analytics the better way!!

Abhishek Raj — Thu, 16 Dec 2021 10:23:17 +0000

Most of the big companies have there own analytics rather than using third party services like Google Analytics.

I have seen many of the sites using fetch API or XHRHttpReq for sending analytics event.

What's the issue in using that fetch API/XHR for sending analytics event?

Even if its async, we are using our main thread to send the events.
When the send analytics request is queued and user closes the page, your analytics is lost.
Poor UX due to slow HTTP Requests, if we put analytics send req on document unload event

What should we do?

Almost all browser's (except IE) gives an API for this use case.

Beacon API

The Beacon API is used to send an asynchronous and non-blocking request to a web server. The request does not expect a response. Unlike requests made using XMLHttpRequest or the Fetch API, the browser guarantees to initiate beacon requests before the page is unloaded and to run them to completion. - MDN

Why is Beacon API good for sending analytics event?

It doesn't block your thread.
Browser queues it and takes care to sending the request.
Even after queuing the page is closed, the request will be sent.
It doesn't takes response from server, sends and forgets.
Supported by most of the browsers.

Browser Compatability

Caveats

It only sends POST request.
We can't check if request is received by server.

Connect Me @ Linkedin, Github, Twitter 😃

What I learned in 3 years of Web Dev?

Abhishek Raj — Sat, 21 Aug 2021 14:09:31 +0000

1. DSA is more important than learning any new framework.

2. Learn Javascript before learning any framework.

3. Learn how JS Engine works.

4. Always follow coding principles.

5. Make as many projects as you can.

Connect Me @ Linkedin, Github, Twitter 😇

JS Polyfills asked in Interviews

Abhishek Raj — Sat, 14 Aug 2021 07:44:20 +0000

Introduction

As Javascript community keeps adding new methods in Javascript, so all browsers doesn't support new JS methods.

To make your JS code run on every browser, you need to add it on your own or you can use Babel, CoreJS. Sometimes companies ask in interview for Polyfills to know your understanding.

In this article, I will list out some Polyfills asked by companies.

1. Array Flat

This method is used to flat a nested array.

In the below example, we have used recursion to solve this problem. We have created 2 cases:

A base case: If depth is reached then push arr in output and return it.
A recursion case: Loop over array and check if its an Array or not. If its an array flat it, else push the number in output.

2. Array Filter

This is a Higher Order Function which takes another function and filters the array on the basis of the function.

In the below example, we have created a higher order function, which takes another function and calls on each element of the array. If it returns true then that element is inserted into result.

3. Array Reduce

This is a Higher Order Function which takes another function and reduces the array to single value/object and returns it.

In the below example, we have created a higher order function, which takes another function and calls on each element of the array. It mutates the result returned by the callback function.

4. Function Bind

The bind method is used to pass an execution context to the function.

In the below example, the custom Bind function takes the context and uses apply method to bind the function with the given context.

For more Awesome polyfills asked in interviews, check out JSVault

Connect Me @ Linkedin, Github, Twitter, Youtube 😇

Note: I have written all the methods as pure functions, as I have only wanted to show the code. We can also use Prototypal Inheritance.

All the URLs in this post are powered by Sotly.co

Learn these awesome Javascript concepts.

Abhishek Raj — Mon, 02 Aug 2021 18:54:51 +0000

Introduction

You must have seeing people abusing and hating JS, because they compare Javascript with other languages like Java, C++, Go but Javascript is entirely different.

In this post I will be showing some cool things in javascript.

Generator Function ⚡

These are a type of function which can pause and resume its execution.

In simple words, suppose you call this function and you want to pause it execution at a certain state/condition and after certain condition you want to again resume its execution, you can do using generator function.

In the above example, you can see generator function are created using Asterisk(*) after writing function and when you want to pause its execution use yield and to stop use return, you can even return values using yield.

If you want to resume the execution, execute .run() method of the generator object.

Usages

Iterator
Generating infinite number efficiently

Async Await vs Generator Function ⏳

Generator Functions and Async Functions can be used to write asynchronous code which can wait.
Generator function always yields an object like {value: any, done: bool} but Async function returns a promise to resolve or can throw an error if doesn't resolves.
Generator function runs till yield and pauses but Async function runs till await and waits there.

Closure 🤏

Closure is an environment, created inside a function which stores some variables and can be used by another function inside that scope.

In the above example, you can see how the parentName is bind with child function.

Usages

Hiding data inside function.
Maintaining state.

Currying 🍛

Suppose of you have a function with N arguments, converting it into N function calls with only 1 arguments, is called Currying in Javascript.

Famous Question: Create a currying function to give sum of N numbers e.g. function(1)(2)(3).....(N) = 1+2+3+...+N

Usage

Used to create Higher Order Function
Memoization
Error handling
Initializing functions

Higher Order Functions (HOF) 💪

HOF accepts functions as argument and/or returns function with closure.

E.g. Array methods like map, reduce, filter.....etc.

Usage

Binding functions with state

Call, Apply & Bind 📞

Call, Apply and Bind are JS methods using to bind object with this.

In the above example, I have shown how you can use call, apply and bind.

Usage

DRY: Do Not Repeat Code
Debouncing

Connect Me @ Linkedin, Github, Twitter, Youtube 😇

Thanks to Akshay Saini for his amazing series on JS.

How to join DEV as a Dev?🤠

Abhishek Raj — Sat, 31 Jul 2021 18:55:30 +0000

Just wanted to know the procedure.
You could also help. @ben && @peter.

Mastering Drag N Drop API in HTML & JS 😎

Abhishek Raj — Sun, 25 Jul 2021 17:19:50 +0000

Introduction

Few days back, I was working on a side project and I was required to create a Drag N Drop feature like Scratch, then I read a lot about this Drag n Drop feature.

Getting Started

In this post, I will be showing 3 Drag n Drop use case, so without wasting the time, let's start.

Drag n Drop Simple

Here, I have created 2 container div, where we can move our child divs. While dragging we will store id of the child in DataTransfer Object and after dropping we will fetch the id from the DataTansfer Object then it will the node will be appended in the dropped container.

Drag, Drop, Copy n Delete

Similarly, I have created 2 container divs, where we can move the child, but when we drop the child, it is copy-pasted instead of cut-paste.
When it is redropped in the previous container, it is deleted.

Drag, Drop n Swap

Here, we have 1 container and we can swap (left to right) nodes.

Connect Me @ Linkedin Github Twitter Youtube 😇

Thanks to Web.dev & W3Schools

Centering a DIV like a PRO - #1

Abhishek Raj — Mon, 19 Jul 2021 13:57:10 +0000

In this series of article, I will show some best ways to center a div in HTML.

In the below codepen, I have used inset to set top, right, bottom, left to 0, then setting the margin to auto.

Connect Me @ Linkedin Github Twitter Youtube 😇

Thanks @Kevin Powell for this trick.

How I created in-memory DOM?

Abhishek Raj — Thu, 15 Jul 2021 15:51:31 +0000

Img Credits

Introduction

Few weeks back, I had a task to create an online code editor for HTML, CSS, JS and show the output on the same screen.

Why I needed in-memory DOM?

I stored different codes in different variables and for showing the output on same screen, I had to create a virtual DOM and merge all the codes (HTML + CSS + JS) together and inject it into an iframe.

Code

The above code takes HTML, CSS and Javascript as string and then combines them together in HTML. It returns the merged code as a string then it is injected into an iframe.

Demo

You can see the working of the above code in this app.
Web Code Editor

Edit 1.
Changed the title from VDOM to in-memory DOM, as I mistook it for a VDOM.
Thanks @lukeshiru for the suggestion.

Img Credits

You need to build a collaborative text editor RIGHT NOW!!

Abhishek Raj — Thu, 17 Jun 2021 08:27:48 +0000

TL;DR

By building a collaborative text editor you will get to learn

Send data from server to client - Polling/Sockets
Algo/DS to use for efficient data transfer - Text Compare
Update editor in such way, user's cursor doesn't move. There are way too many things it will teach you, read the below post to learn more or Try out the live project here -> Live URL

Intro

Recently, I started working on this cool project, a Web Based Code Editor. So, in this post I will talk about how I implemented this project and what will be the further features I will be adding. 😃

Preface

As we all know there are thousands of AWESOMEEE code editors out there like repl.it, codepen, codesandbox, etc. So most you must be wondering why I decided to write my own code editors.

What I think is, if you build a system then you will get to know how that thing really works, so my curiosity made me do it. 🙂

Features

Lets talk about the features this web app currently has,

Separate tabs for HTML/CSS/JS for better coding style.
Code Output Display, shows the output by merging all codes and creating a Virtual DOM.
Fully Mobile Responsive.
Download merged code as text file.
Night Mode
Code auto save in browser
Code Sharing Link (Planned)
Code Collaboration (Planned)

Tech Used

In this project, I have used,

React - For UI
Material UI - Design/Animation
Redux - For State Management
Redux Saga - For Side Effects
Redux Persist - For Auto Save
Socket IO (Planned) - For socket connection
JsDiff - For Calculating Difference

Contribution

This project is open for contributions, even contribution to docs, readme, managing people will help others learn and we can grow together.
This is the repo url -> Github

Try out the live project here -> Live URL

Connect Me @ Linkedin Github Twitter Youtube
Instagram 😇

Ping Me Anytime with doubts related to Full Stack / Pen Testing

DEV Community: Abhishek Raj

Running while(true) in JS

Web Worker

Sending Web Analytics the better way!!

What's the issue in using that fetch API/XHR for sending analytics event?

What should we do?

Beacon API

Why is Beacon API good for sending analytics event?

Caveats

What I learned in 3 years of Web Dev?

1. DSA is more important than learning any new framework.

2. Learn Javascript before learning any framework.

3. Learn how JS Engine works.

4. Always follow coding principles.

5. Make as many projects as you can.

JS Polyfills asked in Interviews

Introduction

1. Array Flat

2. Array Filter

3. Array Reduce

4. Function Bind

For more Awesome polyfills asked in interviews, check out JSVault

Top Interview Questions for Backend Developers(Node)

Introduction

Q1. Create a sleep function using Async/Await.

Q2. How Javascript Engine works?

Q3. Difference between Single Threaded & Asynchronous.

Q4. How to debug a slow API?

The Console.log approach

Profiler Approach

What is EventEmitter in NodeJS?

Top Interview Questions for Frontend Developers(React)

Abhishek Raj ・ Jul 30 '21

Learn these awesome Javascript concepts.

Abhishek Raj ・ Aug 2 '21

Learn these awesome Javascript concepts.

Introduction

Generator Function ⚡

Usages

Async Await vs Generator Function ⏳

Closure 🤏

Usages

Currying 🍛

Usage

Higher Order Functions (HOF) 💪

Usage

Call, Apply & Bind 📞

Usage

How to join DEV as a Dev?🤠

Top Interview Questions for Frontend Developers(React)

Q1. How would you optimise a slow React website?

Q2. How would you design a loosely coupled React App?

Q3. When to use Redux Thunk & Redux Saga?

Q4. Two Way Data Binding in React?

Q5. Synthetic Events in React

Mastering Drag N Drop API in HTML & JS 😎

Introduction

Getting Started

Drag n Drop Simple

Drag, Drop, Copy n Delete

Drag, Drop n Swap

Centering a DIV like a PRO - #1

How I created in-memory DOM?

Introduction

Why I needed in-memory DOM?

Code

Demo

Img Credits

You need to build a collaborative text editor RIGHT NOW!!

TL;DR

Intro

Preface

Features

Tech Used

Contribution