DEV Community: Nehal Ahmad

How to rename multiple files at once on windows.

Nehal Ahmad — Sun, 04 Apr 2021 15:25:02 +0000

Sometimes we want to rename multiple files at once with almost similar names like prepending or appending some text to all file's names. Using File Manager Advance on windows we can do it easily. It is available to download for free on www.puzzleweb.in

File Manager Advance has easy to use UI that lets you select files that you want to rename and then you define the naming pattern using tags and then it renames all your files based on your pattern.

Let's suppose we have 20 image files and we want to add the size of the file at the end of its name. For example, if a file has the name photo0557.jpg and size 251 kb then we want to rename it to photo0557_size-251KB.jpg

To do this first open File Manager Advance and navigate to the files and select all the files that you want to rename. Use the shift and ctrl keys to select multiple files.
Go to Tools in the menu bar and click on Renamer to open bulk renamer.

It will open a bulk renamer window. Here you can see available tags in the left panel which you can use to create the naming pattern. On the right, you can see your name pattern where you will define your pattern and beneath it, you can see your selected files.
Now click on Text tag (first one on the left) to add it to the pattern and then write _size- in it.
Then add Size tag and set it to KB.
Add another Text tag and write KB in it.
At this point, your naming pattern should look something like this.

You can also click on any file to preview its name.
Now just click on Rename button at the bottom right corner to rename all your files then close the renamer window and refresh the main window to see your renamed file.

Many-to-Many relationship in MongoDB . Nodejs | Express | Mongoose

Nehal Ahmad — Sat, 03 Apr 2021 03:20:58 +0000

Recently I was working on a project (Node, Express, MongoDB, Mongoose) where I needed to create many-to-many relationships with products and categories where categories can have multiple products and products can be in multiple categories.

So I started working on it, I made it so that adding, removing, or updating products will automatically update categories too and vice-versa.

Then I thought let's see how others have done it. So I searched for it but I could not find something similar, this made me think why not share my method so others can get help from it or someone can correct me.

So here is how I did it, this is the simplified version of my full code.

Models

First I created product and category model.

Product Model

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const productSchema = new Schema({
    name:           { type: String, required: true},
    price:          { type: Number, required: true, min: 0 },
    categories:     [{ type: mongoose.Types.ObjectId, ref: 'Category' }],
});

module.exports = new mongoose.model('Product', productSchema);

Here you can see my product model has three simple fields first is the name of the product, second is the price of the product and third is the array of categories in which this product belongs.

Category Model

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const categorySchema = new Schema({
    name:       { type: String, required: true },
    products:   [{ type: mongoose.Types.ObjectId, ref: 'Product' }],
});
module.exports = new mongoose.model('Category', categorySchema);

The category model is also a simple one with two fields first is the name of the category and the second is the array of all products in this category.

Routes

I will show you only three routes Create, Update and Delete route for simplicity.

1. Create Route

Suppose we want to add a new product iPhone 12 and add it to three categories Mobile, Smartphone, Electronics. So we will send our request with the following data.

{
    product: {
        "name": "iPhone 12",
        "price": "1200",
        "categories": ["606563248d90d1833f3cda0b", "606563334294906c9a9b9dfe", "6065633736dee94dfae613d7"]
    }
}

Here categories are the id of categories in which we want to add. our product.
To handle this request I created the following route.

router.post('/', async function (req, res) {
  const { product } = req.body;

  const newProduct = await Product.create(product);

  await Category.updateMany({ '_id': newProduct.categories }, { $push: { products: newProduct._id } });

  return res.send(newProduct);
});

First I extract product data from req.body.
const { product } = req.body;

Then I created a new product from that data.
const newProduct = await Product.create(product);

After creating the product I use updateMany() to find all categories in this product and update them to include this product.
await Category.updateMany({ '_id': newProduct.categories }, { $push: { products: newProduct._id } });

Delete Route

router.delete('/:id', async function (req, res) {
  const _id = req.params.id;
  const product = await Product.findOne({ _id });

  await product.remove();

  await Category.updateMany({ '_id': product.categories }, { $pull: { products: product._id } });

  return res.redirect(product);

});

Delete route was also straightforward as create route.
First I find the product by id then remove it,
await Product.findOne({ _id });
await product.remove();

and then update all categories in this product to remove this product.
await Category.updateMany({ '_id': product.categories }, { $pull: { products: product._id } });

Update Route

The update route was a little bit tricky. Because here categories of product can be changed so we have to know which categories were added and which were removed. To do this I created this function.

function difference(A, B) {
  const arrA = Array.isArray(A) ? A.map(x => x.toString()) : [A.toString()];
  const arrB = Array.isArray(B) ? B.map(x => x.toString()) : [B.toString()];

  const result = [];
  for (const p of arrA) {
    if (arrB.indexOf(p) === -1) {
      result.push(p);
    }
  }

  return result;
}

This function basically takes two arrays A, B and returns a new array of items that are present in array A but not in array B. Something like this.

const arrA = ['a', 'b', 'c', 'd'];
const arrB = ['c', 'd', 'e', 'f'];

difference(arrA, arrB);
// Returns: ['a', 'b'] present in arrA but not in arrB

difference(arrB, arrA);
// Returns: ['e', 'f'] present in arrB but not in arrA

I used it to compare old and new categories to know which categories got removed and which were added.

So to update product I created this route.

router.put('/:id', async function (req, res) {
  const _id = req.params.id;
  const { product } = req.body;
  const newCategories = product.categories || [];

  const oldProduct = await Product.findOne({ _id });
  const oldCategories = oldProduct.categories;

  Object.assign(oldProduct, product);
  const newProduct = await oldProduct.save();

  const added = difference(newCategories, oldCategories);
  const removed = difference(oldCategories, newCategories);
  await Category.updateMany({ '_id': added }, { $addToSet: { products: foundProduct._id } });
  await Category.updateMany({ '_id': removed }, { $pull: { products: foundProduct._id } });

  return res.send(newProduct);
});

Here first I took id from req.params.id and product update date from req.body then I took newCategories from product.

After that I find the product by id and took oldCategories from them so I can compare them with new categories and determine which categories were added and which were removed.
Then I assigned all properties from the product to the old product and save it.

After updating the product I used difference() function with newCategories and oldCategories to get the categories those were added and those were removed and then I used two updateMany operation on categories to add this product to added categories and remove it from removed categories.

Categories Route

categories routes were the same as product routes I just used category in place of product and vice-versa.

How to make footer stick at the bottom of web page.

Nehal Ahmad — Sun, 28 Feb 2021 11:21:35 +0000

Problem

If you are new to web development and have created some HTML page before then you may be in a situation where you find that your footer is not at the bottom of page and there is white space at the bottom because there is not much content.

here is simple html code that produce this result which is not we want.



<body>
    <header>
        <h1>This is Header.</h1>
    </header>

    <article>
        <h1>This is main content.</h1>
    </article>

    <footer>
        <h1>This is Footer.</h1>
    </footer>
</body>

As you can see there are not much content so my footer is not in the bottom of the page. Technically it is bottom of the page but our page is not long enough.

Solution

Setting body height



body {
    min-height: 100vh;
}

We can set our body min height to 100vh that will make our page at least as long as screen height But it will not solve our problem.

Setting margin top on footer



footer {
    margin-top: ???px;
}

We can set margin-top on footer element that will make our footer to stay at the bottom of the page but when we have multiple pages and every page has different content length we have to set right amount of margin on every page one by one.

Using Flexbox

Using Flexbox in CSS we can fix it very easily with following steps.

First set the min-height of body to 100vh. min-height: 100vh;.
Set the body display to flex display: flex; and flex-direction to column flex-direction: column;.
Select footer element (of whatever you want to stick to bottom) and set top margin to auto margin-top: auto;.

Your CSS should look something like this.



body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
footer{
    margin-top: auto;
}

And the problem should be fixed.

There is a great article on flexbox on css-trick.com to learn more about it. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Bonus: Align content vertically center

When you don't have much content to fill the full height of screen like simple login form, you you may want to align your content vertically center.
To do this just remove margin top from footer and set margin top and bottom to auto margin: auto 0; on your main content (in my case article element) or margin: auto; to center it on both direction (vertically and horizontally) and it will make content align to center.

Your CSS should look something like this.



body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
article {
    margin: auto 0;
}