DEV Community: sudarshan

React Developers Visualize Audio Files With ✨ Tarang

sudarshan — Tue, 30 Nov 2021 16:37:44 +0000

Hi Folks,

Have you ever wondered, how to visualize an 🎧 audio 🎧 in your react app ? or how to snow an animated, beat synced UI for currently playing music ?

Will explore it in this article

🎇 Tarang 🎇

Tarang is a NPM package, which enables the visualization of audio files. It uses D3 based chart and line animations in order to create svg-based visualization.

By using Tarang, any one can visualize audio files with ease. By enabling beat catch-up and some smooth, glorifying animations Tarang allows us to create superbb... USER experience.

by using cool animation it does fantastic animation's without adding much overhead in front end apps.

There are several options currently exposed by Tarang enlisted as :

Separate Thumbnail image
Height and width of Thumbnail image
Control based of representation of audio
Mute or unmute audio
Play on focus and stop on unfocus

Usage

1. 📊 Bar Visualizations

Bar visualization enables bar-chart like animations. Which can be used as


import React, { Component } from 'react'

import Tarang from 'tarang'
import 'tarang/dist/index.css'

class Example extends Component {
  render() {
    return <Tarang.Bar
        width={500}
        height={200}
        scale={1}
        controls={true}
        muted={false}
        volume={0.8}
        audioUrl={"url-of-mp3-file"}
        coverArtUrl={"url-of-cover-art-image-file"}
      />
  }
}

2. 📈 Line Graph :

Line visualization enables typical graph-line like animations. Which are created as follows


import React, { Component } from 'react'

import Tarang from 'tarang'
import 'tarang/dist/index.css'

class Example extends Component {
  render() {
    return <Tarang.Line
        width={500}
        height={200}
        scale={1}
        controls={true}
        muted={false}
        volume={0.8}
        audioUrl={"url-of-mp3-file"}
        coverArtUrl={"url-of-cover-art-image-file"}
      />
  }
}

In Tarang, we can directly use the S3 file urls or any other subsequent urls of asset (i.e. both for music files and thumbnails).

It is easy to use and compatible with many frontend frameworks like

Next.js, Gatsby etc.

Currently, it is still in development, but we can some more interesting stuff in upcoming duration

Github Link :

https://github.com/kamalyesh/tarang

😇 Thanks for reading...

Use puppeteer on the server in non-headless mode

sudarshan — Fri, 23 Jul 2021 02:49:40 +0000

📓📓 TL:DR

Using puppeteer on the server is necessary use case when you want to

Crawl millions of web pages of a certain URL
Perform Web Automation
Automate the testing of web apps
Implement Bot-like activities on web sites etc.

But, using it in non - headless mode is such a pain. Especially, when you have any Unix-like OS i.e. ubuntu, centos installed on the remote machine and you are using the machine over SSH or any other remote connection tool like putty.

🛠 How to do it :

So, in spite of all these extreme cases we can still use it and in this article we will take a look at one of the ways to implement it.

🕶 Some Background :

Puppeteer at it's core uses the chromium browser, which does all the heavy lifting stuff like

Exposing DOM API's for interactions
Perform DOM manipulations and code injection
Cookie management and session handling
Navigation and context maintenance etc.

Chromium needs the display adapters to launch the chromium window on the host machine. Regardless of the host OS, it uses the available display adapter API available.

When we are serving puppeteer using virtual machine or any other remote machine, by default we don't have any displays because all the work is done by Bash (AKA command line).

If we have windows server, then there is no big deal. Just connect the server using Remote Desktop Connection and you are good to go. But, if you have Ubuntu, centos or any other UNIX based OS installed on the remote machine, then you have to do some extra efforts.

👉 Steps

⚒ 1. Regular stpes :-

Before doing anything else, lets update host by some OLD school stuff


sudo apt-get update

sudo apt-get upgrade

2. 🖥 Install desktop-like enviroments

For installing the desktop based utility known as XRDP, I have installed core utilities like ubuntu-mate-core and ubuntu-mate-desktop by using this

sudo apt-get install --no-install-recommends ubuntu-mate-core ubuntu-mate-desktop -y

Ubuntu Mate Core :-

This utility converts the basic Ubuntu machine to complete workstation by adding some extra applications.

Ubuntu Mate Desktop :-

This is on such desktop like environments for Ubuntu. This exposes the interface for handling the local as well as networked files, perform calculations etc.

3. 💻 Install XRDP :-

After doing above steps, we have to install XRDP server which will give us the access of Remote Desktop Connection for host machine. We will also install some secondary dependencies for implementing complete desktop like environment.


sudo apt-get install mate-core mate-desktop-environment mate-notification-daemon xrdp -y

👮 4. Create remote user :-

As suggested by numerous manuals, we will now create non-root user for performing all of our remaining tasks.

Create a XYZ user and grant the sudo access to newly created user for avoiding any permission conflicts.


adduser xseven

usermod -aG admin xseven

usermod -aG sudo xseven

su - xseven

🔧 5. Configuring Mate Session :

We now will configure the necessary Mate Session. This will help use to customize the available desktop like enviroment as per our needs


echo mate-session> ~/.xsession

sudo cp /home/xseven/.xsession /etc/skel

🚀🚀🚀 6. Restart XRDP :-

Final step is to restart XRDP to apply all the configrations.

sudo service xrdp restart

Once restarted, we can connect to the remote machine by using RDC or any other compatible tool

This is how we can run puppteer in non-headless mode on server. There are many other alternatives like

Installing GNome or KDE for desktop machines
Host applications on desktop ubuntu enviroment

etc.

Thanks For Reading....

⛴ Deploy React Apps In Production Pretty Easily 😎

sudarshan — Wed, 26 May 2021 15:47:46 +0000

🍟 TL:DR :

Serving react app is pretty simple if we does it directly through development environment( i.e. serve apps directly including their source_code), but how to serve react apps as bundled static assets (in production environment) will be the main focus of this article.

Going deep into working of this tools can feel get pretty cumbersome, if someone is heavily using tools like Create React App. (which works like magic and does all the heavy lifting behind seens). Hence, I will keep it simple.

Today, we will be deploying simple react app (using Node.js back end). The final project is pretty simple and could be used as base template for your next production ready app.

🏋 Start Nodejs project

First thing first, we will start basic node app, which will serve as a back end for our react front end.

npm init --y

🍩 Add some utility

Now, we will install some packages like express, cors and dotenv. I am using dotenv for maintaining global values like NODE_ENV or anything as needed.

npm i express dotenv cors --save

🚀 Ignite the Server 🚀

Now, we will create a simple index.js, which will serve our as API for the client application.


//--------------------- imports ---------------------
const express = require("express");
require("dotenv").config();
const cors = require("cors");

//--------------------- Init App ---------------------
const app = express();
const PORT = process.env.PORT || 5000;

//--------------------- Serve Assets ---------------------
if (process.env.NODE_ENV === "production") {
  app.use(express.static("build"));
}

app.use(express.json());
app.use(cors());

app.get("/home", function (req, res) {
     res.status(200).json({
     status: true,
     data: "Backend Responded "
     })
})

app.listen(PORT, () => console.log(`Example app running on ${PORT}`));

This is dead simple web server, for react client.

Now, we will add a a script in package.json. Which will start server on specified port.

We will modify it later for client building stuff.

🎨 Create Front End App

Initialize react app using CRA (create react app) or you can configure it on your own using babel and webpack or which ever tool you wanna use (if you want that). I will be preferring CRA

Inside our back end project directory, initialize the front end project.

npx create-react-app frontend

After a while, we now have a new react app, which 😱magically 😱 does nothing (beside spinning a huge blue react logo).

After it, modify content of package.json of front end project and add following code to it.

  "proxy": "http://localhost:5001"

This will save us from typing API URL multiple times from our ajax calls, which we will be writing in front end component.

🛠 Write a component

Before writing component, I will install axios (if preferred or use fetch) for back end communication.

cd front end
npm i axios

Then, create a basic component for testing and verifying purpose. Which will verify the connection between front end and back end.

import axios from "axios";
import { useEffect } from "react";

function App() {
  const fetchData = async () => {
    try {
      let resonse = await axios("/home");
      if (resonse.status) {
        alert("hooray");
      } else {
        alert("OH ! Snap....");
      }
    } catch (err) {
      console.log("err ", err.message);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div className="App">
      <p > Testing Deployment </p>
    </div>
  );
}

export default App;

This component does only fetching of data and throwing an alert. Here, we are executing function of API call, directly in useEffect() for avoiding extra bit of code for testing purpose only.

Then, add the script in the back end project as

    "client  " : "cd  frontend && npm run start"

This script will run the project and you will see the normal alert

🚚 The Deployment Stuff

Until this point every thing is good.

Now, it's time to deploy it using static asset serving. Many tutorials are currently explaining, how to ship this kind of project on platforms like heroku or varcel. Which are pretty good. But, this platforms are friendly up to a certain extent. For ex.

Heroku is free, but your free dyno will be inactivated if it is not actively getting used for a certain duration. Rebooting the slept dyno can take fairly large amount of time as compared to normal requests.*

For avoiding this, we end up serving the project's on paid servers, there we should serve the apps in this fashion.

For deployment, we will be generating the bundle of static files which will be served from Nodejs back end. We Already, added a snippet for this in index.js.

This way, whenever we are using it in production this will work as expected

Step 1 - Generate Bundle

Add script in package.json of back end project, for building the static asset from react source code

    "build" : "cd frontend && npm run build"

This will change the current working directory and after that, it will generate the /build folder in front end project.

Step 2 - Place /build directory in root folder

move the build directory in the root of the project.

mv ./build ../

Step 3 - Set NODE_ENV to production

Afterwards, last step is to change/set the value of NODE_ENV (in .env file) as the "production" which depicts, we are in production mode and enable static asset serving.

NODE_ENV = production

content of .env file will look like this

PORT=5001
NODE_ENV=production

Now, for visit the url

http://localhost:5001/home

You will get the alert response and finally everything is working.

Now if we deployed this Nodejs project on any production ready cloud environment like

AWS EC2 Instance
Digital occean Droplet
Virtual Machine

Then this will work as expected. Thus final directory structure will look like this

😎 Final Thoughts

This is one of way of serving the full stack application created using React and Nodejs. When, I was deploying this kind project, I haven't found any comprehensive guide, so I decided to write one !

Thanks for reading 🙏

🚀 Productivity Tips 🚀 for every Javascript Programmer 💻

sudarshan — Fri, 21 May 2021 02:30:41 +0000

Here is a interesting fact, do you know which is the worlds most hated and most loved programming language .......? 🙄

(anyways) You are right it is ❤ JAVASCRIPT ❤

Someone who is working in javascript from a certain period of time can easily describe the advantages of using javascript over some another languages like PHP and Python.
for ex.

🔰🔰🔰

Async nature of javascript
Interpreted instead of Compiled
Supports Promises and Closures and many more.

But, every thing comes with it's own cost. If someone tried coding in javascript without understanding the execution context and behavior of javascript, then (I think) it's the end game.

For avoiding this kinds of situation, here is the list of best practices, which anyone can follow to avoid the future mistakes.

👉 one thing, I want to mention is, this may not be worlds best article for best practices, but I will definitely make it as good as possible.

🔳 Understand Scoping of Variables :

Understanding the scoping of variables is pretty important while coding. Variables declared with let are specifically blocked scope. Whereas, if you used var then you can hoist it anywhere in your code, but using var should be avoided as much as possible (suggested by many !).

But, I escalate this suggestion only when there is nothings seems working or scenarios where, I have to manipulate the global variables based of the events like

If exception occurs print log and terminate programme using

process.exit()

etc...

📢 Getting Known To This :

I often find the behavior of the this is pretty confusing in javascript for me. Coming from the background of java and
PHP, I assumed that I will definitely feel at home if I used it but, then I was pretty confused when getting started with the React or ES6. After several weird things, I left it and then approached the programming in javascript using functional
approach.

It is still pretty confusing for me to know how this works, but if you wanna use it then know it perfectly.

🍭Create Pure Functions :

This is the principal everyone should follow in their programming paradigm. Creating pure functions and causing less side effects on the external world, makes the function more reusable and robust. If function is no longer making any side effects on the global context or the data present outside the body of the function, then it can be easily swapped out, reused and manipulated with ease

😷 Never Trust API Response Blindly:

Handling the API responses blindly can easily lead us to the end game or late night forceful fixes. Always handle the API response with null coalescing operators or default initialization of the variables.

for ex .

Know more about Null Coalescing Operators Here

💪 Use IIEF Whenever Possible :

IIEF stands for " Immediately Invoking Function Expression". It's comes pretty handy if you want to make your isolated from the global context. Take a look at here

IIEF keeps the variable inside the context and avoids the hoisting.

😎 Use Promises Instead of Callback Only Approach :

Using Promises is pretty standard practice now. But, anyone using callback-only approach must take a look at here.

Introducing promises cured the some major deficiencies in the javascript. for ex

Inversion of Control trust loss

etc.

Handle promises gracefully and enjoy the javascripting

🏵 Final Thoughts 🏵

Using javascript with modern practices could be the experience which any programmer never wanna leave, but it can be nightmare for someone who tries to get rid of the basic and directly jump into the advanced stuff.

Thanks for reading 🙏

⚡ Superb Comprehensions ⚡In Python Using List and Sets

sudarshan — Sun, 16 May 2021 01:57:25 +0000

📢 TL:DR :

Dealing with data structures is not a big deal if you are using python, isn't it ?

If it is a big deal, then take look at conversation.
Here, we have 2 noob coders .
😎 Chintu and 😷Mintu. 😷 Mintu is technical client in the room and Chintu is A-K-A a developer. Hence, 😎Chintu is implementing the requirements of his client, which are changing very fast (as we all know).

[ M : Mintu, C: Chintu]

😷 M : I want to generate a list of even numbers from 1 to N, but not with classical for.... in loop with range() and all that. Instead with something different

😎 C : Ok ! this is my try

n = 100
allSum = [num  for num in range(1, n+ 1) if num % 2 == 0 ]
print(allSum)

😷 M : Ooops ! I want square of each number, once they are in a list....

😎 C : No worries

n = 100
allSum = [num**2  for num in range(1, n+ 1) if num % 2 == 0 ]
print(allSum)

😷 M : Yahh... It will be pretty nice if it contains original numbers also

😎 C : Ok ! Here we go

n = 100
allSum = [[num, num**2]  for num in range(1, n+ 1) if num % 2 == 0 ]
print(allSum)

😷 M : Awesome !!! but, now I want dictionary of original and squared number instead of nested lists

😎 C : Fine ! I have this

n = 100
allSum = [{num: num**2}  for num in range(1, n+ 1) if num % 2 == 0 ]
print(allSum)

😷 M : Great ! but, now I think all should be in a SET, but by using your previous code

😎 C : Ok Fine ! see this

n = 100
allSum = {num**2 for num in range(1, n+ 1) if num % 2 == 0 }
print(allSum)

😷 M : Cool ! But, now I want iterator instead of the whole list at once

😎 C : OK Sir !

n = 100
allSum = iter([num**2 for num in range(1, n+ 1) if num % 2 == 0])
print(next(allSum ))

😷 M : can you explain why we should prefer ** list iterator ** instead of the normal list ?

😎 C : Yup ! List iterator are kind of generator object in nature, which are used to comprehensively yield the values when we call the next() on the object of iterator. The real benefit of creating generator is, that they don't consume memory before actual yielding / producing the value. This saves a lot of runtime memory and gives out programme a free space to use.

Application of this would be like, if we have a database transaction which requires millions of rows to complete the process. In this scenario, if we loaded the data using normal data structure like list, then CPU have to pre-load whole data before actual using it and then proceed further, instead we can use generator / iterator object which yields the value at runtime once anyone demanded.

😷 M : Nice ! but can you create this

😎 C : Are you kidding me ! It is so simple


allSum = [i for i in range(0, 7) for j in range (0, i)]
print(allSum)

🤗 M : Kinda cool ! I declare you are not NOOB Now

🚀 Final Thoughts :

This are some comprehensions which anyone can use in their day to day programming usage.

This makes our makes our code more readable and more concise. Although, it is every individual's choice about preferring or not preferring the comprehensions. Here, I am putting my simple try for the comprehension.

Thanks for Reading 🙏🙏

Are you using React ? Then I think you must know this

sudarshan — Sat, 15 May 2021 02:37:03 +0000

At the time of writing this, React is at version 17.02. It is fascinating to see the exponential growth of this library. Everyone one is writing code in the react with the amusing speed and efficiency. But, still there are plenty of rabbit holes where most of the programmers got into the jargon.

If you are using react for a while, then I think you have faced the weird behavior of react sometimes like :

Tooooo many re-renders error
Async behavior of setState() etc.

So, In this article I will touch over some of the situations where we have to be careful 🔍

✂ Destructure Props With Default Values :-

React Components heavily relies on the data forwarded using props. Whether it is a state object or a callback function. Handling props and destructing them before actual using them is one of good practice. It makes your code less error prone and more robust in order to sustain the uncertain behavior of inputs


const ChildComponent = ({ username = null }) => {
            return (
            <>
                <p> Hello ! {username ?? "Anonymous"} </p>
            </>
        )
    }

Here, In this snippet props are destructured with default values to avoid undefined error. Also, while using the props are used with ?? operator to avoid any further conflicts

😷 Using useMemo() :

Every state change comes with the cost of re-rendering the virtual DOM. Sometimes this re-render is less costly, but sometimes it does make the difference. So, when re-render happens every bit of code inside the function body is re-defined and it is unnecessary to re-render the Dumb Code. Because, it is not going change its functionality. hence, we use ** useMemo() **


const ExecuteCounter = React.memo((data, callback) => {
return({
<button onChange={callback}> Increment </button>
}))

As, everyone can notice, the execute counter is DUMB Components. Hence, here it is wrapped in the memo(). This will re-render the ExecuteCounter() only when the props are changed.

🔨 setState() is async :

setState() is async in nature. When we call the setState() in the callback function, it is not going to update the state instantly. rather, it will batch the any subsequent changes and then apply them once it's done. This avoids the several heavy lifting because the setState() applies huge computations while re-rendering

This is probably the haven't estimated by many but, it's worth mentioning it here. Reason behind making the setState() async is pretty simple. As JavaScript is single threaded, making the setState() synchronous can block the browser's main execution thread and ultimately results in the unresponsive page. Hence, to avoid this the React's DEV team created the setState() as async in nature.

This is experienced by many dev's if we immediatly querying state values after we call the setState()

🎉 Use thunk() :

If anyone already using redux may know this, but still I will explain It. Making async changes in the redux reducer is pretty easy with actios. But, any newbie ever tried to make ajax requests from the actions of the redux, then here is the trick,

while creating store in redux, we have to wrap the redux thunk inside the create store


import thunk from 'redux-thunk'

const middelware = [thunk]

const store = createStore(rootReducer, applyMiddleware(middelware))

After this you can dispatch the async request from the action creaters like this



const get userInfo = (userId) => async (dispatch) => {
   try {
    //fetch data 

    dispatch({ type : "ACTION_TYPE" : payload : "VIRUS"})

   } catch (err) {
     console.log("err", err.message")
   }

}

This, is simplistic example of thunk. We can exploit it to do more actions then that of simple ajax requests

😎 Final Views :

Re-rendering the components in react cost us more. Avoid re-rendering of the dumb code can significantly increase the render speed and avoid the any pitfall or lag in the interaction between the user and the we application

Thanks For Reading 🙏

Top Utility Packages In Javascript

sudarshan — Tue, 11 May 2021 02:42:20 +0000

📢 TL:DR :

We all seek for utility packages on npm. No Matter we admire it or not, everyone (once a day or many times a day ) needs some UTILITY. So Here is the list of some utility packages which makes your life a bit easier.

🛠 Papa Parse :

This is the great package when we deal with files. Consider a scenario, you are building a automation system, which query's the data from third party API and process it internally and outputs processed data.

During your development, you want to process massive amount of CSV data, then *Papa Parse * is your 🗡Go-to Man 🗡

Here is an example

          let CSVdata = await getCSVContent(getCSVContentURL);

          let parsedData = papaParse.parse(CSVdata).data;

          console.log(
            "ParsedData is  ",
            parsedData.length
          );

Here, after await() call, we are getting CSV file, which contains the data. Once we got the data, I used papa parse and Papa parse give me the array of objects (In my case) pretty easily without any jargon.

There is whole lot more functionality you can use

💻 Puppteer:

Puppteer is the browser automation tool. It is a pretty similar as compared to Selenium or any other automation tool. But, advantage of Puppeteer, it provides wide variety of functionality with respect to headless chromium browser and lower level DOM API's

If you want to know more about it then, I have a article regarding usage of Puppteer take a look at it 👉👉 Here

⚡ Cheerio ⚡:

Cheerio can be used with puppeteer. Cheerio parses the available html data and gives us the ability to interact with data and extract the useful information. It can act as parser, if you are building the 🔍 SEO scrapper 🔍 or the Resume scrapper for your organization

     const cheerio = require("cheerio")

     //jquery style
    const $ = cheerio.load(content);

    //use $ to interact with elements

GCL :

GCL is the short form for the get-current-line. It is my favorite package. It is totally optionally to use but, if you have project where you have to implement :

logging specific events to the database
getting the line number, where the specific code is executed

then you must use it. It does nothing but gives you the current line of code with very simplistic API

          console.log("\n Getting current line number \n");
          let currentLineNumber = gcl.default().line;

Pretty simple :)

🤑 Proxy Chain 🤑 :

Whenever you want to apply the proxy to your nodejs, then use it undoubtedly. Proxy chain provides us the way to interact the proxy with pretty simple way. It generates the new proxy URL which you can put into the configuration and then we are good to go

Here the example usage of proxy chain

        let newProxyUrl = await proxyChain.anonymizeProxy(proxyUrl);

        launchConfigObject.args = [
          "--no-sandbox",
          "--disable-setuid-sandbox",
          `--proxy-server=${newProxyUrl}`,
        ];
        console.log("proxy executed ....");

This is the example of proxy chain with puppeteer. While doing automation, applying proxy is non-written rule. In the above snippet, I have used anonymizeProxy() API of proxy chain which builds ready to use proxy URL for us.

🖍 Chalk :-

If you are the fan of doing the colorful stuff in the terminal then this is for you. Chalk provides the API's which makes our terminal colorful and it is pretty light weight and flexible to use. we can directly put it into native javascript API's like console.log and use it comprehensively

This is the example of chalk used with the morgan.

🏏Morgan :

Morgan is used as the logger for the nodejs server it is pretty helpful to interact with the incoming requests and all these stuff happening inside the nodejs. It gives us the prebuilt modification of request logging. if you used

        app.use(morgan("dev"))

Then it will run in developer mode and will log pretty helpful information regarding request like *execution time *, *response code * etc

☀ Final Thoughts ☀ :

These is the list of 0.00000001 % of npm packages which are available to use. Using packages is pretty much optional and preference based. but, using them saves us from *Re implementing the Wheel *

Please, let me know in comments if you know any other utility packages

Thanks For Reading 🙏

React Clean Code Tricks Everyone Should Know...

sudarshan — Sat, 08 May 2021 03:45:02 +0000

🤖 TL:DR :

React is unopinionatedly the most famous framework to write the web apps. Due to it's simplistic approach towards handling data and managing state, it is gaining more popularity day by day.

Writing simple todo applications in react not required any deep understanding of the actual code base or the things which are happening under the hood. But, as soon as anyone plans to write the multipage application with react (using several third party libraries) then the individual must have to spend reasonable amount of time on the planning of several things such as :

Which state managment library we are going to use
Should we go with functional components or class based components
How we are splitting our code ?
Which bundler to use ? and Many more

So, once this done then actual overhead begins i.e. writing code. This article will help to reduce this overhead and show you some real best practices to handle complex things such as

Role base UI Preview
Conditional rendering best practices and many more

🔐 Role Based UI Rendering :

Almost all application contains basic role based access management system. Handeling each components UI according to the user role is the key factor of every app. By using object literals we can easily manage the UI as follows

Use 😎'Fragments' instead of unnecessary 😒"div's"

When you are wrapping the multiple components in the single

for following the principal of Single Component Return. You are creating multiple s which will be overhead if your applications grows. Hence use fragments instead of divs


    return (
        <>
            <FirstComponentForUser />
            <SecondComponentForUser />
      </> 
    )

😈 Destructure properties earlier :

If the component consumes the data of API (which returns JSON) then we must have to destructure the data earlier. This will prevent us from doing getting things like


        Cannot destructure propertie 'blah' of undefined

For avoiding this do this

Here, is one another trick ! I have destructured the properties using the default value which will help us if API return's NULL

🤐 Strictly Follow The Import Order 🚚

following the import order gives us the clear view about what are our custom imports and what are the built-IN/System imports. This will also helps use to identify any third party imports like axios, moment etc..

Write 🎇styles🎇 in a performant way :

If you have the common styling among the components, then it's better to extract in the styles of section of react. But, even after the applying the common styles if you need to modify something then use rest syntax

Use 👉SVG's instead of PNG or JPEG images

Always prefer SVG's (Scaler Vector Graphics) over normal PNG or JPEG images. Reason is, scaling of the SVG is lot more superior than any other relevant image format.
Hence, pixels of image will be rendered sharply regardless of the aspect ratio of the screen.

🎇 Final Thoughts 🎇 :

Best practices always looks ovewhelming when you are just getting started with any technology. But, they will save your time once you start building large scale applications.

🙏Thanks For Reading !

💜 See you in the next One ! 💜

Productivity Hacks Using Puppeteer

sudarshan — Wed, 05 May 2021 03:27:08 +0000

TL:DR :

Puppeteer is one of the greatest tools available on the web in order to perform the automation regarding website or In-Browser Activities. Today, Instead of single huge chunk of code (which does nothing helpful other than only page screenshots ) I will try to explain the several tricks which you can use in your next project or any testing purposes.

👻 What is Puppeteer :

Puppeteer is browser automation tool which is used to automated activities on the internet using Headless Chromium Browser.

Puppteer uses the high level API provided by the google in order to interact with headless chrome. It provides high level of flexibility and extensibility in order to modify the default behavior of Puppeteer.

🚀 Launch It :

For launching Puppeteer, people normally use basic configuration, but here I will show some advance modification in order to launch Puppeteer in various modes

Here we are using main three options

Lauching Puppteer using headless flag as false , because it will show the activity of browser on the screen
Second flag is linux specific. I used it here, because if i excluded it then code will break on ubuntu 20.04
This option is pretty useful because it removes the tag from the browser window which is "* Google chrome is controlled by the automated software*"

Then all we are doing is launching it using launch() and then redirecting the page to google

🤖 Launching the Puppeteer in the Incognito Mode :-

Whenever we are doing automation, there is a point when you will be forced to use the incognito mode of the chrome. It is pretty helpful, if a site is preventing you from accessing the useful stuff, because they stored the cookie in you localStorage marking you as a robot and when you are accessing the stuff it is blocking your access

Then solution is here

Add this two line snippet while launching and Puppteer will open automatically in the incognito mode. COOL 8)

Handle Navigation :

Handling navigation is pretty important while you are extending the testing / automation to the multiple pages. If the navigation isn't handled properly then we may get this

Failed to execute. Mostly because context destroyed due to navigation

To avoid this stuff handle navigation as follows

This is the example of performing the search on the google. Type the search term in the search box (with provided delay in order to avoid the bot detection) and then press Enter.

After it, wait until navigation completed and when the DOM content is loaded completely then proceed further.

Further to these, we can use two constraint to check whether the page is loaded completely or not

'domcontentloaded' :- as soon as DOM loaded proceed
'load' :- wait for all things load using Javascript and CSS files and images

😎 Interact with elements :

We have to click on the web in order to get info regarding something. We all Know that but Puppteer doesn't. Hence, forcing it to click on element is one of crucial functionality we all must know.

😂 You will use this a lot, because it allows the smooth scrolling up to the element which is to be clicked. If it is present at the bottom then instead of clicking it directly, it will first scroll up to the point and the click on it.

Evaluate things using $$eval() :

It is pretty useful, if the scenario occurs where you don't want to interact directly with DOM then we can use the eval() in order to get things from element
For ex. clicking on it, getting text content etc

using $$eval() over the native dom API's like

javascript document.getElementById("blah")

is preferred by many individual. Because, if we used eval() then Puppteer will efficiently searches through the DOM and intern manages all things internally but by using native API's we are adding additional load on puppteer. Although it is preferential

🎯 Final Thought :

Puppeteer is pretty useful for automated testing and other stuff. But, you must have to take care of detection. In this article, I touched over the few things (* Less than 1% *) which are important in day to usage. but, if you want to explore more please let me know in comments. I will love to hear your thoughts 💜

🙏 Thanks For Reading....

6 Nullish coalescing operators every javascript programmer must know !

sudarshan — Mon, 03 May 2021 03:58:48 +0000

TL:DR :

Most of the time out javascript code becomes clumsier if we inserted the multiple null checks for the several entities. Those checks are kind of mandatory and if those checks were removed then this happens

TypeError: Cannot read property 'xyz' of undefined

For preventing the programme from crashing and also making a code a bit neater, in this article I will explain some ways to handle this tricky situations

For the sake of examples, I will use following object to show you some example usage of the operators

let person = {
    name: "sud",
    age: 21,
    hobbie: {
        first: "Code",
        secodn: "Chess"
    }
}

Ternary Operator

Ternary operator is most commonly used operator in the code. Most programmers use this as the replacement of inline if --- else. This operator mainly used in the conditional rendering of components in React

//ternary 
let result = person.name === "sud" ? "Howdy Sud " : "Howdy Stranger"
console.log(result)

It is pretty straight forward. before ? is the condition. immediately after ? symbol is the block for true value of condition and other is for false result of condition

💥 Super Powered Ternary Operator 💥

Ternary operator really shines when it is nested with itself and can be replace if ...... else ladder completely is used properly. In the following snippet, I used the operator as the if else block and made the code more readable for anyone

//ternary as if else 
let isAdult = person.age > 18 ?
        " You are adult :)"
        : age < 15 && age > 10  ?
        "You are on the way " 
        : "No Kids here "
console.log(isAdult)

It's pretty simple here, Append multiple conditions with consecutive block and then put last else block for default condition

Default Assignment with ??

Default assignment is one of my favorite once. This allows me to provide the placeholder value with minimal code by which we can trust the values and can implement type safety at logical level


let sudsAge = person.age ?? 22
console.log(`Sud's age is ${sudsAge}`)

Here we are assigning the default value to sudsAge if the person.age is undefined. It is pretty helpful. Thanks to this operator for saving us lengthy checks ❤

Multi Condition Evaluation with .includes()

Many times we have to check many conditions for both true / false values. For doing these, I used to write multi-line nested code of if and else block or use the switch statement. But here is the trick

//check with multiple conditions
let isSporty = ['Chess', 'cricket'].includes(person.hobbie.first) ? "true" : "Nope"
console.log(isSporty)

By replacing array values with real condition, we can check for all true values. If any values returns false then it will won't proceed .

Check Presence of Property In Object Using ?.

This is most useful operator in day to day life. Whether you are dealing with async API calls or dealing with blocking tasks, we easily assume the key will be present in the response of an API or output JSON object of any operation But, what if key is absent of undefined. Here is the trick

let sudsHobbyFirst = person?.hobbie?.third 
console.log(sudsHobbyFirst)

By using this operator we can make sure the property is present or not and perform checks / operations according to result.

Chaining Default Assignment and Membership Operator

Previously mentioned operator can be super powered if chained with the default assignment. We will assign the default value to variable if the property is undefined or absent.

//?. with ?? 
let sudsHobby = person?.hobbie?.third ?? "Nothing"
console.log(sudsHobby)

Here, we are assigning the placeholder value for sudsHobby
(🤣 you will use this a lot 🤣 )

Final Thoughts

This my small try to explain you all the usage of some operators which could possibly make your code neater and smaller rather than your previous code

🤗Please let me know your thoughts in comments

🙏hanks For Reading ...

Promise handling and chaining using async...await and then()...catch()

sudarshan — Fri, 30 Apr 2021 03:14:03 +0000

TL:DR

Handling promises is one of the biggest topics in the nodejs. But, in this article I will try to explain the various ways to perform promises operation (including chaining) using both async...await and then().... catch().

In Nodejs we all use promises to handle the async code like Third Party API calls, Tedious I/O Operations and other CPU intensive tasks, which are blocking.

While handling this kind of code we have to decide the approach to handle promise afterwards once it is resolved or reject. For that we can use mainly two ways.

1. 💣 Using then() .... catch() :

It pretty simple to handle the promise in then() - catch() block. then() block will handle resolved promise and catch will handle reject promise.

//Handle Promise using then ---- catch 
axios.get("https://api.github.com/users/sudarshansb143")
    .then(response => console.log("User Login is ", response.data.login))
    .catch(err => console.log("error", err.message))

2. 🔥 Using async .... await :

This is the second approach where we will write external try catch to handle any unwanted behavior of promises and smoothly catch errors.

//Handle Promise using async ---- await 
(async () => {
    try {
        const axios = require("axios")
        let response = await axios.get("https://api.github.com/users/sudarshansb143")
        console.log("user login is ", response.data.login)
    } catch (error) {
        console.log("error ", error.message)
    }
})()

As await needs to be wrapped inside async function I uses IEF (more on this later)

Until now it is pretty simple but, now take a look at following code (unoptimised)

//handle multiple promises with then --- catch
axios.get("https://api.github.com/users/sudarshansb143")
    .then(response => {
        console.log("User Login is ", response.data.login)
        console.log("calling second one\n ")
        //next call 
        axios.get("https://api.github.com/users/sudarshansb143")
            .then(data => console.log("\n success \n"))
            .catch(err => console.log("err 2"))
    })
    .catch(err => console.log("error", err.message))

Here, I am handling the multiple promises one after another. So, first I fetched my own GitHub profile. Once data is available I again executed promise and then logged the "success" message for confirmation that second promise is resolved successfully

Similar code can be written with async...await as

//handle multiple promises with async --- await
async function handleMultiplePromisesWithAsync() {
    try {
        let resp1 = await axios.get("https://www.api.github.com/users/sudarshansb143")
        let resp2 = await axios.get("https://www.api.github.com/users/sudarshansb143")
        console.log("done")
    } catch (error) {
        console.log("error ", error.message)
    }
}
handleMultiplePromisesWithAsync()

Anyone looking at both snippet will easily able to decide that the async... await code is pretty straight forward instead of multiple then catch block. This is once of difference why I prefer the async....await other ways.

Also, we have to use less curly bracers in async.... await 😜😜

🌟 Chaining Multiple Promises using Promise.all() 🌟

As mentioned above, the simultenous API calls can be done one after another but there is other elegant way of performing the same task

async function usePromiseAll() {
    try {
        await Promise.all([axios.get("https://api.github.com/users/sudarshansb143"),axios.get("https://api.github.com/users/sudarshansb143")])
        console.log("\n done with then \n")
    } catch (error) {
        console.log("error ", error.message)
    }
}

usePromiseAll()

Here, I am resolving the multiple promises using single .all() block. But, keep in mind both promises will be resolved at once hence, there should be no inter dependent code is written afterwards.

For scenario where input of next promise is dependent on output of previous promise, we must use separate await / then() blocks

# 🏵 IEF :-

This are the function which are executed immediately once we call the script use command node. Anyone using IEF must care about it's consequences on the other stuff present inside the similar script. Because, there is possibility that the code considers the other code as intermediate object

⚡ Final Thoughts ⚡:

Using async...await / then()...catch() is totally the prefrential constraint. So, everyone has their own approach to handle and write the code. Hence, this is my try to explain what I think about them

🙏 Thanks For Reading....

👻 Please let me know your thoughts in comments :) 👻

Send Mail Using Node.js and gmail in few Simple Steps

sudarshan — Tue, 27 Apr 2021 16:37:08 +0000

We all know how tedious the stuff gets when we wan't to send mail from any automated system.

For example,

ping someone when CRON job at remote VM Executed *
Get failure logs of your server in mail* etc

So, today we are going to take a look at how can we send mail from nodejs using just a gmail account and third party library node-mailer

Setting up G-mail :-

For sending mail's through your gmail A/C you must allow the " less secure app" access to your google A/C which is done here
a
https://myaccount.google.com/lesssecureapps

Step 1 :- Setting up node-mailer

Install node-mailer using npm or yarn (which is one prefer let me know in comments). I will use npm here because, it comes with node installation

npm i nodemailer

Step 2 :- Setting up node-mailer and some basic configuration

After installing node-mailer, we have to setup some config's. For sending mail, we are going to use Gmail as a mail service and create a mail transported object. Which internally handles the SMTP (Simple Mail Transfer Protocol) transactions.

const nodemailer = require("nodemailer");

module.exports = {
    sendMail: function () {
        let mailTransporter = nodemailer.createTransport({
            service: "gmail",
            auth: {
                user:"yourUserName@gmail.com",
                pass: "<SecretPassword",
            },
        });
    },
};

Step 3 :- create mail object

Now it's time to create actual mail payload. It will contain of recipient mail address and other stuff like subject and the string which we want to send with the mail. This is the basic payload we can alter the stuff with great flexibility

        let mailDetails = {
            from: "yourUserName@gmail.com",
            to: "favPerson@anyDomain.com",
            subject: "You Were Hacked 8)",
            text: "System failure !",
        };

Step 4 :- Send Mail

Now, just hit it. ( I am handling result with callback, you can also use Promise here)

  mailTransporter.sendMail(mailDetails, function (err, data) {
            if (err) {
                console.log("Error Occurs");
            } else {
                console.log("Email sent successfully");
            }
        });

That's It. Now, we can send email to anyone with any email address without setting up out own mail server or anything else

Final Thoughts

I hope you all learnt something new from this post. Let me know if anything else I have to write in my next one

Thanks for reading :)