Forem: JS Mates

How are you using Map data stricture in your JS applications?

Paramanantham Harrison — Tue, 08 Dec 2020 18:51:04 +0000

// Detect dark theme var iframe = document.getElementById('tweet-1336381703288401925-574'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1336381703288401925&theme=dark" }

If you want to read the full article,
https://jsmates.com/blog/convert-object-to-a-map-in-javascript

Add your comments on use cases for Map data structure?

Learn to create, get and set values in Map data structure in Javascript

Paramanantham Harrison — Thu, 03 Dec 2020 09:32:04 +0000

// Detect dark theme var iframe = document.getElementById('tweet-1334203785233772546-178'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1334203785233772546&theme=dark" }

For the detailed article, check out the link below,
https://jsmates.com/blog/how-to-get-and-set-values-in-map

Snippet by JS Mates: Find common items from two arrays

Paramanantham Harrison — Tue, 24 Nov 2020 19:14:14 +0000

For accessibility of the snippet, check out the URL
https://jsmates.com/blog/find-common-items-from-two-array-in-javascript

Why the undefined variable is not sent in a JSON API response?

Paramanantham Harrison — Mon, 09 Nov 2020 00:00:00 +0000

What will happen if some of your variables is undefined in the JSON response?

It will be removed from the response by most server framework. Because

Undefined is not a valid JSON type. All javascript objects are not valid JSON and vice versa.

Example,

const response = {
  undefined: undefined,
  null: null,
  true: true,
  false: false,
  number: 0,
  string: 'string'
};

res.json(response);

The response will be,

{ "null": null, "true": true, "false": false, "number": 0, "string": "string" }

All other values will be sent to the response but undefined won't be sent.

You can see it in action here,

Managing secrets and environmental variables in Node Js

Paramanantham Harrison — Sun, 08 Nov 2020 00:00:00 +0000

Every code project requires to maintain secrets, configurations, and environment-specific variables.

Most common secrets are,

Database connecting strings and passwords
Email service account and passwords
Third-party services API keys

Common environmental variables are,

Port number
Application environment (eg., NODE_ENV - test, development, production)

Other application-specific configurations like,

Default email address
Feature toggle variables

The first option is to manage it inside your code. But this won't work well if you keep your code in the remote repository (e.g, Github, GitLab, etc).

Also, this won't work if you are in a multi-developer environment. Every developer uses a different config that can't be hard-coded in the code.

This problem can be fixed in production by setting system environment variables. This variable can be accessed through process.env in your application.

But in development, you will have many applications on your computer. Most variables are the same for different applications. So you need to find a way to use this variable application-specific.

There is an awesome package to solve this issue in development. It is called as dotenv

dotenv helps to manage your environmental variables and configuration inside your application code.

Let's install dotenv,

npm install dotenv

Create a .env file in the root of the project.

/*
  file: .env
*/

API_BASE_URL=http://localhost
PORT=8080
NODE_ENV=development
CLIENT_SECRET=xydwy10290askajs

Let's create a simple node Js application and use dotenv in server.js file,

/*
  file: server.js
*/

const http = require('http');
const express = require('express');
// import dotenv package
const dotenv = require('dotenv');

// Use `.env` config when the NODE_ENV is other than production
if (process.env.NODE_ENV !== 'production') {
  dotenv.config();
}

const app = express();

// Root URL will serve all the process env values from the .env file
app.get('/', (req, res) => {
  res.json({
    node_env: process.env.NODE_ENV,
    port: process.env.PORT,
    api_root_url: process.env.API_BASE_URL,
    client_secret: process.env.CLIENT_SECRET,
    port_lowercase: process.env.port || null // Will be null, since env variables are case sensitive
  });
});

// Read port from PORT env variable or use 8080
const port = process.env.PORT || 8080;
const server = http.Server(app);

server.listen(port, () => {
  console.log(`Server listening on port: ${port}\n`);
});

Our code use dotenv for the environment other than production. It reads the port value and NODE_ENV from the .env file.

Start the server and check the root URL,
http://localhost:8080

This will be the result,

{
  "node_env": "development",
  "port": "8080",
  "api_root_url": "http://localhost",
  "client_secret": "xydwy10290askajs",
  "port_lowercase": null
}

As you see, these env keys are case sensitive.

How the client request and server response cycle works

Paramanantham Harrison — Sat, 07 Nov 2020 00:00:00 +0000

Let's learn how the client request flows through the server.

For understanding, request, and response flow. Let's consider the example of the Twitter home page.

If you go to Twitter without logged-in, then it loads generic tweets based on user location.
If you log in, then it loads the feeds personalized for you. Even for the same request, different data responses get sent based on the request context.

What exactly happens in-between the client request and server response?

The flow will be like this,

Client browser sends a request to the URL – https://twitter.com
The server gets the request, parses the request, and checks whether the requested URL is valid or not
If not valid, then the server sends a 404 – not found response
The server checks whether the request was from valid-user
If not a valid user, then it tries to get the user location
If it finds the user location, then it sends a response with user location-specific tweet data
If it doesn't find the user location, then it sends a response with generic global tweets data
If a valid user requested the data, then it sends the response with the user's personalized tweet feed
This is how the request flows inside the server before sending a proper response from the server.

This example simplifies a lot of steps in-between to make it easy to understand. There might be many more steps like this before the server sends the response to the client.

Check whether folder exists on the path using Node Js

Paramanantham Harrison — Fri, 06 Nov 2020 00:00:00 +0000

fs module in Node Js has methods to check whether a folder exists in the path. We will use fs.existsSync to check whether the folder exists or not.

const fs = require('fs');

// Check folder
const checkFolder = folderPath => {
  // Throw error if folder path doesn't exist
  if (!folderPath) throw Error('folder path is required');

  // Check folder exists in the path using `fs.existsSync`
  const isFolderExist = fs.existsSync(folderPath);
  return isFolderExist;
};

console.log(checkFolder('blog')); // True
console.log(checkFolder('sunrises')); // False

This way, you can check whether a folder exists or not in Node Js.

How to remove duplicates in an array using JS Set?

Paramanantham Harrison — Thu, 05 Nov 2020 00:00:00 +0000

Consider we have an simple string array with duplicate values,

const authorNames = [
  'Param',
  'Moises',
  'Fernando',
  'Joshua',
  'Param',
  'Joshua'
];

The array have Param and Joshua values duplicated twice. There are several ways to remove duplicates, using Set is just one among them.

const uniqueAuthorNames = [...new Set(authorNames)];
console.log(uniqueAuthorNames); // Output - ["Param", "Moises", "Fernando", "Joshua"] ✅

What if the data is an array of objects?

We can make it work, but directly using Set on the array of objects won't work.

const authors = [
  {
    name: 'Param',
    age: 30
  },
  {
    name: 'Joshua',
    age: 26
  },
  {
    name: 'Param',
    age: 30
  }
];
const uniqueAuthors = [...new Set(authors)];
console.log(uniqueAuthors); // Output - It won't remove the duplicates ❌

Check whether a JS variable an array or not

Paramanantham Harrison — Mon, 02 Nov 2020 00:00:00 +0000

Let's consider a JS array,

const authors = ['Param', 'Joshua'];

This is obviously an array, but if you need to check whether the data is an array or not. How do you do that check?

Using the Array.isArray method, it is easy to find out whether the value of a variable is an array or not.

console.log(Array.isArray(authors)); // true

If you pass a non-array value to the method, then it will return false.

console.log(Array.isArray(true)); // false
console.log(
  Array.isArray({
    firstName: 'Param',
    lastName: 'Harrison'
  })
); // false

Check whether a condition is met at-least once in a JS array?

Paramanantham Harrison — Sun, 01 Nov 2020 00:00:00 +0000

Let's have an array of authors,

const authors = [
  {
    name: 'Param'
  },
  {
    name: 'Joshua'
  }
];

We need to check whether an author with the name Joshua exists in the array. It can be done in several ways. We are going to use modern ES6+ syntax using Array.some to find whether the author exists in the array.

// Check whether author Joshua present in the array
const isJoshuaFound = authors.some(({ name }) => name === 'Joshua');
console.log('Is Joshua an Author? -> ', isJoshuaFound);

Now, let's check someone who is not in the array,

// Check whether author Harris present in the array
const isHarrisFound = authors.some(({ name }) => name === 'Harris');
console.log('Is Harris an Author? -> ', isHarrisFound);

The advantage of using Array.some over other array method is, it will check until the first match exists. Then it breaks out of the loop.

For example, if you have an array of 100 elements, and the match happens at the 2nd element. Then Array.some won't iterate over the remaining element.

Learn by doing - Exploring Hasura Authorization

Paramanantham Harrison — Tue, 29 Sep 2020 16:25:52 +0000

In this episode, we explored how Hasura handles the Authorization based on different CRUD operations.

Learn by doing - Exploring Hasura GraphQL subscriptions

Paramanantham Harrison — Tue, 29 Sep 2020 16:22:04 +0000

In this episode, we explored the Hasura GraphQL API's subscriptions.