DEV Community: Shafiqul Islam Shuvo

Modern Browser APIs - Part 1

Shafiqul Islam Shuvo — Sat, 03 Oct 2020 05:22:34 +0000

The modern browsers have created a handful of APIs which can help the developers to build applications that can perform better, work offline, and provide a better user experience. Today we are going to check 5 APIs of Modern Browsers that we can use for web applications development and save ourselves from a lot works and troubles:

Window.requestAnimationFrame
Resource Prefetch
Resource Preload
Navigator.sendBeacon
Intersection Observer

Window.requestAnimationFrame

Window.requestAnimationFrame() api can be used to call a function every time display frame changes/updates which is approximately 60 per second or more. Using this method we can create a smooth animation or make a polling function.

requestAnimationFrame has the following benefits:

Browser has the ability to optimize the performance
Execution will be stopped for the inactive browser tabs
More accurate than setTimeout/setInterval

Demo:

function animate() {

  // your code goes here

  //the will be called repeatedly by requestAnimationFrame
  requestAnimationFrame(animate);
}
// Intial call to the function
animate();

We also can stop animation using the window.cancelAnimationFrame method:

window.cancelAnimationFrame(animate);

A polling function to wait for an HTML element using requestAnimationFrame:

const waitForElement = function (elem) {
    if (typeof elem === 'string') {
        return new Promise(function (resolve) {
            var wfelem = function () {
                if (null != document.querySelector(elem)) {
                    resolve(document.querySelector(elem));
                } else {
                    window.requestAnimationFrame(wfelem);
                }
            };
            wfelem();
        });
    }
};

// You can use the function in following way:

waitForElement('body').then(function(body){
    body.style.background = 'red';
});

Resource Prefetch

Resource prefetching is a technique that we can use to tell the browser to download a page or resource even before the users are going to access them. This technique can be used for the pages that the users are most likely going to visit. The browser will download and cache the resource in the background with a low priority, so it won't interfere with more important resources.

<link rel="prefetch" href="/your-resource-link" />

Resource Preload

Resource preloading is similar to Resource prefetching but the difference is that Prefetching is a way to tell the browser what resource to download that likely to be accessed on the next navigation and Preloading is to load a resource that will be needed for the current page. The syntax is similar but we also need to provide the resource type in as attribute.

<link rel="preload" href="/images/background.jpg" as="image" />

Navigator.sendBeacon

Sometimes we may need to send data to server when a visitor leaves a page. When a user leaves a page, JavaScript fires an event called unload and it is not an easy task to send an Ajax request during this event.
We can use XMLHttpRequest in an unload handler. But it will prevent the browser to load the next page until the request is completed.

window.addEventListener("unload", function() {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/log", false); // third parameter of `false` means synchronous
  xhr.send(data); 
});

But Navigator.sendBeacon() is here to solve that problem. This method is useful when you need to send a data through Ajax but don't expect a response. And the request is executed asynchronously when the browser gets a chance to send the data during the idle processing time.

Navigator.sendBeacon() takes two parameters: first one is the url and second one is the data. The function will return a true response when the data is successfully sent to server or false if the request isn't successful.

window.addEventListener("unload", function() {
  if (navigator.sendBeacon) {
      // Send the beacon
      var status = navigator.sendBeacon(url, data);
      // Log the result
      console.log(status);
  }
};

Intersection Observer

It is hard to find a Developer who didn't write/use a code to check if an element is visible in the viewport.
We usually create a function and attach it to the scroll event and check if the target element pops up in the screen. Check the following snippet in jQuery:

$(window).scroll(function() {
    var top_of_element = $("#element").offset().top;
    var bottom_of_element = $("#element").offset().top + $("#element").outerHeight();
    var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
    var top_of_screen = $(window).scrollTop();

    if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
        // the element is visible, do something
    } else {
        // the element is not visible, do something else
    }
});

Whew! Lots of calculations is going on there which I have never been able to remember. But, we now have IntersectionObserver() method which can save us from all of these troubles.

const observer = new IntersectionObserver(function(elements) {
    console.log(elements);
});

observer.observe(document.querySelectorAll('p'));

The first argument of IntersectionObserver is a function that can take an array of HTML elements. There is a second optional argument that takes an object of options:

const observer = new IntersectionObserver(function(elements) {
    elements.forEach(function(element) {
        if (element.intersectionRatio >= 0.5 && element.intersectionRatio < 1) {
            element.style.opacity = "0.5";
        } else if (element.intersectionRatio >= 1) {
            element.style.opacity = "1";
        }
    });
}, {
    // You can use a single value
    threshold: 0.5 // The observer's callback will be once the target element is 50% visible
    // Or you can use an array of value
    threshold: [0.5, 1.0] // The callback will run when target element is 50% and 100% visible
});

observer.observe(document.querySelectorAll('p'));

JS Coding Challenge: Find Anagrams

Shafiqul Islam Shuvo — Tue, 15 Sep 2020 14:04:27 +0000

What is an anagram?

From Wikipedia:

An anagram is a word or phrase formed by rearranging the letters of a different word or phrase, typically using all the original letters exactly once.

Challenge

Given an array of words, we need to write a function which will take two parameters. First parameter is a word and the second parameter is the array of the words. The function will return an array consisting of the anagrams of the word passed as the first parameter from the array of words passed as the second parameter.
Example:

const words = ['mountain', 'anatomy', 'anemic', 'boldness', 'cinema', 
'iceman', 'machine', 'mechanic', 'elbow', 'below', 'state', 'taste', 
'dusty', 'night', 'study', 'thing', 'search', 'arches', 'chaser', 
'animal', 'manila', 'icewoman'];

const findAnagrams = (word, allWords) => {
    // Write the code here
};

console.log(findAnagrams('cinema', words));

/* 
    Expected output: ['anemic', 'iceman'];
*/

Notes:

All the words in the returned result should have the same length as the given word. Example: iceman and icewoman are not anagrams. Even though iceman has every letter as in icewoman but icewoman has extra letters in it which iceman doesn't have.
The word passed as first parameter should not be included in the returned array. As in the code above you can see that cinema is not included in the expected output.

Algorithm

First, we need to find the total count of each letter in the word. Example: in cinema each letter has a total count of 1
Then, we need to loop through each word in the array of words and follow the Step 1 for each.
Then, we need compare the count of each letter between the given word and the current word in the iteration.
If the current word matches with the given word in terms of the letter and letter counts, we will push that word in the result array.
Follow Step 2 to Step 4 until the end of the words array

Solution

First, we will write a helper function which takes a word converted to an array of letters and will give back an object consisting of each letter in the word as the keys and the total counts of each letter as the value:

const numberOfEachLetter = (letters) => {
    return letters.reduce((acc, letter) => ({
        ...acc,
        [letter]: acc[letter] ? acc[letter] + 1 : 1,
    }), {});
};

In the above function we are using Array.reduce() function to create an object of the letters and the count of each letter as the value. We are initiating the .reduce() function with an empty object {} which is provided as the second argument of the function. And, in each iteration we are using the ES6 spread operator to get the previous value from and set updated value to accumulator. And then, using a ternary operator, we are checking if the current letter is already in the accumulator or not. If it is, then we are incrementing the count, otherwise we are setting 1 as the count value.

We can call the function like this:

const word = 'cinema';
numberOfEachLetter(word.split(''));
// Output
{
  a: 1,
  c: 1,
  e: 1,
  i: 1,
  m: 1,
  n: 1
}

Now, we will write another function which can compare between two words using the above numberOfEachLetter function:

const hasSameLetterCount = (word1, word2) => {
    const word1Count = numberOfEachLetter(word1.split(''));
    const word2Count = numberOfEachLetter(word2.split(''));

    return word1.length == word2.length && 
        Object.keys(word1Count)
          .every(letter => word1Count[letter] === word2Count[letter]);
};

Firstly, here we are getting the objects of letter counts for both words using the hasSameLetterCount function. Then, we are comparing the length of the two words to make sure that they have exact number of letters. And finally, we are, using the Object.keys(), iterating through each letter of the first word and comparing to the letters of second word to check if the letters are same and have the same number of occurrence. Using the Array.every() function we are checking that every letter and the count of the letters matches. Otherwise, the function will return false.

Okay, enough with the helper functions. Let's face the final function now!

const findAnagrams = (word, allWords) => {
    const anagrams = allWords.filter(item => {
        return word !== item && hasSameLetterCount(word, item);
    });
    return anagrams;
};

Here, using the Array.filter() function, we are iterating through each word in the words array and checking if the current word doesn't match with the given word and then sending the both words to the hasSameLetterCount function to check if they are matched to be anagrams. And finally returning the array of the filtered words that match with the criteria.

Does the final function look fat? Here is the slim version using the magic of ES6:

const findAnagrams = (word, allWords) => allWords

                     .filter(item => word !== item && 

                         hasSameLetterCount(word, item));

Note:

I know there are ways to improve the code I have written above. I would appreciate if you can suggest a better way to write the code above.

2 useful Polling functions in JavaScript

Shafiqul Islam Shuvo — Thu, 10 Sep 2020 05:20:45 +0000

Sometimes we need to wait for something to be happened before we execute a command or call a function or do something else.
By something I mean:

rendering of a HTML element
a JavaScript event
response from API

and many other things.

Let's see how to write a couple of functions to tackle these scenarios:

Poling function 1: wait for HTML element

var waitForElement = function(elem) {
    if (typeof  elem  ==  'string') {
        return  new Promise(function (resolve) {
            var  wfelem  =  function () {
                if (null  !=  document.querySelector(elem)) {
                    resolve(document.querySelector(elem));
                } else {
                    window.requestAnimationFrame(wfelem);
                }
            };
            wfelem();
        });
    }
};

We can use the above poling function when we need to wait for a certain HTML element.

Example:

waitForElement('button#addToCart').then(function(button) {
     button.textContent = 'Buy Now';
});

Poling function 2: wait until a function returns true

waitUntil = function(callback) {
    if (typeof callback === 'function') {
        return new Promise(function(resolve, reject) {
        var tick = setInterval(function() {
            if (callback() === true) {
                clearInterval(tick);
                return resolve();
            }
        });
    });
    } else {
        console.error(callback + ' should be a function');
    }
};

We can use the above function to wait until one or more conditions meet the criteria before further execution of the code.

Example:

window.waitUntil(function () {
    return "complete" == document.readyState;
}).then(function () {
    console.log("Page loading complete!");
});

Swipe function for touch-devices in Vanilla JS

Shafiqul Islam Shuvo — Mon, 17 Aug 2020 15:20:04 +0000

When we need to implement Swipe functionality for touch devices, we usually use plugins. But we can write touch-swipe functionality in Vanilla JS which supports all the browsers without using any plugin.

First We will see the whole function and then we will break the function into small pieces and will talk about the pieces

var  Swipe  = (function () {
    function  Swipe(element) {
        this.xDown  =  null;
        this.yDown  =  null;
        this.element  =  typeof (element) ===  'string'  ?  document.querySelector(element) :  element;
        this.element.addEventListener('touchstart', function (evt) {
            this.xDown  =  evt.touches[0].clientX;
            this.yDown  =  evt.touches[0].clientY;
        }.bind(this), false);
    }

    Swipe.prototype.onLeft  =  function (callback) {
        this.onLeft  =  callback;
        return this;
    };
    Swipe.prototype.onRight  =  function (callback) {
        this.onRight  =  callback;
        return this;
    };
    Swipe.prototype.onUp  =  function (callback) {
        this.onUp  =  callback;
        return this;
    };
    Swipe.prototype.onDown  =  function (callback) {
        this.onDown  =  callback;
        return this;
    };

    Swipe.prototype.handleTouchMove  =  function (evt) {
        if (!this.xDown  ||  !this.yDown) {
            return;
        }
        var  xUp  =  evt.touches[0].clientX;
        var  yUp  =  evt.touches[0].clientY; 
        this.xDiff  = this.xDown  -  xUp;
        this.yDiff  = this.yDown  -  yUp;

        if (Math.abs(this.xDiff) !==  0) {
            if (this.xDiff  >  2) {
                typeof (this.onLeft) ===  "function"  && this.onLeft();
            } else  if (this.xDiff  <  -2) {
                typeof (this.onRight) ===  "function"  && this.onRight();
            }
        }

        if (Math.abs(this.yDiff) !==  0) {
            if (this.yDiff  >  2) {
                typeof (this.onUp) ===  "function"  && this.onUp();
            } else  if (this.yDiff  <  -2) {
                typeof (this.onDown) ===  "function"  && this.onDown();
            }
        }
        // Reset values.
        this.xDown  =  null;
        this.yDown  =  null;
    };

    Swipe.prototype.run  =  function () {
        this.element.addEventListener('touchmove', function (evt) {
            this.handleTouchMove(evt);
        }.bind(this), false);
    };

    return  Swipe;
}());

Lets first discuss about the inner `Swipe` function

function  Swipe(element) {
    this.xDown  =  null;
    this.yDown  =  null;
    this.element  =  typeof (element) ===  'string'  ?  document.querySelector(element) :  element;
    this.element.addEventListener('touchstart', function (evt) {
        this.xDown  =  evt.touches[0].clientX;
        this.yDown  =  evt.touches[0].clientY;
    }.bind(this), false);
}

This function has the same name as the Root Swipe function. Because of that, when we will call the root function, the inner Swipe function will be initiated. In this function we are setting up the touchstart event for the target element. And we are capturing the clientX and clientY values from the touchstart event and assigning those values to xDown and yDown properties.

Now we will add the functions for each swipe direction

Swipe.prototype.onLeft  =  function (callback) {
    this.onLeft  =  callback;
    return this;
};
Swipe.prototype.onRight  =  function (callback) {
    this.onRight  =  callback;
    return this;
};
Swipe.prototype.onUp  =  function (callback) {
    this.onUp  =  callback;
    return this;
};
Swipe.prototype.onDown  =  function (callback) {
    this.onDown  =  callback;
    return this;
};

Then we will add the function to detect the Swipe direction

Swipe.prototype.handleTouchMove = function (evt) {
    if (!this.xDown || !this.yDown) { return; } 
    var xUp = evt.touches[0].clientX; 
    var yUp = evt.touches[0].clientY; 
    this.xDiff = this.xDown - xUp; 
    this.yDiff = this.yDown - yUp; 
    //Swipe Left or Right 
    if (Math.abs(this.xDiff) !== 0) {
        if (this.xDiff > 2) {
            typeof (this.onLeft) === "function" && this.onLeft(); 
        } else if (this.xDiff < -2) {
            typeof (this.onRight) === "function" && this.onRight(); 
        } 
    }
    if (Math.abs(this.yDiff) !== 0) {
        if (this.yDiff > 2) {
            typeof (this.onUp) === "function" && this.onUp(); 
        } else if (this.yDiff < -2) {
            typeof (this.onDown) === "function" && this.onDown(); 
        } 
    }
    this.xDown = null;
    this.yDown = null; 
};

In this function, we are tracking the swipe distance and the swipe direction. Based on the swipe direction, we are calling the respective swipe-direction function: onLeft, onRight, onUp and onDown.

Note: In the if conditions, we are checking if the distance is > 2 or < -2, because it might happen that when the user swipes on a horizontal direction, there might also be a slight vertical movement. And for this movement, the vertical swipe functions will be triggered. That is why, we are checking if the swipe distance is > 2 or < -2 for an extra bit of safety.

The run function

Swipe.prototype.run  =  function () {
    this.element.addEventListener('touchmove', function (evt) {
        this.handleTouchMove(evt);
    }.bind(this), false);
};

Here, we are adding an event-listener for touchmove event for the target element. The handleTouchMove function will be called once the touchmove event fires.

How can we use this?

First we will create a new object of the function and provide the target element as the parameter

var swiper = new Swipe('your-target-element');

Then we will call any of the swipe directional functions (onLeft, onRight, onUp and onDown) as per our need and inside the callback function we will write our code

swiper.onLeft(function() {
    //Your code goes here
});

Finally run the function

swiper.run();

Note: this function will work only in the touch devices. You can use browser's Developer Tools to switch device that supports touch events and can check the function in there.

Final Note: This is my first article, so there might be many mistakes. Also, I believe that this function can be improved in may ways. Any comment or suggestion is much appreciated.

DEV Community: Shafiqul Islam Shuvo

Modern Browser APIs - Part 1

Window.requestAnimationFrame

Resource Prefetch

Resource Preload

Navigator.sendBeacon

Intersection Observer

JS Coding Challenge: Find Anagrams

What is an anagram?

Challenge

Notes:

Algorithm

Solution

Note:

2 useful Polling functions in JavaScript

Poling function 1: wait for HTML element

Example:

Poling function 2: wait until a function returns true

Example:

Swipe function for touch-devices in Vanilla JS

First We will see the whole function and then we will break the function into small pieces and will talk about the pieces

Lets first discuss about the inner Swipe function

Now we will add the functions for each swipe direction

Then we will add the function to detect the Swipe direction

The run function

How can we use this?

Finally run the function

Lets first discuss about the inner `Swipe` function