DEV Community: Bhat Aasim

Introducing Niceshot - Turn your boring screenshots or images into stunning visuals

Bhat Aasim — Sat, 02 Aug 2025 05:55:03 +0000

Hey 👋

Over the past few days, I’ve been working on a project called Niceshot (https://www.niceshot.fun/). It’s a simple web app that helps you take plain screenshots or images and give them a polished, professional look in seconds.

Here’s a quick overview of what it does:

🛠️ Features

Add gradient backgrounds (choose from presets or customize)
50+ beautiful background images (MacOS, nature, abstract, patterns)
Upload your own or import a background image via URL
Adjust image opacity for that soft-touch aesthetic
Pick aspect ratios suited for social media (LinkedIn, Twitter, etc.)
Add text with various fonts, custom colors, and drop shadows

It’s perfect for devs, indie hackers, marketers, or anyone who shares visuals online. No need to open Figma or Photoshop for basic mockups anymore.

Would love to hear your thoughts or suggestions!
👉 Try Niceshot (https://www.niceshot.fun/)

DEMO IMAGES:

Let me know what you think — happy to answer any questions!

Advanced TypeScript Utility Types in Detail

Bhat Aasim — Fri, 27 Sep 2024 05:26:00 +0000

TypeScript provides a set of utility types that help transform or manipulate types more flexibly and powerfully. These types are useful for building more dynamic and reusable codebases. These utility types are built-in and can be used to create new types based on existing ones. In this article, we'll explore some of the advanced TypeScript utility types and how they can be used to improve your code.

1. `Partial<Type>`

The Partial utility type makes all properties of the given type T optional. It is useful when you want to work with objects where only some properties may be provided, or when you're working with optional values in forms or updates.

interface User {
    id: number;
    name: string;
    email: string;
}

// All properties are now optional
type PartialUser = Partial<User>;

function updateUser(id: number, user: PartialUser) {
    // Update user properties
}

updateUser(id: 1, { name: "Aasim" });

2. `Required<Type>`

The Required utility type does the opposite of Partial. It makes all properties of the given type T required, ensuring that all properties must be present.

interface User {
    id: number;
    name?: string; // Optional property
    email?: string; // Optional property
}

// All properties are now required
type RequiredUser = Required<User>;

const user: RequiredUser = {
    id: 1,
    name: "Aasim",
    email: "contact@bhataasim.com",
};

3. `Readonly<Type>`

The Readonly utility type makes all properties of the given type T readonly, meaning they cannot be modified once they are created. It is useful when you want to prevent accidental changes to objects.

interface User {
    id: number;
    name: string;
    email: string;
}

// All properties are now readonly
type ReadonlyUser = Readonly<User>;

const user: ReadonlyUser = {
    id: 1,
    name: "Aasim",
    email: "contact@bhataasim.com",
};

// Error: Cannot assign to 'name' because it is a read-only property
user.name = "Bhat Aasim";

4. `Pick<Type, Keys>`

The Pick utility type allows you to create a new type by selecting only a subset of properties from the given type T. It is useful when you want to create a new type with only specific properties.

interface User {
    id: number;
    name: string;
    email: string;
    age: number;
}

// Select only 'id' and 'name' properties
type UserBasicInfo = Pick<User, "id" | "name">;

const user: UserBasicInfo = {
    id: 1,
    name: "Aasim",
};

5. `Omit<Type, Keys>`

The Omit utility type is the opposite of Pick. It allows you to create a new type by excluding a subset of properties from the given type T. It is useful when you want to create a new type without specific properties.

interface User {
    id: number;
    name: string;
    email: string;
    age: number;
}

// Exclude 'id' and 'email' properties
type UserPersonalInfo = Omit<User, "id" | "email">;

const user: UserPersonalInfo = {
    name: "Aasim",
    age: 21,
};

6. `Exclude<Type, ExcludedUnion>`

The Exclude utility type removes all types from Type that are assignable to ExcludedUnion. It is useful when you want to exclude certain types from a union.

type Status = "active" | "inactive" | "pending";

type ActiveStatus = Exclude<Status, "pending">;

const status: ActiveStatus = "active";

// Error: Type '"pending"' is not assignable to type 'ActiveStatus'.
const status: ActiveStatus = "pending";

7. `Extract<Type, Union>`

Extract does the opposite of Exclude. It constructs a type by extracting all types from Type that are assignable to Union. It is useful when you want to extract certain types from a union.

type Status = "active" | "inactive" | "pending";

type ActiveStatus = Extract<Status, 'active' | 'inactive'>;

const status: ActiveStatus = "active";

// Error: Type '"pending"' is not assignable to type 'ActiveStatus'.
const status: ActiveStatus = "pending";

8. `Record<Keys, Type>`

The Record utility type constructs an object type whose property keys are Keys and whose property values are Type. It is useful when you want to create an object type with specific keys and values. It is commonly used to create dictionaries or maps in TypeScript.

// example 1
type Roles = "admin" | "user" | "guest";

type UserRoles = Record<Roles, boolean>;

const roles: UserRoles = {
    admin: true,
    user: true,
    guest: false,
};

// example 2
type PageInfo = {
    title: string,
    url: string,
};

type Page = 'home' | 'about' | 'contact';

const pages: Record<Page, PageInfo> = {
    home: { title: 'Home', url: '/' },
    about: { title: 'About', url: '/about' },
    contact: { title: 'Contact', url: '/contact' },
};

9. `NonNullable<Type>`

The NonNullable utility type removes null and undefined from the given type T. It is useful when you want to ensure that a value is not null or undefined.

type User = {
    id: number;
    name: string | null;
};

// Remove null and undefined
type NonNullableUser = NonNullable<User>;

const user1: NonNullableUser = {
    id: 1,
    name: "Aasim",
};

const user2: NonNullableUser = {
    id: 2,
    name: null, // Error: Type 'null' is not assignable to type 'string'.
};

10. `ReturnType<Type>`

The ReturnType utility type extracts the return type of a function type. It is useful when you want to get the return type of a function dynamically.

function getUser() {
    return { id: 1, name: "Aasim" };
}

type User = ReturnType<typeof getUser>;

const user: User = {
    id: 1,
    name: "Aasim",
};

11. `Parameters<Type>`

The Parameters utility type extracts the parameter types of a function type as a tuple. It is useful when you want to get the parameter types of a function dynamically.

function loginUser(username: string, password: string) {
    // Login logic
}

type LoginParams = Parameters<typeof loginUser>;

function authenticateUser(...params: LoginParams) {
    // Authenticate user
}

authenticateUser("admin", "password");

authenticateUser("user", 123); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

Conclusion

These are some of the advanced TypeScript utility types that can help you write more robust and flexible code. By leveraging these utility types, you can create more dynamic and reusable types in your TypeScript projects.

Checkout the Official TypeScript Documentation for more utility types: TypeScript Utility Types

I hope you found this article helpful. If you have any questions or feedback, feel free to reach out. Happy coding! 🚀

Why do React components need to start with capital letters?

Bhat Aasim — Sat, 21 Sep 2024 13:59:16 +0000

Why do React components need to start with capital letters?

If you’ve ever worked with React, you might have noticed that component names always start with capital letters. But do you know why? 🤔

//This is wrong and will not work ❌
export function myComponent() {
  return (
        <h1>Hello, World!</h1>
    );
}

//Right way to write a React component ✅
export function MyComponent() {
  return (
        <h1>Hello, World!</h1>
    );
}

In JSX, React components are written in a syntax that gets transformed into plain JavaScript using the React.createElement API, thanks to Babel. Here’s where the capital letter comes in:

When Babel encounters a name starting with a capital letter, it knows it’s dealing with a React component and converts it into a React Fiber object (a key part of React’s rendering system).

On the other hand, if the name starts with a lowercase letter, Babel treats it as a string rather than a component. This helps React differentiate between native HTML elements and custom components!

So, always remember to capitalize your component names for React to interpret them correctly. 💡

Thanks for reading! 🚀

Event Loop in 2 Minutes

Bhat Aasim — Fri, 20 Sep 2024 06:54:59 +0000

What is the Event Loop?

The Event Loop is a mechanism in JavaScript that allows the runtime to handle asynchronous operations. It ensures that JavaScript remains responsive and non-blocking by managing the execution of multiple tasks in a single-threaded environment.

How Does the Event Loop Work?

Single Threaded Execution: JavaScript is single-threaded, meaning it can only execute one task at a time. This is managed by Call Stack, where functions are executed in a synchronous manner (means one by one).
Call Stack: The main thread in JavaScript where synchronous code is executed. It keeps track of the currently executing function.

Think of Call Stack as a stack of plates.
Every time a function is called,
a new plate (function) is added to the stack.
When a function completes,
its plate (function) is removed from the stack.

Web APIs: For Async operations like setTimeout, HTTP Requests, fetch, and DOM Events, JavaScript uses Web APIs provided by the browser. These operations are handled outside the Call Stack.
Callback Queue: When an async operation completes, the callback function is added to the Callback Queue. This Queue waits untill the call stack is clear to push the callback function to the call stack.
Event Loop: The Event Loop continuously checks the Call Stack and Callback Queue. If the Call Stack is empty, it moves the first function from the Callback Queue to the Call Stack for execution.
Microtask Queue: For Promises and Mutation Observer, JavaScript maintains a separate queue called Microtask Queue. Microtasks have higher priority than Callback Queue tasks. The Event Loop checks the Microtask Queue First, then the Callback Queue.

That's the Event Loop in a nutshell! It's a crucial part of JavaScript's runtime environment, ensuring that asynchronous operations are handled efficiently and that the application remains responsive.

Interviewer: Welcome to the Team!! 😎🚀

Types of Promises in JavaScript

Bhat Aasim — Thu, 19 Sep 2024 05:47:49 +0000

Forgive me for the Typos and Grammatical Mistakes, I'm still learning. 🙏

What are Promises?

Promises are a way to handle asynchronous operations in JavaScript. They represent a value that may be available now, or in the future, or never. Promises have three states: pending, fulfilled, and rejected.

Types of Promises

Pending: The initial state of a promise. It represents that the operation is still in progress and has not been completed yet.
Fulfilled: The state of a promise when the operation has been completed successfully. The promise has a value, and it is available to be used.
Rejected: The state of a promise when the operation has failed. The promise has a reason for the failure, and it can be handled using the catch method.

Why Promises are Important?

Promises help in writing cleaner and more readable asynchronous code.
They provide a way to handle asynchronous operations in a more structured manner.
Promises can be chained together to perform multiple asynchronous operations sequentially.
Whether fetching data, handling multiple tasks or racing for the fast result, Promises are essential in Modern JavaScript.

1. Simple Promise

const promise = new Promise((resolve, reject) => {
    // Imagine fetching user data from an API
    const user = {
        name: "Aasim Ashraf",
        age: 21,
    };

    user ? resolve(user) : reject("User not found");
});

promise
    .then((user) => console.log(user))
    .catch((error) => console.log(error));

A Promise that either resolves or rejects often used for API calls or async tasks.

When to Use : For single async operation like fetching data from an API.
Advantages : Clean handling of success and failure in one block.

2. Promise.all Multiple Operations

const fetchUser = fetch("/users").then((res) => res.json());
const fetchPosts = fetch("/posts").then((res) => res.json());

Promise.all([fetchUser, fetchPosts])
    .then(([user, posts]) => {
        console.log(user, posts);
    })
    .catch((error) => console.log(error));

Waits for all promises to resolve, if one fails, the whole chain fails. Best for multiple async tasks that needs to be resolved together.

When to Use : For multiple async operations that are not dependent on each other.
Advantages : Fetch multiple data at once and handle them together.
Disadvantages : If one fails, all fail.

What Happens if One Promise Fails in Promise.all?

const fetchUser = fetch("/users").then((res) => res.json());
const fetchPosts = fetch("/posts").then((res) => res.json());

Promise.all([fetchUser, fetchPosts])
    .then(([user, posts]) => {
        console.log(user, posts);
    })
    .catch((error) => console.log(error));

Problem with Promise.all is that if one promise fails, the whole chain fails. To avoid this, you can use Promise.allSettled.

3. Promise.allSettled

const fetchUser = fetch("/users").then((res) => res.json());
const fetchPosts = fetch("/posts").then((res) => res.json());

Promise.allSettled([fetchUser, fetchPosts])
    .then((results) => {
        results.forEach((result) => {
            if (result.status === "fulfilled") {
                console.log("User Data:", result.value);
            } else {
                console.log("Error:", result.reason);
            }
        });
    });

Promise.allSettled waits for all promises to settle, whether they are resolved or rejected. It returns an array of objects with a status and value or reason.

When to Use : When you want to know all results, even failures.
Advantages : Fetch multiple data at once and handle them together.
Disadvantages : If one fails, it won't stop the chain

4. Promise.race Fastest Result

const fast = new Promise(resolve => setTimeout(resolve, 1000, "Fast"));

const slow = new Promise(resolve => setTimeout(resolve, 2000, "Slow"));

Promise.race([fast, slow])
    .then((result) => {
        console.log(result);
    })
    .catch((error) => console.log(error));

Returns the result of the first promise to settle, whether it's resolved or rejected. Useful when you need speed, such as loading the first available response.

When to Use : When speed matters more than waiting for all results.
Limit : You may get an error if the fastest promise fails.

What if a Promise in Promise.race Fails?

const error = new Promise((resolve) => {
    setTimeout(() => resolve("Error"), 1000);
});

const success = new Promise((resolve) => {
    setTimeout(() => resolve("Success"), 2000);
});

Promise.race([error, success])
    .then((result) => {
        console.log(result);
    })
    .catch((error) => console.log("First Rejected",error));

If the first promise fails, the whole chain fails. To avoid this, you can use Promise.any.

5. Promise.any First Successful Result

const promise1 = Promise.reject("Error 1");
const promise2 = new Promise(resolve => setTimeout(resolve, 3000, "Promise 2"));

Promise.any([promise1, promise2])
    .then((result) => {
        console.log("First Success",result);
    })
    .catch((error) => console.log("All Rejected",error));

Resolves when any one Promise is resolved. Ignores all rejections until all promises are rejected. Useful when you need the first successful result, regardless of the rest.

When to Use : When you need the first successful result, regardless of the rest of the promises.
Limit : If all promises are rejected, it will throw an error.

Recap

Simple Promise: For single async operation like fetching data from an API.
Promise.all: For multiple async operations that are not dependent on each other.
Promise.allSettled: When you want to know all results, even failures.
Promise.race: When speed matters more than waiting for all results.
Promise.any: When you need the first successful result, regardless of the rest of the promises.

Final Thoughts

Choosing the right type of promise is the key to efficient asynchronous programming.
Use the Promise that best fits your use case: Speed, multiple operations, or handling all results.

Setup MonoRepo in Nest.js

Bhat Aasim — Thu, 04 Jul 2024 12:13:09 +0000

Welcome, to my First Post!

About Me:
Hi, My name is Aasim Ashraf, I am a Full-Stack dev.

What is Monorepo?
A monorepo is a version-controlled code repository that contains multiple logical projects within a single repository.

Let's Create our Own MonoRepo using Nest.js
Before we dive into creating our monorepo, make sure you have the following:

Node.js installed on your system.
npm

Let's Get Started.

Install the Nest.js CLI:
npm i -g @nestjs/cli
Create a New Project:: nest new [project name]
like we will create a demo app. nest new demo

Select the Package manager npm, pnpm, yarn any of these and hit enter.
Wait for the dependencies to install and open the demo app in your preferred code editor, such as VSCode.

Convert the Nest.js App into a Monorepo, Open the Terminal and type nest g app my-app1

This command will delete the src directory and create a new apps directory. Inside this directory, you'll find the demo and my-app1.

Your Monorepo is Ready. You have successfully converted the basic nest.js app into a mono-repo.

You can add libraries that could contain the common logic etc.

use Command nest g lib [library name]

eg. nest g lib auth
this auth lib will contain the code related to the authentication only.

I hope you have enjoyed this.
Thanks for bearing with me.