Forem: Srinivasan K K

My Top 5 Favorite Things from JavaScript ES2020

Srinivasan K K — Thu, 09 Apr 2020 10:37:00 +0000

Being a JavaScript developer, knowing the ECMAScript standards is the essential one.

So, I would like to share my top 5 favorite things from JavaScript ES2020 which are all finalized proposals (stage 4).

Top 5 Favorite Things From JavaScript ES2020

1. Nullish Operator (`??`)

Before this introduced, we have been using || OR operator. But ?? and || basically serves a different purpose.

|| is to check falsy values whereas ?? operator is to check both NULL or Undefined.

const user = { name: 'John' };
console.log(user.name ?? 'Not Exists.');

2. Optional Chaining (`?.`)

Before this, we have been using && AND operator to check whether left-hand side expression returns true, then the right-hand side expression would be evaluated.

const user = { name: 'John' };
console.log(user?.name);

3. Dynamically Importing JS Module

We could lazy load the JS module at runtime by using this option,
import(<module_file_name>)

async loadUser() {
  const user = await import(`./user.js`);
  console.log(user.getName());
}

4. Accessing Global Context

We use a certain keyword to access the global context but it differs for each environment. For instance,

window is the keyword for browser environment,
global is the keyword for Node.js environment,
self is the keyword for Web/service workers

globalThis is the new keyword that solves the above environment context issue.

As a web developer, We often stick to write once run it anywhere principle. In this fashion, this new addition would help us a lot.

5. Promise.allSettled (`Promise.allSettled([inputs])`)

As a web developer, invoking multiple HTTP requests simultaneously is the usual thing.
Promise.allSettled([]), this one will be settled down when all the inputs are either resolved/rejected.

const getUser = () => Promise.resolve({ name: 'John' });
const getUserRights = () => Promise.reject(new Error(`Unauthorized Access...`));
const getUsersCount = () => Promise.resolve({ total: 5000 });

Let's say we have 3 promise calls which we are going to invoke parallelly.

Promise.allSettled([getUser(), getUserRights(), getUsersCount()])
       .then(([user, rights, count]) => {
           if(user.status === 'resolved') { console.log(user.value); }
        })
       .catch(console.error);

We have different options available to invoke multiple Promise calls at a time, Promise.all([]) and Promise.race([]). But those two Promise objects differ based on the use case.

Promise.all([x, y, z]) will invoke all the given Promises parallelly but if anyone is failed then this operation would end up in catch block of Promise.all([]). But the resolved input promise would be ignored.

Promise.race([x, y, z]), this output will be resolved as soon as one of the input promise is resolved.

NOTE: If you're coming from C# background you have already familiar with ?? and ?. operators.

Creating Dynamic Rows & Columns with CSS-Grid

Srinivasan K K — Wed, 18 Mar 2020 05:25:31 +0000

In this blog post, I would like to share on how to create dynamic rows and columns with CSS-Grid.

I have created the Scheduler UI template markup to demonstrate further.

IDEA

Only learning doesn’t serve any purpose instead building an application will.

This app comprises Scheduler option input and based on the input will create a container with grid-cell for showing the day but dynamically.

Dynamic CSS-Grid Columns & Rows

I cover the bare essential piece from the below code.



<div class="container">  
  <ul class="scheduler-options">
    <li><a href="javascript:void(0)" class="optn">daily</a></li>
    <li><a href="javascript:void(0)" class="optn">weekly</a></li>
    <li><a href="javascript:void(0)" class="optn">monthly</a></li>
  </ul>
  <div class="month-name"></div>
  <section class="slots">
    <div class="scheduler-grid daily"></div>
    <div class="scheduler-grid weekly"></div>
    <div class="scheduler-grid monthly"></div>
  </section>
</div>

javascript:void(0) will restrict redirecting URL.

.scheduler-grid element acts as a CSS-Grid container and based on the scheduler-options input each grid container will be filled with grid cells.



.scheduler-grid {
  height: 100%;
  margin: 50px 25px;
  padding: 5px 100px;
  display: grid;
  grid-gap: 20px;
  grid-auto-rows: 100px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

grid-auto-rows grid-template-columns repeat minmax and auto-fill are the CSS-Grid configuration for dynamic creation of grid-cells.

The CSS repeat function will create the grid-cells based on the given min and max width of each cell using minmax function.

The important point we should get it here is that, if we use both grid-template-rows and grid-template-columns for dynamic creation then rows will get cut at the end of the viewport.

Hence, to avoid this we should set the row height for the dynamically creating rows with the help of grid-auto-rows property.

After all this, we would end up with the below expected result.

How to create Reusable Date Utility in JavaScript

Srinivasan K K — Tue, 03 Mar 2020 10:06:19 +0000

Every one of us faced a hard time when comes to work on Date with JavaScript. Then I thought of creating the simple utility to get familiar with JavaScript Date API,

to find a specific date from the current date in JavaScript.

After wrote this utility, I wanted to share the same with other peers so ended up writing this article.

Date Constructor

To get the current date we have a Date API from JavaScript, new Date();
The same can be retrieved by passing date string as an input to the new Date();

As most of us haven’t exposed to one more way of getting date value,new Date(year, month, date, hh, mm, ss);

Find a specific date from today's date in JavaScript

To solve any kind of problem first, we need to list down the required inputs and draw the pseudo-code if required.

In short, we require the following inputs.

Logic to derive the previous date,
Day count of the previous month,
Previous Year

I created one reusable function named getDateInfo which gives us all the information about today's date except time.

function getDateInfo() {
  // Date Calculation
  const todayDate = new Date();
  const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
  const dayCount = {
    'January': 31, 
    'February': (todayDate.getFullYear()%4 === 0) ? 29 : 28,
    'March': 31,'April': 30,'May':31,'June':30,'July':31,'August':31,'September':30,'October':31,'November':30,'December':31
  }
  const days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
  const currentMonth = months[todayDate.getMonth()];
  const currentYear = todayDate.getFullYear();
  const currentDate = todayDate.getDate();
  const currentDay = days[todayDate.getDay()];
  return {
    todayDate, months, dayCount, days, currentMonth, currentYear, currentDate, currentDay
  };
}

Utility

I shared the logic part also to give you hindsight and you will find it below.

function findDateFromToday({ howManyDates = 0, type = 'past' }){
  try {
    const { todayDate, months, dayCount, days, currentMonth, currentYear, currentDate, currentDay} = getDateInfo();
    if(type === 'past') {
      const resultDate = currentDate - howManyDates;
      if(resultDate === 0) {
        // Starting date of the current month
        return new Date(currentYear, todayDate.getMonth(),0,0,0);
      } else if(resultDate > 0) {
        // resultDate of the month
        return new Date(currentYear, todayDate.getMonth(), resultDate, 0,0,0);
      } else {
        let prevMonth;
        let prevYear;
        // if negative, then (previous month day count - (negative resultDate))
        if(todayDate.getMonth() !== 0) {
          prevMonth = todayDate.getMonth() - 1;
          const prevDate = dayCount[months[prevMonth]];
          return new Date(currentYear, prevMonth, prevDate +resultDate,0,0,0);
        } else {
          // previous year
          prevYear = currentYear - 1;
          // previous month
          prevMonth = 11; // december
          const prevDate = dayCount[months[prevMonth]];
          return new Date(prevYear, prevMonth, prevDate + (resultDate),0,0,0);
        }
      }
    }
  } catch(error) {
    return error;
  }  
}

howManyDates parameter is for how many dates from today.

type parameter is for identifying a specific date that would fall on either past or future. Here only considered for finding the previous date value. If you're well curious enough then please go ahead do yourself for the future date.

Logic - To find the previous date

I sorted out this utility based on the below logic, You can also add if more meaningful for making reusable.

Step 1: Subtract today date from howManyDatescount
Step 2: If the subtracted value is 0 then the previous month's last date.
Step 3: If the subtracted value is > 0, then the result date of the current month
Step 4: If the subtracted value is < 0, then will derive by using the previous month and previous year as below code.

That's it. You can also share your opinion on improving further on this.