DEV Community: Amir Hossein Shekari

Boosting VS Code Productivity - Custom Labels for React Component Files

Amir Hossein Shekari — Fri, 05 Jul 2024 11:33:48 +0000

Ever felt like you're drowning in a sea of index.ts files? Trust me, I've been there. Working on a massive React project, I found myself constantly lost in a maze of identical-looking files. But then I stumbled upon a game-changer: VS Code's custom labels feature. Let me tell you how it transformed my coding life.

The Problem with `index.ts` Overload

Picture this: You're deep in the zone, juggling multiple components, when suddenly you need to find that one specific index.ts file. You open the search bar, and bam! A flood of indistinguishable results. Frustrating, right? That's exactly where I was until I discovered the magic of custom labels.

Enter Custom Labels

So, what's the deal with these custom labels? In a nutshell, they're VS Code's way of letting you personalize how file names appear in your editor tabs and search bar. For us React devs drowning in index.ts files, it's like throwing us a lifeline.

Setting Up Custom Labels Step by Step

1. Enable Custom Labels

First, you'll need to enable custom labels in your VS Code settings. Just add this line to your settings.json:

"workbench.editor.customLabels.enabled": true

2. Define Patterns for `index.ts` Files

Now, here's where the real magic happens. Add this bit to tell VS Code to replace those generic index.ts names with their parent directory names:

"workbench.editor.customLabels.patterns": {
  "**/index.{ts,js,tsx,jsx}": "${dirname}"
}

3. Customize for Specific Directories

If you're like me and have a specific folder where all your components live, you can target just that directory:

"workbench.editor.customLabels.patterns": {
  "components/*/index.{ts,js,tsx,jsx}": "${dirname}"
}

The Benefits of Custom Labels

Increased Readability: Instead of a sea of index.tsx tabs, you'll see "Button", "Header", and so on. It's like your editor suddenly learned to speak your language!
Efficient Searching: Searching for specific components became a breeze.
Reduced Mental Load: No more second-guessing which index.ts I was looking at.

So, fellow coders, if you're tired of playing "Where's Waldo?" with your index.ts files, give custom labels a shot. It's a small change that packs a big punch in your daily coding life. Trust me, your future self will thank you!

Building Safe and Dynamic URLs with TypeScript

Amir Hossein Shekari — Fri, 13 Oct 2023 19:58:13 +0000

When developing applications, one of the common tasks is constructing URLs, especially when they contain dynamic parts, like IDs. Ensuring the correctness of these URLs can be tedious, leading to potential runtime errors if not done right. This is where TypeScript can lend a hand.

The Need for urlConverter

Using string-based routes can be error-prone. Miss a single character or forget to replace a dynamic segment, and the whole URL can break. By using TypeScript, we can create a utility that helps in generating these URLs while ensuring their correctness.

Building the urlConverter Step by Step

1. Organizing URLs

One of the first steps is to have all URLs organized in one place. Enums in TypeScript provide an excellent way to do this:

export enum UserUrls {
  getUserUrl = "/users/[userId]",
  getMyUserURL = "/users/me",
  // other URLs can go here...
}

2. Extracting Dynamic Parameters

For URLs with dynamic parts, we need a way to recognize and replace them. A custom TypeScript type can help identify these parts:


type IsParameter<Part> = Part extends `[${infer ParamName}]`
  ? ParamName
  : never;
type FilteredParts<Path> = Path extends `${infer PartA}/${infer PartB}`
  ? IsParameter<PartA> | FilteredParts<PartB>
  : IsParameter<Path>;
/**
 * A very special type that parse a template string to it's object
 * source: https://lihautan.com/extract-parameters-type-from-string-literal-types-with-typescript/
 * type ParamObject = Params<'/purchase/[shopId]/[itemId]'>;
 * type ParamObject = {
 *      shopId: string;
 *      itemId: string;
 *    }
 */
export type Params<Path> = {
  [Key in FilteredParts<Path>]: string | number;
};

This type works to find any segment enclosed within [].

3. Confirming the Presence of Parameters

To ensure that if a URL requires parameters, they're provided, we can use another type:

type HasParams<Path> = Path extends `${string}[${string}]${string}`
  ? true
  : false;

This will check if a route needs parameters.

4. Creating the urlConverter Function

With all the above in place, we can now create our utility:

type AllEnums = UserUrls;

export const urlConverter = <Route extends AllEnums>(
  routeKey: Route,
  ...paramsArr: HasParams<typeof routeKey> extends true ? [Params<Route>] : []
) => {
  let route = routeKey as string;

  if (!route) {
    throw Error("Invalid route key");
  }

  const params = paramsArr[0];
  if (params) {
    Object.keys(params).forEach((paramKey) => {
      const value = params[paramKey]?.toString();
      route = route.replace(`[${paramKey}]`, value);
    });
  }
  return route;
};

Usage Example

Generating a reset URL with a given token can be done easily:


const getUserUrl = urlConverter(UserUrls.getUserUrl, { userId: 12 });
console.log(getUserUrl); // Outputs: `/users/12`

Conclusion

The urlConverter utility ensures that constructing dynamic URLs is straightforward and less error-prone. Leveraging TypeScript allows for catching potential mistakes at compile-time rather than runtime, resulting in more robust applications.

I hope this approach helps in your development journey, ensuring cleaner and safer URL generation with TypeScript.

Protect Production Database from Wrong Migrations

Amir Hossein Shekari — Tue, 25 Apr 2023 15:03:58 +0000

As a .NET developer, I had a close call when I applied a migration to my production database without changing the database connection string. I was mortified when I realized my mistake, but I quickly got to work finding a solution to prevent it from happening again.

That's when I came up with the idea to add a console message that displays the migration details before applying it. This simple addition gives me the chance to review the migration details and ensure that I am working with the correct database before making any changes.

With this new safeguard in place, I can breathe easy knowing that my production database is safe from accidental alterations. It just goes to show that sometimes the simplest solutions can be the most effective.

public class ApplicationDbContextFactory : IDesignTimeDbContextFactory<ApplicationDbContext>
{
    public ApplicationDbContext CreateDbContext(string[] args)
    {
        // ... Some code to generate dbContextBuilder
        var context = new ApplicationDbContext(dbContextBuilder.Options);

        // This is where magic happends
        var pendingMigrations = context.Database.GetPendingMigrations();
        Console.WriteLine("*********************************************\n");

        Console.WriteLine("This command is going to apply migrations with following details");

        Console.Write("ConnectionString: ");
        Console.ForegroundColor = ConsoleColor.Yellow;
        Console.WriteLine(connectionString);
        Console.ResetColor();

        Console.Write("Migrations:\n\t");
        Console.ForegroundColor = ConsoleColor.Yellow;
        Console.WriteLine(string.Join("\n\t", value: pendingMigrations.ToArray()));
        Console.ResetColor();
        Console.WriteLine();
        Console.WriteLine("*********************************************");

        Console.WriteLine("Do You confirm? (Y/N)");
        var userInput = (Console.ReadLine());

        if (userInput is "Y" or "y")
            return context;

        Console.ForegroundColor = ConsoleColor.Red;
        Console.WriteLine("Aborted!");
        Environment.Exit(1);
        return null;
    }
}

More info about the ApplicationDbContextFactory

Toggle your VPN connection with a shortcut, in Manjaro

Amir Hossein Shekari — Mon, 31 May 2021 15:55:55 +0000

This is a little script that allows you to toggle your VPN connection by running a bash script.
I mostly use it by assigning it to a shortcut (meta + v).