DEV Community: Lakshya Thakur

A wild handleEvent appeared 😮 !!!

Lakshya Thakur — Sun, 11 Jul 2021 12:18:39 +0000

Let's say, we have a DOM element by the name of element and we want to add event listeners to it. How would you do so ?

Here are two ways which can come into mind :-

const handleClick = () =>{console.log('You can remove me later safely')}
element.addEventListener('click',handleClick);
element.addEventListener('click',()=>console.log('Try and remove me noob'));

Now when it comes to removing these event listeners, it's not possible to remove the second one since it's anonymous and for first one we can just do element.removeEventListener('click',handleClick);

What if I told you there is a way and a syntax you might not be familiar with when it comes to event listeners ?

Well here it is :-

const someObj = {
handleEvent: (e)=>console.log(`I am ${e.type} event`);
}

element.addEventListener('click',someObj);

And :-

Jokes aside, it's always been there. It's just less spoken about. And I came across this when I solved this StackOverflow question and my mind was blowwwwnn !!!

Also, You can just remove the event listener like so element.removeEventListener('click',someObj);

After finding this, I thought to myself that what if I make a bare minimum Handler class which can abstract the registration and unregistration bit and work on the same principle ?

And this is how it looks :-

class Handler {
  #element
  #eventMap = {}

  constructor(element, eventMap) {
    this.#element = element
    this.register(eventMap)
  }

  handleEvent(e) {
    this.#eventMap[e.type](e)
  }

  register(eventMap) {
    this.#eventMap = { ...this.#eventMap, ...eventMap }
    Object.keys(this.#eventMap).forEach((event) => {
      this.#element.addEventListener(event, this)
    })
  }

  unregister(event) {
    this.#element.removeEventListener(event, this)
  }

  unregisterAll() {
    Object.keys(this.#eventMap).forEach((event) => {
      this.#element.removeEventListener(event, this)
    })
  }
}

But what made me go for a class implementation ? Well now we know that we can pass an object to add/removeEventListener, we can have a custom Handler class inside which this will point to the object instance and come into use.

Let's look at a usage sample of this code :-

const handler = new Handler(element, {
  click: ()=>console.log('Yo I am clicky'),
  focus: ()=>console.log('FOCUS!!!'),
});

What the above does it that for element, it registers both the anonymous functions for respective events. And if you go further to register another function for click like so :-

  handler.register({
    click: () => console.log('Well I am new clicky')
  });

This will override the existing click function that we had without any worry of handling its removal and add this new anonymous function.

Now if you want to explicitly unregister the click function, how would you do so ?

handler.unregister('click');

So anonymous or non-anonymous, the Handler class will ensure that for each event type, only one function is registered for the same element. But what if I want to register multiple functions for same event type for the same element ?

Well in that case, you can create another instance of Handler class with same element and let it be responsible for it.

It's still a new concept to me and maybe I might have derived some wrong conclusions. But I will be more than happy to know more about it. Did you know this ? If so, have you used this ? Do you not prefer it ? Any bottlenecks ? Feel free to bash that comment section 💪.

You can go through this article for more insights into handleEvent.

Here is a codepen where you can play with this implementation :-

Thank you for your time :D

Implementing String repeat() function in JS

Lakshya Thakur — Fri, 09 Jul 2021 06:00:08 +0000

As per MDN,

The repeat() method constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together.

Now one might think that there is a really straightforward to implement this. Yes there is but if asked in an interview and you go with the straightforward way, they will be like :-

How do I know this ?

Because I got mehhhhd......

So that's why we are going to see few approaches to solve it. The real optimized approach was not intuitive to me and is still something I am trying to wrap my head around. But I came up with a middle-ground approach that works better than the meh!! one.

And once, again we will take a synonym for repeat.
Google time !!!!

replicate sounds cool.

Alright let's go implement String.prototype.replicate now :-

The Meh Approach

String.prototype.replicate = function(count) {
  let input = this;
  let result = "";
  for (let index = 0; index < count; index++) {
    result += input;
  }
  return result;
}

Meh explanation :-
We initialize result to "" and start a for loop in which we iterate till count and simply keep appending the input to the result variable. Very straightforward but meh!!.

Meh benchmark :-

100% slower with 108 operations per second compared to 9202566.4 operations per second. Let me cry in the corner.

The Little Less Meh Approach

String.prototype.replicate = function(count) {
  let input = this;
  let result = this.valueOf();
  for (var index = 2; index < count; index*=2) {
    result += result;
  }
  let remainingCount = count - index/2;
  return remainingCount > 0 ? result + input.replicate(remainingCount) : result;
}

Little Less Meh explanation :-

Let's consider the case of 'hey'.replicate(10) :-
- We have input initialized to this and result initialized to this.valueOf(). The valueOf() bit helps in decreasing the implicit conversion time that's happening whenever later result will be concatenated to itself.
- Now the for loop stuff -
  - index is intialized to 2.
  - index should be less than count
  - index should be multiplied each time by 2
  - result will be appended to itself each time in the iteration:-
    - result for index = 2 will become heyhey
    - result for index = 4 will become heyheyheyhey
    - result for index = 8 will become heyheyheyheyheyheyheyhey
    - index will become 16 which is greater than 10 and we exit the loop.
  - remainingCount will be 10 - 16/2 = 2;
  - When remainingCount will be greater than 0, we will recurse by calling input.replicate(remainingCount) and add its result to current result or simply return result.

Little Less Meh benchmark :-

76.79% slower with 2109699.5 operations per second compared to 9091332.85 operations per second. That's still relatively slower than the native one but way way way faster than what we had initially.

Earlier performing the repetitions itself was O(count) but now the same is somewhere down the line of O(log(x)+log(y) +....+log(k)) but not completely O(log(count)).

In 'hey'.replicate(10) scenario :-

First time, O(log(8)) work is done and then in next recursive step O(log(2)) i.e O(log(8) + log(2)). And if I am doing maths correct,

log(a) + log(b) = log(ab)

That means O(log(8) + log(2)) is O(log(16)) which is greater than O(log(10))(the optimal solution).

The legendary optimal solution I would have never landed upon without the internet

String.prototype.replicate = function(count) {
    let result = ''
    let pattern = this.valueOf();
    while (count > 0) {
        if (count & 1) 
            result += pattern;
        count >>= 1
        if (count) pattern += pattern;
    }
    return result;
};

Noob explanation :-
I am still trying to understand the intuition behind this solution but I think it's to do with the fact that every number can be represented in a binary form. So let's say count is 5 then it can be represented as 101 in binary. So it's possible for us to repeat the string count times by just resorting to binary calculations. If we try to differentiate between 4 and 5, we know there is an extra 1 in latter case. Now instead of seeing the above code as some binary work of art, replace count&1 by count%2!==0 and count>>=1 by count=Math.floor(count/2). What this means is that, whenever count is odd, we would want to save the pattern till now in result variable. What is pattern ? pattern is repeated concatenation of itself similar to our earlier algorithm so it will always repeat in powers of 2. It's necessary to take care of the situation when count is not divisible by 2 and store the current pattern in result as we go until count becomes 0.

Did you expect a better explanation ? I can't give it right now since I am a noob in binary land. But maybe somewhere in a parallel universe I invented this Algo and helped Brendan Eich get rid of typeof null -> object 🤷‍♂️.

Best benchmark yet :-

Still 29% slower ? WTH. But hey, I ain't competing with JavaScript engines here.

The Bonus MDN polyfill

 String.prototype.replicate = function(count) {
    var str = '' + this;
    count = +count;
    count = Math.floor(count);
    if (str.length == 0 || count == 0)
      return '';
    var maxCount = str.length * count;
    count = Math.floor(Math.log(count) / Math.log(2));
    while (count) {
       str += str;
       count--;
    }
    str += str.substring(0, maxCount - str.length);
    return str;
  }

Expected an explanation ? I don't care and you will see why 👇

The mandatory benchmark :-

99.94 % slower with 5211.6 operations per second compared to 8344361.29 operations per second. And there is definite reason why it is even slower than what I came up with. What I think is happening is that upto a power of 2 which is less than count, we use the same ideology as in the optimal solution for concatenating and doubling length of str every time. But after that for the remaining length, it uses substring and appends that to str again. It's the second step of substring which makes it a costly operation. Though it does better than the initial Meh solution of 108 ops/s, it's still no where near around the best optimal solution I found online or even mine 😎.

MDN : 0
Lakshya : 1

JK. The site is and hopefully remains a gold mine ❤️.

Here are the overall benchmarks :-

Have something to add on ? Feel free to

Thank you for your time :D

Implementing the DOM contains() method

Lakshya Thakur — Wed, 07 Jul 2021 04:55:36 +0000

As per MDN,

The Node.contains() method returns a Boolean value indicating whether a node is a descendant of a given node, i.e. the node itself, one of its direct children (childNodes), one of the children's direct children, and so on.

But wait, Node.prototype.contains(...) already exists. I want another name for our custom function. Let's google synonym of contains coz

Intense googling later......

Certainly we ain't going with swallow. I think includes would be cool as both Array and String have includes as well in their prototypes.

Before we proceed one important thing to know is that when adding new method to prototype and expecting to use it like so :-

document.includes(document.body),

the method should not be an arrow function so that document can be accessed inside the includes function via this keyword.

Alright then, let's implement Node.prototype.includes in 4 different ways :-

The recursive DFS

1 Node.prototype.includes = function(node){
2 const currentNode = this;
3  if(!currentNode)
4   return false;
5  if(currentNode===node)
6   return true;
7  let isNodeFound = false;
8 for(let index = 0;index<currentNode.childNodes.length;index++){
9    isNodeFound = isNodeFound || currentNode.childNodes[index].includes(node);
10   if(isNodeFound) return true;
11  }
12  return false;
13 }

Explanation :-

Line 2 to 4 - Set currentNode to this and If currentNode doesn't exist, simply return false.
Line 5 to 6 - if currentNode is equal to node return true.
Line 7 to 13 - Initialize isNodeFound to false. Then loop over childNodes of the currentNode and on each child, call the includes method again to check if they include the node element. If they do, isNodeFound will ultimately become true since it is being Orrrrrrd with the results coming from respective childNodes and reassigned to itself. Once isNodeFound is true, we don't need to loop over rest of the childNodes of currentNode and exit early by returning true else ultimately return false.

The iterative BFS

1 Node.prototype.includes = function (node) {
2 const queue = [];
3  let currentNode = this;
4  queue.push(currentNode);
5  while (queue.length) {
6    currentNode = queue.shift();
7    if (currentNode === node) return true;
8    if (currentNode.hasChildNodes()) {
9      queue.push(...currentNode.childNodes);
10    }
11 }
12  return false;
13 };

Explanation :-

Line 2 to 4 - Initialize an empty list as queue. Set currentNode to this and push (or enqueue to be specific) it.
Line 5 to 12 - While the queue is not empty, dequeue the currentNode from front of the queue (using shift here). If currentNode is equal to node then return true. Otherwise enqueue the childNodes of currentNode (using push here). Once we are out of the while loop, we have traversed all the nodes and can safely say that we couldn't find the node and return false.

Note - The above can be transformed to iterative DFS by using pop instead of shift and obviously for the sake of consistency, rename queue to stack.

Till now both the approaches followed the classic DS/Algo traversal with DFS and BFS.
We are now going to see 2 more approaches which take benefit of certain properties that are specifically applicable to DOM nodes.

LCRS (Left Child Right Sibling) form

1 Node.prototype.includes = function (node) {
2 const currentNode = this;
3 if (!currentNode)
4   return false;
5 if (currentNode === node) return true;
6 return !!(currentNode.firstChild?.includes(node) || currentNode.nextSibling?.includes(node))
7 };

Explanation :-

Line 2 to 5 -
- Initialize currentNode to this and if currentNode doesn't exist, return false.
- If currentNode is equal to node return true
Line 6 - DOM nodes not only have pointers to their childNodes but also to their sibling nodes as well as parent nodes. Here we are going to leverage the sibling factor for easy traversal. So, we can now check whether the current node's firstChild includes the node OR current node's nextSibling includes the node. Also notice the !!. That's because I have used the ? operator due to which we can end up with undefined || undefined condition or false || undefined condition where both evaluate to undefined which is a falsy value and so !! will ensure undefined coerces to false.

Using parentNode

1 Node.prototype.includes = function(node){
2 const currentNode = this;
3  while(node){
4    if(currentNode===node) return true;
5    node = node.parentNode;
6  }
7  return false;
8 }

Explanation :-

Line 2 to 7 - Remember DOM node being so attached to it's siblings and parent ? The latter one works well for this use-case as well. While node exists, we check if currentNode is equal to node and if it is we return true, else the node is made to point to it's parentNode for further comparisons. If we exit the while loop, it's safe to say that the node isn't a contained within the currentNode and thus, return false.

And here is a working codepen with all 4 implementations. Comment the rest for any one to reflect ✨.

Have more ways to implement the same ? Feel free to share your approach in the comment section 👇.

Thank you for your time :D

Determine if a BST is valid or not

Lakshya Thakur — Mon, 05 Jul 2021 06:56:38 +0000

This article is the first one in the Random DS/Algo series. The purpose of this series is to just act as random collection of DS/Algo problems I solved so that in future I might revisit what I explained to people on the Internet 🤷‍♂️.

This is one those questions that I always practice before an interview.

The leetcode problem statement goes like this :-

Given the root of a binary tree, determine if it is a valid binary search tree (BST).
A valid BST is defined as follows:

The left subtree of a node contains only nodes with keys less than the node's key.

The right subtree of a node contains only nodes with keys greater than the node's key.

Both the left and right subtrees must also be binary search trees.

There are 3 implementations that I know which can help us validate a BST.

Inorder traversal with extra space

One of the clean features of a BST is that if you do an inorder traversal of the same, you get the node values in a sorted order.


function isValidBST(root){
 const arr = [];
 helper(root,arr);
 for(let index = 0;index<arr.length-1;index++){
        if(arr[index+1]<=arr[index]){
            return false;
        }
  }
    return true;
}

function helper(root,arr){
    if(!root)
        return;
    helper(root.left,arr);
    arr.push(root.val);
    helper(root.right,arr);
}

Approach breakdown :-

Initialize an empty array arr.
Call helper(root,arr) which internally does :-
1. Traverse the BST in inorder fashion.
2. Push each root.val inside the arr.
Then we loop over the arr and for any index if an element is less than or equal to previous element, then we simply return false. This is because elements should have been strictly increasing as per the requirements.
Otherwise, we return true.

Inorder traversal without extra space

It's possible to do the above and exit early if there is an invalid BST without using extra arr space.


var isValidBST = function(root){
    const prev = helper(root,null);
    return prev.isNotValid ? false : true;
    }

function helper(root,prev){
    if(!root)
        return prev;
    prev = helper(root.left,prev);
    if(prev && root.val <= prev.val){
        prev.isNotValid = true;
    }
    if(prev?.isNotValid)
       return prev;
    prev = root;
    prev = helper(root.right,prev);
    return prev;
}

Approach breakdown :-

Let's consider helper(root,prev) first (prev represents previous node) :-
1. if(!root) return prev - If the root is undefined , we return the prev element.
2. prev = helper(root.left,prev) - We will first go through the left subtree for each root to find the prev element.
3. if(prev && root.val <= prev.val){ prev.isNotValid = true; } - Once we return from the left subtree , if prev exists, we compare root.val and prev.val to check if current root.val is less than or equal to prev.val. If it is, we create a property on prev by the name of isNotValid and set it to true.
4. if(prev?.isNotValid) return prev; - Next we check if this prev.isNotValid exists or not and if it does then we simply return prev to exit early and not further proceed for subsequent right subtree.
5. prev = root - This is how we set the prev value to root so that for next node we can use this prev value for necessary comparisons.
6. prev = helper(root.right,prev); - Going through the right subtree for each root to find the prev element.
7. return prev; - It's essential to return the prev to the calling function for value to reflect.
const prev = helper(root,null); - Inside isValidBST, we get the prev element from helper(root,null).
return prev.isNotValid ? false : true; - If prev.isNotValid exists then that means the BST is invalid and we return false else we return true.

Utilizing the BST property

In BST we can say that each node value will be more than it's left ancestor and less than it's right ancestor for it to be valid. This is what we are going to use now :-


var isValidBST = function(root){
       return helper(root,-Infinity,Infinity);
   }
function helper(root,leftMax,rightMax){
    if(!root)
        return true;
    if(root.val > leftMax && root.val < rightMax) {
        return helper(root.left,leftMax,root.val) && helper(root.right,root.val,rightMax);
    }
    return false;
}

Approach breakdown :-

Let's consider helper(root,prev):-
1. if(!root) return true; - If the root is undefined we can say that the BST is valid till now.
2. if(root.val > leftMax && root.val < rightMax) { return helper(root.left,leftMax,root.val) && helper(root.right,root.val,rightMax); } - This is the core logic where we compare root.val with leftMax and rightMax. Only if root.val is greater than leftMax and root.val is less than rightMax, we can proceed further to check for corresponding left subtree and right subtree and it's required that both of the subtrees need to return true for the BST to be valid. In case of left subtree, rightMax will change to current root.val and in case of right subtree, leftMax will change to current root.val.
3. If the above condition fails, then we know it's not further required to check for any subsequent left or right subtree and simply return false.
Inside isValidBST, we do return helper(root,-Infinity,Infinity); and pass leftMax as -Infinity and rightMax as Infinity as initial values for our root node.

Out of all the approaches the last one is really clean and I guess an interviewer might expect it. I have given interviews where the first approach was enough and interviewer didn't ask for any optimizations. But if they do, I might skip the second one and jump straight to the third one.

Also I have ignored the space taken by call stack due to recursion and well you never know I might update this article in the future with more approaches if i feel so

Thank you for your time :D

Implementing Pagination feature in Vanilla JS

Lakshya Thakur — Sun, 04 Jul 2021 08:01:45 +0000

Today we will implement a Paginator class which will have the following API :-

// Initialization
const paginator = new Paginator(totalRecords,recordsPerPage,visiblePages);

// Usage
paginator.getActivePage();
paginator.gotoFirstPage();
paginator.gotoPrevPage();
paginator.gotoPage(page);
paginator.gotoNextPage();
paginator.gotoLastPage();
paginator.getVisiblePagesRange();
paginator.getActiveRecordsIndices();

The Class blueprint :-

class Paginator {

  // Private class fields

  #totalRecords;
  #recordsPerPage;
  #visiblePages;

  #noOfPages;
  #activePage;
  #visiblePagesEndRange;

  constructor(totalRecords, recordsPerPage, visiblePages) {
  }

  // Public class functions

  getActivePage(){
  }

  gotoFirstPage() {
  }

  gotoPrevPage() {
  }

  gotoPage(page) {
  }

  gotoNextPage() {
  }

  gotoLastPage() {
  }

  getVisiblePagesRange() {  
  }

  getActiveRecordsIndices() {
  }

For all the explanations below, assume that totalRecords is 346, recordsPerPage and visiblePages are 6.

Let's start with the constructor :-

  constructor(totalRecords, recordsPerPage, visiblePages) {
    this.#recordsPerPage = recordsPerPage;
    this.#totalRecords = totalRecords;
    this.#noOfPages = Math.ceil(this.#totalRecords / this.#recordsPerPage);
    this.#visiblePages = visiblePages;
    this.#activePage = 1;
    this.#visiblePagesEndRange = visiblePages;
  }

Here we are initializing all our private class fields to certain values. #recordsPerPage, #totalRecords and #visiblePages straight away get initialized to passed constructor parameters.
We can get the #noOfPages by dividing #totalRecords by #recordsPerPage.
The #activePage as the name denotes is the page which will be active/selected in your pagination UI. It is initialized to 1.
The #visiblePagesEndRange will be equivalent to #visiblePages in the beginning and will help in maintaining a page range which comes into picture later on.

  getActivePage(){
    return this.#activePage;
  }

The above is a public function to return the private field #activePage.

  gotoFirstPage() {
    this.#activePage = 1;
    this.#visiblePagesEndRange = this.#visiblePages;
  }

The above is a public function to set #activePage to 1 and #visiblePagesEndRange to #visiblePages (just like in constructor).

  gotoPrevPage() {
    if (this.#activePage > 1) {
      this.#activePage -= 1;
      if (this.#activePage % this.#visiblePages === 0) {
        this.#visiblePagesEndRange = this.#activePage;
      }
    }
  }

The above is a public function which can used to decrement #activePage by 1 every time it is executed. Generally executed on a click of Prev button or a < UI icon.

The #activePage can only be decremented if it is greater than 1.
Also, suppose the #activePage is currently 7 and this function gets executed, #activePage will change to 6 and it's modulus with #visiblePages will be equivalent to 0. What this means is that the #activePage now belongs to a lower visible page range and it's necessary to reflect that by updating #visiblePagesEndRange by setting it equal to #activePage itself.

  gotoPage(page) {
    this.#activePage = page;
  }

The above is a public function which is used to set #activePage to the passed page parameter.

gotoNextPage() {
    if (this.#activePage < this.#noOfPages) {
      this.#activePage += 1;

      if (this.#activePage > this.#visiblePagesEndRange) {
        this.#visiblePagesEndRange += this.#visiblePages;
        this.#visiblePagesEndRange = Math.min(this.#visiblePagesEndRange, this.#noOfPages);
      }
    }
  }

The above is a public function which can be used to increment #activePage by 1 every time it is executed. Generally executed on a click of Next button or a > UI icon.

The #activePage can only be incremented if it is less than the #noOfPages.
Also, suppose the #activePage is currently 6 and this function gets executed, #activePage will change to 7 but also go out of bounds of current #visiblePagesEndRange so we will update that as well by an amount of #visiblePages so that #visiblePagesEndRange which was earlier 6 now becomes 12.
Again, #visiblePagesEndRange cannot exceed the #noOfPages and that's why if adding #visiblePages to it results in an out of bounds, we take that into consideration by taking the minimum as shown above.

  gotoLastPage() {
    this.#activePage = this.#noOfPages;
    this.#visiblePagesEndRange = this.#noOfPages;
  }

The above is a public function to set both #activePage and #visiblePagesEndRange to #noOfPages.

getVisiblePagesRange() {
    let beginningVisiblePage;
    let endingVisiblePage;
    if (this.#visiblePagesEndRange % this.#visiblePages === 0) {
      beginningVisiblePage = this.#visiblePagesEndRange - this.#visiblePages + 1;
    }
    else {
      beginningVisiblePage =
      this.#visiblePagesEndRange - (this.#visiblePagesEndRange % this.#visiblePages) + 1;
    }
    endingVisiblePage = this.#visiblePagesEndRange;
    return {
      beginningVisiblePage,
      endingVisiblePage
    };
  }

The above is a public function which is used to retrieve beginningVisiblePage and endingVisiblePage by the means of which you can generate the respective UI page elements dynamically.

For the beginningVisiblePage :-
- If #visiblePagesEndRange % this.#visiblePages is 0, then beginningVisiblePage can be set to #visiblePagesEndRange - this.#visiblePages + 1
- Otherwise, consider a scenario when the #visiblePagesEndRange will be 58 (this would happen in the last page range). Now 58 % 6 isn't 0 but 4. So we would need to subtract 4 from 58 and add 1 to it to get the correct beginningVisiblePage which will be 55. (Final page range is actually 55,56,57 and 58 for our current example).
The endingVisiblePage will always be equal to #visiblePagesEndRange.

  getActiveRecordsIndices() {
    let beginningRecordIndex = (this.#activePage - 1) * this.#recordsPerPage;
    let endingRecordIndex = Math.min(
      beginningRecordIndex + this.#recordsPerPage,
      this.#totalRecords
    );
    return { beginningRecordIndex, endingRecordIndex };
  }
}

The above is a public function which is used to retrieve beginningRecordIndex and endingRecordIndex by the means of which you can generate the respective UI record elements dynamically.

The beginningRecordIndex will be equal to #activePage-1 multiplied by the #recordsPerPage.
The endingRecordIndex will be minimum of beginningRecordIndex + #recordsPerPage and #totalRecords.

Below is a codepen where you can see the Paginator class in action. Here there is an additional #validate function which isn't important to basic implementation. And yes I haven't really applied the best CSS out there !!

I hope you enjoyed reading this piece :D. Also feel free to give any feedback. I just like to make something in vanilla JS every once in a while and not think too much about production readiness while making it. That's the part where you can come in and share your approaches.

Implementing a Star Rating component in Vanilla JS

Lakshya Thakur — Fri, 02 Jul 2021 13:24:17 +0000

Star Rating/Review UI is a common sighting across different sites on the Internet.

Today, we will implement a simple star rating component using Vanilla JS.

We are going to use Revealing-module-pattern here and our main module API would look like so :-

const ratingModule = makeStarRating();

ratingModule will expose two methods in the name of getStarComponent and getRating.

But before we go into the technical nitty-gritties of JS here, let's try to visualize how the HTML will look for this :-

<ul class="stcomp">
    <li data-rating="1" class="star" ></li>
    <li data-rating="2" class="star" ></li>
    <li data-rating="3" class="star" ></li>
    <li data-rating="4" class="star" ></li>
    <li data-rating="5" class="star" ></li>
</ul>

We will not actually use HTML to make this but the DOM APIs. Still it's good to pre-visualize how we are going to identify the rating value from each element and that is via the data-rating custom attribute which will be available to us as dataset.rating when using DOM APIs. Also CSS isn't the focus of this article. Though, it will available in the final codepen implementation.

So let's start by making a basic skeleton in JS for now :-

const makeStarRating = function (noOfStars = 5) {
  let rating = 0;
  let starComponent;

  function changeRating(newRating) {
    rating = newRating;
  }

  function getStarComponent() {
    if (!starComponent) {
     // create Star Component
    }
    return starComponent;
  }

  function renderChanges(rating) {
  // render UI changes as per rating passed
  }

  function getRating() {
    return rating;
  }

 function onMouseClick(){
  // click event handler
  }

function onMouseOver(){
// mouseover event handler
}

function onMouseLeave(){
// mouseleave event handler
}

  return { getRating, getStarComponent };
};

That's a skeleton alright !!!

So from the above you can see that we also have provided noOfStars (with default value of 5) as argument to makeStarRating which will be used by renderChanges(rating) later on.

So we have to first create a star component and return it if it's not already present. Here is how we can do it by implementing getStarComponent() :-

  function getStarComponent() {
    if (!starComponent) {
      starComponent = document.createElement("ul");
      starComponent.className = "stcomp";
      for (let i = 0; i < noOfStars; i++) {
        const li = document.createElement("li");
        li.setAttribute("data-rating", i + 1);
        li.className = "star";
        starComponent.append(li);
      }
      starComponent.addEventListener("mouseover", onMouseOver);
      starComponent.addEventListener("mouseleave", onMouseLeave);
      starComponent.addEventListener("click", onMouseClick);
    }
    return starComponent;
  }

Here we are basically creating an ul element and appending to it li, noOfStars times. And setting the data-rating attribute and className property of each li element. Finally adding the relevant code for registering event handlers. One important thing to notice is that we are making use of event delegation so that only our parent ul has one event handler (for each relevant event) which can take care of events bubbling from child li elements. The event bubbling is only beneficial for click and mouseover events. For mouseleave event we don't need it since we only want the rating to get reflected once we leave the parent ul container. And fun fact, mouseleave doesn't bubble !!

Now let's see how renderChanges(rating) will look like :-

  function renderChanges(rating) {
    for (let index = 0; index < rating; index++) {
      starComponent.children[index].classList.add("star-filled");
    }
    for (let index = rating; index < noOfStars; index++) {
      starComponent.children[index].classList.remove("star-filled");
    }
  }

The above is actually going to reflect our UI changes for the stars. We will have a class by the name of star-filled to highlight a star.

Up to the rating number, all the stars would be highlighted and after that all the stars will remain non-highlighted.

Now comes the part where our event handlers come into picture, the first one being, onMouseClick :-

function onMouseClick(e) {
    let star = e.target;
    let isStar = star.classList.contains("star");
    if (isStar) { 
      let { rating } = star.dataset;
      rating = rating === getRating() ? 0 : rating;
      changeRating(rating);
      renderChanges(rating);
    }
  }

Above we first check whether the target which is clicked is a star or not. If it is, we get the rating from the dataset property. Now we compare it with existing rating (via getRating()) and if both are equal, reset the rating to 0. Then we save this rating and render the changes.

We also want a hoverable star highlight feature for our component. We can achieve that via the combination of mouseover and mouseleave like so :-

  function onMouseOver(e) {
    let isStar = e.target.classList.contains("star");
    if (isStar) {
      const { rating } = e.target.dataset;
      renderChanges(rating);
    }
  }

  function onMouseLeave(e) {
    renderChanges(rating);
  }

Here inside onMouseOver , we just skip the check for rating and saving rating bit which we are earlier doing using changeRating(rating) inside onMouseClick. We only want to reflect these changes in the UI but not persist unless click action is performed.

And on mouseleave, just render the changes with the current saved rating (Bless you closures!!!).

And that's it for a simple implementation !!

We can use makeStarRating each time to give us new modules and each of such modules can call their getStarComponent to return the parent ul which can be appended to other containers.
Below is a working implementation of the same with keyboard focusing capabilities as well. I didn't cover it since that could be an overkill for a simple implementation but can surely be looked into. Roving tabindex is the technique which I have used which you can learn from here.

I am open to any feedback you have regarding the writeup or implementation. That's how I learn :)

Making a basic deepCopy function in JS

Lakshya Thakur — Mon, 14 Jun 2021 19:27:16 +0000

Important - If planning to read this article, do it completely as there are some corrections done later.

Okay let's start 👇

By default in JS, if we try to make a copy of an object, say obj, then either of the two helps us create Shallow copies :-

Object.assign({}, obj)
{...obj}

And the notorious yet popular JSON.parse(JSON.stringify(obj)) workaround can help us make a deep copy with the following limitations :-

If obj has methods, they won't be copied.
If obj has circular references, the above would simply throw an error.

This gives us an opportunity to make our own deepCopy function which can deal with the above limitations.

Let's dive into its epic creation via a conversation between Shalu and Deepu.

Shalu - I had a JS interview today and the interviewer asked me to build a custom deepCopy(obj) function to do guess what ? DEEP COPYING !!! But I only knew JSON.parse(JSON.stringify(obj)) workaround which clearly had limitations as pointed by the interviewer.

Deepu - Don't worry. We will try to implement our own basic deepCopy(obj) function which also takes care of those limitations. We will start simple, and gradually transform our function for the requirements. Take a look at this function :-

function deepCopy(obj) {
  const newObj = Array.isArray(obj) ? [] : {};
  for (const [key, value] of Object.entries(obj)) {
    newObj[key] = typeof value === 'object' ? deepCopy(value) : value;
  }
  return newObj;
}

Shalu - Well that's not gradual at all....

Deepu - Okay wait....

const newObj = Array.isArray(obj) ? [] : {};

Deepu - We are initializing newObj to an empty Array or a POJO (Plain Old JavaScript Object) on basis of whether obj is an array or not.

for (const [key, value] of Object.entries(obj)) {
    newObj[key] = typeof value === 'object' ? deepCopy(value) : value;
  }
  return newObj;

Suppose obj was { name:'Saitama', age:'26' }, then Object.entries(obj) would return an array[ ['name','Saitama'],['age','26'] ].

So we are looping over de-structured key-value pair from this array and performing a conditional check.

The check is that if type of value is object, then assign the result of deepCopy(value) to newObj[key] else just assign value itself.

Shalu - Wait a minute !!! We are calling deepCopy(...) from within deepCopy(...). Isn't that recursion ?

Deepu

This use-case requires recursion. We don't know how many layers of nested objects our main obj might have. We only know that if the corresponding value for a key is not of type object, we can safely put the same key-value pair in our newObj. For the rest, we need to call deepCopy(value) again.

Shalu - But wait !!! What about Functions ? They are also JS Objects only right ?

Deepu

They indeed are but their typeof is function. And this particular thing really works for us since we only need to assign these functions as value to a particular key and not worry about any nesting which is in the case of { } or [ ].

Shalu - So this is it right ?

Deepu - Well not quite yet. The above will fail tragically in the case of circular references.

Shalu

Deepu - Remember how we are recursing whenever the type of value is object ? Now consider that after 3 depths of recursion, we arrive at a key whose value is again the main obj i.e. there is a circular reference from a nested key to the main obj itself. This will result in an infinite loop of menace !!

Shalu - Oh damn!!! How would you handle this ?

Deepu - Well let's see what do we have at disposal. We need a mechanism to not recurse over already processed or seen object references.

Shalu - Cool so let's make a new obj, say , const seen = { } and use it as a dictionary.

Deepu - Well we need object references as key and { } only takes strings as keys.

Shalu

Deepu - We can make use of Map or Set here with the latter making more sense. And to take things up a notch, let's make use of WeakSet.

Shalu - Why WeakSet ?

Deepu - Because MDN says so !!

Functions that call themselves recursively need a way of guarding against circular data structures by tracking which objects have already been processed. WeakSets are ideal for this purpose.

Shalu - Alright I am excited for the final code

Deepu

 function deepCopy(obj) {
  const seen = new WeakSet();

  function logic(obj) {
    const newObj = Array.isArray(obj) ? [] : {};
    if (!seen.has(obj)) {
      seen.add(obj);
      for (const [key, value] of Object.entries(obj)) {
        newObj[key] = typeof value === 'object' ? logic(value) : value;
      }
    } else {
      return obj;
    }
    return newObj;
  }

  return logic(obj);
}

Shalu - Damn that's quite big now.

Deepu - Well the flow is still simple. What we now did is initialize a WeakSet by the name seen inside deepCopy(...). And since we always needed access to seen while recursing, we extract all our recursion logic inside this logic(...) function. Also note we have applied the check using seen for the obj reference and if it doesn't exist, we add it to seen. Else, we don't bother performing the for loop logic for it and return the obj as it is. At the end of deepCopy(...) function we call logic(obj) (which will internally recurse as needed) as well as return its result.

Shalu

Thank you everyone who read it till here. This is an implementation that I have tried without referring anything online with the mindset that how will I do this if asked in an interview. Obviously the flow will be the same minus the incredible gifs 😉 and you are free to evaluate me as an interviewer.

Correction

I got an important feedback from the comments that the above implementation doesn't clone the circular reference cycle successfully because I am returning the original obj when it's already present in seen. I should have been returning newObj corresponding to that obj here. For that, we would get rid of WeakSet altogether and use WeakMap instead like so :-

 function deepCopy(obj) {
  const seen = new WeakMap();

  function logic(obj) {
    const newObj = Array.isArray(obj) ? [] : {};
    if (!seen.has(obj)) {
      seen.set(obj, newObj);
      for (const [key, value] of Object.entries(obj)) {
        newObj[key] = typeof value === 'object' ? logic(value) : value;
      }
    } else {
      return seen.get(obj);
    }
    return newObj;
  }

  return logic(obj);
}

Possible enhancement - 1

 function deepCopy(obj) {
  const seen = new WeakMap();

  function logic(obj) {
    // Creating dynamic newObj using constructor
    const newObj = new obj.constructor();
    if (!seen.has(obj)) {
      seen.set(obj, newObj);
      for (const [key, value] of Object.entries(obj)) {
        newObj[key] = typeof value === 'object' ? logic(value) : value;
      }
    } else {
      return seen.get(obj);
    }
    return newObj;
  }

  return logic(obj);
}

BONUS - Fancy Reduce edit

function deepCopy(obj) {
  const seen = new WeakMap();

  function logic(obj) {
    if (!seen.has(obj)) {
      return Object.entries(obj).reduce((newObj, [key, value]) => {
        seen.set(obj, newObj);
        newObj[key] = typeof value === 'object' ? logic(value) : value;
        return newObj;
      }, new obj.constructor())
    } else {
      return seen.get(obj);
    }
  }

  return logic(obj);
}

Bare minimum Infinite Scroll UI

Lakshya Thakur — Tue, 02 Feb 2021 06:52:23 +0000

Infinite scrolling ui is implemented in many web apps today. So in an attempt to explore the same, I made a bare minimum codepen to achieve the same with two different implementations :-

📌 Using Scroll Position - Making use of scrollTop, offsetHeight and scrollHeight to know when to load the next items.

📌 Using Intersection Observer - Having a placeholder at bottom of the list and observing when it intersects with our list in view so that we can load the next items.

JavaScript Engine optimization during closure

Lakshya Thakur — Fri, 08 Jan 2021 13:20:50 +0000

TIL that Javascript engines optimize out unused variables available in outer lexical environment if they aren't used inside nested functions.

Earlier I used to think this is the default Spec behaviour but it's rather an optimization 💡.

In this video, we see how exactly Firefox confirms that for us !!

Singly Linked List implementation in JS + DOM visualization

Lakshya Thakur — Thu, 31 Dec 2020 09:08:11 +0000

My goto programming language solving an algorithmic problem has always been C++.

But few days ago I thought, let’s create a linked list in JS since that’s what I use in my day to day work.

I lost track of when the initial requirement transformed into visualizing the same using DOM APIs.

Functionalities:-
📌 Insert node at any position.
📌 Delete node using reference or delete single or multiple nodes using value.

That Next State button works using generator function which loops over a predefined operations list to be performed on this linked list and yields on each button click.

P.S. - Feel free to play around and implement more functionalities if you want.

Crazy Tabbing !!

Lakshya Thakur — Tue, 29 Dec 2020 13:16:18 +0000

This video is for all the web devs/enthusiasts who might be interested in knowing how basic keyboard accessibility using tab/shift+tab work across different sites.

This is more of a walkthrough through many sites where we will see some issues and some UX/accessibility blend.

Technical content :-

📌 How order or flex-direction for display:flex elements impacts accessibility ?

📌 What are skip links that you see on some websites ?

📌 Why outline:none alone impacts visualization of focused elements ?

📌 How box-shadow can be used in for more flexible focus ?

Sites covered

Dev : -

📌 GitHub

E-commerce : -

📌 Amazon
📌 Walmart
📌 Flipkart
📌 Myntra

Social media : -

📌 Twitter
📌 Facebook
📌 LinkedIn

Streaming : -

📌 YouTube
📌 Netflix
📌 Amazon Prime

Bonus : -
📌 Animeccha 😉

P.S. - Pardon me for using accessibility word where instead usage of outline would be better. It's a long video but I hope it's fairly insightful. Also this was created just for fun. There are people who work dedicatedly to tackle accessibility issues in much depth.

Building Animeccha - Epilogue

Lakshya Thakur — Thu, 24 Dec 2020 14:56:08 +0000

What I built

A web app where a user can scroll through some of my favorite anime scenes of all time !!

Category Submission:

Random Roulette: A fun treat for anime fans !!

App Link

https://animeccha.com

Screenshots

Desktop:

Mobile:

Specific Anime Screen:

Demo (Scrolling through the montage):

Description

There are basically three set of screens in this app.

The first one is the home page where all the anime cards are listed.
One can tap/click on the respective card and go to the next screen which consists of included montages for that anime.
Tap/Click on the montage card and post that loading animation, scroll through it's frames !!

Link to Source Code

https://github.com/lapstjup/animeccha (with that sweet deploy button 🚀)

Permissive License

MIT it is !

Background

I have been an anime lover for a long time. Watched my first one i.e. Dragon Ball almost 12 years ago and since then have watched a lot of awesome ones !!
There are a lot of scenes that just make you go DAMN that artwork and storyboarding !! and this app is my attempt to appreciate those.

How I built it

If you haven't checked out my previous blogs then do for awesome gifs and content, but for those who believe in TLDR, the following happened :-

Vanilla JS POC.
POC to full fledged React app with routes.
Deployment to Netlify and leveraging Netlify LMS.
Creating static image server for local development and migrating from Netlify LMS to DigitalOcean Spaces + Imagekit.io.
Migrating the App from Netlify to DigitalOcean App Platform.

This was really fun to build and I am thankful to this category's existence and of course, this HACKATHON 😇 !!

P.S. - I will keep adding on more Animes and montages as time permits 😁!!