DEV Community: Hridayesh Sharma

LoginRadius Open Source For Hacktoberfest 2020

Hridayesh Sharma — Fri, 25 Sep 2020 00:00:00 +0000

Checkout LoginRadius Open Source Repositories where you can contribute for hackotberfest 2020

Read On

Working with Golang Maps

Hridayesh Sharma — Fri, 25 Sep 2020 00:00:00 +0000

Explore and learn about the usage of maps in Go.

Read On

Past is gone. Look forward to future.

Hridayesh Sharma — Sat, 09 May 2020 10:46:24 +0000

This is not a technical blog or something like that. This is to motivate all those people who have had a bad past, or those who can't get over their past.

Today I wrote a simple Javascript code to render some radio buttons. Then I realised may be I can create something good out of it.

So I created this Days in 2020

Hope this motivates you to make the best use of time you have.

Happy Coding!

Thanks for reading. 😊

11 NPM Commands Every Node Developer Should Know.

Hridayesh Sharma — Tue, 28 Apr 2020 15:08:23 +0000

1. Create a package.json file

npm init -y # -y to initialize with default values.

2. Install a package locally or globally

npm i package # to install locally. i is short for install
npm i -g package # to install globally

3. Install a specific version of a package

npm install package@version

4. Install a package as dev dependency

npm i -d package # -d stands for --save-dev i.e install as dev dependency

5.To see all the dependencies of your project

npm list # this will list all the dependencies of the third-party modules as well

6. To see direct dependencies of your project

npm list --depth=0

7. To see the information about a package in your project

npm view package

8. See specific information from package.json of a third-party package like dependencies of the package

npm view package dependencies

9. To check different versions available for a package

npm view package versions

10. Check outdated packages in your project

npm outdated # run with -g flag to check globally

11. To update the packages

npm update

I hope this helps. Let me know if you use any other commands that can be helpful.

Thanks for reading. 😀

Using dotenv to manage environment variables in Nodejs

Hridayesh Sharma — Mon, 27 Apr 2020 14:23:46 +0000

Have you ever faced any of these scenarios:

You have some dynamic values in your code which you don't want to hardcode.
You have API Keys in your opensource project which you obviously don't want to push to GitHub
You have some values in your code that depend on what environment you are building your code for.

If you fall into any of the above-mentioned scenarios I have a got a solution for you. 😃

Node Environment Variables Using dotenv

In Node, there is something called environment variables which you can see by logging process.env.
For example, you can set a NODE_ENV variable which is basically used to define what environment you want to build your code for.

process.env.NODE_ENV='dev'

Then further use this variable to generate different builds.

Instead of setting these environment variables ourselves, we will be using the dotenv package.

$ npm i --save dotenv

Once dotenv is installed let's create a .env file in the root of our project
and add the PORT variable into it.

.env

PORT=3000

Now let's see how we can use this .env file in our code. We will create a basic node server and use PORT defined in our .env.
NOTE: If you do not understand the server part, don't worry. It's not important to understand how to use dotenv.

app.js


require('dotenv').config()
const http = require('http')

const server = http.createServer(callback)

server.listen(process.env.PORT || 4000)

Let's see what we just did here.

We basically created a server in node and the server is listening on the port defined in our node environment variables. If it's not defined there we give it a fallback value.
Now the value of this PORT can be different depending upon where you deploy your server be it Heroku or something else.

dotenv is loaded first and it has a config function that basically reads our .env file and populates the environment variables.

You can use dotenv to store your server configuration or use it with webpack to define global variables using webpack's definePlugin.

PS:

You need to load your env config once in your webpack config or in your entry file and also never commit your .env files
In order to maintain multiple env files each for different environment you can use dotenv-flow package. You must set your process.env.NODE_ENV variable first as dotenv-flow uses that variable to decide which env file to pick. https://www.npmjs.com/package/dotenv-flow

If you face any problem in implementing this, let me know in the comments. I will be happy to resolve.

Thanks for reading 😀

Using DefinePlugin to Define API URLs in Webpack

Hridayesh Sharma — Sat, 18 Apr 2020 17:22:24 +0000

In today's development cycle, there are multiple environments for any API. For example, the dev API is available at dev.domain.com and production API is available at prod.domain.com.
While writing a front end library or a front end modern JavaScript application that consumes the API we use webpack to build our applications. For each environment (dev or prod) we write a different npm script to build application for that environment.
package.json

... any other configuration
"scripts": {
    "dev": "webpack --env=dev --mode=development",
    "prod": "webpack --env=prod --mode=development"
  },
...rest of file

Now let's say our code consumes an API ${env}.domain.com where env can be either dev or prod or any other environment that our API is available at.

JavaScript Code

 // this code gets some data from the api
let url = `http://dev.domain.com`
fetch(url)
  .then(response => response.json())
  .then(res => console.log(res))

So how do we make the fetch to make a request to `prod.domain.com` instead of `dev.domain.com` when we build our application for production??

We will use a webpack plugin called DefinePlugin to achieve this.
So let's write our webpack configuration and then we will modify the JavaScript Code above to work in different environments.

webpack.config.js

const path = require('path'
const webpack = require('webpack')
/* we are creating our webpack configure as a function that takes env 
as parameter which is passed from npm scripts and can be dev or prod 
as defined in npm scripts
*/
module.exports = (env) => {
 const envConfig = {}
  switch(env) {
    case 'dev': 
      envConfig.domain: 'http://dev.domain.com'
    case 'prod'
      envConfig.domain: 'http://prod.domain.com'
  }

  return {
    entry: path.resolve(__dirname, './src/index.js')
    output: {
      path: path.resolve(__dirname, 'dist')
      filename: 'bundle.js'
    },
    plugins: [
      new DefinePlugin({
        API_DOMAIN: JSON.stringify(envConfig.domain)
      })
   ]
  }
}

Let's see what we just did in our webpack configuration

We just created our webpack configuration and inside it an object envConfig that contains a domain property on it. Depending upon what's the value of env, the value of domain will vary.
Then we used DefinePlugin to define a API_DOMAIN constant. Now in our code this API_DOMAIN can be used and we do not have to worry about the url that we used in our JavaScript code.

Modified JavaScript Code

  let url = API_DOMAIN
  fetch(url)
  .then(response => response.json())
  .then(res => console.log(res))

PS: I have added switch statement in the webpack file itself for clarity. You can add the logic in a separate file and then import it in the webpack configuration.

That's how we can use webpack to handle the API domains for us based on the environment we are building our code for. Similarly we can have any other constants configured as well.

The GitHub repository for the code is available at Webpack Manage Environment Domains

What is "this" in Javascript ?

Hridayesh Sharma — Sun, 08 Sep 2019 09:30:19 +0000

While learning JavaScript there are many roadblocks like closures, asynchronous programming, this keywords, etc. These are the parts of JavaScript that are difficult to understand for a newbie in JavaScript, but once you learn them you can leverage everything JavaScript provides. So today I will be talking about one such superpower and that is this keyword.

So without further delay let's get to it. Before we go into this let's talk about an analogy to understand scope in JavaScript.

An Analogy to Understand Scope in JavaScript

There is a 10 story building and there is a policeman who is looking for a criminal in this building. Now let's see the two ways of how he finds the criminal or what if he does not find the criminal at all. 😨😨

(i) The policeman enters the building and starts looking for the criminal on the ground floor. If he does not find the criminal on the ground floor he goes to the first floor and if he finds the criminal on the first floor he sends him back to police station otherwise he keeps going up one floor at a time until the criminal is caught. And if he does not find the criminal then he reports back to the police station that criminal could not be found in the building.

(ii) This one is interesting 😋 There is a way by which the policeman can be directly shot onto any one of the floors and whoever he finds on that floor is the criminal now and there is no way to change that. Such a dynamic way of finding the criminal, isn't it? 😂

What do you think which approach can have bad consequences??

Obviously the second approach, as in the first approach what if the real criminal is on another floor and the police just caught a civilian.😫

So with a dynamic mindset now let's try to understand the two different scopes in JavaScript: static or lexical scope and dynamic scope.

Lexical Scope

In our first approach, the scope of finding the criminal is lexical. The policeman first looks on the ground floor and if he does not find the criminal then he goes one floor up and so on. That's exactly how lexical scoping works in JavaScript.

const outer = 12;
function lexical(){
  let inner = 21;
  console.log(inner, outer);
}

lexical(); // 21 12

In the above snippet lexical function first looks for inner variable and it finds it on its own floor. But for outer it finds it own one floor up. So that's how the lexical scope works in JavaScript.

Dynamic Scope

Let's see in code how dynamic scope works.

So here we see instead of alerting 'Gotcha Joe' we got 'Gotcha undefined' when we click on the box. Why is that ?? Why instead of catching the Joe, our policeman (eventHandler function) got undefined. This is because our eventHandler function uses this and depending upon where our handler function is called or invoked this can take different values. There are ways to fix it, I will get to them in a while, I promise.

So far we have understood the scoping in JavaScript and seen how using this can result in unexpected outcomes.

Now let's talk about this', and how to figure out the values ofthis` in our code.

What `this` actually is?

In JavaScript this is an object inside a function or in a scope which can be any value depending upon how the function is defined or how the function is called.

Let's understand this in different contexts -

case 1 - default this binding

javascript function printThis() { console.log(this); } printThis(); // in browser it can be window object or in node global object

In the above snippet, the default value of this is what is available inside the function when we try to access it. Now this default value depends on how and where we are calling the function. Here we are calling our function in the global context.

case 2: implicit binding

let obj = {
  name: 'Joe',
  handler: function() {
    console.log(this.name);
  }
}

obj.handler(); // Joe

Here we are implicitly providing the context for this to the function. The value on the left of . is the value of this for our handler function. In this case, it is the object obj itself.

case 3: binding `this` with `apply`

function printThis() {
  console.log(this.name);
}

printThis.call({name: 'Joe'}); // Joe

The call method takes the first argument as the value of this that you want to pass to the function and invokes the function. Here we have passed an object with a property name on it. This object will be used as this inside our printThis function.

case 4: the `new` keyword

The new keyword in JavaScript is used to create a new instance of a class using class syntax or constructor functions. You can read more here in my last post
Understanding Prototypal Inheritance.

So these were different ways of how this works in the JavaScript world. In our click handler example, I promised that I will be telling you different ways of fixing that code so that instead of catching undefined we will be able to catch 'Joe'.

Here is the modified code for that on Codepen

So we have introduced two new ways of handling this

fat arrow functions
bind method

Let's understand them one by one

fat arrow functions

ES6 introduced a new syntax for writing functions. Though it looks like just syntactic sugar, there is more to it than just new syntax. Fat arrow functions handle this very differently than normal functions. In fat arrow functions this is scoped lexically just like any other variable. We have created fat arrow function version of our previously defined normal functions and now inside our eventHandlerArrowFunction the value of this is the instance of the class itself no matter where the function is called.

`bind` method

Just like the call method ES5 also introduced the bind method. The difference between the two is that bind takes the value of this as the first argument and returns a new function with this bound to it. Where call invokes the function with the provided value of this along with other arguments.
In our click handler function, we want to pass the reference of the function to addEventListener instead of invoking the function. Therefore we used the bind method there.

So with this, I hope you understood how the mighty this works in JavaScript.

Understanding Classes (ES5) and Prototypal Inheritance in JavaScript

Hridayesh Sharma — Sun, 18 Aug 2019 05:53:18 +0000

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const me = new Person('Joe', 20);

console.log(me); // {name: 'Joe', age: 20}

In a nutshell the above snippet creates a Person class that can have multiple instances. By convention functional classes in javascript start with a capital letter.

Let's dig deeper into what's going on here?? How a normal function can be used for classess?? 🤔🤔

The Person function is just like any other function which when called directly just returns undefined as we are not explicitly returning anything from it. But the real magic lies in the new keyword on line var me = new Person('Joe', 20).
Lets understand that magic - There are a couple of steps that happen when we use the new keyword to initialize a function :

An empty object {} is created.
Person is called by passing the reference of the object to it: Person.call({}, 'Joe', 20)
Inside Person this now refers to the object passed in the above step.
The object's proto is set to the function's prototype using {}.__proto__ = Person.prototype.
Finally return the object and that's what we get into me

Concept Aside: Every function in javascript has a prototype object available on it. That's how you use Array.prototype.map. And every object has a __proto__ object on it. For further watch this great video Discovering JavaScript.

Since the prototype and __proto__ refer to the same object, whenever you add a new function on the prototype it becomes available on all instances.

Person.prototype.greet = function() {
  console.log('Hi', this.name);
}

me.greet(); // Hi Joe

const you = new Person('Alice', 22);
you.greet(); // Hi Alice

So far we undestood how classes are created in javascript. Let's understand how to inherit classes in javascript.

Let's create a new class called Employee that inherits the Person class

function Employee(name, age, title) {
  Person.call(this, name, age);
  this.title = title;
}

// create Employee prototype from Person prototype
Employee.prototype = Object.create(Person.prototype);

const joe = new Employee('Joe', 22, 'Developer');
console.log(joe.name); // Joe
joe.greet(); // Hi Joe

Woah, we have finally inherited our Person class to create an Employee class and we didn't have to rewrite the greet function.

Let's see what just happened ??

We created our Employee class just like we created Person class.
- Inside our employee class we are calling the Person class by passing it this reference. This is just like using super keyword in ES6 classes.
This is the most important part. We are recreating the Employee prototype from Person's prototype to get access to all the methods available on the Person class.

Now you may ask yourself Why use Object.create and not just assign the Person prototype to Employee.
This is because we don't want Person and Employee to share the same prototype as objects in javascript are referenced. That's the whole point of inheriting Person.

So that's how we use prototypal inheritance in javascript. The new ES6 classes are basically a syntactic sugar on top of it. Basically this is what actually happens under the hood.

PS: You can find the complete code here GitHub Repo

Setting Up Webpack For A JavaScript Library

Hridayesh Sharma — Sat, 17 Aug 2019 11:53:38 +0000

A couple of days ago I decided to learn how to write a simple javascript library. I wanted to make a javascript library with a couple of function in it which could be used by anyone just like jquery.

I decided to use webpack for bundling. I got webpack set up but when I embedded my bundled script in my code I could not use any of the functions that I wanted to make available in library.



<script src="myLibrary.js"></script>
<script type="text/javascript">
 /* 
 using any of my library functions here gave me reference error.  
 */
</script>

I knew I was trying to do what other libraries like Redux, jquery etc do. But I did not understand how they did it. So I dug deeper into webpack to understand how to do that.

I have created a small project for the demonstration of how I did it. The github repo can be found at

vyasriday / webpack-js-library

webpack setup for writing a javascript library and making it availabe as scirt or npm package

Webpack Set Up For Writing Your Own JavaScript Library

How to Make the Project Work

1. Clone the repository

2. npm install

3. npm run build

There is a index.js generated inside dist directory. Add it as an external script to any of your projects. Any method can be accessed on $ in in your code after embedding the bundled file.

For example you can use $.capitalize in your javascript to use capitalize method

The babelrc is used by jest for code transpilation.

View on GitHub

I created a src directory in which all of my source code is present. index.js is the entry file for my project.

src
- index.js
- capitalize.js
- unique.js
- distinctString.js

webpack.config.js



const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),  
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    library: '$',
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js'],
    modules: [path.resolve(__dirname, 'src')],
  },
  mode: 'development',
  devtool: 'sourceMap',
};

In webpack config there are two important properties in the output for bundling a javascript library.

library: '$'
libraryTarget: 'umd'

The library is the name of the variable, the code can be accessed as. For example jquery is available as $, just like that. Any function can be accessed like $.name_of_method and the libraryTarget is the library will be exposed. I am using babel-loader for code transpilation with webpack. The bundled file is put into dist directory after running build script.

package.json



{
  "name": "webpack-js-library",
  "jest": {
    "roots": [
      "test/"
    ]
  },
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "build": "webpack",
    "test": "jest"
  },
  "homepage": "https://github.com/vyasriday/webpack-js-library#readme",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "babel-eslint": "^10.0.2",
    "babel-loader": "^8.0.6",
    "eslint": "^6.1.0",
    "jest": "^24.9.0",
    "webpack": "^4.39.2",
  }
}

In package.json there is one important property main. The main property of a package.json is a direction to the entry point to the module that the package.json is describing. Here I want to it to point to the bundled file which is the compiled code for the library.

I am also using jest for a basic test setup. It is good to have tests for a library.

src/index.js



import capitalize from './capitalize';
import unique from './unique';
import longestDistinctSubstring from './distinctString';

export { capitalize, unique, longestDistinctSubstring };

It is important tha you must export whatever you want to expose in your library. Here I am exposing three functions in the library. While bundling, webpack knows that it is supposed to put these functions on library.

Now I can easily access my library like -



<script src="dist/index.js"></script>
<script type="text/javascript">
  console.log($.capitalize('hridayesh'))
</script>

That's how you can set up webpack to write a javascript library.