DEV Community: Maaz Ahmed Khan

💬 Changing Git Config for Previous Commits🚚

Maaz Ahmed Khan — Fri, 07 Feb 2025 11:47:12 +0000

Sometimes, you need to modify the author's name or email address for earlier commits. This might happen if you use the wrong email address, or perhaps you want to update your identity for privacy or other reasons. Fortunately, Git allows you to easily change the author name and email for previous commits using the filter-branch command.

The filter-branch command rewrites Git history by applying a filter to each commit. In this article, we’ll walk through how to change the author name and email for previous commits.

To Update the Author and Email for Specific Commits:

If you need to change the author and email for specific commits (e.g., replacing one old email with a new one), you can use the following command in your Git Bash shell:

git filter-branch --commit-filter '
  if [ "$GIT_AUTHOR_EMAIL" = "oldEmail.com" ];
  then
    GIT_AUTHOR_NAME="newAuthorName";
    GIT_AUTHOR_EMAIL="newAuthorEmail.com"; 
    git commit-tree "$@";
  else
    git commit-tree "$@";
  fi
' HEAD

To Update the Author and Email for All Commits:

If your goal is to replace the author name and email for every commit in the repository with a specific author name and email, you can use this command:

git filter-branch --commit-filter '
  GIT_AUTHOR_NAME="newAuthor Name"; 
  GIT_AUTHOR_EMAIL="newAuthorEmail.com";
  GIT_COMMITTER_NAME="$GIT_AUTHOR_NAME";
  GIT_COMMITTER_EMAIL="$GIT_AUTHOR_EMAIL";
  git commit-tree "$@";
' -- --all

Important Notes:

These commands should be executed in your Git Bash shell, which is available if you're using Git for Windows. Make sure you're in the root directory of your Git repository when running the command.
If you've already pushed commits to a remote repository, you'll need to force-push the changes to update the remote history:

git push --force --tags

Force-pushing rewrites the commit history. It can disrupt the work of other collaborators, so make sure you communicate with your team before doing so. It's often a good idea to only perform this operation on repositories that are not publicly available or on those where you are the only contributor.

By using these git filter-branch commands, you can effectively change the author name and email for past commits, whether for specific commits or all commits in your repository.

A Guide to Effortlessly Use SVGs in Next Js Projects

Maaz Ahmed Khan — Tue, 30 Apr 2024 08:42:15 +0000

In the world of web development, Scalable Vector Graphics (SVGs) have become a staple for creating scalable, high-quality graphics that look great on any screen size. However, integrating SVGs into React projects can sometimes be a hassle.

SVGR is a command-line tool and webpack loader that transforms SVG files into React components. This means that instead of dealing with cumbersome SVG syntax directly in your code, you can simply import SVG files as React components and use them just like any other React component.

npm install @svgr/webpack --save-dev

Next, configure SVGR in your Next.js project. You can do this by adding SVGR to your webpack configuration.

const nextConfig = {
  webpack(config) {
    // Grab the existing rule that handles SVG imports
    const fileLoaderRule = config.module.rules.find(rule => rule.test?.test?.('.svg'));

    config.module.rules.push(
      // Reapply the existing rule, but only for svg imports ending in ?url
      {
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: /url/ // *.svg?url
      },
      // Convert all other *.svg imports to React components
      {
        test: /\.svg$/i,
        issuer: fileLoaderRule.issuer,
        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
        use: ['@svgr/webpack']
      }
    );

    // Modify the file loader rule to ignore *.svg, since we have it handled now.
    fileLoaderRule.exclude = /\.svg$/i;

    return config;
  },
};

export default nextConfig;

Now that SVGR is set up, you can start using it to import SVGs as React components directly into your Next.js project. Simply import the SVG file and use it like any other React component:

import MySvgIcon from '../path/to/MySvgIcon.svg';

const MyComponent = () => {
  return (
    <div>
      <MySvgIcon />
      {/* Other JSX */}
    </div>
  );
};

SVGR provides various options for customizing the generated React components. You can configure options such as dimensions, file naming, and component naming by passing options to SVGR through webpack configuration or directly in the import statement.

For more, checkout: https://react-svgr.com/docs/getting-started/

Happy coding!

🔐 Enhancing Security of React Apps

Maaz Ahmed Khan — Sat, 25 Nov 2023 12:33:52 +0000

React, one of the most popular JavaScript libraries, is widely used to build dynamic and interactive web applications. But did you know that there's a powerful feature called GENERATE_SOURCEMAP that can play a significant role in securing your React apps?

GENERATE_SOURCEMAP=false is a setting that can be employed during the build process of your React app. It's a simple yet effective way to prevent the generation of source maps in the production build. While source maps are incredibly helpful for debugging in development, they also provide valuable insights to potential attackers in a production environment. As a result, the minified and transpiled code becomes less accessible to those with malicious intent. This security measure minimizes the exposure of your original source code, reducing the risk of code theft, reverse engineering, and vulnerability exploitation.

🚀 Implementation:

Implementing GENERATE_SOURCEMAP=false is straightforward. Set the environment variable to false during your build process, and your build tools will handle the rest.

Exciting News for Node.js Developers!

Maaz Ahmed Khan — Sat, 25 Nov 2023 12:08:47 +0000

📣 One standout feature is the built-in support for .env files. Say goodbye to external packages Node.js now effortlessly loads your environment variables from a .env file. 🔄

Here's how to make the most of it:

1️⃣ Start by creating a .env file in your project's root directory.

2️⃣ To harness the power of this new feature, simply run your Node.js application with the '--env-file' flag like this: