DEV Community: suhpin95

Debouncing in Javascript

suhpin95 — Mon, 30 Nov 2020 15:59:13 +0000

In today's world, it's of utmost necessity to have an application that can scale, be robust, and be performant. One of the ways to improve the efficiency of the applications is by using the concept called Debouncing

In debouncing, we limit the calls for 'N' time period and thereby reducing the calls to api's,requests to fetch the data. Though there are various libraries such as loadlash and underscore JS, we would be implementing the basic version to understand what goes behind the scene. Please do not use this version for the production level development.

We would be creating a div block that would help us to perform the mousemove event & maintaining the count of the event without the debounce method and another one with the debounce method.

index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-CuOF+2SnTUfTwSZjCXf01h7uYhfOBuxIhGKPbfEJ3+FqH/s6cIFN9bGr1HmAg4fQ" crossorigin="anonymous">
    <link rel="stylesheet" href="./css/style.css" />
    <!-- JS -->
    <script src="./app.js"></script>
    <title>Debounce Tuts</title>
</head>

<body>
    <div class="container">
        <h2>Debounce Tuts</h2>
        <div class="jumbotron">
            <h4>Raw Count: <p id="rawResult"></p>
            </h4>
            <h4>Debounce count: <p id="debounceResult"></p>
            </h4>
            <div id="card">
               <!-- Space for hovering -->
            </div>
        </div>
    </div>
</body>

<script>
    var rawMoves = 0,
        debounceMoves = 0;
    var divById = document.getElementById("card");

    //for raw count
    divById.addEventListener('mousemove', function () {
        var resultRaw = document.getElementById("rawResult");
        rawMoves++;
        resultRaw.innerHTML = rawMoves.toString();
    });

    //for debounce count
    divById.addEventListener('mousemove', debounce(function () {
        var resultDebounce = document.getElementById("debounceResult");
        debounceMoves++;
        resultDebounce.innerHTML = debounceMoves.toString();
    }, 500));
</script>

</html>

We would be adding basic css for having a better UI
style.css

*{
    padding: 10px;
}
#card {
    width: 100px;
    height: 100px;
    background-color: #1b9dc4;
    border-radius: 15px;
}

.jumbotron {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    background-color: #e9ecef;
    border-radius: .3rem;
}

app.js

function debounce(callback, delay) {
  let isBounce
  return function () {
    clearTimeout(isBounce);
    isBounce = setTimeout(() => callback(), delay);
  }
}

Debounce is a higher order function, hence debounce function returns another function, which would be executed after the delay from the moment the event has been triggered.

The concept of closure comes into the picture for maintaining and associating the delays to isBounce. clearTimeout() would clear delay set by the method setTimeout() as and when the event is triggered. This would wait for delay amount of time from the last event triggered and then perform the callback passed to it.

Cheers ✌️✌️, we are done with the implementation. Now we can run the index.html on the browser. I must say that there are many ways of implementing this that would be more performant efficient but my intention is to help a beginner in understanding the basics of debounce and hence opted to a simpler version of the code. You would be using this primarily to improve the suggestive text and content-loading functionality.

Quick Intro to PWA-III

suhpin95 — Fri, 17 Apr 2020 16:24:03 +0000

A quick recap, from our previous tutorial. We have created folders for images & js and placed app.js in it. We have used app.js to fetch the images on the front-end. By now your file structure should replicate something similar to this:

In this tutorial, we will be looking to add manifest.json and serviceWorker.js. Before we dive into code, first we need to understand what exactly are these files and why do we need them.

1. Manifest.json

By now you are aware that PWA apps are web-apps that work similar to native apps. So there must be something that passes this information to the browser to make our experience similar to it. This is where manifest.json comes into the picture, that is used by the browser as meta-data.

2. ServiceWorker

It is a script that runs independently of any other interface scripts in the background. It can be useful for providing various events such as install, download, message, active, fetch, etc.

Now let's dive into the code:

manifest.json: Create a manifest.json in the source directory and use these keys-value pair.

manifest.json

{
  "name": "SwaraSmruti",
  "short_name": "Swarasmruti",
  "display": "browser",
  "start_url": "index.html",
}

We have sent name, display and start_url as the meta-data. The name of the application has been set to Swarsmruti. The application opens index.html in the browser.

serviceWorker.js: Create a serviceWorker.js in the source directory.

serviceWorker.js

const staticInstrument = "Swarasmruti-v1";
const assets = [
  "./",
  "./index.html",
  "./stylesheet/app.css",
  "./js/app.js",
  "./images/venna.jpeg",
  "./images/violin.jpg",
  "./images/tabla.jpg",
  "./images/mandolin.jpg",
  "./images/piano.jpg",
  "./images/Electric-Guitar.png",
  "./images/backGroundImage.jpg"
];

self.addEventListener("install", installEvent => {
  installEvent.waitUntil(
    caches.open(staticInstrument).then(cache => {
      cache.addAll(assets);
    })
  );
});

self.addEventListener("fetch", fetchEvent => {
  fetchEvent.respondWith(
    caches.match(fetchEvent.request).then(res => {
      return res || fetch(fetchEvent.request);
    })
  );
});

Here we have used 2 events namely install & fetch. The install event listener will get the list of resources from assets and store it in the cache. The fetch event will be used to check the cache and fetch the assets. If it doesn't have the assets then, it will try to fetch from the network. If there are issues with network connection then it would provide us a failure result on the console.

Finally, we would be registering the serviceWorker in app.js

app.js

if ("serviceWorker" in navigator) {
  window.addEventListener("load", function() {
    navigator.serviceWorker
      .register("./serviceWorker.js")
      .then(res => console.log("service worker registered"))
      .catch(err => console.log("service worker not registered", err));
  });
}

The if block checks if the serviceWorker is supported before registration. During loading of the webpage, we call the function to register serviceWorker. This returns an object of type Promise, which would log service worker registered if successful or log service worker not registered on the failure of the same.

At last, we are done with our PWA.

Now we need to check the cache in the browser to get all the assets that we mentioned in serviceWorker.js. Choose the option of going offline(check the Network tab)in the browser and you will find that it still works with all the assets.

Conclusion:

Now I would like to congratulate all of you on creating your first PWA app. I've provided the link to the repository & there might be variations with the code in the tutorial as I've changed the code to enhance the front end. I've provided various resources that would act as a reference and help in taking giant leaps in the amazing world of PWA's.

Thanks for reading!!!!

Useful Resources:

Code
Manifest.json:
Service Worker:
- Service Worker
- Service Worker

Quick Intro to PWA-II

suhpin95 — Thu, 16 Apr 2020 15:10:16 +0000

A quick recap, from our previous tutorial. We have created a responsive web app that contains a grid container and a flexbox navbar. By now your file structure should replicate something similar to this:

In this tutorial, we will be looking to add images and use javascript to fetch those on the front end. So without further ado let's get our hands dirty.

1. Images:

I've used these images for the creation of the app. The intention here is to make a PWA, so our prime focus should be on the creation of the app rather than it's styling. There's flexibility in choosing the images as per the requirements, but then you might have to change the styling that would be suitable for the resolution of the images. Many websites provide royalty-free images and Unsplash, Pexels are just a few to name.

2. JavaScript:

Now we will be using the images from the above step in javascript and fetch it in the front end. So let's create a folder and name it js and inside the js folder create a file and name it app.js.

app.js

const container = document.querySelector(".container")
const musicalInstruments = [
  { name: "Rudra Venna", image: "images/venna.jpeg"},
  { name: "Violin", image: "images/violin.jpg"},
  { name: "Tabla", image: "images/tabla.jpg"},
  { name: "Mandolin", image: "images/mandolin.jpg"},
  { name: "Piano", image: "images/piano.jpg"},
  { name: "Guitar", image: "images/Electric-Guitar.png"},
]
const showInstruments = () => {
  let output = "" ;
  musicalInstruments.forEach(
    ({ name, image }) =>
      (output += `
              <div class="card">
                <img class="card-avatar" src=${image} />
                <h2 class="card-title">${name}</h2>
                <a class="card-link" href="#">Listen</a>
              </div>
              `)
  )
  container.innerHTML = output
}
document.addEventListener("DOMContentLoaded", showInstruments);

Here we have created a musicalInstruments object that contains the properties of name and image. The showInstruments arrow function has been created to loop through musicalInstruments object which will concatenate output. In the mean while we have accessed the container(div) element and gave reference of output to render our DOM.

Well, let me put it down in simple words. We have got the elements in front-end by looping the data present in musicalInstruments with the help of showInstruments function and returned the value in output. I hope this makes sense now. Now let's move on to styling our front end.

Styling

Now we will be changing the app.css file to adjust the images on the screen as a card(Simply put cards are rectangular components that act as an entry point containing text & image to provide detailed information). Also, we have imported Roboto font just to make our typography look clean & simple.

CSS:
app.css

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); 
body {
  background-image: url("../images/backGroundImage.jpg");  
  background-position: left;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
}
.card{
    display : flex;
    align-items : center;
    flex-direction : column;
    width : 15rem auto;
    height : 15rem;
    background : #fff;
    box-shadow : 0 10px 20px rgba(0, 0, 0, 0.25), 0 6px 6px rgba(0, 0, 0, 0.20);
    border-radius : 10px;
    margin : auto;
    overflow : hidden;
}
.card-avatar{
    width : 100%;
    height : 10rem;
    object-fit : cover ;
}
.card-title{  
    font-weight : 700;
    text-transform : capitalize;
    font-size : 1.1rem;
    margin-top : 0.5rem
}
.card-link{
    text-decoration : none;
    background : #878f99;
    color : #fff;
    padding : 0.35rem 1rem;
    border-radius: 20px;
}

Here we have created a card of flexbox layout in which the alignment of the content will be in the center of the card with respect to cross-axis(Perpendicular to main-axis which in this case is Vertical axis as flex-direction is coloumn). Box shadow has been set across the frame to make the card more attractive. Now you should get output along this line.

Now we are good to go with our third tutorial where we will add manifest.json and write serviceWorker code which would complete our PWA app. So stay tuned.

Thanks for reading!!!!

Quick Intro to PWA-I

suhpin95 — Tue, 14 Apr 2020 15:38:26 +0000

Introduction:

The Internet has been one the greatest tool that has been a torchbearer for social evolution, the change has been particularly felt in the field of IT. We are coming across new ways of developing application and there has been a lot of buzz around these PWA's(Progressive Web App).

So what on earth is this PWA's????

Well simply put it is a way of developing a web application that has native application feel to it. This means they can work offline or even with low bandwidth. Also, these are reliable, engaging and super-fast.

This tutorial is a basic introduction to PWA. You might have heard the case-study, which says that Twitter has been doing phenomenally well since they have created Twitter PWA's and that there has been a significant increase in tweets sent by the user and all the associated statistics that might help you point one main thing, that PWA has been a god's gift(Technically that's not the case, as some developer/developers might have invested his/her/their time to provide us with a magnificent way of developing applications, but anyways)

How do we implement it:

Well, PWA's use different patterns and technologies to create a native app experience. We will be creating a static app that would display musical instruments and adopt Responsive web design philosophy as well. Responsive web design is a way of creating an application that would re-adjust itself as per the resolution of the screen.

Pre-requisite:

Basic Understanding of:

HTML
CSS(Grid and Flexbox)
ES-6

Tools used:

There's no hard and fast rule to use a particular IDE or editor, so feel free to carry on with the tools you are comfortable with as long as it doesn't impede your productivity. I've used Microsoft Visual Code Studio for this very purpose.

Let's go

HTML
First, we need to create the skeleton with a navbar and div element. So let's create an HTML file and name it index.html

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="Description" content="Author: Suhas Pindiproli,
    The website has been created for tutorial purpose. The aim is 
    to create a progressive web app.    
    ">
    <title>Swarasmruti</title>
  </head>

  <body>
    <main>
      <h1>Swara-Smruti</h1>
      <nav>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Blog</li>
        </ul>
      </nav>
      <div class="container">

      </div>
    </main>
  </body>
</html>

CSS
Similarly let's create a folder for css and name it stylesheet. Inside the stylesheet folder let's create a file and name it app.css

app.css

*{
    margin : 0;
    padding : 0;
    box-sizing : border-box;
}
body {
  font-size: 1rem;
}
main {
  max-width: 900px;
  margin: auto;
  padding: 0.5rem;
  text-align: center;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
ul {
  list-style: none;
  display: flex;
}
li {
  margin-right: 1rem;
}
h1 {
  margin-bottom: 0.5rem;
}
.container { 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 0.75fr));
    grid-gap: 1.2rem;
    justify-content: center;
    align-items: center;
    margin: auto;
    padding: 1rem 0;
}

We have created a flexbox navbar and a grid container.

Now we are good to go with our second tutorial where we will add images and write javascript code to fetch the images of musical-instrument. So stay tuned if you don't wanna miss out on some great stuff.

Thanks for reading!!!!