Forem: Himanshu Mishra

Lazy loading videos with plain old javascript

Himanshu Mishra — Sat, 11 Apr 2020 20:19:26 +0000

While making landing page for Hoverify, I noticed terrible loading times and performance. Scrolling was a laggy until everything got loaded. Since page is filled with videos, loading them at once was a very bad idea so I implemented some lazy loading with some pure JS. This article is for sharing what I learned.

What is lazy loading

Lazy loading is basically loading content at the point when it is needed. In our case we want to load videos when they are completely in the viewport.

Let's start

It is mostly javascript in action so there is not much on html and css side but we will start by writing a basic page for testing.

    <html>
        <head>
            <title>Lazy Load Example</title>
        </head>
        <style>
            video {
                width: 540px;
                height: 340px;
                margin-bottom: 20rem;
                display: block;
            }
        </style>
        <body>
              <!--Without lazy load-->
              <video loop=1 muted=1 autoplay>
                  <source src="https://tryhoverify.com/videos/live_editing.mp4" type="video/mp4"></source>
              </video>
            <!--With lazy load-->
            <video loop=1 muted=1 autoplay>
                <data-src src="https://tryhoverify.com/videos/live_editing.mp4" type="video/mp4"></data-src>
            </video>

            <!--With lazy load-->
            <video loop=1 muted=1 autoplay>
                <data-src src="https://tryhoverify.com/videos/live_editing.mp4" type="video/mp4"></data-src>
            </video>
        </body>

    </html>

As you can see there are three video tag. Top one is a normal video tag which will be normally loaded. Other two does not have <source> tag because we will replace <data-src> with <source> later when the video is visible in the viewport.

Fun part

Now let's think about the problem for a second. We want to replace <data-src> with <source> whenever the video gets in the viewport for the first time. We also need to handle scroll, load and resize events as they will have effect on visibility of elements.

Detecting if the video is in the viewport or not

To do this we can use getBoundingClientRect() to get the position of element on the screen and compare that to viewport size.

    function isElementInViewport (el) 
    {
        var rect = el.getBoundingClientRect();

        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && 
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }

Listen to scroll, resize and load events

We will listen to load, scroll and resize event and bind them to a handler function which will loop through all the videos found in the page. It will check if they are in the viewport and do our simple trick of replacing tags so that browser can start loading videos.

    const handler = () => 
    {
        /* 
            Check videos if they are in the viewport.
            If yes then replace data-src with source.
        */ 
    }

    addEventListener('load', handler, false);
    addEventListener('scroll', handler, false);
    addEventListener('resize', handler, false);

load event is fired when all subframes, images, stylesheets, scripts, etc have been loaded.
scroll is fired whenever you scroll.
resizeis fired when you resize the viewport.

Looping through videos

Last piece of puzzle is to handle all the events that we added above. As explained above we need to loop through and check if the videos are in the viewport or not.

    const handler = () => 
    {
        const videos = document.querySelectorAll('video');
        for (let i = 0; i < videos.length; i++)
        {
            const video = videos[i];
            const visible = isElementInViewport(video); // Check if the video is in the viewport or not.
            if (visible)
            {
                const dataSrc = video.querySelector('data-src');
                if (dataSrc) // Check if data-src exists or not. If yes, than we have never loaded this video.
                {
                    // Creating souce element and adding respective attributes.
                    const source = document.createElement('source');
                    source.src = dataSrc.getAttribute('src');
                    source.type = dataSrc.getAttribute('type');

                    video.appendChild(source); // Add new source element to video.
                    video.removeChild(dataSrc); // Remove data-src from video. 
                }
            }
        }
    }

We replaced data-src with video when video was fully visible in the viewport. But you will see that we also placed a check to see if data-src exists or not. This is because we are deleting data-src when we replace it and it also saves us extra operations of replacing it again and again.

Final javascript code

    function isElementInViewport (el) 
    {
        var rect = el.getBoundingClientRect();

        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && 
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }

    const handler = () => 
    {
        const videos = document.querySelectorAll('video');
        for (let i = 0; i < videos.length; i++)
        {
            const video = videos[i];
            const visible = isElementInViewport(video); // Check if the video is in the viewport or not.
            if (visible)
            {
                const dataSrc = video.querySelector('data-src');
                if (dataSrc) // Check if data-src exists or not. If yes, than we have never loaded this video.
                {
                    // Creating souce element and adding respective attributes.
                    const source = document.createElement('source');
                    source.src = dataSrc.getAttribute('src');
                    source.type = dataSrc.getAttribute('type');

                    video.appendChild(source); // Add new source element to video.
                    video.removeChild(dataSrc); // Remove data-src from video. 
                }
            }
        } 
    }

    addEventListener('load', handler, false);
    addEventListener('scroll', handler, false);
    addEventListener('resize', handler, false);

You can find final working example here

This was a very basic example of lazy loading. You can do much better than this. For instance, you can add some animations or you can optimize event handling for better performance.

Please let me know if you find this useful in comments.

Thanks for reading :)

Show DEV: I built a chrome extension to inspect element on hover

Himanshu Mishra — Sun, 29 Mar 2020 21:01:16 +0000

Hi Devs,
My name is Himanshu Mishra, I'm an independent maker from India.
I recently launched a chrome extension that lets you inspect element on hover. It shows all the styles and HTML attributes in a sweet window which you can dock.
You can even live edit CSS, HTML attributes and content. It is jammed with nifty little features that make web design a smooth experience. You can know more about it here.

Development

I started working on it about 6 months ago, We don't do this but I decided on using vanilla javascript and jquery for it. Which gives me control over the final code and made build size significantly smaller (< 286KB).
I made a custom build system that takes every javascript file in the source folder and minifies it. I wrote a small tutorial on it. Check it out.
I even took this vanilla craze of mine to the landing page and rewrote it from React to simple HTML, CSS and javascript.

The extension is available for every chromium-based browser. Sadly, other browsers like Firefox and safari do not provide permissions like debugger and capture API which make some of the features possible. Although I may add support to these browsers but some of those features may suffer.

I would love to hear your feedback. Thank you!

Send mail with Netlify and Mailgun

Himanshu Mishra — Sun, 23 Feb 2020 16:52:24 +0000

For a side project I wanted to send activation emails with license keys. My project was a chrome extension and didn't have much of backend, So I hosted it on recently discovered Netlify and ended up using Netlify functions for little bit backend that I had.

Prerequisites

We will be writing functions in nodejs so some knowledge of javascript will be required.

Get Mailgun api key

To get your private api key, go to Settings > Api Keys.

Setup Netlify Functions

We will use netlify-lambda for building and locally running netlify functions. To install netlify-lambda -

npm install netlify-lambda

It is suggested that you don't install it as dev dependency.

We also need to create netlify.toml file to define where functions will be build and served from.

[build]
    command = "npm run build"
    functions = "functions/build" # folder where build functions exist
    publish = "public" # folder where functions will be served from

Create scripts in package.json

netlify-lambda exposes two commands which will help us to build and serve our files

netlify-lambda build <folder> - build functions from to destination folder defined in netilfy.toml. It our case it was 'functions/build'.
netlify-lambda serve <folder> - serves functions present in locally.

With this information, we can create two scripts in our package.json

{
  ...
  "scripts": {
    "build": "netlify-lambda build functions",
    "serve": "netlify-lambda serve functions"
  }
  ...
}

Create function for sending mail

With everything setup we can finally write function which will send mail. Mailgun's npm library makes super easy. But first let's install it-

npm install mailgun-js

Now create a file in functions folder sendmail.js. Name of the file is very important as it will part of function url (in this case it will be something like https://blahblah.blah/.netlify/functions/sendmail).

Every function have following general systax which exports a handler-

exports.handler = function(event, context, callback) 
{
    // your server-side functionality
}

Let's do some mailgun magic-

const mailgun = require('mailgun-js');

exports.handler = function(event, context, callback) 
{
    const mg = mailgun({
        apiKey: "YOUR_PRIVATE_KEY", 
        domain: "YOUR_DOMAIN"
    });

    const data = {
        from: 'Name <something@YOUR_DOMAIN>',
    to: 'elon@musk.com',
    subject: 'SUBJECT',
    text: 'TEXT',
    html: 'HTML'
    };

   mg.messages().send(data, (error, body) => 
   {
        if (error)
        {
            return console.log(error);
        }

        callback(null, {
            statusCode: 200,
            body: "Mail sent"
        });
   });
}

Test & Deploy

We can locally test our function by running npm run serve in terminal.
To deploy we have to just push commit to github like any other netlify site. Please don't forget to set build command in your deploy settings.

And it's done
Mailgun and Netlify make it really simple and easy to do something like this, that too for free. Netlify functions are really powerful and gives you more freedom than something like firebase function for free.

Writing simple obfuscation and minification system

Himanshu Mishra — Mon, 09 Sep 2019 19:56:39 +0000

Obfuscation is the process of making your code unclear and unreadable to humans. This adds a level of security to source code specially in web world were source code is readily available. Minification is the process of removing unnecessary data present in code resulting in smaller file sizes and faster loading. In this tutorial we will focus on making a simple build system which detects every javascript file in our source code to obfuscate and minify.

Prerequisites

To follow this tutorial you need basic knowledge of Javascript and Nodejs. We will use javascript-obfuscator to obfuscate and minify code.

Let's go...

Installation

We will only use one external library javascript-obfuscator which can be installed as a dev dependency.

npm install --save-dev javascript-obfuscator

Imports & Folders

In total we need three libraries - fs, path and javascript-obfuscator.

const Fs = require('fs');
const Path = require('path');
const JavaScriptObfuscator = require('javascript-obfuscator');

The source code will be kept in src folder and final build files will be generated in build folder.

const src = Path.join(__dirname, '/src/');
const build = Path.join(__dirname, '/build/');

Read directories

All the directories will be read recursively and find javascript files which will be than obfuscated and minified. To read files we will use fs module.

function readDirectory(dirPath)
{
    Fs.readdir(dirPath, (err, files) => 
    {
        if(err)
        {
            console.error("Could not list directory.", err);
            process.exit(1);
        }

        files.forEach((file, index) => // loop through every file
        {
            let path = Path.join(dirPath, file);
            console.log(path);
        });
    });
}

This will give us path of every file and folder in the provided directory. But we need to read differentiate between files and directories and further read the directories found. This can be done through stat function provided by fs.

Fs.stat(path, (err, stat) => 
{
    if(err)
    {
        console.log("error in stating file.", err);
        return;
    }

    if(stat.isFile())
    {
        console.log(`${path} is a file`);
    }
    else if(stat.isDirectory())
    {
        console.log(`${path} is a folder`);
        readDirectory(path); // Further read the folder.
    }
});

Copy files and directories from src to build directory

Now this is perfect time that we start copying all the files found in src to build directory. While copying we will simultaneously also create absent directories present in src.

if(stat.isFile())
{
    const newPath = path.replace(src, build); // Replace src path with build path.
    Fs.copyFileSync(path, newPath); // Copy file from old path in src to new path in build.
    if(newPath.endsWith(".js")) // Check if it is javascript file.
    {
        obfuscate(newPath); // Obfuscate copied file in build folder.
    }
}
else if(stat.isDirectory())
{
    var newDir = path.replace(src, build); // Replace src path with build path.
    if (!Fs.existsSync(newDir)) // Check if directory exists or not.
    {
        Fs.mkdirSync(newDir); // Create new directory.
    }
    readDirectory(path); // Further read the folder.
}

Obfuscation and Minification

Finally, javascript file found will be obfuscated and minified. To do so, we will use JavaScriptObfuscator.obfuscate function which takes code as first argument and a config object as second.

function obfuscate(filePath)
{
    const content = Fs.readFileSync(filePath).toString(); // Read the files content.
    var result = JavaScriptObfuscator.obfuscate(content,
        { // Config for obfuscation
            compact: true, // Set true to enable minification
            controlFlowFlattening: true,
            target: 'browser'
        }
    ); // Generated minified and obfuscated code

    Fs.writeFileSync(filePath, result.getObfuscatedCode()); // Write obfuscted and minified code generated back to file.
}

You can read more about the config options here.

Finally...

Here is the full code

const Fs = require('fs');
const Path = require('path');
const JavaScriptObfuscator = require('javascript-obfuscator');

const src = Path.join(__dirname, '/src/');
const build = Path.join(__dirname, '/build/');

readDirectory(src); // Start reading with src directory.

function readDirectory(dirPath)
{
    Fs.readdir(dirPath, (err, files) => 
    {
        if(err)
        {
            console.error("Could not list directory.", err);
            process.exit(1);
        }

        files.forEach((file, index) => // loop through every file
        {
            let path = Path.join(dirPath, file);

            Fs.stat(path, (err, stat) => 
            {
                if(err)
                {
                    console.log("error in stating file.", err);
                    return;
                }

                if(stat.isFile())
                {
                    const newPath = path.replace(src, build); // Replace src path with build path.
                    Fs.copyFileSync(path, newPath); // Copy file from old path in src to new path in build.
                    if(newPath.endsWith(".js")) // Check if it is javascript file.
                    {
                        obfuscate(newPath); // Obfuscate copied file in build folder.
                    }
                }
                else if(stat.isDirectory())
                {
                    var newDir = path.replace(src, build); // Replace src path with build path.
                    if (!Fs.existsSync(newDir)) // Check if directory exists or not.
                    {
                        Fs.mkdirSync(newDir); // Create new directory.
                    }
                    readDirectory(path); // Further read the folder.
                }
            });         
        });
    });
}

function obfuscate(filePath)
{
    const content = Fs.readFileSync(filePath).toString(); // Read the files content.
    var result = JavaScriptObfuscator.obfuscate(content,
        { // Config for obfuscation
            compact: true, // Set true to enable minification
            controlFlowFlattening: true,
            target: 'browser'
        }
    ); // Generated minified and obfuscated code

    Fs.writeFileSync(filePath, result.getObfuscatedCode()); // Write obfuscted and minified code generated back to file.
}

Hurray!!! you made till end.
I hope you would have found it useful. If yes, than show some love by commenting and sharing.