DEV Community: Sriya

SVG vs. Canvas – The Ultimate Graphic Showdown

Sriya — Sun, 25 Jun 2023 10:09:29 +0000

Graphics have come a long way on the web since the good ol' days of GIFs. Advances in technology have paved the way for creating dynamic graphics and animations to give users the best experience possible.

However, with so many ways of creating graphics - some people prefer fisticuffs 👊 instead of pixels -

we're going to pit SVG and Canvas against one another in this no-holds-barred fight.

SVG as the Lightweight Champ 👊

In this corner, we have SVG. The lightweight champ who packs a serious punch with its vector-based graphics.
SVG is the Rocky Balboa of the web, providing images that can scale up to any size without sacrificing quality.
SVG's main weapon is its object-oriented nature, allowing each element to be manipulated independently, like a game of Jenga.
SVG is ideal for complex graphics, including interactive charts that need to retain their quality as they scale up and down.

Canvas as the Heavyweight Slugger 👊

And in the other corner, we have Canvas, a heavyweight slugger who throws punches with brute force.
Canvas is the Mike Tyson of the web, providing pixel-based graphics that can be manipulated at the pixel level.
Canvas can create animations that are so engaging a user might come back daily just to watch them. User experience is critical, so when you need more control over individual pixels, Canvas is the go-to method.
Canvas is perfect for complex HTML5 games or animations that require significant performance input.

The Bout 👊 🆚 👊

Canvas is an HTML5 element that provides a 2D drawing API. Think of it like a blank canvas where a developer can draw anything they like using JavaScript code. Each pixel of the canvas can be manipulated directly through code, providing a lot of control over how the graphics are rendered.

SVG is an XML-based format designed for creating scalable vector graphics in web pages. Scalable refers to images that can be resized without losing quality, which is particularly useful for responsive design. It is similar to drawing with a vector image editor, where a graphic element is defined by paths and shapes.

The main difference between SVG and Canvas is how they draw their graphics. SVG is an object-based approach, whereas Canvas works with pixels and focuses on the manipulation of individual pixels.

Round 1 👊- Resolution: SVG images can be scaled up or down without losing quality since they are vector-based. On the other hand, a Canvas image is pixel-based, meaning it will lose quality after scaling.

Round 2 👊- Interactivity: SVG elements can be styled individually, allowing them to interact with the user. For example, we can add hover effects or animation transitions on individual elements. Canvas graphics are essentially a static image, which doesn't mean they're not interactive. We can add event listeners to the Canvas element, so a user can interact with the whole image.

Round 3 👊- Performance: Since Canvas involves direct manipulation of pixels, it generally runs faster than SVG. However, complex animations with Canvas can put a strain on hardware resources and degrade performance.

Round 4 👊- Accessibility: SVG elements are directly readable by screen readers, which makes them more suitable for creating accessible web content. On the other hand, Canvas graphics are not readable by screen readers.

When to use which player? 😵

SVG and Canvas both have their strengths and weaknesses based on how they operate and what they can offer.

Use SVG when: 🔔

You want to create complex graphics, including interactive charts.
You need graphics that are scalable, such as icons and logos.
You need vector graphics that retain their quality regardless of their size.
You're looking at creating accessible web content.

Use Canvas when: 🔔

You want to create complex HTML5 games or animations.
You need more control over individual pixels.
You need to render a large amount of graphics quickly.
Your animation needs to go to the pixel level to create a specific effect

Conclusion

The SVG vs. Canvas fight is one to remember. SVG may be lighter, but it delivers high-quality graphics like a butterfly and weaves through individual graphic elements like a featherweight, while Canvas hits like a heavyweight slugger and provides precise pixel control like a heavyweight punch. In general, SVG is better for creating scalable vector graphics, while Canvas excels at creating dynamic graphics. Choosing the best one for your project will depend on your specific needs.
The winner of SVG vs. Canvas?😎 You be the judge of that by deciding which one suits your project's goals!

Unleash Your Inner Marvel Enthusiast: Embracing SOLID Principles in JavaScript

Sriya — Sun, 18 Jun 2023 07:45:25 +0000

As developers, we yearn for code that assembles like the Avengers, each piece playing its part flawlessly. In the realm of JavaScript, the SOLID principles offer the superpowers needed to craft maintainable and extensible code. Let's embark on a thrilling journey through these principles, drawing inspiration from our beloved Marvel superheroes.

1. Single Responsibility Principle (SRP): Iron Man's Suit of Code Isolation

//Just like Tony Stark's suit, a JavaScript class should have a single responsibility. 
//Separating concerns allows for better maintainability and extensibility. 
//Avoid "god classes" that try to do everything.

class IronManSuit {
  constructor() {
    // Initialization
  }

  handleRepulsorBeams() {
    // Code logic for handling repulsor beams
  }

  handleFlightSystem() {
    // Code logic for controlling flight system
  }

  // More methods...
}

2. Open/Closed Principle (OCP): Captain America's Vibranium Shield of Code Adaptability

//Captain America's shield is both solid and adaptable. 
//Similarly, JavaScript code should be open for extension 
//but closed for modification. 
//Use abstraction and interfaces to allow new features 
//without modifying existing code.

class CaptainAmericaShield {
  constructor() {
    // Initialization
  }

  defendAgainstAttacks() {
    // Code logic for defending against attacks
  }

  deflectProjectiles() {
    // Code logic for deflecting projectiles
  }

  // More methods...
}

3.Liskov Substitution Principle (LSP): Spider-Man's Web-Slinging Agility

//Spider-Man's agility enables him to adapt to various situations effortlessly. 
//Likewise, JavaScript code should be substitutable, 
//allowing derived classes to be used interchangeably with base classes. 
//Ensuring that subclasses conform to the expected behavior prevents unexpected issues.

class SpiderMan {
  constructor(webSlinger) {
    this.webSlinger = webSlinger;
  }

  swingFromBuildings() {
    this.webSlinger.shootWeb();
    // Code logic for swinging from buildings
  }

  fightVillains() {
    // Code logic for fighting villains
  }

  // More methods...
}

class WebSlinger {
  shootWeb() {
    // Code logic for shooting web
  }
}

4. Interface Segregation Principle (ISP): Black Widow's Versatile and Stealthy Interface

//Black Widow's Stealth and Versatility
//Black Widow's versatility shines through her diverse skill set. //Similarly, JavaScript interfaces should be tailored to specific client needs. 
//Avoid bloated interfaces and create smaller, specialized //interfaces that cater to individual requirements.

// Bad approach
class BlackWidow {
  constructor() {
    // Initialization
  }

  fightVillains() {
    // Code logic for fighting villains
  }

  hackComputers() {
    // Code logic for hacking computers
  }

  // More methods...
}

// Good approach
class BlackWidowFighter {
  constructor() {
    // Initialization
  }

  fightVillains() {
    // Code logic for fighting villains
  }
}

class BlackWidowHacker {
  constructor() {
    // Initialization
  }

  hackComputers() {
    // Code logic for hacking computers
  }
}

5. Dependency Inversion Principle (DIP): Thor's Mjolnir and Stormbreaker

//Thor's trusty weapons, Mjolnir and Stormbreaker, can be wielded by worthy individuals. 
//In JavaScript, depend upon abstractions, not concrete implementations. 
//This allows for loose coupling and flexibility in swapping out dependencies.

class Thor {
  constructor(weapon) {
    this.weapon = weapon;
  }

  unleashPower() {
    this.weapon.use();
    // Code logic for unleashing power
  }

  // More methods...
}

class Mjolnir {
  use() {
    // Code logic for using Mjolnir
  }
}

class Stormbreaker {
  use() {
    // Code logic for using Stormbreaker
  }
}

Congratulations, fellow Marvel enthusiast! By embracing the SOLID principles in JavaScript, you'll assemble code that rivals the Avengers. Remember Iron Man's code isolation, Captain America's adaptability, Spider-Man's interface agility, Black Widow's versatility, and Thor's decoupled code. These principles will empower you to create exceptional applications worthy of a superhero's praise.

Now, channel your inner superhero developer, apply SOLID principles to your JavaScript projects, and witness code that stands tall against any challenge. Unleash your superpowers and forge a better coding universe!

Happy Coding!

Leveling Up Your Git Skills: Game-Inspired Guide to Git Commands

Sriya — Sat, 17 Jun 2023 10:04:53 +0000

In the world of software development, version control is like the
ultimate power-up that allows developers to manage their codebase effectively. Git, a popular version control system, comes packed with powerful commands that can be a bit overwhelming for beginners. Fear not, fellow gamer! In this article, we'll dive into Git commands, explained in gaming terms to help you level up your skills and conquer your code repositories like a pro.

Git Init: Start a new game.

git init

Git Add: Collect power-ups before advancing.

git add <file-name>

Git Commit: Save progress like creating a checkpoint.

git commit -m "Save progress"

Git Merge: Team up with allies to achieve a common goal.

git merge <branch-name>

Git Push: Share your achievements with the gaming community.

git push origin <branch-name>

Git Pull: Update your game to play the most recent version.

git pull origin <branch-name>

Git Fetch: Scout for new content without merging changes.

git fetch

Git Cherry-Pick: Select the best moves to maximize success.

git cherry-pick <commit-hash>

Git Reset: Go back to a previous checkpoint or restart a level.

git reset <commit-hash>

Git Rebase: Refactor your storyline, creating a cleaner commit history.

git rebase <branch-name>

Git Clean: Clear out unwanted clutter in your working directory.

git clean -df

Git Diff: Identify differences between versions to strategize effectively.

git diff <commit-hash-1> <commit-hash-2>

Git Patch: Apply changes from a patch file to your code.

git apply <patch-file-name>

Git Config: Customize your game settings, including user information.

git config --global user.name "Your Name"
git config --global user.email "youremail@example.com"

Git Log: Review the history of your game, including commits.

git log

Git Show Commit: Display details of a specific commit in your game.

git show <commit-hash>

Git Stash: Temporarily save changes and revert to a clean state.

git stash save "WIP: Work in progress"

Git Checkout: Switch to a different branch like changing characters.

git checkout <branch-name>

Git Revert: Undo a previous commit and create a new checkpoint.

git revert <commit-hash>

Git Branch: Create new storylines or branches to explore different paths.

git branch <branch-name>

Git Remote: Connect to remote servers to collaborate with others.

git remote add origin <remote-url>

Git Clone: Start a new game by copying an existing repository.

git clone <repository-url>

Conclusion:
Congratulations, brave gamer! You've successfully learned key Git commands in a gaming-inspired format.

Remember, just like in gaming, practice and experience are key to mastering Git commands.

Happy coding!

JS Polyfills - Part 6 Curry, Memoise and Generator Functions

Sriya — Fri, 10 Feb 2023 13:57:31 +0000

Github Code: JS Polyfills

16. Curry
Currying: Transformation of function with multiple parameters to a sequence of single parameters is Currying. Currying just transforms the function, it will not call the function. Partial functions can be easily generated using currying.

Function: Curry(fn)
Description: A functional programming technique for transforming multiple parameter function to a multiple single parameter functions.
Code Sandbox: Curry

//A functional programming technique for transforming multiple parameter function to a multiple single parameter functions.
//In this example, the curry function takes a function fn as an argument and returns a new curried function curried. The curried function takes a variable number of arguments, stored in the args array. If the number of arguments passed to curried is equal to or greater than the number of arguments expected by fn, fn is called with the apply method, passing in the args array. If the number of arguments passed to curried is less than the number of arguments expected by fn, the curried function returns a new function that takes the remaining arguments and concatenates them to the args array. This allows us to partially apply the arguments to the function and return a new function that takes the remaining arguments. The returned function can be called multiple times until all the arguments have been provided, at which point fn is finally executed.
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    }
    return function (...args2) {
      return curried.apply(this, args.concat(args2));
    };
  };
}

// Usage example
function add(a, b, c) {
  return a + b + c;
}

const curriedAdd = curry(add);
const add5 = curriedAdd(5);

console.log(add5(10)(15));
// Output: 30

17. Memoise
Memoization: A functional programming optimization technique with a top-down, depth-first approach for caching/storing previous value/computation so that the computed value is never executed again when necessary.

Function: Memoize(fn)
Description: Memoize function takes another function fn as its argument and returns a new function that wraps fn
Code Sandbox: Memoize

//This function takes another function fn as its argument and returns a new function that wraps fn. The returned function caches the results of previous calls to fn using a simple JavaScript object cache. The cache key is generated by JSON.stringifying the arguments passed to the function. If a matching key is found in the cache, the cached result is returned. Otherwise, fn is called and its result is stored in the cache before being returned.
function memoize(fn) {
  let cache = {};
  return function (...args) {
    let key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    let result = fn.apply(this, args);
    cache[key] = result;
    return result;
  };
}

// A function to calculate the factorial of a number
function factorial(n) {
  if (n === 1) return 1;
  return n * factorial(n - 1);
}

// Memoized version of the factorial function
let memoizedFactorial = memoize(factorial);

// Calculating factorials
console.log(memoizedFactorial(5)); // 120
console.log(memoizedFactorial(5)); // 120 (returned from cache)
console.log(memoizedFactorial(6)); // 720

18. Generator Functions
Generator Function: Generator functions can be exited and reentered with saved context. These functions can mitigate callback hell and inversion of control. When generator functions are called, a generator object will be returned.
yield When the iterator's next() method is called, the generator function's body is executed until the first yield expression, which specifies the value to be returned from the iterator or, with yield*, delegates to another generator function.
next The next() method returns an object with a value property containing the yielded value and a done property which indicates whether the generator has yielded its last value, as a boolean.

Function: GeneratorFunction(fn* () { })
Description:Generator will return a function or nothing.
Code Sandbox: Generator Function

//This polyfill checks if the Symbol.iterator property is a function. If it's not, it defines the GeneratorFunction constructor, which is the constructor of a generator function, and sets its Symbol.iterator property to a function that returns an object with a next method. This next method simply returns an object with value set to undefined and done set to true, which is the expected behavior for an iterator that has completed.
(function () {
  if (typeof Symbol.iterator !== 'function') {
    let GeneratorFunction = (function* () { }).constructor;
    GeneratorFunction.prototype[Symbol.iterator] = function () {
      return {
        next: function () {
          return { value: void 0, done: true };
        }
      };
    };
  }
})();

Sources: MDN

Keep Learning!

JS Polyfills - Part 5 Promises (resolve, reject, all, race, then, catch, allSettled, any)

Sriya — Thu, 09 Feb 2023 06:26:12 +0000

Github Code: JS Polyfills
What are Promises ? Promise is an object that represents eventual completion or failure of an asynchronous operation.
Why we use them ? To avoid callback hell
Where can we use them ? We can use promises in different asynchronous operations such as fetching data from a server, setTimout, setInterval, reading files, fetching objects from server. Promises help in avoiding call back hell for async operations by allowing them to run synchronously which will return a promise that returns a value at some point in future.

15. Promise

Function: Promise(executor)
Description: Promise can have 3 states - Pending, Fulfilled and Rejected. The executor parameter will have a resolve and reject parameters. Based on the success or failure of the async operation, resolve ore reject are executed respectively.
Code Sandbox: Promise



// Promise: The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value
//The Promise.allSettled polyfill maps over the array of promises and returns a new array of promises that resolve with an object indicating the status(fulfilled or rejected) and the value or reason of each promise.
//The Promise.any polyfill returns a new Promise that resolves with the value of the first resolved promise in the array.If all promises in the array are rejected, the new Promise will be rejected with an error indicating that all promises were rejected.
/**
   * @param {Function} Promise
   * @param {executor} takes 2 func resolve and reject
   */
  //If no promise in window
if (!window.Promise) {
  //custom Promise function
  window.Promise = function (executor) {
    var me = this;
    me.status = 'pending'; //initial state of promise
    me.value = undefined;
    me.reason = undefined;
    //callbacks for resolve and reject
    me.onResolvedCallbacks = [];
    me.onRejectedCallbacks = [];

    // resolve function
    function resolve(value) {
      //update the status to resolved status and provide the value after resovle and execute all the callback functions provided
      if (me.status === 'pending') { 
        me.status = 'resolved';
        me.value = value;
        me.onResolvedCallbacks.forEach(function (fn) {
          //execute each callback function
          fn();
        });
      }
    }
    // reject function
    function reject(reason) {
      //update the status to rejected staus and provide the reason for the reject and execute all the callback functions provided
      if (me.status === 'pending') {
        me.status = 'rejected';
        me.reason = reason;
        me.onRejectedCallbacks.forEach(function (fn) {
          //execute each callback function
          fn();
        });
      }
    }

    try {
      executor(resolve, reject);
    } catch (e) {
      reject(e);
    }
  };

  //Custom resolve function - resolves a given value to a Promise
  window.Promise.resolve = function (value) {
    return new Promise(function (resolve) {
      //resolve value
      resolve(value);
    });
  };
 //Custom reject function - returns a Promise object that is rejected with a given reason
  window.Promise.reject = function (reason) {
    return new Promise(function (resolve, reject) {
      //reject with reason
      reject(reason);
    });
  };
  //Custom all function to resolve or reject multiple promises
  //all is a static method takes an iterable of promises as input and returns a single Promise.
  window.Promise.all = function (promises) {
    return new Promise(function (resolve, reject) {
      var results = [];
      var count = 0;
      for (var i = 0; i < promises.length; i++) {
        promises[i].then(function (result) {
          results[i] = result;
          count++;
          if (count === promises.length) {
            resolve(results);
          }
        }, function (error) {
          reject(error);
        });
      }
    });
  };
   //Custom race function - takes an iterable of promises as input and returns a single Promise. This returned promise settles with the eventual state of the first promise that settles
  window.Promise.race = function (promises) {
    return new Promise(function (resolve, reject) {
      for (var i = 0; i < promises.length; i++) {
        promises[i].then(function (result) {
          resolve(result);
        }, function (error) {
          reject(error);
        });
      }
    });
  };
   //Custom then function - immediately returns an equivalent Promise object
  window.Promise.prototype.then = function (onFulfilled, onRejected) {
    var me = this;
    var promise2 = null;
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : function (v) {
      return v;
    };
    onRejected = typeof onRejected === 'function' ? onRejected : function (r) {
      throw r;
    };
    if (me.status === 'resolved') {
      return promise2 = new Promise(function (resolve, reject) {
        try {
          var x = onFulfilled(me.value);
          if (x instanceof Promise) {
            x.then(resolve, reject);
          }
          resolve(x);
        } catch (e) {
          reject(e);
        }
      });
    }
    if (me.status === 'rejected') {
      return promise2 = new Promise(function (resolve, reject) {
        try {
          var x = onRejected(me.reason);
          if (x instanceof Promise) {
            x.then(resolve, reject);
          }
        } catch (e) {
          reject(e);
        }
      });
    }
    if (me.status === 'pending') {
      return promise2 = new Promise(function (resolve, reject) {
        me.onResolvedCallbacks.push(function () {
          try {
            var x = onFulfilled(me.value);
            if (x instanceof Promise) {
              x.then(resolve, reject);
            }
            resolve(x);
          } catch (e) {
            reject(e);
          }
        });
        me.onRejectedCallbacks.push(function () {
          try {
            var x = onRejected(me.reason);
            if (x instanceof Promise) {

              x.then(resolve, reject);
            }
          } catch (e) {
            reject(e);
          }
        });
      });
    }
  };
 //Custom catch function - object schedules a function to be called when the promise is rejected.
  window.Promise.prototype.catch = function (onRejected) {
    return this.then(null, onRejected);
  };
}

if (!Promise.allSettled) {
   //allSettled function - takes an iterable of promises as input and returns a single Promise
   Promise.allSettled = function (promises) {
    return Promise.all(promises.map(function (promise) {
      return promise.then(function (value) {
        return { status: 'fulfilled', value: value };
      }, function (reason) {
        return { status: 'rejected', reason: reason };
      });
    }));
  };
}

if (!Promise.any) {
  //any function - returns a single Promise
  Promise.any = function (promises) {
    return new Promise(function (resolve, reject) {
      var resolved = false;
      promises.forEach(function (promise) {
        promise.then(function (value) {
          if (!resolved) {
            resolved = true;
            resolve(value);
          }
        }, function (reason) {
          // do nothing
        });
      });
      if (!resolved) {
        reject(new Error('All promises were rejected'));
      }
    });
  };
}

// Example
function getData(url) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = function () {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.onerror = function () {
      reject(new Error("Network Error"));
    };
    xhr.send();
  });
}

// Example usage of Promise.allSettled
var urls = [
  'https://jsonplaceholder.typicode.com/posts/1',
  'https://jsonplaceholder.typicode.com/posts/2',
  'https://jsonplaceholder.typicode.com/posts/3'
];
Promise.allSettled(urls.map(getData)).then(function (results) {
  results.forEach(function (result) {
    if (result.status === 'fulfilled') {
      console.log(result.value);
    } else {
      console.error(result.reason);
    }
  });
});

// Example usage of Promise.any
var urls = [
  'https://jsonplaceholder.typicode.com/posts/1',
  'https://jsonplaceholder.typicode.com/posts/2',
  'https://jsonplaceholder.typicode.com/posts/3'
];
Promise.any(urls.map(getData)).then(function (result) {
  console.log(result);
}).catch(function (error) {
  console.error(error);
});

Sources: MDN
Keep Learning!

JS Polyfills - Part 4 Debounce & Throttle - Leading & Trailing options

Sriya — Wed, 02 Nov 2022 17:06:35 +0000

Github Code: JS Polyfills
What are Debounce and throttle ? They are techniques for optimizing browser performance in JS.
Why we use them ? These are for limiting the rate of function execution/API request
Where can we use them ? Input/button/window events, Searching/
Typeahead, Save as user inputs, hover actions, interactions while scrolling

11. Basic Debounce()

Function: debounce(function, delay)
Description: Schedules a trigger for an event after specific interval.
Lodash Implementation with more features
Polyfill JS, HTML, Usecase result: Basic Debounce

/**
   * @param {Function} customBasicDebounce
   * @param {Function} func
   * @param {number} millisec delay
   */

//What are we doing here? 
//1. Set the context
//2. If the timer exist, then clear the timer before calling the function
//3. If not, call the function
function customBasicDebounce(func, delay = 400) {
  //initalizing timer here - closure 
  let timer;
  return ((...args) => {
    //clearing timer before calling again for restricting multiple instances of timer
    clearTimeout(timer);
    //calls the function after delay
    timer = setTimeout(() => func.apply(this, ...args), delay);
  });
}

12. Debounce with leading & trailing options

Function: debounce(callback, delay, option={leading:false, trailing: true})
Description: In short, If leading -> Capture initial click after delay, if trailing -> Capture latest click after a delay
Polyfill JS, HTML, Usecase result: Debounce Leading & Trailing

/**
   * @param {Function} func
   * @param {number} delay
   * @param {boolean} option.leading
   * @param {boolean} option.trailing
   */
//What are we doing here? 
//1. Set the context and trailing arguments
//2. If not leading/trailing, return null
//3. If timer is done but leading is true, invoke the func execution
//4. If not, save the context for later execution
//5. clear the timer to avoid multiple timer instances 
//6. call the timer if trailing is true n trailing args exists
//7. Reset the timer and args
function customAdvancedDebounce(func, delay, option = { leading: false, trailing: true }) {

  let timer = null; // same like basic debounce
  let trailingArgs = null; // as we require last arguments for trailing 

  if (!option.leading && !option.trailing) return () => null; //if both false, return null

  return function debounced(...args) { //returns a debounced function

    if (!timer && option.leading) { // timer done but leading true
      func.apply(this, args); //call func
    } else {
      trailingArgs = args; // arguments will be the last args
    }

    clearTimeout(timer); //clear timer for avoiding multiple timer instances

    timer = setTimeout(() => {
      if (option.trailing && trailingArgs) func.apply(this, trailingArgs);  // trailingArgs is present and trailing is true

      trailingArgs = null; //reset last arguments
      timer = null; // reset timer
    }, delay);
  }
}

13. Basic Throttle()

Function: throttle(func, delay)
Description: Runs a given function just once in a given period
Lodash Implementation with more features
Polyfill JS, HTML, Usecase result: Throttle

/**
   * @param {Function} customBasicThrottle
   * @param {Function} func
   * @param {number} millisec delay
   */
//What are we doing here? 
//1. Set the context and trailing arguments
//2. If not executed before, execute now and update the context
//3. during exe, update the context and if trailing args exist, execute the function
//and reset the context and last args
//4. If executed, save the context for later execution

function customBasicThrottle(func, delay) {
  let lastRan = false, //last time the function got ex ecuted
      trailingArgs = null; //last arguments

  return function (...args) { //returns function
    if (!lastRan) { //if the function didnt get executed before
      func.apply(this, args) // call the function
      lastRan = true; //update the flag
      let timer = () => setTimeout(() => { //while executing 
        lastRan = false; //update the flag
        if (trailingArgs) { // if last arguments exist
          func.apply(this, trailingArgs); //invoke the function with those last arguments
          lastRan = true; //update the flag
          trailingArgs = null; //reset the arguments
          timer(); 
        }
      }, delay);
      timer(); 
    }
    else // if function got executed before
      trailingArgs = args //else update the last arguments with passed arguments
  }
}

14. Throttle with leading and trailing options

Function: throttle(callback, delay, option={leading:false, trailing: true})
Description: leading/trailing indicates function should be run at the beginning of the stream of events or the end.
Polyfill JS, HTML, Usecase result:Throttle with leading and trailing

/**
   * @param {Function} func
   * @param {number} delay
   * @param {boolean} option.leading
   * @param {boolean} option.trailing
   */
//What are we doing here? 
//1. Set the context, timer and trailing arguments
//2. if timer called within cooldown period, update context and save the trailing args for later execution
//3. If leading, execute the function
//4. If trailing, update context and save last args for later execution
//5. set cooldown period
//6. if trailing and the trailing args exist, invoke the timer, reset the cooldown period

const advThrottle = (func, delay, options = { leading: true, trailing: false }) => {
  let timer = null,
    lastRan = null,
    trailingArgs = null;

  return function (...args) {

    if (timer) { //called within cooldown period
      lastRan = this; //update context
      trailingArgs = args; //save for later
      return;
    } 

    if (options.leading) {// if leading
      func.call(this, ...args) //call the 1st instance
    } else { // else it's trailing
      lastRan = this; //update context
      trailingArgs = args; //save for later
    }

    const coolDownPeriodComplete = () => {
      if (options.trailing && trailingArgs) { // if trailing and the trailing args exist
        func.call(lastRan, ...trailingArgs); //invoke the instance with stored context "lastRan"
        lastRan = null; //reset the status of lastRan
        trailingArgs = null; //reset trailing arguments
        timer = setTimeout(coolDownPeriodComplete, delay) //clear the timout
      } else {
        timer = null; // reset timer
      }
    }

    timer = setTimeout(coolDownPeriodComplete, delay);
  }
}

Keep Learning!

JS Polyfills - Part 3 (Map, Filter, Reduce)

Sriya — Wed, 26 Oct 2022 16:02:22 +0000

Github Code: JS Polyfills
8. Map()

Function: map(callback, thisArg)
Usage: arr/obj.map(function(element, index, array) { /* … */ }, thisArg)
Description: creates a new array populated with the results of callback function on every element in the calling array.
Polyfill & test cases: Map

//function returns Array, Map will have callbackfunction
Array.prototype.customMap = function (callbackFunction) {
  const arr = [];

  for (let i = 1; i <= this.length; i++) {
    arr.push(callbackFunction.call(this[i], i, this));
  }
  return arr;
};

9. Filter()

Function: filter(callbackFn, thisArg)
Usage: arr.filter(function(element, index, array) { /* … */ }, thisArg)
Description: creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.
Polyfill & test cases:Filter

//function returns Array, filter will have callbackfunction
Array.prototype.customFilter = function (callbackFunction) {
  const arr = [];

  for (let i = 0; i <= this.length; i++) {

    (callbackFunction(this[i], i, this)) ? arr.push(this[i])  : null;
  }
  return arr;
};

10. Reduce()

Function: reduce(callbackFn, initialValue)
Usage: arr/obj.reduce(function(previousValue, currentValue, currentIndex, array) { /* … */ }, initialValue)
Description: executes a "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.
Polyfill & test cases:Reduce

// expects callback function called reducer and initial value
//Parameters - (function(previousValue, currentValue, currentIndex, array) { /* … */ }, initialValue)
// reducer call back is executed on every element of the array and reduces it to a single value.
Array.prototype.customReduce = function (reducerCallback, initial) {
  //previous value also called as accumulator will be either provided initial value or undefined if no previous value exists
  let previousValue = initial || undefined;
  for (let i = 0; i < this.length; i++) {
    //if accumulator exists and is not undefined then reducer callback is called otherwise previous value is set as current value
    (previousValue) ? reducerCallback.call(previousValue, this[i], i, this) : (previousValue = this[i]);
  }
  return previousValue;
}

Stay Tuned for Part 4 - Debouncer & Throttle
Keep Learning!

JS Polyfills - Part 2 (forEach, keys, Values, Entries)

Sriya — Sat, 22 Oct 2022 09:19:01 +0000

Github Code: JS Polyfills
4. forEach()

Function: forEach(callback, thisArg)
Usage: arr.forEach((ele, index, arr)=>{...}, this)
Description: callback function will execute on every element. But not for uninitialized elements for sparse arrays.
Polyfill: forEach

//function returns undefined
Function.prototype.customForEach = function (callback) {
  //this should point to array
  if(Array.isArray(this)) {
    for (let i = 0; i < this.length; i++) {
      //check if each element exists
      if(typeof this[i] !== 'undefined') {
        //callback will take element, index and array as parameters
        callback(this[i], i, this);
      }
    }
  }
};

5. Keys()

Function: keys(obj)
Usage: Obj.keys(anyobj)
Description: returns array iterator
Polyfill:Keys

//function returns Array Iterator
Array.prototype.customKeys = function () {
  let keys = [];
    for (let i = 0; i < this.length; i++) {
      keys.push(i);
    }
    // A generator function which returns a generator object( basically follows iterator protocol)
    // Why we use here? because the keys return array iterator
    // A yield will pause and resume the function (Basically will return the keys one by one until done becomes true)
    function* iterator() {
      yield* keys;
    }

    return iterator();
};

6. Values()

Function: values(obj)
Usage: Obj.values(anyobj)
Description: returns array iterator
Polyfill:Values

//function returns Array Iterator
Array.prototype.customValues = function () {
  let values = [];
    for (let i = 0; i < this.length; i++) {
      values.push(this[i]);
    }
    // A generator function which returns a generator object( basically follows iterator protocol)
    // Why we use here? because the values return array iterator
    // A yield will pause and resume the function (Basically will return the values one by one until done becomes true)
    function* iterator() {
      yield* values;
    }

    return iterator();
};

7. Entries()

Function: entries(obj)
Usage: Obj.entries(anyobj)
Description: returns array iterator
Polyfill:Entries

//function returns Array Iterator
Array.prototype.customEntries = function () {
  let entries = [];
    for (let i = 0; i < this.length; i++) {
      entries.push(i, this[i]);
    }
    // A generator function which returns a generator object( basically follows iterator protocol)
    // Why we use here? because the entries return array iterator
    // A yield will pause and resume the function (Basically will return the entries one by one until done becomes true)
    function* iterator() {
      yield* entries;
    }

    return iterator();
};

Stay Tuned for Part 3
Keep Learning!

JS Polyfills - Part 1 (call, apply, bind)

Sriya — Fri, 21 Oct 2022 12:53:45 +0000

Github Code: JS Polyfills
Any code we write, we always want it to be best and want it to work on every browser. But sometimes, our code might not work on older engines as they do on modern browsers. That's because the older engines don't understand latest features. So there's two ways we can tackle it. Use Transpilers & Polyfills.

Transpilers/Transcompilers are piece of software which can translates source code in modern/non-Javascript languages to javascript source code. Some examples are babel & traceur compilers for JS

What are Polyfills and origins:

Poly: Solved by any number of ways.
Fill: Can fill the holes in old browsers wherever needed with technology.
Polyfill/polyfiller is a piece of code/plugin used to provide functionalities on older browsers that do not natively support it or browsers which may implement same features in different ways.

Why not use these polyfills exclusively then? For better functionality and performance. Native implementations of APIs can do more and are faster than polyfills. And also not to reinvent the wheel.

What Libraries can I use for filling these holes:

Core js - includes needed features
polyfill.io - provides script with polyfills.

Where can I find browser support/compatibility details for different features:

https://kangax.github.io/compat-table/es6/ – for pure JavaScript. https://caniuse.com/ – for browser-related functions

Let's see how some of the functions we use extensively work under the hood!

1. call()

Function: call(thisArg, ...args)
Usage: fn.call(currentContext, arg1, arg2, argN)
Description: Does function borrowing ie; Borrow functions from other objects and use that data on other objects
Polyfill: Call

Function.prototype.customCall = function (currentThis = {}, ...args) {
  // check if current context is pointing to a function
  if (typeof this !== 'function') {
    throw new Error(this + 'cannot call')
  }
  currentThis.fnName = this;
  currentThis.fnName(...args);
};

2. apply()

Function: apply(thisArg = {}, ...args = [])
Usage: fn.call(currentContext, [arg1, arg2, argN])
Description: Just like call, does function borrowing but the arguments are passed as an array
Polyfill:Apply

Function.prototype.customApply = function (currentThis = {}, args = []) {
  // check if provided arguments is an array
  if (!Array.isArray(args)) {
    throw new Error(this + 'Invalid argument type')
  }
  // check if current context is pointing to a function
  if (typeof this !== 'function') {
    throw new Error(this + 'cannot call')
  }
  currentThis.fnName = this;
  currentThis.fnName(...args);
};

3. bind()

Function: bind(thisArg = {}, ...args = [])
Usage: fn.bind(currentContext, [arg1, arg2, argN])
Description: Returns a new function with new "this" context.
Polyfill: Bind

Function.prototype.customBind = function (...args) {
  const currContext = this;
  // Get all arguments except 1st as 1st is context 
  let params = args.slice(1);
  //Bind returns copy of the function & can have new args passed to the invoking function
  return function (...arguments) {
    //args[0] is the new context and new arguments provided while binding and invoking
    currContext.apply(args[0], [...params, ...arguments]);
  };
}

Stay tuned for Part 2
Keep learning!