DEV Community: Gautam Vaishnav

Managing URLs - Part 01 🔗

Gautam Vaishnav — Thu, 09 May 2024 06:22:37 +0000

I'm about to start a series on URLs and their roles in development. 🚀 This is the first part of the series. 📖 Read the full blog, and feel free to comment if you have any quiz. I won't ask for likes; it's up to you. 😊 If I've made any mistakes, please give me feedback. 🙏

URL hu 🤔, URLs are an essential part of web development. Before diving into URL generation, let's talk about the different components of the URL.

Protocol/Schema - HTTP, HTTPs, WS
Host - www.example.com
1. Subdomain - www
2. Domain - example
3. TLD (Top Level Domain) - .com, .in, .co
Path - /forum/questions
1. actual path from where you are requesting
Query String - /?tag=netwrok&order=newest
1. Parameter - {"key": "value"}
Fragment - #about

Okay, we have seen the different components of the URL. Now, let's talk about how to manage or generate URLs efficiently in JavaScript.

Have a look to the following code

new URL("https://www.example.com/fourm/questions/?tag=network&order=newest")

I created a new instance of the URL class. If you paste this into the browser, you will get an output like this:

If you never used this you might be surprised 🤨. We have a lot in URL. Here I am going to unlock 🔓 the power of this URL class.

Add Search Params/Query Params

const myAPI = new URL("https://www.example.com/fourm/questions/?tag=network&order=newest");
myAPI.searchParams.append("limit", 10);
console.log(myAPI.toString())
// https://www.example.com/fourm/questions/?tag=network&order=newest&***limit=10***

Delete Query Params

const myAPI = new URL("https://www.example.com/fourm/questions/?tag=network&order=newest&limit=10");
// before - https://www.example.com/fourm/questions/?tag=network&order=newest&limit=10
******
myAPI.searchParams.delete("order")
// after - https://www.example.com/fourm/questions/?tag=network&limit=10

Update Query Params

const myAPI = new URL("https://www.example.com/fourm/questions/?tag=network&limit=10");
// before - https://www.example.com/fourm/questions/?tag=network&limit=***10***

myAPI.searchParams.set("limit", 20)
// after - https://www.example.com/fourm/questions/?tag=network&limit=***20***

Reading Query Params

const myAPI = new URL("https://www.example.com/fourm/questions/?tag=network&limit=20");
// https://www.example.com/fourm/questions/?tag=network&limit=20

console.log(myAPI.searchParams.get("limit"))
// output - 20

// get all search params
const myAPI = new URL("https://www.example.com/fourm/questions/?tag=network&limit=20");

console.log(myAPI.searchParams.getAll("tag"))
// output - ["network"]

Loop over search params

const myAPI = new URL("https://www.example.com/fourm/questions/?tag=network&limit=20");

myAPI.searchParams.forEach((e, key, parent) => {
  console.log(e, key, parent)
             // ***value, key, parent***
})

// tag network tag=network&limit=20
// limit 20 tag=network&limit=20

Thanks ♥ for reading 📖 so far, I will be back 🔙 in next chapter

Enhancing Error Handling: 🚀Leveraging Logging and Effective Error Management in Your Codebase

Gautam Vaishnav — Mon, 11 Mar 2024 18:49:15 +0000

Everything in this blog post is written from my point of view. If I am wrong at any point, please correct me.

Good error handling can give you an advantage in bug fixing. You might be thinking, how?

Let's suppose you are working on a codebase with hundreds of files. One day, you get an error in a particular file, and your API fails due to some unknown reason.

Now, you don't know what exactly the error is because you didn't handle it properly in your codebase. So, you might be bothered, and you will start checking your code. After hours of digging, you will find the exact issue, or it might take some days or minutes, depending on the situation.

So, what is the good approach to handle this situation? 🤔

First, you should maintain an error.log file in your codebase or store logs in a database.
Implement proper error handling in your codebase.

Here, I am giving a basic overview of error handling and logging.

import fs from "fs";

class Logger {
  public message: string;
  public statusCode: number;

  constructor(
    private error: unknown,
    private fileName: string,
    private method?: string
  ) {
    this.error = error;
    this.fileName = fileName;
    this.method = method;
    this.message = "";
    this.getErrorMessage();

    if (this.message === "") {
      this.message = "Internal server error!";
    }

    this.log();
  }

  private getErrorMessage() {
    if (this.error instanceof AxiosError) {
      this.message = this.error.response?.data?.message ?? this.error.message;
      console.log(this.error.response?.data?.message);
    } else if (this.error instanceof Error) {
      this.message = this.error.message;
    }
  }

  private log() {
    const currentDate = new Date().toLocaleString();
    // [date] [fileName] [method] [error]
    const message = `\n\n\n [${currentDate}] [${this.fileName}] [${
      this.method
    }] [${this.message}] [${JSON.stringify(this.error)}]] \n`;

    console.log("\n", this.message, `at ${this.fileName} - ${this?.method}`);

    if (!fs.existsSync("error.log")) {
      fs.writeFileSync("error.log", message);
    } else {
      fs.appendFileSync("error.log", message);
    }
  }
}

export const getLoggerInstance = (
  error: unknown,
  fileName: string,
  method?: string
) => new Logger(error, fileName, method);

I created a Logger class that takes three arguments: error, filename, and method. It checks the error type and sets a message to errorMessage. Then, I call the log method, which logs the error message into the error.log file and also logs the error message to the console.

Use case

const login = async (req: Request, res: Response) => {
    try {
        /**
         * Login user
         * ....
         * ....
         * ...........
         */
    } catch (error) {
        const { message } = getLoggerInstance(
            error,
            __filename,
            "UserController - login"
        );
        return res.json({ message });
    }
};

Output in console

"app is running on port 4000"

cannot set undefined to email! at D:\user\dist\controller\user.controller.js - UserController - login

Thank you for reading 😊.

Tailwind 3.3

Gautam Vaishnav — Sun, 02 Apr 2023 16:00:09 +0000

Hi Developers this is Gautam, and welcome to the blog. Today I have important news for you about the tailwind css new 3.30 version.

let's talk about what is new in tailwind 3.3 and what they add in the newer version.

let's go!

how to install the latest version

npm install -D tailwindcss@latest

950 color Shade

New 950 color shade. As we all know that in tailwind we have many shades for a single color, in the box we have from 100 - 900 but in the new release they added a new 950 shade which is darker than the 900 shade. This is specially introduced for dark mode.

ESM and Typescript Support.

RTL and LTR Support

Simplified RTL support with logical properties: let you create your web app in English or Hindi lang, but when you add other language support like Urdu which is written right to left because of this your whole design meshed up, and your paddings and margins are not applying properly, now we have the rtl and ltr support in the new version. you don't need to use ltr:ml-3 rtl:mr-3

 <div class="group flex items-center">
   <img class="shrink-0 h-12 w-12 rounded-full" src="..." alt="" />
   <div class="ms-3"> 
 <!-- just apply ms-3 and it will properly -->
     <p class="text-sm font-medium text-slate-300 group-hover:text-white">...</p>
     <p class="text-sm font-medium text-slate-500 group-hover:text-slate-300">...</p>
   </div>
 </div>

Fine-tune gradient color stop positions

Now we can adjust the position of the gradient like we can add now from-indigo-500 from-10% , via-bule-500 via-30% via-green-500 via-90% . We can use any value from 0% to 100%.

Line-clamp out of the box.

New line-height shorthand for font-size utilities.

how it works before

 <p class="text-lg leading-7 ...">

now we can use like

 <p class="text-lg/7 ...">
 <!--or can also do like-->
 <p class="text-lg/[17px] ...">

CSS variables without the var()

now you can use CSS Variable without var()

 className="bg-[var(--brand-color)] hover:bg-[var(--brand-hover-color)]"
className="bg-[--brand-color] hover:bg-[--brand-hover-color]"

New `list-style-image` utilities

want to use custom bullet point in li here you go -

<ul class="list-image-[url(carrot.png)] ...">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

New `hyphens` utilities

You have a long word but not readable due to new line, now you can use hyphens utilities

<p class="hyphens-manual ...">
    ... Kraftfahrzeug&shy;Haftpflichtversicherung is a ...
</p>

New `caption-side` utilities

Now we can also use table caption at the bottom of the table, like this

<table>
    <caption class="caption-bottom">
        Table 3.1: Professional wrestlers and their signature moves.
    </caption>
</table>

wrapping up

you can also read the new release documentation https://tailwindcss.com/blog/tailwindcss-v3-3#extended-color-palette-for-darker-darks

Thank you for reading so far, Please leave a comment and like the blog. Also comment about the next topic.

TNT Stack.

Gautam Vaishnav — Tue, 28 Mar 2023 16:09:19 +0000

The new stack TNT stack

Are you a Javascript developer and, you know about ReactJS. You probably heard about lot's of stack like, mern stack, *mean stack, *mevn stack and more. But a new stack is growing in the market and very powerful. the name of this stack is TNT stack.
In this stack the first T represents Typescript, Typescript script is the superset of the javascript and this is very powerful language, lots of companies are using typescript in their projects, and typescript is also loved by the developer community.
The second T represents Next js, what is next js, if you are a react developer, you probably heard about the Next js, but if you don't, nextjs is a framework, build on the top of reactjs, it provides the server side rendering, means your all the html code imported from the server directly, it makes the application performance very fast and also very popular for the seo, because in the react their is no service for the seo optimization. these are some features that next provide us, there are many.
The third T represents the Tailwindcss, Tailwind css is very popular css frameworks. Tailwind is a utility first framework, means there are so many class that you use commonly in the projects and more. You can customize the UI however you want.

If you want that I create a separate blog for the all the technologies, comment below.

thank you for reading, will meet soon.

this is my first blog. I will improve the writing.