Forem: Yash Soni

JavaScript - debounce vs throttle ⏱

Yash Soni — Fri, 02 Oct 2020 04:27:31 +0000

There's been a lot of confusion around what is debouncing and throttling, where to use it, and how it exactly works.

We are going to demystify all of the above in the simplest possible way through this article.

It is important to know both of these, it will make our lives easier in certain scenarios. (Bonus: This is a common interview question too) 🥳

Simply put,
Throttling is a way to limit the number of times a function can be called. Perform a function, then drop all the function calls until a certain period of time,

Debouncing is a way to delay the execution of a function to a later period until there is some ongoing action.

These both might seem confusing, overlapping, almost the same thing - but they are not! We will sort this out.

There's no better way to learn something than learning by example. 👩‍💻👨‍💻

Throttling:

Imagine there's a button "Fetch Quote". When you click it, it triggers an asynchronous API call to fetch the quote and render it on the screen.

Now, what will happen if some nutjob keeps clicking it furiously - like a million clicks till his/her fingers give up. 😑

In that case, without any controlling mechanism, it will trigger a million API calls (intentionally over-exaggerated!)
This would cause a performance drop.

You can avoid this if you had some kind of click rate-limiter in place.

Throttle swaggers-in 😎

How does it work?

Here's the CodePen for the "Fetch Quote" example. Play around this a bit.

Debouncing:

Remember how the search-suggestions work? Like, when you start typing into the Google search bar it keeps on updating its suggestion list.

These suggestions are actually brought from an API call. So, the question is, should you make a fresh API call every time the text changes in the input box?

No, right? That would be super-bad for Google. Imagine you type "How to write better JavaScript" - 30 characters itself, leading to 30 API calls. Now imagine, millions and billions of Googlers around the world typing their queries every second - BAMMMMM!!! 💥

So how do you handle this?

Before we answer that, do we really need to make an API call if the user is still typing? No. We should wait till the user has halted typing for at least some amount of time before we make an API call.

This can be achieved using, yeah you guessed it right, Debouncing.

As we stated earlier, debouncing is a way to delay the execution of a function to a later period until there is some ongoing action.

The following CodePen illustrates exactly the same.

Bonus part: Understanding the nitty-gritty 💸

Let's see the function definitions of debounce and throttle in detail.

Throttle

const throttle = (func, delay) => { 
  let toThrottle = false;
  return function() { 
    if(!toThrottle) {
      toThrottle = true;
      func.apply(this,arguments)
      setTimeout(() => {
        toThrottle = false
      }, delay);
    }
  }; 
};

Debounce

const debounce = (func, delay) => { 
  let timerId; 
  return function() { 
    clearTimeout(timerId) 
    timerId = setTimeout(() => func.apply(this,arguments), delay)
  }; 
};

From the definition, we can clearly see that

Throttle allows execution immediately if the toThrottle flag is false. After the execution, this function will not be called until the delay period has lapsed.
Debounce postpones execution until there is no input change for the delay period of time. If a change occurs, cancel the previously scheduled execution and create a new schedule.

P.S. This article requires a prior understanding of closures, this, call, apply in JavaScript. I'm dropping a recommended reading list below to help sharpen this.

Share this article if you liked it!
Follow on Twitter for more posts, quizzes and articles on Tech. 😃👋

JavaScript Promise Combinators - in 3 mins!

Yash Soni — Tue, 01 Sep 2020 09:35:59 +0000

In Software Development, Parallelism is the key to better performance.

It means to carry out long-running asynchronous operations in parallel rather than serially (whenever possible).

Preface:

Imagine you have to fetch quotes using a REST API, and there are 7 different categories of quotes you want to have (eg. life, love, inspirational, etc). Assume each API call takes 1 sec to give back a response.

Now let's say, you want to have all 7 quotes before you show it on UI. How would you address this?

If you call it serially, it will take 7 seconds total (1 for each category).

But these tasks are not related, meaning the order of their execution is not important, hence they can be carried out in parallel.

JavaScript has a fun way to deal with such scenarios using Promise Combinators.

What are Promise Combinators?

Promise Combinators, as I understand, are utility methods to deal with multiple promises that need to be executed in parallel.

Each combinator method takes in an array of promises as an argument.

Each combinator method in-turn returns a Promise.

Let's explore them one-by-one. 🤓

Promise.all()

This is the most used kind of combinator. An example scenario will be the one discussed above - get multiple Quotes in parallel.
IMPORTANT: all() will settle if all the supplied promises have fulfilled, or if any of them is rejected.
Always surround call to Promise.all() by try { ... } catch(e) { ... } blocks.
When we await Promise.all(), the result will be an array of objects returned for each promise supplied.

Promise.race()

This is mostly used in conditions where we want to race the execution of promises against time. An example would be, "Get me all the quotes within 500ms or you fail".
This is not at all limited to just race against time, it can also be a race between many asynchronous operations.
IMPORTANT: race() will settle if any of the supplied promises have fulfilled or rejected. Meaning, the race will terminate after first success or failure.
Always a good practice to surround Promise.race() call by try { ... } catch(e) { ... } blocks.
When we await Promise.race(), the result will be the return value of the first settled promise.

Tip: Play around with the timeout value in raceToGetData(500); to see a different result. Try 10 😀

Promise.allSettled()

Introduced in ES2020, allSettled combinator should be used when the result of each promise supplied doesn't matter (either fulfilled or rejected), but still want to execute each one of it.
IMPORTANT: allSettled() will settle when all the supplied promises are settled.
When we await Promise.allSettled(), the result will be an array of result values of all the settled promises.

Promise.any()

Introduced in ES2021, any combinator should be used when you want the result of the first fulfilled promise.
The only difference from race combinator is that the promise rejections are neglected here.
IMPORTANT: any() will settle when any of the supplied promise is fulfilled.
When we await Promise.any(), the result will be the result of the first fulfilled promise. If all promises are rejected, then an error will be thrown.
Hence, it becomes important to surround Promise.any() call by try { ... } catch(e) { ... } blocks.

P.S.: Check the browser support for any() and allSettled() combinators as they are relatively new. all() and race() are widely supported across all major browser platforms.

Let me know what you guys think! 💬

Follow me on Twitter for some awesome JavaScript tips and quizzes. Likes & Shares are highly appreciated! ❤️

Building Web Extensions with Reactjs - from 0 to publish!

Yash Soni — Mon, 29 Jun 2020 08:08:33 +0000

Web Extensions - you might have heard of it, most probably you're already using it - example? AdBlock, Grammarly, Save to Pocket, etc. In this article, we will build a Web Extension from scratch using Reactjs.

We are going to bake a New Tab Greeting Extension and publish it on Chrome Web Store and Firefox Addon Dashboard.

Step 1 - Creating the App:

Let's create a React app with CRA:

npx create-react-app greetings-web-extension
cd greetings-web-extension

Let's do some quick cleanup:
Under the src folder, remove everything else other than App.js, index.js, and index.css.

From the public folder - remove everything else other than index.html and favicon.ico.

In the end, we should have the following directory structure:

greetings-web-extension
- node_modules
- public
  - favicon.ico
  - index.html
- src
  - App.js
  - index.css
  - index.js
- .gitignore
- package.json
- README.md
- others

Step 2 - Preparing the App:

Quickly modify a few files as follows:

/src/index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

/src/index.css

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.App {
  height: 100%;
  background: linear-gradient(to bottom right, #7b4397, #dc2430);
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/src/App.js

import React from "react";

const greetings = {
  morning: "Good morning",
  noon: "Good afternoon",
  evening: "Good evening",
  night: "Good night",
};
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      greeting: greetings.morning,
    };
    this.startTime = this.startTime.bind(this);
  }

  componentDidMount() {
    this.startTime();
  }

  startTime() {
    let today = new Date();
    let h = today.getHours();
    let greeting;
    if (h > 6 && h < 12) {
      greeting = greetings.morning;
    } else if (h >= 12 && h < 17) {
      greeting = greetings.noon;
    } else if (h >= 17 && h < 20) {
      greeting = greetings.evening;
    } else {
      greeting = greetings.night;
    }
    this.setState({ greeting });
    setTimeout(this.startTime, 1000);
  }

  render() {
    return (
      <div className="App">
        <h1>{this.state.greeting}</h1>
      </div>
    );
  }
}

export default App;

/public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <title>Greetings</title>
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>
</html>

Step 3 - Testing React App:

Let's do a quick test of what we have at hand.
Fire it up with npm start.

You should see something like this in your browser:

Step 4 - preparing the Web Extension:

The first thing we need is a manifest.json file - which is a descriptor file for the web extension we are building.

Create a directory extras, create a new file manifest.json under it and Copy/Paste the following content:

{
  "name": "greetings",
  "offline_enabled": true,
  "short_name": "greetings",
  "description": "Everyday greetings",
  "version": "1.0.0",
  "chrome_url_overrides": {
    "newtab": "index.html"
  },
  "manifest_version": 2
}

offline_enabled: duh!
chrome_url_overrides: we want this extension to override our newtab with the index.html. Hence...

Now, let's create a build for our react-app:
INLINE_RUNTIME_CHUNK=false react-scripts build

Why INLINE_RUNTIME_CHUNK=false?
Because if we don't do this, the final index.html will contain an inline script as a result of the build process. Extension recommends using external scripts and discourages using the inline script. With INLINE_RUNTIME_CHUNK env variable, we will bypass the above-mentioned issue.

The above command will result in a build folder generated at the root of our project.

Now, Copy/Paste the manifest.json file we created into this new build folder. (Why didn't we create the file inside the build folder directly? Because the build folder is purged and re-created every time you run the build commands. Hence keeping it under extras.)

Step 5 - testing the Extension:

Now fire up Chrome Browser, go to chrome://extensions/ and enable Developer mode.

Now click on the Load unpacked Button and point to the build folder of our project.

Test by opening a new tab in Chrome.

Step 6 - packaging for Chrome and Firefox:

Chrome packaging is simply a zip command.
Firefox packaging can be done using a recommended tool called web-ext. Install this globally using npm i -g web-ext.

To help you eliminate the manual steps of copying/pasting manifest.json file, running commands for Firefox and Chrome packaging, etc. I have created a small node.js script that does the job.

Create a new file at the root of the project, let's call it buildPackage.js. Put the following content into it.

const { execSync } = require("child_process");

// FILENAMES
const manifestFileName = "manifest.json";

// DIRECTORIES
const buildDir = "./build/";
const extensionDir = "./extras/";
const outputs = "./";

// OUTPUTS
const chromeOutput = "greetings-chrome.zip";

console.log("Building Extension Packages");

console.log("***COPYING MANIFEST FILE***\n\n");
execSync(
  `cp ${extensionDir}${manifestFileName} ${buildDir}${manifestFileName}`
);

execSync(`zip -r ${outputs}${chromeOutput} ${buildDir}`);
console.log("***CHROME BUILT SUCCESSFULLY***\n\n");

execSync(`web-ext build -s ${buildDir} -a ${outputs} --overwrite-dest`);
console.log("***FIREFOX BUILT SUCCESSFULLY***");

Modify the package.json to run this script as a part of build process. In package.json under scripts tag, modify as shown:

"build": "INLINE_RUNTIME_CHUNK=false react-scripts build && node buildPackage.js",

Now trigger the build script using npm run build and you should see 2 new files created at the root of the project:

greetings-chrome.zip // for Chrome
greetings-1.0.0.zip // for Firefox

Step 7 - Publishing:

Chrome:

Go to Google Chrome Developer Dashboard
Sign in with your Google account or create a new one
Click on + New Item Button
Add the greetings-chrome.zip file created in the previous step
Fill up the required details and submit for review

(Usually takes around 12 hours to publish)

Firefox:

Go to Mozilla Add-ons Dashboard
Sign in with your Mozilla account or create a new one
Click on Submit a New Add-on Button
For distribution, select On this site and continue
Add the greetings-1.0.0.zip file created in the previous step
Fill up the required details and submit for review

(Usually takes around 6-10 mins to publish)

Final notes:

You need an icon for your extension, create one icon of size 128x128 (name it icon_128.png), and put it in the build directory. Add the following to manifest.json:

  "icons": {
    "128": "icon_128.png"
  },

In some cases, your Web Extension might need to store and retrieve data. Though you can use browser localStorage, it is highly discouraged for Web Extension. Instead, you should use a designated DB storage area for extensions which is more reliable. Read more here.
This is a very basic extension that we created, generally, it can be a bit more complicated - with API calls, Storage, Background scripts, etc. All of this is possible!
Try and keep the Web Extension light - meaning an Extension should load fast, should serve a single purpose, should be accessible, etc.

I've created a Web Extension for Chrome and Firefox - minimylist. Do check it out and share it if you liked.

Yash Soni

@iyash_soni

Is Dark Mode your poison?
minimylist - new update live. 👨‍💻👩‍💻

Download now:
Chrome: rb.gy/vdhlo2
Firefox: rb.gy/ot5bba

08:26 AM - 13 Jun 2020

Until next time, Ciao! 👋🏻

Introducing minimylist - productivity assistant! 👨‍💻👩‍💻

Yash Soni — Thu, 11 Jun 2020 20:05:40 +0000

Every developer, literally every developer, dreams of building something that will help boost their productivity.

Well, last weekend I made that. Hopefully, it will make me (and other users) productive. 👻

Requirement Analysis 🤪

It should be easy to use - most important! 😇
Design should be !ugly - wait, this is most important! 🎨
Should have DARK theme - I'm a fan 🖤
Simple Notes feature - to hold phone numbers, web links, adresses, etc 📝
Simple Task list - Quickly create, check, delete tasks from the list ✅
Should give me a daily inspirational quote - just in case I'm running low on fuel some day 😔

Technical Requirements

Reactjs - because I wanted to learn it 🙈

Options on what to build

Website
Web Extension

Website is good option, but several constraints would creep in. Of which, following 2 bothered me the most:

where to store user data
is a website an accessible option to serve the purpose?

After giving in some thought, I decided to build a Web Extension instead.

Data is stored in Browser (syncing across multiple browsers is taken care of)
Web Extension can be a "New Tab" replacement. It cannot get easier than this.

Hence, minimylist was born!

Screenshots?

Here are links to the plugin:
Chrome
Firefox

minimylist just serves the right purpose for me, hoping you guys will like it. Please share your thoughts in comments and all suggestions are welcome. Ciao! 👋🏻

The best way to learn anything in Tech is by building something!

Competitive programming - is it really important?

Yash Soni — Sat, 30 May 2020 17:43:46 +0000

Before you jump to conclusion, I was never in favour of Competitive Programming. I used to be mad at companies who used Comptetive Programming as a first round to scrutinize interview candidates.

I've gone to the extent and said out loud many times, "If they want to hire someone for Developing - Mobile Apps, Web Apps, Backend servers, etc. then why ask inverse a binary tree in O(god_knows_what_time)."

I was like where/how/when am I going to apply this in developing stuff that they are hiring for??

But, after almost 3 years into Developing Software - I stand corrected.

It is important!

Why do companies like Google, Facebook, Amazon include this in their hiring process?

It's very simple, they want to know how do you THINK! Given a problem, how do you deduce (or try to come to) a solution. No, you are not going to directly use this solution in the Software - like ever! But what they are looking for is - a skill of problem solving.

There's a concrete reason why parents buy puzzle games for their children - they want them to develop problem solving skill.

This competitive round helps companies filter out candidates that lack this skill. I have also noticed a common practice to put this round as the very first one - it must be damn important!

Now, almost every company in India looks for this skill - this has become a general process. The first round of an interview is most likely Competitive Programming round.

How does it help me - a developer?

We spend most of our time developing something or the other. Most Softwares that we work on often requires us to write logic of some kind, handle different cases and scenarios, etc. P.S. I'm talking about more than just if-else.

Being good at problem solving generally helps you construct solutions faster, consider all possible scenarios - giving better coverage and lesser bugs.

No - I'm not saying you're a bad developer if you are not doing this. As I said, I too have recently started this. You can still be a great developer by experience, or just naturally - I've seen some myself who are great at what they do and they don't know anything about Competitive Programming!

But I'm not looking for a change, so why should I learn?

This is definitely a skill addition - at least. Plus, solving puzzles keeps you sharp. It's like a workout for your brain. And what's so special about this workout is that you can do it with what you are already in love with - coding.

Want to pick up a new language? Try solving coding challenges with that language and see how quickly you pick it up!

In fact, even if you continue with already known language, you'll have a better grip now than before - guaranteed. Personal experience.

You will uncover the potential of some Data Structures that you have already worked with - get ready to be surprised.

Am I too old to start now?

There's one good thing about these coding puzzles, they don't come with a tag suited for age 6-14 😝 You can start any time, literally. Besides, one solve puzzles for fun - and you are never late to do
something fun.

How and Where do I start?

There are plenty of platforms available that you can get started with. Listing down some for you to start:

Most of these platforms comes with a decent learning material and a solid community to help you out if needed!
Pick a language you love and get started. It's addictive and you're going to ❤️ it.

This can very well be your fun new hobby in this pandemic - learning is cherry on the top. 🥳

If you have any other questions, please fire it up in the comments section.

Web Push Notifications - explained!

Yash Soni — Mon, 25 May 2020 12:58:43 +0000

Hello humans of Dev.to 🙌🏻 This is my first post here. Let's go! 🎢

In this article, we are targeting 3 major Browser Platforms for understanding Push Notifications in Web - Chrome, Firefox & Safari .

Functionally, Chrome & Firefox are very similar. Safari is an odd one because of restrictions from Apple (We know how Apple is when it comes to Security Standards overall) 😜

Let's understand the basic flow of how the Notification works in Chrome/Firefox and Safari.

Chrome/Firefox Notifications:

Understanding a couple of terms here:

Service Worker: A worker for your Website that keeps listening for background events, like "Push Notification Received". An example of a Push service worker:

Subscription Token: A unique per Browser Token which is later used to target a Notification. This token has an expiry, so you might need to request a new one after some time. An example of what a token looks like:



{ 
"endpoint": "https://fcm.googleapis.com/fcm/send/ckjznRm-rKg:APA91bEs6ZqaooqA5CWnd9LXI1VwpfmQzUFdS_mpNYl8qaSF4WwvCe1h2QVrTYDINEPC0oZIQlYpnYBXx2BiPkORIA4U27pze1JkS0dz7o1kfzWkc5_md5uYnZUvwpyFyvPkoeIlYtMj",
"userAuth": "gpq2UFvdWkyomEWdbJ6n3w==",
"userPublicKey": "BNUOw0iXWjfGaIb7Q77jQaWAra72ga1Y1QHZ+g3TuBuwSr0gS0GMtP2BS/lYNGMwku8sJ4e3esChQHigVKFHnsY="
}

This all may look a bit complicated to implement if you are new to all this. Worry not, I have created a helper plugin for making your lives simpler- here's the link to the easy-web-notifications.

Just do npm install easy-web-notifications and follow the instructions in the README and you're all set - from requesting User for Notification Permission to getting the Subscription Token.

Safari Notifications:

In the case of Safari, there is no notion of Service Workers. Rather, Safari handles the delivery of Notifications on its own.

But here's is the weird part, you cannot directly request for Notification Permission from Safari. No no no no no…

Let's see how it goes:

Understanding vocabulary:

Website Push ID: It is an identifier for your Web App. If your Web App is hosted as https://www.mywebapp.com then your Website Push ID will be web.com.mywebapp. This is a convention and not a rule. Please note, you cannot test Safari Notifications on the local environment, it needs to be published with HTTPS enabled.
Server URL: This is the URL of your Backend Server. It needs to be HTTPS and it also needs a valid certificate from a trusted authority (Self Signed certificates won't work)
Registration Params: This is the extra params that you need to pass to your backend server to register the device.
Push Package: Check this official doc on building Push Package.

As you can notice, Safari notifications are stricter and enforce better security, but of course at the cost of difficulty in implementation.

Does it mean Chrome and Firefox are not secured?

Not really, Chrome and Firefox are now enforcing the use of VAPID keys.

Wait, what VAPID now?

VAPID is Voluntary Application Server Identification. In short, it is a way of authenticating the communication between your browser clients and your Backend Server. It is a set of key {public, private}.

As you would guess, the public key and private key both are kept on the server-side, while only the public key is shared with the client.
When the client is trying to subscribe to pushManager, it will carry this VAPID_PUBLIC_KEY as well. So the token that is generated is only usable from the server that has a matching pair of the VAPID key present.

See the following flow to understand using VAPID:

How to generate VAPID keys? What library to use for sending Push Notifications?

Google official docs suggest using these libs for implementing Web Push in your backend. The same library can be used for generating VAPID keys.
In Nodejs, it is super easy to generate keys.
Just do npm i -g web-push
followed by web-push generate-vapid-keys
You should see something like this:



=======================================
Public Key:
BAbNusaoI2KTIogWMlnpZ8nL93ne8GSHXTOxlqxG19Py8V9m9bIarlzIN8PErAsy1NUEahfyLdDuPV7OwFdJYYA
Private Key:
cun3E7GjoCvfmD1NCcIpjYtG4TmZq-0awKtBlPOX3Cc
=======================================

These libraries are available for almost all major backend platforms and are actively maintained. I recommend using npm plugin for its ease of use.

Lastly, what's Web Push Mediator?

We do not send notifications directly to Browser Clients, we built up the notification with all the required data (most importantly Token) and send it to the Browser platform handler - the mediator! This Platform then takes care of routing the notification to the correct client based on the token.
Also, we don't get to see immediate delivery of notifications across all platforms because this is solely dependant on the mediator. Generally I've found Chrome to give timely notifications.

It's been a long read I know, but I've tried to address every problem that I faced when I developed the Push Notification feature for both Client and Server-side. I hope this read helps you in some way! Ciao. 👋🏻