DEV Community: Amit Khonde

Creating Skeleton Loading using HTML and CSS

Amit Khonde — Sat, 30 Oct 2021 08:03:35 +0000

TLDR;

Final version of working code: https://codepen.io/amitkhonde/pen/XWgjNeR

React CodeSandbox Link: https://codesandbox.io/s/skeleton-loading-demo-6dwee

React Github Link: https://github.com/amitkhonde/skeleton-loading-demo

Introduction

In today's web development world, making sure that the users are hooked to your website is the most important thing. And to achieve that, designers and developers come up with the most aesthetically pleasing UIs.

But, another thing that goes hand in hand with great UI is relevant information. With so much increase in the amount of data to process today, even the most powerful servers take a second to send back the data.

And this is the tricky part of engaging user experience. NOBODY LIKES TO WAIT. A recent study found out that a 1-second delay in the page load reduces customer satisfaction by 16%. And 46% of users do not revisit the websites with poor loading time.

To overcome this problem, UX engineers came up with the solution of Skeleton Loading. As the name suggests, skeleton loading shows the user a skeleton of what is going to come on the screen and how it is structured.

This serves 2 purposes:

The user is engaged via some cool animation.
Users know where to expect information because the skeleton shows where the content would appear.

In this post, we are going to look at how to create the skeleton loading effect using CSS animations. And as a bonus, I will link a CodeSandbox project and a Github repository on how I have used it in React. Let us get started.

Creating Skeleton Loading with HTML and CSS

First of all, let us see what our result will look like and then get to it step by step. For the purpose of learning, we will develop a user card which shows skeleton loading until the data is received.

Step 1: Adding HTML Markup

In this step, we are just adding the basic HTML markup you see in the above image. We have one parent div with a class user-card. This serves as the container for all content. Inside user-card, we have 3 elements.

div for user’s profile picture.
paragraph for user’s name.
paragraph for user’s email.

That is it. No fancy stuff here. Let us look at the code to understand it better.



<div class="user-card">
  <div class="profile-pic"></div>
  <p class="name"></p>
  <p class="status"></p>
<div>

Step 2: Adding Skeleton class CSS

In this step, we will be adding the CSS for our user-card and its children elements. For the user-card, we are adding some basic paddings and borders. And for each child, we are adding min-width and min-height.

Adding min-width and min-height properties to the children is very important because if the content is not present in any of the elements, they will remain empty.

Also in this step, we are adding basic styling for the skeleton class. This is the class that will take care of showing the loading animation. We are giving our skeleton class the background-color #A5A5A5. And adding an animation property animation: skeleton-animation 1s infinite ease-in-out which signifies 4 things:

The name of the animation.
Duration of the animation.
Frequency of the animation.
The transition timing function ease-in-out signifies that our animation will run slow at start and end.

On whichever element we want to show the skeleton loading animation, we have to add the class skeleton.

Let us take a look at what our current CSS looks like and in the next step, we will add the actual animation.



.user-card {
  padding: 8px 16px;
  border: 1px solid #a5a5a5;
  border-radius: 3px;
  max-width: 200px;
  text-align: center;
}

.user-card .profile-pic {
  height: 100px;
  width: 100px;
  border-radius: 100%;
  margin: auto;
}

.user-card .name, .user-card .status {
  min-width: 100px;
  min-height: 24px;
}

.user-card > * {
  margin: 16px 0px;
}

.skeleton {
  background-color: #a5a5a5;
  animation: skeleton-animation 1s infinite ease-in-out;
}

Step 3: Adding the animation

This is the final and the most important step. We are going the add the actual animation in this step. The name of our animation is skeleton-animation (as defined in the previous step). And in that animation, we are going to define the stages 0%, 50%, and 100%. The CSS in these stages defines how our element looks at that particular stage.

At 0%, we are setting the opacity to 0.2.
At 50% we increase the opacity to 0.5.
And at 100% we again bring back the opacity to 0.2.

Doing this will give our element a look like it is getting removed and added continuously. Which is the exact skeleton loading effect we want. Now enough with the theory. Let us check the code and jump to what the final version of our code will look like.



@keyframes skeleton-animation {
  0% {
    opacity: 0.2;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.2;
  }
}

Note: If you are unaware of the CSS animations, I highly recommend going through this MDN tutorial.

Final Code

Yay!! We are now done with all the steps and our skeleton loading is ready. Let us look at the final code and the result.

https://codepen.io/amitkhonde/pen/XWgjNeR

Bonus: How I used Skeleton in an Actual React Project

Now that we have learned the basics of how we can add the loading animation, here is a react example project where I have used this animation. In this project, I fetch the list of users from a dummy API and until that is done, skeleton loading is shown for an engaging user experience. Feel free to edit and improve the code.

React CodeSandbox Link: https://codesandbox.io/s/skeleton-loading-demo-6dwee

Conclusion

Well I know there are a lot of ways we can achieve the skeleton loading effect. And there are also many libraries available we can use for achieving this. But, in my opinion, it is very important that we know the basics of what we are using. Comment down below on how you have approached this problem in your projects. And if you want to learn more about Skeleton loading, check out the links provided at the end. Until then, Happy Coding!!

What is flatMap in JavaScript? And how made my code cleaner

Amit Khonde — Sat, 18 Sep 2021 08:32:27 +0000

Have you ever looked at a JavaScript in built function and said to yourself:

I understand what this is but I do not know where I can use this.

Well, this exact thought came to mind when I read about Array.flatMap(). So I started looking for its applications in my day-to-day coding and viola!! I found a use case. In this post, we will first see what Array.flatmap() is and then look at how I used it in a real problem.

What exactly is `Array.flatMap`?

FlatMap is a mix of two words which are derived from latin words blah blah blah...

Just kidding.

Array.flatMap is a mixture of two array methods Array.flat and Array.map. Individually,

Array.flat is used for flattening nested arrays. For example

const names = ['Amit', 'Karishma', 'Kunal', ['Pankaj', 'Rahee']];

console.log(names.flat());
// expected output: ["Amit", "Karishma", "Kunal", "Pankaj", "Rahee"]

Array.map is used for creating a new array by performing operations on each array element and returning a value. For example

const names = ['Amit', 'Karishma', 'Kunal', 'Pankaj', 'Rahee'];
const everyOneLovesDogs = names.map((name) => {
  return `${name} loves dogs`;
});

console.log(everyOneLovesDogs);
// expected output: ["Amit loves dogs", "Karishma loves dogs", "Kunal loves dogs", "Pankaj loves dogs", "Rahee loves dogs"]

So as you can guess, Array.flatMap maps an array and then flattens the nested arrays in the returned array. A quick example of flatMap looks like this:

const usersWithInterests = [
  {
    name: 'Amit',
    interests: ['Cricket', 'Music'],
  },
  {
    name: 'Karishma',
    interests: ['Drawing', 'Reading'],
  },
  {
    name: 'Pranav',
    interests: ['Crafting', 'Biking'],
  }
];

const interests = usersWithInterests.flatMap((user) => {
  return user.interests;
});

console.log(interests);
// Expected Output: ["Cricket", "Music", "Drawing", "Reading", "Crafting", "Biking"]

How I used `Array.flatMap` in a real-world problem?

I was working on a feature where I had to create a dropdown for categories for products. The actual response from getProducts API looks like this:

const response = {
  "status": "success",
  "products": [
    {
      "name": 'One Plus 7T',
      "categories": ['Technology', 'Mobile', 'SmartPhone'],
      "description": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
      "rating": '4.5'
    },
    {
      "name": 'MacBook Pro 2018',
      "categories": ['Technology', 'Computer', 'Laptop'],
      "description": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
      "rating": '4.8'
    },
    {
      "name": 'LG Monitor 221G',
      "categories": ['Technology', 'Monitor'],
      "description": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
      "rating": '4.3'
    }
  ]
}

The product object has categories as a key for which the values are stored in the array.

So I had to do 3 things

Get the categories from each product
Flatten that array
Get unique values from the array.

Instead of using 2 separate functions for first two tasks, i used one function: Array.flatmap. And then applied the set operation on that array to get unique values.

The final code snippet looked something like this:

const { products } = response;
const allCategories = products.flatMap((product) => {
  return product.categories;
});

const uniqueCategories = [...new Set(allCategories)];

console.log(uniqueCategories);
// Expected Output: ["Technology", "Mobile", "SmartPhone", "Computer", "Laptop", "Monitor"]

Conclusion

I hope now you folks can also apply Array.flatMap in cases where they fit and produce a cleaner code. For more such interesting tidbits, stay tuned in. Until then, Happy Coding!!

This article was originally published here. For more such interesting reads, visit my blog.

JavaScript Date Object Simplified

Amit Khonde — Mon, 05 Jul 2021 18:46:31 +0000

You must have heard many times that Objects represent real-world entities when learning about object-oriented programming. I think the JavaScript Date object is a great testament to this statement. Because date and time are some of the most fundamental entities of the world.

Date object in javascript represents a given point in time. It has everything you can associate with time. For example day, year, month, hour, minutes...

Although this striking connection with our daily lives, Date in JavaScript remains one of the most complicated and thus, feared topics. So much so that we have to rely on external libraries like Moment.js for the simplest tasks.

In this post, I have tried to simplify the Date object as per my understanding and the most common functionalities I use in day-to-day development. Let us get started...

Ways we can create the `Date` object

There are four ways we can create Date in JavaScript. All are useful in their own ways. Let us look at them one by one and when you will most likely use them.

Using empty constructor

const today = new Date();
console.log(today)
// Expected output: Tue Jun 29 2021 23:30:27 GMT+0530 (India Standard Time)

Using an empty constructor will create the current date and time. This is the most common way of creating a Date object. This will create the Date in the client's local timezone.

I generally use this way of creating the date when adding a new object. Like when creating a new TODO, I pass createdDate as a new Date().

Using milliseconds

const someDate = new Date(1122334455);
console.log(someDate)
// Expected output: Wed Jan 14 1970 05:15:34 GMT+0530 (India Standard Time)

We can use the date constructor to create a Date object based on the number of milliseconds passed since Jan 1st of 1970 UTC+0. Jan 1st of 1970 UTC+0 is considered as Unix Epoch Time.

So if you pass 24 * 60 * 60 * 1000 (which is 24 hours in milliseconds), you will get the date as Jan 2nd of 1970 UTC+0.

In most cases, this is the standard way of creating Date because it is easier to communicate with the backend. When you want to save or retrieve dates, the backend prefers Unix Epoch Time.

Passing each date entity separately

const someDate = new Date(2020, 11, 12, 18, 12, 50);
console.log(someDate)
// Expected output: Sat Dec 12 2020 18:12:50 GMT+0530 (India Standard Time)

We can also create a Date object by passing individual values of year, month, day, hours, minutes, seconds, and milliseconds.

If we omit any values, the Date constructor will take the default values for those parameters.

I rarely use this method of creating the Date object. Because I would prefer passing milliseconds to the constructor most of the time.

Note: month Integer value representing the month, beginning with 0 for January to 11 for December.

Passing the date string

const someDate = new Date('2020-04-11T10:20:30Z')
console.log(someDate)
// Expected output: Sat Apr 11 2020 15:50:30 GMT+0530 (India Standard Time)

The date constructor also accepts a string as a parameter and creates a Date object by parsing the date string. This I feel is the most dangerous way of creating the date. Because we have to be careful of the format of the date string.

Note: If you still want to use this method, as JavaScript officially supports a simplification of the ISO 8601 Extended Format, stick with YYYY-MM-DDTHH:mm:ss.sssZ.

Helpful methods in the `Date` object

Now that we know how to create the Date object, let us understand different methods on the date object. These common methods are useful in displaying dates or manipulating the dates.

There are also some static methods on the date constructor that are used as shorthands for common tasks.

getFullYear() returns the year part from the date. With setFullYear() you can set the year part. Setting the year will not affect any other part of the date.

getMonth() returns month part from the date object. And with its counterpart setMonth() we can set the month in the date.

Similarly, getDate() returns the current date and setDate() sets the date in the date object.

var someDate = new Date();
console.log(someDate);
// Expected Output: Wed Jun 30 2021 09:02:03 GMT+0530 (India Standard Time)

// Gets the day of the week
console.log(someDate.getDay());
// Expected Output: 3

console.log(someDate.getFullYear());
// Expected Output: 2021

console.log(someDate.getMonth());
// Expected Output: 5

console.log(someDate.getDate());
// Expected Output: 30

someDate.setFullYear(2020);
console.log(someDate);
// Expected Output: Tue Jun 30 2020 09:13:00 GMT+0530 (India Standard Time)

someDate.setMonth(6)
console.log(someDate);
// Expected Output: Thu Jul 30 2020 09:13:33 GMT+0530 (India Standard Time)

someDate.setDate(31);
console.log(someDate);
// Expected Output: Fri Jul 31 2020 09:13:55 GMT+0530 (India Standard Time)

Similarly, getHours(), setHours(), getMinutes(), setMinutes(), getSeconds(), setSeconds(), getMilliseconds() and setMilliseconds() are used for getting and setting hours, minutes, seconds and milliseconds respectively.

`Date.now()`

This method is used to get the current date and time as the number of milliseconds passed since Unix epoch time. The number of milliseconds returned by this method is referred to as the timestamp.

This is the most used method in my personal projects. This timestamp might even serve as id in some cases.

var someDate = new Date();
console.log(someDate.getTime());
console.log(Date.now());
// Expected Output:
// 1625024936606
// 1625024936606

// Date.now() is same as saying someDate.getTime()

Converting `Date` to another timezone

Most of us work on applications that are used by a global audience. And it is our duty as web developers to make our content accessible for all users. Localizing the date is a big part of this and it makes for a great user experience. This is why converting dates to different timezones is one of the common tasks we perform on the Date object.

Let us understand this through an example.

const today = new Date(1625061658610);
const timeZone = 'America/New_York';
const dateOptions = {
  timeZone: timeZone,
  weekday: 'long',
  month: 'long',
  day: 'numeric',
  hour12: true,
  hour: '2-digit',
  minute: '2-digit'
};

console.log(today.toLocaleString("en-US", dateOptions)); 
// Expected output: Wednesday, June 30, 10:00 AM

If you want to read more about Date.toLocalString(), please check this W3 School link

Conclusion

Well, this is mostly all that we need to know about working with the JavaScript Date object. Of course, there is a lot more to it and I hope this basic understanding helps you to learn more complex stuff.

If you have anything more than what I have covered, comment down below. Until then, Happy Coding!!

Photos by Estée Janssens

This article was originally published here. For more such interesting reads, visit my blog.

What is a closure in JavaScript and when to use one?

Amit Khonde — Mon, 21 Jun 2021 18:37:44 +0000

Can you explain what is a closure in JavaScript?

This is without a doubt one of the most popular questions in front-end interviews. There is a 99% chance you have faced this question in your JavaScript interviews round.

And it is justified.

The closure is such a non-trivial concept that you might have already used it without realising it.

We will see some real development scenarios that involve closures, but first, let us understand what closure actually is.

What are closures in JavaScript?

The entire concept of closures is based on scopes. And scopes decide where can we access a variable or function in our program. As simple as that. Scoping defines which parts of your code can access what. Take a look at the example below to understand scoping better.

// Variable a has access everywhere because
// it is defined globally.
var a = 10;

function print() {
  console.log(a);

  // Variable b has access inside this function because it is defined inside
  // the function. If b is accessed outside function print, it will give an error.
  var b = 20;

  if (true) {
    // Variable c has access inside this if block only because it
    // is defined inside the block using let.
    // If c is accessed outside the if block, it will give an error.
    let c = 30;

    console.log(a, b, c);
  }

  // This line will give an error as we are trying to
  // access c outside its scope
  console.log(c);
}

console.log(a);

print();

Now that we are clear on scopes, let us see how JavaScript handles scopes.

JavaScript follows lexical scoping. This means that, when accessing a variable, if it is not found in the current scope/block, JavaScript will check the parent scope.

And if still not found, JavaScript will check the parent's parent scope. This way, that variable is searched all the way up to the scope hierarchy. And if not found, JavaScript throws an error.

In the case of the previous code snippet, when we are accessing variable a in the if block, it is not present there. So JavaScript goes all the way up to the global scope and gets the value of a.

Now we have enough ground to learn closures.

A closure is function bundled with its lexical scoping.

To put it in simple words, when a function is accessing variables from outside of its scope, the function and those variables form a closure.

Why do they form a closure? — Because, when that function is executed, even if the parent scope has finished executing, it will still need those variables. This typically happens when we are returning functions from functions.

Let us look at an example to understand this better.

function outerFunction() {
  var outerVariable = 'I was in outer scope and now I am in closure with innerFunction';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const returnedFunction = outerFunction();
returnedFunction();

Let us dissect what is happening here:

outerVariable is declared in outerFunction 's scope.
innerFunction uses outerVariable and it is returned without executing.
When line number 11 is executed, scope for outerFunction is vanished.
But when we execute returnedFunction, it still prints value of outerVariable
So what happened is: innerFunction was returned with variables from the outer scope bundled together. So in other words, a Closure was returned.

THAT'S IT!! That is all you need to know about closures. Of course, there are some other complicated examples. It will be easier for us to understand those now.

One important caveat with closures is that closures hold references to variables from the parent scope. Not the values. So functions with closures can change values and get updated values. This will be useful in other real examples listed below.

Real-world applications of closures

As I mentioned earlier, you might have used closures without realizing it. Following are some use cases I have encountered where closure was a better solution.

Writing your own debounce function
Writing your own throttle function
Implementing private variables
Maintaining states

This article was originally published here. For more such interesting reads, visit my blog.

Explain to me like I am 5: Debounce vs Throttle

Amit Khonde — Sat, 05 Jun 2021 15:28:41 +0000

Debounce and Throttle are two of the most widely used concepts in web development today. Every popular JavaScript helper library today includes these two functions. Unfortunately, a lot of us are still confused about the actual difference between these two. I myself suffered this confusion until recently when I faced this problem in an interview. So I decided to write about debounce vs throttle in the simplest way where a 5-year-old can understand the difference.

To understand the following explanations, imagine you are a 5-year-old who loves eating chocolates and have to ask your parents for it. Now let’s dive into how your mom and dad both handle this situation.

Throttling

We all know that eating chocolate is very unhealthy for our bodies. That is why your mom has set a rule where she will give you the chocolate only if a day has passed since you had your last chocolate. To put in simple words, whenever you ask your mom for chocolate, there are two possibilities:

If you have had chocolate in the last 24 hours, mom will ignore your request.
Else, you will get a chocolate.

Now let us see how this fits in the programming world. If you call a throttled function, it will check if the desired amount of time has passed since the last execution. If yes, the function will be executed. Else it will return without executing.

The following image shows a timeline of calling a throttled function. The scale represents time in seconds. Imagine you are calling the throttle function each second and your throttle time is 5 seconds. So throttled function will be executed in 5 seconds intervals.

Debounce

Your dad, on the other hand, wants to teach you the value of patience. He believes that you understand the value of something only if you have the patience to wait for it. To achieve this, your dad has set a rule where whenever you ask for chocolate, he will give you the chocolate after exactly one day. But, if you ask for chocolate within that hour, he will start time from 0 again. To put in simple words, whenever you ask your dad for chocolate, there are two possibilities:

Your dad will set a timer for 24 hours and will give you the chocolate at the end of it.
If you ask again while this timer is going on, your dad will start the timer from 0 again.

Similarly, if you call a debounced function in the programming world, your function will get executed in a certain amount of time. But if you call the function again within that time, the previous call is canceled and the function is executed after the desired time starting now.

The following diagram shows a timeline of debounced calls. Each number on the scale represents a second and your desired debounce time is 5 seconds.

Conclusion

I hope you are now clear on the topic of debounce vs throttle. If you want to learn more about how you can write your own debounce and throttle, you can refer to these posts

Until then, Happy Coding!!

This article was originally published here. For more such interesting reads, visit my blog.

Eval is evil - Why we should not use eval in JavaScript

Amit Khonde — Fri, 04 Jun 2021 05:14:08 +0000

Eval is evil. - Some frustrated JavaScript engineer

I recently read this quote on the internet and although it is funny, it got me thinking why would someone say this? Thus this post. In this post, we will see why we should not use eval in JavaScript.

Introduction to eval

To understand why to avoid eval, we first need to understand what eval is. We are not going deep into what eval is and why it exists. We will see its definition and a simple example. If you want to learn more about eval, here is a great post on MDN.

The eval() function evaluates JavaScript code represented as a string.

Eval is a function in JavaScript that expects a string as a parameter and executes that string as code. If you pass an expression to it, it will execute that expression. If you pass multiple JavaScript statements to it, it will execute those statements. As simple as that. Let us check an example to understand more.

console.log(eval('2 + 2'));
// Output: 4

Why not use eval?

After learning about the eval, you might be wondering why this post is against using eval? After all, it is such a powerful feature.

But as we all know, Great power comes at a cost. In eval’s case, the costs are performance, security, and difficulties in debugging. Let us look at them one by one.

Performance

As we can see, the string passed to eval for execution is dynamic. So there is no way our JavaScript code knows about this string. That is why, when JavaScript wants to execute this string, it has to interpret/compile that string at runtime. This tends to be very expensive in terms of performance if the string is complex.

Security risks

Usage of eval involves pretty high risks of running malicious code. Let us say you are accepting an expression from the user in an input box. And some mischievous user types in an infinite loop. This is going to be very dangerous especially if eval is used on the server-side.

Difficulties in debugging

Let us all admit that we have spent hours debugging the smallest bugs like missing semicolons. Imagine finding bugs that are caused by the dynamic code that JavaScript is trying to execute. If the eval is causing some side effects in your runtime environment, it gives us very little room for finding the issues.

Are there any other alternatives?

Fortunately, there is an alternative with window.Function which will almost do the same thing. But this is a simple alternative. There are things that are only possible with eval. But be sure to be very careful when using eval and only use it if it is an absolute necessity. You will probably find better alternatives on StackOverflow.

This article was originally published here. For more such interesting reads, visit my blog.

JavaScript Interview: Write a custom reduce function

Amit Khonde — Thu, 20 May 2021 14:42:32 +0000

What is this series about?

Hello all! Welcome to the JavaScript interview questions series. In each post of this series, I will talk about the questions (specific to JavaScript) I faced in my recent interviews. This series will be helpful for you if you are preparing for JavaScript interviews or just started to deep dive into JavaScript and want to test your knowledge.

Post 3: Write your own custom reduce function

In today’s modern web development, a lot of us work on pretty modern tech stacks like React or Vue, or Angular. But in web development, a lot of projects today still function on legacy code and need active work. This is why, writing custom functions or polyfills for new JavaScript features is a popular interview question. Also, writing our own version of something that we use every day makes the concept easy and quick to grasp.

In one of my interviews, the interviewer asked me to write a custom function for Array.reduce(). Before diving further into this post, we must understand what Array.reduce() does. Here is a great post on MDN blog on what reduce does.

Now that we are all set, let us dive into writing our own reduce function. 💻 ⚔️

Question

Write a custom function like Array.reduce().

// Existing Array.reduce() function
const array = [10, 20, 30, 40];
const reducer = (accumulator, currentValue) => {
  return accumulator + currentValue;
}
const result = array.reduce(reducer);
console.log(result);
// expected output: 100


// Your code goes here
function customReduce(arr, reducer, initialValue = 0) {
  // Write Code
}

const customResult = customReduce(array, reducer, 0);
console.log(customResult);

Before diving into the solution, I highly suggest that you try to solve this problem on your own. Here is a hint: Think about what reducer expects and what does it return?

Solution

As always, we are going to start with the least and do the obvious stuff first. So we can see that our custom function needs to return the final value.

function customReduce(arr, reducer, initialValue = 0) {
  var value;

  return value;
}

Further, for each array element, our customReducer function needs to call the reducer function (passed in as a parameter). The reducer function expects following parameters:

The return value from previous execution.
Current array element
Current index
The array itself

function customReduce(arr, reducer, initialValue = 0) {
  var value;
  for (let i = 0; i < arr.length; i++) {
    value = reducer(value, arr[i], i, arr);
  }

  return value;
}

Now you might be wondering what will happen to the intialValue? Well, we want intialValue to be the value passed to the first execution of the reducer function. We can do that by assigning that intialValue to value. So the final version of the customReduce function will look like this.

Edit:
As rightfully pointed by @kennethlum , if the initialValue is not passed, we should consider first element of the array as the initialValue.

function customReduce(arr, reducer, initialValue = null) {
  if (initialValue === null) {
    initialValue = arr[0];
  }

  var value = initialValue;
  for (let i = 0; i < arr.length; i++) {
    value = reducer(value, arr[i], i, arr);
  }

  return value
}

Conclusion

Yay!! This looks like a working solution for now. I would love to know what approaches you can come up with for this problem. Do post your suggestions in the comments. And for more interesting questions like this, keep following this series. Until then, Happy Coding!!

JavaScript Interviews: Implement Memoization in JavaScript

Amit Khonde — Fri, 14 May 2021 16:47:25 +0000

What is this series about?

Post 2: Implement Memoization in JavaScript

Imagine you do not have a memory inside your brain. And someone asks you a question like, "What is 14353 * 34789?". You do the calculation and give the answer. Because you do not have any memory, this question and its answer have been wiped out of your mind. Now again if someone asks you the same question, you will again do the calculation and give the answer. Doing this calculation is tedious and it used some of your energy. Isn't this frustrating?

Now let us come to the real world. You have the memory. Someone asks "What is 14353 * 34789?". You do the calculation and give the answer. Now, this question and answer are stored inside your short-term memory. If again in few seconds, you are asked the same question, you will directly access the memory and give the answer without any calculation.

This technique is known as Memoization. In computer science also, this technique is used to avoid heavy calculations. Now enough of imagination. Let us dive into the real interview question. 👨‍💻👨‍💻

Problem Statement

Write a function memoize which will receive a function and return its memoized version. When the memoized function is called with the same parameters, again and again, it will just log the value with a message "Did not perform calculations. Here is your answer: ". If those parameters have never been passed, it will just print the answer.

function memoize(fn) {
  // Write your code here
}

function multiply(num1, num2) {
  return num1 * num2;
}

const memoizedMultiply = memoize(multiply);

memoizedMultiply(9, 10);
// Expected Output: 
90

memoizedMultiply(9, 10);
// Expected Output: 
Did not perform calculations. Here is your answer: 90

memoizedMultiply(8, 10);
// Expected Output: 
80

Before diving into the solution, I highly suggest that you try to solve this problem on your own. Here is a hint: Think Closures.

Solution

As mentioned in the previous post, I always start with the basic stuff being asked in the question. The problem statement tells us that we have to return a function that will call the function that we want to memoize and print the result. Let us write that part first.

function memoize(fn) {
  return function(...args) {
    const result = fn(...args);
    console.log(result);
  }
}

Great. The next thing problem asks us to memoize the result if we pass the same parameters to the memoized function. This seems like a good opportunity to use Closures. If you are unfamiliar with closures, please read about them here. With the help of the closure, our returned function will have to the variables declared in its parent scope. Let us add the Closure now.

function memoize(fn) {
  var argumentsMap = {};
  return function(...args) {
    const result = fn(...args);
    console.log(result);
  }
}

The idea we are trying to follow here is:

When the memoized function is called, we will store the arguments in the argumentsMap as keys and store the result for that argument as its value.
If the function is called for the same parameters, we will check if argumentsMap has the parameters as key. If yes, will directly get the value and not perform any calculations.

The obvious question here is that how will we store the arguments as a key in argumentsMap? For that, I have chosen an approach where I will apply JSON.stringify on arguments and then store them as keys. You can come with a different approach for this which you might think is better. I Would love to see what you think about how this can be done. Please share your approaches in the comments.

With that sorted out, the rest of the code is very simple. We will just add few checks and print the results. The final version of my answer looks like this:

function memoize(fn) {
  var argumentsMap = {};
  return function(...args) {
    const argumentKey = JSON.stringify(args);
    if (argumentsMap[argumentKey]) {
      console.log('Did not perform calculations. Here is your answer: ', argumentsMap[argumentKey]);
      return;
    }
    const result = fn(...args);
    argumentsMap[argumentKey] = result;
    console.log(result);
  }
}

Conclusion

JavaScript Interviews: Create a deep copy of an object

Amit Khonde — Fri, 30 Apr 2021 14:13:01 +0000

What is this series about?

Post 1: Create a deep copy of an object

Many of us who have worked on any fairly large side projects or have contributed to other side projects must have come across JavaScript helper libraries like Lodash.js, Underscore.js. These libraries provide us with helper functions for things that JavaScript does not provide built-in. One of those functions is copying objects in JavaScript. A lot of us know how to copy objects which only have one level of nesting by Object Destructing. But if your object contains multiple nested levels, there is no in-built way in JavaScript to copy that object.

A lot of you might be wondering why this question is asked? If we have the helper library, why not just use that? And you are absolutely right. We should use that and we do use them indeed. But writing such a core function is going to test how you grasp and apply things fundamentally. As we will see later in this article, this question tests how you apply the knowledge that you already have. So let us get into some problem-solving mode 👨‍💻⚔️.

Problem Statement

Write a function that will take an object as an argument and returns a deep copy of that object.

// Signature
function copyObject(source) {

}

// Usage
const source = {
    a: 10,
    b: 20,
    c: {
        d: 30
    }
}

const target = copyObject(source);

Before diving into the solution, I highly suggest that you try to solve this problem on your own. Here are some hints:

Forget about the nesting part. First, just try to copy each key and value.
Now think about how you can identify if a value is an object itself and what to do with it.

Solution

When I am solving any problem, I always like to write the obvious things first. Those things can be found by reading the problem statement carefully. The very obvious thing that the question asks is to return an object. So let us write that down first.

function copyObject(source) {
    var target = {};

    return target;
}

Now, the problem asks us for a deep copy of the object. But before directly jumping to deep copy, let us first write a simple solution for copying each key value for a single level of nesting. So what do we need for that?

We need all the keys from the source object
Add all those keys one by one in the target object.

function copyObject(source) {
    var target = {};
    const keys = Object.keys(source);
    keys.forEach(key => {
        target[key] = source[key];
    });

    return target;
}

Great! So we have solved the problem for the simplest use case. Now let us think about nesting. So first of all, how will we know if the value corresponding to the current key is an object itself? By using typeof operator. And when we know that the current value is an object, how can we get its copy? --> By using the function that we are writing. I know this might sound confusing right now. This technique is known as Recursion (You can learn more about recursion here). Let us just write the code and you will understand. So the final solution to the problem will look like this:

function copyObject(source) {
    var target = {};

    // Getting source object keys
    const keys = Object.keys(source);
    keys.forEach(key => {
        // Checking if current value is an object
        if (typeof source[key] === "object") {
            // Calling our function recursively for current value
            target[key] = copyObject(source[key]);
        } else {
            // Directly assigning the value
            target[key] = source[key];
        }
    });

    return target;
}

Conclusion

Yay!! This looks like a working solution now. But there are still minor problems with this solution like handling array and function values in objects. I would encourage you to write the code that will handle these conditions and post it in the comments. And for more interesting questions like this, keep following this series. Until then, Happy Coding!!

JavaScript Internals - Ignition and TurboFan

Amit Khonde — Tue, 13 Apr 2021 15:38:56 +0000

What is this series about

Understanding the things or tools that you use in your daily work is a very crucial part of doing things effectively. As a frontend engineer JavaScript is the tool that we use on an almost daily basis. So it is non-trivial that we understand some internals of JavaScript to do our tasks more effectively.

With this in mind, I am excited to create JavaScript Internals as a series of posts where I will be writing about the internal workings of the V8 engine and how we can write code that is compiler friendly and in turn performant.

Post 4: Ignition and TurboFan

Let me start this post by asking you this question: When was the last time you knowingly type-checked variables in your JavaScript Application? OR When was the last time you thought about adding or removing a key to/from a JavaScript object at runtime? Most of us do not remember, right? This is because of the freedom that JavaScript gives us to do almost anything in the language. Some weird examples of this freedom are:

Passing any arguments to the functions
Checking any bizarre combinations of values for equality
Assigning different types of values to a single variable in the same runtime
And many more... The list goes on. I am sure all of us can come up with many other "uses" of this freedom. But let us get one thing straight. Nothing in this world is for free. In our case, it comes with poor performance problems. Before diving into the details of how JavaScript Engines handle this, let us first understand why this results in poor performance. So as all of us know in some capacity or other, Every code has to be converted to bytecode for execution. So when a piece of code in a statically typed language (languages that have in-built types. For example C++) is getting compiled, the compiler already knows the type of each and every variable being used and hence can make fancy optimizations about the sizes, memory locations, etc. But in the case of JavaScript, the engine does not know which value is going to be inserted in the variable and hence can not make any optimizations based on variables or functions. A demonstration of this can be seen in the following code: ```javascript

var obj = {
x: 20
};

console.log("Adding 1 to x ");
obj.x += 1;
console.log("Incremented value of x", obj.x);

obj.x = "Hello";
console.log("Appending 'World' to x");
obj.x += "World";
console.log("New value of x", obj.x);

As we can see, due to JavaScript's freedom, we can change the type of x at the runtime. Due to this, JavaScript will always have to check what type of value is stored in `obj.x` to perform any kind of operation on it. This results in poor performance. To overcome this problem, V8 has come up with a new **Interpreter named Ignition** and an **Optimizing Compiler named TurboFan.** Let us see what they do and how they help our code run faster.

## What is Ignition
Ignition is an interpreter that JavaScript uses to interpret our code and start running it. Every JavaScript code goes through the following process to actually run it on a browser or machine.
* JavaScript code is fed to the parser.
* The parser parses the code and creates an Abstract Syntax Tree (AST).
* This AST is then fed to the Ignition and bytecode is produced.
* This bytecode is fed to the machine and our code starts running.

Don't worry if some of the terms like AST or Parser are foreign to you right now. We will cover them in some other post. We are right now just interested in the Ignition interpreter. So when the bytecode is running on an actual machine, the Ignition maintains some data about the running code. This data is in various forms and contains different metrics about the code. One of those metrics is Hot Functions. Hot functions are the functions in our code that are used many times. A simple example of a hot function can be some calculation we perform on a value to display it on the page. On every change of this value, the calculation function is executed again and again the page is updated. The Ignition will collect the data about this function like the arguments being passed, what is their type, what is being returned and its type, etc. 

## How TurboFan comes into the picture
After identifying the hot functions in the code, Ignition will send that data to the TurboFan for optimizations. TurboFan will take this code and start running some magical optimizations because it already has the assumptions data from the Ignition. It will then replace the original bytecode with this new optimized bytecode and this process keeps on repeating for the lifetime of our program.
To understand this better, let us take one example and go through the process. Consider the following code:
```javascript


function add(x, y) {
    return x + y;
}

add(1, 2);
add(12, 42);
add(17, 25);
add(451, 342);
add(8, 45);

When this code is converted to bytecode and ran, Ignition will perform the following lengthy process for the addition process:

Hectic right?? Now when we call this function many times with integer arguments, Ignition will classify this as a hot function and send it to the TurboFan with the collected information. TurboFan will optimize this function for integers, produce the bytecode and replace it in the original bytecode. Now when the next time add(21, 45) function is called, all these lengthy steps will be omitted and the result will be obtained faster.

The fallback mechanism

But wait. What if we call our add function with string arguments? Well, to handle these cases, TurboFan will check the types of arguments being passed. If the types are different from numbers, it will fall back to the original bytecode which was generated by the Ignition and again this lengthy process will be followed. This process is known as Deoptimization. This new information will also be collected and if we call add function with string arguments too many times, Ignition will consider it as a hot function and send it to TurboFan with relevant information collected. The TurboFan will optimize add function for the string parameters also and the next time add function is called, an optimized bytecode will be run thus improving the performance.

Conclusion

Well, this is why it is advised to treat JavaScript variables as statically typed variables so that it makes our code performant. This is not only true in the case of primitive types but also followed in the case of Objects. To understand more in-depth how an object's type is maintained, read the previous post in this series about the Object Shapes. Now there is a lot more to Ignition and TurboFan apart from the type checking. If this article interests you, do check out the references where the speakers have covered this in-depth. Till then, Happy Coding!!

References

Franziska Hinkelmann: JavaScript engines - how do they even?: https://www.youtube.com/watch?v=p-iiEDtpy6I
The JavaScript engine and hot functions: A beginner’s exploration: https://medium.com/@harumhelmy/the-javascript-engine-and-hot-functions-a-beginners-exploration-part-2-f4e351631229

JavaScript Internals - Object Shapes

Amit Khonde — Tue, 06 Apr 2021 16:27:31 +0000

What is this series about

Post 3: Object Shapes

In today's part of the JavaScript Internals series, we going to talk about the very fundamental feature of the language -- Objects. We are going to see how those are handled in the JavaScript engines. And later we will also see some of the best practices we can use to make our web apps performant. So, MDN defines JavaScript object as
"An object is a collection of properties, and a property is an association between a name (or key) and a value."
Wow. Such a simple and easy definition. Well, this simple definition gives us the power to do a lot of crazy things that we can not do in most other programming languages. Things like adding/removing properties from/to objects, manipulate this binding, and not needing a class to initiate the object, etc are some of the things that JavaScript can give us just because of that simple definition (Well, also because ECMAScript standards have defined it like that).

Now, just for a minute, imagine that you are a JavaScript engine. You get a code to execute, and it contains thousands of objects. Now we know how objects are stored in the variables. The reference of the object is stored. And when we are trying to access any property of the object, (let us say 2nd property) we will go 1 offset further from the object's memory reference. And you (the JavaScript engine) do it every time the code is trying to access the property. From the sound of this, we obviously know that this will result in a terrible performance of the code.

But, let us imagine that somehow magically, you know that 500 of those objects are going to be of the same structure. Well, that makes it a lot better right? You (still the JavaScript engine) can keep track of the objects that belong to that structure and calculate all the offset sizes of all the properties in advance. So when code tries to access a property of an object that belongs to these 500 objects, you can just directly add the offset size to the memory reference of that address and Eureka! We have the value.

This is exactly how the JavaScript engine gets us the value of some key. It keeps track of all the structures and when we are accessing any value, it will check the structure of the object and get the value from that offset. And those structures are known as Shapes. Some people call it Hidden Classes, some call it classes but I like the name Shape because it defines that structure at its bare minimum level. In the end, it is actually just a Shape for an object.

How JavaScript Engines utilizes these shapes and how are they created?

Now comes the interesting part. Now we will go through the journey of an Object. Earlier we were pretending to be the JavaScript Engine, now we will be an Object. So now imagine you are an object and LET US GO!

Ok. So you (the object) are created for the first time. You do not have any properties to you. At this time, an empty shape is maintained for you. You might ask why to maintain an empty shape? But suppose someone is trying to access a property on an empty object. The engine can optimize the performance just by checking the shape and return undefined from there itself. Now let us proceed and assign some properties to you (the object).

Now we assign a property name to you (nice name BTW). Now the shape will change and a field will be added to that shape. And that property will be pointing to a property descriptor. Let us not worry about what is property descriptor now. Just understand that it will store the offset of the property from starting address of the object. Now let us add one more property to you (the object) and see what happens.

So we have assigned a new property age and we can clearly see that a new shape is created (BTW, previous shapes are also stored) and if we think about following this pattern, it will be a quite large number of shapes and will quickly be very hard to maintain. We will fall into the same performance pitfall that we were trying to run from.
To avoid this problem, the JavaScript Engine maintains a chain between all of these evolving shapes. With the help of this chain, we do not have to repeat any old shape properties because we can easily go back in the chain and check for properties. So for you (the object), the shape chain will finally look something like this:

Sigh! That was quite a knowledge journey. But there is just one little concept remaining. Shape Trees. Let us consider the following code:

var obj = {};
var obj1 = {};

obj.name = "CoolName";
obj1.name = "CoolerName";

obj.age = 21;
obj1.age = 22;

obj.address = "Heap";
obj1.job = "Own Properties";

As we can see, obj and obj1 have all properties common and one property different. How do you think shapes are maintained for these two? Well, the diagram will look exactly like the above diagram but when the last two lines are executed, obj, obj1 will have a branch (like a tree branch) from the last shape which will have different properties. This tree structure of shapes is helpful for identifying a common property repeatedly.

Why was learning all of this necessary?

Well, to answer this question, I will list down some best practices for objects and these practices are derived from the knowledge of shapes. So let us look at those points:

Use Factory functions when defining objects. This will make sure all of those objects have the same shape.
Try avoiding the Object constructor.
Sometimes even the order of keys matters (In earlier or some JavaScript engines).

Conclusion

As part of the conclusion, I have a little exploration exercise for you guys. As we have heard, Arrays are also Objects in JavaScript. How do you think shapes are handled for arrays? Well, comment down below with what you think about it or this post, or anything related to JavaScript. Thanks for reading. Till then, Happy Coding!!

References:

JavaScript Engines: The Good Parts™ - Mathias Bynens & Benedikt Meurer - JSConf EU 2018 --https://www.youtube.com/watch?v=5nmpokoRaZI

JavaScript Internals - Garbage Collection

Amit Khonde — Wed, 31 Mar 2021 17:19:32 +0000

What is this series about

Post 2: Garbage Collection

Imagine you arrive at a restaurant. There are a hundred tables at the restaurant. Out of 100, 95 tables are still occupied and at the remaining 5 tables, people have just left and their plates are still on the tables. Now for you to sit, restaurant staff will clear out one of those five tables or all of them and you would sit and enjoy your meal.

Did you see what happened here? If we are to make analogies to the JavaScript environment, you are a new object, 100 tables are the available memory, 95 occupied tables are 95 active objects and 5 empty tables with dirty dishes are the dead objects that your application does not need anymore. Now, the restaurant staff is the JavaScript engine, who will clear those 5 dead objects and make the space for the new objects. THAT’S IT. This process is known as garbage collection. Now there are various algorithms to perform garbage collection optimally, one of which we will learn further in this article.

Why Learning about Garbage Collection Is Important?

Well, there is this cliche answer again: To improve your application’s performance. I know you all knew this answer coming. So let me give you one small example. Suppose you accidentally assign one global object which is very large in size. Now you are not going to use that object ever again in the application life cycle. But it will hold space in the memory as it is a global object and V8 will assume that you are going to need it. So my point is, after learning the internals, you will be armed with the knowledge of how you can write JavaScript which will leave a lesser memory footprint.

The Basics

Cool. So now that we are determined and not bored by the above examples, let us get some basics out of the way. First things first: V8 manages garbage collection. Not the JavaScript. What this implies is that there is no specification to follow on how to implement this piece. So every JavaScript engine implements its own version which developers think is the best approach.
Another thing about V8 is that it uses the generational algorithm for garbage collection. This means it divides data into Younger Generation and Older Generation. We will talk about these generations in detail in further sections.

You might ask why V8 uses a generational algorithm? Well, the V8 team believes in something known as the generational hypothesis. Which states: All objects die shortly after creation. They have found this hypothesis by observing multiple applications and their memory footprints. This is the reason they use the generational algorithm and run garbage collection cycles mostly on younger generation memory. Now let us talk about the younger and older generation and see how garbage is collected in both of them.

Young Generation and Old Generation

Now, we will understand the whole process step by step and with help of some images.

So as we can see, the whole memory in V8 is divided into 2 parts. Young generation and Old generation. The young generation in turn is divided into two parts. Don’t worry about that right now. We will see why it is being done in further steps.

Now when we start declaring objects and start using them, V8 will keep filling up the first part of the young generation.

When the first part of the young generation is completely filled, V8 will mark the objects dead or alive and the alive objects will be moved to the second part of the young generation.

Now all the new objects will be placed in the second part of the young generation until that is filled.

Now comes the interesting part. Once the second part of the young generation is also completely filled, V8 will again mark the objects dead or alive and the alive objects will now be moved to Old Generation because if the object is still surviving, it is like to stay alive for a long time. After this, the second part is cleared and the same process from step 1 to step 5 is followed for new objects.

Mark And Sweep in Old Generation

Now while V8 is doing this process, at some point in time, there will be no enough space for a new object in the old generation, a full mark, and sweep garbage collection algorithm will come into the picture.
Mark and sweep is a two-step process. The first part mark is where V8 will try to reach out to every accessible object from the call stack and global scope. All reachable objects are marked as alive and rest are marked as dead.

Now we have to understand that Old generation is quite large and the object sizes in it are also very large. That is why V8 can just remove dead objects as it does in the young generation because it will be a very heavy computation. Due to this limitation, the sweep process is done in various cycles where V8 will create some parallel threads and keep on sweeping memory in parts.

Conclusion

Sigh!! That was quite a ride. Now there is a lot of other detailing and tricks on how V8 manages garbage collection which we can not cover in a single post. I would suggest you go through the references section of this article and definitely check out the links if those excite you. Till then, Happy Coding!!

DEV Community: Amit Khonde

Creating Skeleton Loading using HTML and CSS

TLDR;

Introduction

Creating Skeleton Loading with HTML and CSS

Step 1: Adding HTML Markup

Step 2: Adding Skeleton class CSS

Step 3: Adding the animation

Final Code

Bonus: How I used Skeleton in an Actual React Project

Conclusion

Further Readings and Videos

What is flatMap in JavaScript? And how made my code cleaner

What exactly is Array.flatMap?

How I used Array.flatMap in a real-world problem?

JavaScript Date Object Simplified

Ways we can create the Date object

Using empty constructor

Using milliseconds

Passing each date entity separately

Passing the date string

Helpful methods in the Date object

Date.now()

Converting Date to another timezone

Conclusion

What is a closure in JavaScript and when to use one?

What are closures in JavaScript?

Real-world applications of closures

Explain to me like I am 5: Debounce vs Throttle

Throttling

Debounce

Conclusion

Eval is evil - Why we should not use eval in JavaScript

Introduction to eval

Why not use eval?

Performance

Security risks

Difficulties in debugging

Are there any other alternatives?

JavaScript Interview: Write a custom reduce function

What is this series about?

Post 3: Write your own custom reduce function

Question

Solution

Conclusion

JavaScript Interviews: Implement Memoization in JavaScript

What is this series about?

Post 2: Implement Memoization in JavaScript

Problem Statement

Solution

Conclusion

JavaScript Interviews: Create a deep copy of an object

What is this series about?

Post 1: Create a deep copy of an object

Problem Statement

Solution

Conclusion

JavaScript Internals - Ignition and TurboFan

What is this series about

Post 4: Ignition and TurboFan

The fallback mechanism

Conclusion

References

JavaScript Internals - Object Shapes

What is this series about

Post 3: Object Shapes

How JavaScript Engines utilizes these shapes and how are they created?

Why was learning all of this necessary?

Conclusion

References:

JavaScript Internals - Garbage Collection

What is this series about

Post 2: Garbage Collection

Why Learning about Garbage Collection Is Important?

The Basics

Young Generation and Old Generation

Mark And Sweep in Old Generation

Conclusion

What exactly is `Array.flatMap`?

How I used `Array.flatMap` in a real-world problem?

Ways we can create the `Date` object

Helpful methods in the `Date` object

`Date.now()`

Converting `Date` to another timezone