DEV Community: Pratyush Raj Singh

From JavaScript to TypeScript

Pratyush Raj Singh — Thu, 07 Aug 2025 04:10:57 +0000

Let's talk about something fundamental that often trips people up when they're first diving into the world of front-end development, especially with REACT and Typescript: the difference between .js, .jsx, .ts, and .tsx file extensions.

It seems like a small detail, but understanding this can save you from a lot of head-scratching and "why isn't this working?" moments.

From JavaScript to TypeScript: The Big Leap

We all start with JavaScript, right? The language is flexible, dynamic, and gets the job done. But that flexibility can be a double -edged sword.

Imagine you have a function that's supposed to add two numbers. In a .js file, you might write:

function add(a, b) {
  return a + b;
}

This works perfectly... until someone accidentally calls it like add (5, "world"). JavaScript will happily return "5world", and you might not even know you have a bug until much later.

This is where TypeScript comes in. By using a .ts file, we introduce static typing. We tell the code what to expect, and the compiler becomes our trusty assistant, catching mistakes before they ever become a problem (at runtime).


function add(a: number, b: number): number {
  return a + b;
}

Now, if you try to call add(5, "world"), the TypeScript compiler will immediately throw an error. It's like having a spelling checker for your code logic. It's a game-changer for building robust, scalable applications.

Adding JSX into the Mix

Now, let's talk about building user interfaces, specifically with React. React uses something called JSX, which is an elegant way to write HTML-like code directly within your JavaScript files.

In a standard React app, your component files might use the .js or .jsx extension. The "x" in .jsx was originally a clear signal to build tools that "hey, this file contains JSX!". Today, most modern setups can handle JSX in a .js file, but the intention remains the same.
When you bring TypeScript into your React projects, you need a way to tell the TypeScript compiler to not only check the types but also correctly parse the JSX.

This is the job of the .tsx file extension.

Think of it this way:

.ts = Standard TypeScript code (type-safe logic)
.tsx = TypeScript + JSX (type-safe React components).

In practice, this means your component files will be .tsx, while your utility functions, API services, and other non-UI logic will live in .ts files. This keeps your codebase organized and ensures that your components are just as type-safe as the rest of your application.

Why This Matters

Choosing the right file extension isn't just about following conventions; it's about clarity and stability. It allows development tools to do their job effectively and, most importantly, it helps you and your team write more predictable and less error-prone code.

So, the next time you see .ts or .tsx, you'll know it's not just another file type - it's a conscious choice for building more robus, maintainable, and reliable software.

What Ethereum Is?

Pratyush Raj Singh — Sat, 22 Apr 2023 08:28:44 +0000

Hey, Do you know what Ethereum is?
Ans.- Yeah who doesn't know about Ethereum in today's era? It's a cryptocurrency just like Bitcoin and other.

So, that's the general answer that I got for that similar question.
But, Here is the tweak, Ethereum is not a cryptocurrency it's a decentralized platform that provides a high degree of security. The cryptocurrency is ether which is used to run the platform of Ethereum.

Ethereum offers several benefits for developing DApps, including the ability to create and execute smart contracts. Smart contracts automate processes, reduce the need for intermediaries, and increase transparency and efficiency.

In addition, Ethereum has a large and active community of developers and users who are constantly innovating and creating new applications. This provides a wealth of knowledge and resources for developers, as well as a user base for applications to reach. Finally, Ethereum has a strong security model, with built-in measures to protect against common attacks such s denial-of-service (DoS) attacks, spam attacks, and more. This ensures that your applications are safe and secure on the platform.

Blockchain technology and Ethereum, in particular, are revolutionizing the way companies approch business. Here are some real-world examples of how Ethereum is being used to crete innovative solutions are solve real-world problems:

Coca-Cola is using Ethereum to imporve supply chain managment, ensuring transections are tracked and verfied in real-time. Imagine every bottle of Coca-Cola you purchase being tracked from the moment it's created until it reached your hands!
Microsoft is using Ethereum to create decentralized identities for its users, giving them more privacy and security. Imagine having complete control over your digital indentity and being able to securely manage it in a way that's never been possible before.
JP Morgan is using Ethereum to create their own blockchain platform called Quorum, which allows for more secure and efficient transection processing. Imagine being able to conduct financial transections faster and with greater transparency than ever before.
ConsenSys is using Ethereum to create decentralized applications across various industries, from finance to energy. Their solution are aimed at reducing friction increasing efficiency, and creating more transparent and equitable systems. Imagine being able to intrect with companies and systems in a completely transpletely transparent and trustworthy way.
Ubisoft is using Ethereum to create blockchain-based gaming experiences, where players can truly own their in-game assets and have complete control over them. Imagine owning virtual items that have real-world value and being able to transfer them to other players or sell them for actual money!

These are just a few examples of the limitless potential of Ethereum and blockchain technology. By utilizing Ethereum, companies are able to create solutions that are more secure, efficient, and transparent than ever before, and we can expect to see more and more businesses jumping on board in the coming years. The future is looking bright for Ethereum and the blockchain revolution!

How to Add CI/CD using Github Action in a Project.

Pratyush Raj Singh — Sun, 09 Apr 2023 07:00:36 +0000

Developers Life is always need a shortcut. In my development journy I was using manual deployment of my own projects. That's very time taking and repetable work for me. Then I go through and search for the internet about CI/CD and I come to know that we can use Github action for automate our build and deploy process.
Before this I done this work in these steps manually:

First Commit my code to github
Then make a build in local
Then finally run deploy command

so, By the help of Github action I skip the last two steps, I just have to only push my code to my github and rest of the work will manage by the Github Actions.

In this blog I am writing a begginer guide to start with Github action implementation in your project.

For making any github action you have to make a folder called .github in your root directory. Inside that folder make a new folder and named it workflows. Inside Workflows folder you can define your github action file using .yml extension.

I make a file: .github/workflows/deploy.yml

name: Gatsby Build and Firebase Deploy

on:
  push:
    branches:
      - main

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Use Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '16.x'

    - name: Install dependencies
      run: |
        yarn install

    - name: Build Gatsby project
      run: |
        yarn build

    - name: Deploy to Firebase Hosting
      uses: w9jds/firebase-action@v1.4.0
      with:
        args: deploy --only hosting --token ${{ secrets.FIREBASE_TOKEN }}

This workflow will trigger whenever there is a push to the
main branch. It checks out the code, installs the necessary dependencies, builds the Gatsby project, and then deploys the project to Firebase Hosting.

Make sure to replace ${{ secrets.FIREBASE_TOKEN }} with your own Firebase token, which you can create in the Firebase console. You'll also need to make sure that your Firebase project is properly set up for hosting, and that the necessary Firebase CLI tools are installed.

How to use Command Line Arguments in Node.js

Pratyush Raj Singh — Tue, 07 Mar 2023 16:31:16 +0000

INPUT:

const argument = process.argv

console.log(argument)

OUTPUT:

node your_fileName 4 5

[
Node js path,
your file path,
'4',
'5'
]

Host Multiple WordPress Websites on one Server.

Pratyush Raj Singh — Sun, 30 Jan 2022 10:02:26 +0000

Pre-requirements:

Digital Ocean Account
AA Panel
Nameserver Management

Step 1: Create a Digital Ocean Account.

Step 2: Make a Basic Droplet With Ubuntu OS (cost 5$/month).

Step 3: Login into Droplet Console.

Step 4: Install AA panel in the Droplet (Ubuntu)

Click Here for AAPanel

Step 5: Save the URL and Login Credentials of AApanel that you got after installation done in console.

Step 6: Visit the URL open AApanel console and login with Credential

Step 7: After Login choose NGINX server and install the basic files like MySQL, php (7.1 is better)

Step 8: Add Website using their domain name/subdomain name

Step 9: Go to your domain Name provider add A record and target it to the Droplet ipv4 address.

Your hosted site will be ready within an hour. A welcome page shown to the particular Domain name what you add in your AA panel.

How to Add Swap Space on Ubuntu 18.04 +

Pratyush Raj Singh — Mon, 21 Dec 2020 12:56:50 +0000

What is a Swap?

Swap is a space on a disk that is used when the amount of physical RAM memory is full. When a Linux system runs out of RAM, inactive pages are moved from the RAM to the swap space.

Swap Sapce can take the form of -

A Dedicated Swap Partition or,
A Swap File

Generally when running Ubuntu on a virtual machine, a swap partition is not present, and the only option is to create a swap file.

You can add Swap space using both of above option. There is no any pros and cons b/w them If your using Ubuntu in your laptop then you can add simply a swapfile or can make a special partition on your disk for swap both will work same.

But making swapfile is a handy method from making a speical partition for swap, You can change it's swap size any time without even rebooting your machine.

How Much Swap do I need?

Before You Begin

Before continuing with this tutorial, check if your Ubuntu installation already has swap enabled by typing:

$ sudo swapon ---show

If the output is empty, it means that your system does not have swap space enabled.

Otherwise, if you get something like below, you already have swap enable on your machine.

Although possible, it is not common to have multiple swap spaces on a single machine.

1. First We discuss How to add or modify a Swap Partiton.

Creating the Swap Partition

Boot the Ubuntu install CD and choose the option to run Ubuntu now.
Go to System -> GParted Partition Editor.
Delete the swap Partition and, if there is nothing else in it, the extended partition that holds it.
Decrease the size of you primary parition by the amount you want your new sawp to be.
In the free space/unallocated space, choose new, type linux-swap and you can name the partition 'Swap' if you want.
Hit the "Apply" button to write the changes to disk.
When Done, reboot back into your ubuntu.

Activating the Swap Partiton

Open Gparted from the Applicatin menu. If you have not installed gparted then simply install it.

$ sudo apt install gpart

$ sudo apt install gparted

Right-Click on your Swap Partition and choose Information. You should see the path and UUID listed there. Keep this open for further reference.
Run sudo gedit /etc/fstab and the below code in it.You can either use the path or the UUID to tell Linux where to find you swap partition. I recommend UUID because it'll stay constant even if you move the partition around or the disk somehow becomes sdb instead of sda or something like that. Make the appropriate edits and save the file.

UUID=41e86209-3802-424b-9a9d-d7683142dab7 none swap sw 0 0

or this if you used path:

/dev/sda2 none swap sw 0 0

Your changes should look something like this if you used UUID

Enable the new swap partition with this command.

sudo swapon --all

Confirm that the swap partition exists

2. How do I add Swap File?

The user you are logged in as must have sudo privileges to be able to activate swap. In this example, we will add 1G swap. If you want to add more swap, replace 1G with the size of the swap space you need.

Perform the steps below to add swap space on Ubuntu 18.04.

Start by Creating a file which will be used for swap:

$ sudo fallocate -l 1G /swapfile

If *fallocate **is not installed or you get an error message saying *fallocate failed: Operation not supported then use the following command to create the swap file:

$ sudo dd if=/dev/zero of=/swapfile bs=1024 count=1048576

Only the root user should be able to write and read the swap file. Set the correct permissions by typing:

$ sudo chmod 600 /swapfile

Use the mkswap utility to set up a Linux swap area on the file:

sudo mkswap /swapfile

Activate the swap file using the following command:

$ sudo swapon /swapfile

To make the change permanent open the /etc/fstab file:

$ sudo gedit /etc/fstab

and past the following line

Verify that the swap is active by using either the swapon or the free command, as shown below

What is Swappiness and how do i Adjust it?

Swappiness is a Linux kernel property that defines how often the system will use the swap space. Swappiness can have a value between 0 and 100. A low value will make the kernel to try to avoid swapping whenever possible, while a higher value will make the kernel to use the swap space more aggressively.

The default swappiness value is 60. You can check the current swappiness value by typing the following command:

While the swappiness value of 60 is OK for most Linux systems, for production servers, you may need to set a lower value.

For example, to set the swappiness value to 10, run:

$ sudo sysctl vm.swappiness=10

To make this parameter persistent across reboots, append the following line to the /etc/sysctl.conf file:

The optimal swappiness value depends on your system workload and how the memory is being used. You should adjust this parameter in small increments to find an optimal value.

Removing a Swap File

To deactivate and remove the swap file, follow these steps:

Start by deactivating the swap space by typing

$ sudo swapoff -v /swapfile

Next, remove the swap file entry /swapfile swap swap defaults 0 0 form the /etc/fstab file.
Finally, remove the actual swapfile using the rm command:

$ sudo rm /swpfile

Best Visual Studio Code Extensions.

Pratyush Raj Singh — Tue, 04 Aug 2020 15:00:56 +0000

This is how I use the best efficiency of Vs Code. If you are using Vs Code as your IDE then this full blog is for you. It will help you to boost your productivity. Many of you know these extensions already but if you found some new extension that is helpful for you then please give me your reaction. And also if you know any other best extensions of Vs Code then also please suggest their name in the comment.

1:- vscode-icons

It doesn't change anything in vs code setting. It just gives you a better visual experience. It shows file icons with bright and sharp colors.
It makes very easy to find files and visualize the file and also the type of file.

2:- GitLens

This is the best Extension that I found helpful for working with Version Control(Git and Github). It will give a lot of feature form out of the box.
The best feature of it's. It shows the recent commit message and associated author inside the code editor for the line which you are currently editing.

3:- Auto Rename Tag

It is a very small in size but a very useful extension for writing HTML documents.
It will automatically change the end Tag If you change the starting tag.

4:- Live Server

I use this extension a lot. If you woking on a web-project this will very helpful for you.
It automatically updates the browser when you change something in your codeBase and saved.
It also makes a server on the computer so, it will also use for server-side languages like Php and Node.

5:- Rainbow Brackets

It will provide you a beautiful colored code-base and also readable for the humans.
It is an amazing time sever.
It will simply give color coordination for matching brackets.

This is not the end of Extension list.

How To Write a Good JavaScript Code

Pratyush Raj Singh — Sun, 02 Aug 2020 06:59:42 +0000

In this Blog, we gonna tell you the best way to write a javaScript code which I learned till my learning journey.

So, I gonna discuss 5 points which I used to write my javaScript code and it is very helpful for me to read and update my previous codeBases. And these tips can also helpful for you. So, please read once if you are a JS developer or gonna be a JS developer.

1. JavaScript is CaseSensitive

This means when You use your `Shift` or `CapsLock` keys it really matters. Unlike in HTML and CSS Where you can use UPPER and lowercase letters, But in JS the casing of the words matters.

Example:-

var greenDuck ="This Duck is Green";
console.log(greenduck);

Above code will show an error

Uncaught ReferenceError: greenduck is not defined.

2. Use `camleCase` Words

practice of writing phrases such that each word or abbreviation in the middle of the phrase begins with a capital letter, with no intervening spaces or punctuation. Common examples include "iPhone" and "eBay".

//variable starts with a Lowercase letter
var greenDuck;

//objects and classes start with UpperCase letter
var date = new Date();

//Constants are All-Caps
const NAME;

3. WhiteSpace Matters (for Human)

JavaScript doesn't care about whiteSpaces but as a human, you should. So, use whiteSpaces in your code for make it more readable for humans. It is useful when you work with a team.

//With whiteSpaces(human readable)
var date = new Date();
document.body.innerHTML = "<h1>" + date + "</h1>";

//without whiteSpaces (machine Readable difficult for humans)
var date=new Date();document.body.innerHTML="<h1>"+date+"</h1>";

4. End Each Statment with a SemiColon(;)

Technically javaScript doesn't care you use a semicolon or not except some specific situations. But if you do not use it then your code is difficult to be read for humans. So, Good practice is to use a semicolon at the end of your statement in your codebase.

Semicolon is just a matter of opinion Do What Works best for you

5. Use Comments Liberally.

// A single line comment starts with two slashes.

/* A multi-line comment
starts with a slash and an asterisk
and ends with an asterisk and a slash */

This is the end. if you found this blog post helpful then, please comment and give a reaction.

The 5 Habits of Highly Productive Programmers

Pratyush Raj Singh — Fri, 10 Jul 2020 06:36:52 +0000

⭐ I always believe that a good developer is not only being a great programmer but also possessing great habits🤯.

⭐ What do you mean by Productivity?
👉 The term productivity is defined as the amount of output you churn out compared to input.

⭐ So why you should be Productive?🤔
👉 Being a Productive Programmer brings tons of pluses including higher pay, office benefits, increased popularity among peers, and internal Satisfaction🔥.

⚠️THE MOST IMPORTANT THING TO BE PRODUCTIVE ⚠️

     👇👇👇👇👇👇👇👇👇👇👇👇👇👇

⭐⭐LOVE ❤️ WHAT YOU ARE DOING⭐⭐

👉Productivity gains come with time, so don’t expect to see massive productivity gains in the short term. So

Tips For Gaining Productivity:-

Tip 1 :

Use your time to gain something related to your field

Tip 2 :

Tip 3 :

Tip 4 :

Tip 5 :

What is NODE JS

Pratyush Raj Singh — Mon, 06 Jul 2020 05:35:37 +0000

Top Companies Using Node Js:

NETFLIX
UBER
PAYPAL
LINKEDIN
AMAZON
NASA
WALMART
EBAY

What is NODE JS?

First of all, NODE is NOT(I repeat is NOT) a FRAMEWORK or a PROGRAMMING LANGUAGE.
NODE JS is a JAVASCRIPT RUNTIME ENVIRONMENT and it was introduced by Ryan Dahl in 2009. He used the Chrome v8 Engine which is a javascript Engine that converts javaScript Code to Machine Code.
It allow Us to Execute JAVASCRIPT outside the BROWSER.
NODE JS was written using: JavaScript,CoffeeScript,C++(wiki)

Life Before NODE JS:

JavaScript runs only inside the Browser
JavaScript was used for FrontEnd developMent only (Animation and Data Validtion).
We can't run JavaScript outside the Browser

Life after NODE JS:

We can excute JavaScript outside the browser.
JavaScript can be used for Backend Development.
More job Offer for JavaScript Developers.

Why NODE JS?

Super Fast
Highly Scalable
Used by Top Companies

Real Life examples -

STATS:- Paypal Switched from JAVA to NODE and here are the results:

🛠️DEVELOPMENT:

Built almost twice as fast with fewer people.
Written in 33% fewer lines of code.
Constructed with 40% fewer files.

⚙️PERFORMANCE:

Double the requests per second vs the Java application:

⚠️This is even more interesting because the intial performance results were using a SINGLE core for the node.js application comared to FIVE cores in java🤯.

35% decrease in the average response time for the same page:

💥This resulted in the pages being served 200ms faster (Something Users will definitely notice).