Forem: Ibrahim

There are two methods to duplicate a table in MySQL. Here's how:

Ibrahim — Mon, 04 Aug 2025 04:14:05 +0000

Ibrahim

Aug 4 '25

How to Duplicate a Table in MySQL

#mysql #sql #database #data

Comments 1

2 min read

How to Duplicate a Table in MySQL

Ibrahim — Mon, 04 Aug 2025 04:13:46 +0000

There are two methods to duplicate a table in MySQL. Here's how:

1. Duplicate Table Structure and Data

In the first method, you can duplicate a table's structure and data using CREATE TABLE table_a SELECT * FROM table.

For example, suppose you have a table called users:

SELECT * FROM users;
-- +----+-------------------+---------------------------------------------+
-- | id | email             | password                                    |
-- +----+-------------------+---------------------------------------------+
-- |  1 | alice@example.com | $2y$10$abcdefghijk1234567890hashedpw1       |
-- |  2 | bob@example.com   | $2y$10$abcdefghijk1234567890hashedpw2       |
-- |  3 | carol@example.com | $2y$10$abcdefghijk1234567890hashedpw3       |
-- |  4 | dave@example.com  | $2y$10$abcdefghijk1234567890hashedpw4       |
-- |  5 | eve@example.com   | $2y$10$abcdefghijk1234567890hashedpw5       |
-- +----+-------------------+---------------------------------------------+
-- 5 rows in set (0.00 sec)

You can duplicate the table structure and data as follows:

CREATE TABLE users_backup SELECT * FROM users;
-- Query OK, 5 rows affected (0.06 sec)
-- Records: 5  Duplicates: 0  Warnings: 0

Here's the result:

SELECT * FROM users_backup;
-- +----+-------------------+---------------------------------------------+
-- | id | email             | password                                    |
-- +----+-------------------+---------------------------------------------+
-- |  1 | alice@example.com | $2y$10$abcdefghijk1234567890hashedpw1       |
-- |  2 | bob@example.com   | $2y$10$abcdefghijk1234567890hashedpw2       |
-- |  3 | carol@example.com | $2y$10$abcdefghijk1234567890hashedpw3       |
-- |  4 | dave@example.com  | $2y$10$abcdefghijk1234567890hashedpw4       |
-- |  5 | eve@example.com   | $2y$10$abcdefghijk1234567890hashedpw5       |
-- +----+-------------------+---------------------------------------------+
-- 5 rows in set (0.00 sec)

This method duplicates the table's structure and data, but not its full definition. Therefore, constraints like primary keys, foreign keys, and indexes will not be copied.

2. Duplicate Table Structure and Definition

In the second method, you can duplicate a table's structure and definition using CREATE TABLE table_a LIKE table.

For example, suppose you have a table called users:

SELECT * FROM users;
-- +----+-------------------+---------------------------------------------+
-- | id | email             | password                                    |
-- +----+-------------------+---------------------------------------------+
-- |  1 | alice@example.com | $2y$10$abcdefghijk1234567890hashedpw1       |
-- |  2 | bob@example.com   | $2y$10$abcdefghijk1234567890hashedpw2       |
-- |  3 | carol@example.com | $2y$10$abcdefghijk1234567890hashedpw3       |
-- |  4 | dave@example.com  | $2y$10$abcdefghijk1234567890hashedpw4       |
-- |  5 | eve@example.com   | $2y$10$abcdefghijk1234567890hashedpw5       |
-- +----+-------------------+---------------------------------------------+
-- 5 rows in set (0.00 sec)

You can duplicate the table structure and definition as follows:

CREATE TABLE users_2 LIKE users;
-- Query OK, 0 rows affected (0.05 sec)

Here's the result:

DESC users_2;
-- +----------+--------------+------+-----+---------+----------------+
-- | Field    | Type         | Null | Key | Default | Extra          |
-- +----------+--------------+------+-----+---------+----------------+
-- | id       | int unsigned | NO   | PRI | NULL    | auto_increment |
-- | email    | varchar(255) | NO   | UNI | NULL    |                |
-- | password | varchar(255) | YES  |     | NULL    |                |
-- +----------+--------------+------+-----+---------+----------------+
-- 3 rows in set (0.01 sec)

To duplicate the data as well, run this:

INSERT INTO users_2 SELECT * FROM users;
-- Query OK, 5 rows affected (0.01 sec)
-- Records: 5  Duplicates: 0  Warnings: 0

Here's the result:

SELECT * FROM users_2;
-- +----+-------------------+---------------------------------------------+
-- | id | email             | password                                    |
-- +----+-------------------+---------------------------------------------+
-- |  1 | alice@example.com | $2y$10$abcdefghijk1234567890hashedpw1       |
-- |  2 | bob@example.com   | $2y$10$abcdefghijk1234567890hashedpw2       |
-- |  3 | carol@example.com | $2y$10$abcdefghijk1234567890hashedpw3       |
-- |  4 | dave@example.com  | $2y$10$abcdefghijk1234567890hashedpw4       |
-- |  5 | eve@example.com   | $2y$10$abcdefghijk1234567890hashedpw5       |
-- +----+-------------------+---------------------------------------------+
-- 5 rows in set (0.00 sec)

Setting Up ESLint, Prettier, Husky, and Lint-Staged in a TypeScript Project

Ibrahim — Thu, 31 Jul 2025 02:06:39 +0000

Ibrahim

Jul 31 '25

How to Set Up ESLint, Prettier, Husky, and Lint-Staged in a TypeScript Project

#typescript #git #cleancode #node

Comments

2 min read

How to Set Up ESLint, Prettier, Husky, and Lint-Staged in a TypeScript Project

Ibrahim — Thu, 31 Jul 2025 02:06:19 +0000

I usually begin a Typescript project by first setting up ESLint, Prettier, Husky, and Lint-Staged.

ESLint and Prettier help keep the code clean and consistent with the defined standards.

Husky and Lint-Staged used to automatically run ESLint and Prettier before a git commit.

Follow these steps to set up all the tools:

1. Set Up Git

First, make sure Git is initialized in the project by running:

git status
# On branch master
# nothing to commit, working tree clean

If Git is not initialized yet, run the following command:

git init

2. Set Up Eslint

ESLint is a tool used to analyze and fix issues in TypeScript code.

Here's how to install ESLint and the TypeScript plugin:

npm install --save-dev eslint @eslint/js typescript-eslint

Next, create an ESLint config file called eslint.config.mjs. Here's the recommended config:

// @ts-check

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  eslint.configs.recommended,
  tseslint.configs.recommended,
);

For more configuration options, visit: https://typescript-eslint.io/rules/.

3. Set Up Prettier

Prettier is a tool used to format TypeScript code to make it cleaner and more consistent.

Here's how to install Prettier:

npm install --save-dev --save-exact prettier

Next, create a Prettier config file called .prettierrc. Here's the recommended config:

{
  "singleQuote": true
}

For more configuration options, visit: https://prettier.io/docs/options.

4. Set Up Husky and Lint-Staged

Husky is a tool used to run specific scripts on Git hooks.

Lint-Staged is a tool used to run commands like ESLint and Prettier on staged files before they are commited.

Here's how to install Husky and Lint-Staged:

npm install --save-dev husky lint-staged

Next, run the following commands to set up Husky:

npx husky init
echo "lint-staged" > .husky/pre-commit

Next, open the package.json file and add a lint-staged section with commands to run on staged files.

{
  "lint-staged": {
    "*.{ts,js,css,md}": "prettier --write",
    "*.{ts,js}": "eslint --cache --fix"
  }
}

Once the setup is complete, Husky will automatically run the scripts specified in lint-staged like ESLint and Prettier before any commit is made.

Adding a Where Condition to a Join in Laravel

Ibrahim — Mon, 28 Jul 2025 08:01:31 +0000

Ibrahim

Jul 28 '25

How to Add a Where Condition to a Join in Laravel

#laravel #database #sql #php

Comments

1 min read

How to Add a Where Condition to a Join in Laravel

Ibrahim — Mon, 28 Jul 2025 08:00:17 +0000

Laravel provides advanced join clauses which allow us to add where condition directly inside a join clause.

To add advanced join clauses, we can pass a closure as the second argument to the join method. The closure receives a JoinClause object, which allows us to define the join condition and add a where condition.

For example, the following query retrieves all articles along with their approved comments only:

<?php

use Illuminate\Support\Facades\DB;
use Illuminate\Database\Query\JoinClause;

$articlesWithApprovedComments = DB::table('articles')
    ->join('comments', function (JoinClause $join) {
        $join->on('articles.id', '=', 'comments.article_id')
            ->where('comments.is_approved', true);
    })
    ->get();

The query above will produce the following SQL query:

select * from articles
inner join comments on articles.id = comments.article_id and comments.is_approved = 1;

As shown, the where clause is embedded directly within the on condition of the join.

How to Validate File Size in a File Input Using JavaScript

Ibrahim — Wed, 23 Jul 2025 08:15:14 +0000

Ibrahim

Jul 23 '25

Validating File Size in a File Input Using JavaScript

#javascript #html #webdev #frontend

Comments

2 min read

Validating File Size in a File Input Using JavaScript

Ibrahim — Wed, 23 Jul 2025 08:14:30 +0000

File size validation can be handled on the client side using JavaScript.

For example, the following form contains a file input:

<form>
  <label for="image">Select Image</label>
  <input type="file" id="image" />
  <button>Upload</button>
</form>

First, listen for changes when the user selects a file from the input.

const inputFile = document.querySelector('input[type=file]');

inputFile.addEventListener('change', e => {
  //
});

Inside the listener, check whether a file has been selected:

const inputFile = document.querySelector('input[type=file]');

inputFile.addEventListener('change', e => {
  if (e.target.files.length) {
    // Validate
  }
});

If any file is selected, retrieve it:

const inputFile = document.querySelector('input[type=file]');

inputFile.addEventListener('change', e => {
  if (e.target.files.length) {
    const file = e.target.files[0];
  }
});

Get the file size using the size property. The file size is in bytes.

Add a variable to set the maximum file size. Then, compare the variable with the file size.

const inputFile = document.querySelector('input[type=file]');

inputFile.addEventListener('change', e => {
  if (e.target.files.length) {
    const file = e.target.files[0];
    const maxFileSize = 1000 * 1000 * 5; // 5MB

    if (file.size > maxFileSize) {
      // Error
    }
  }
});

If the file size is too large, set a validation error on the input or show an alert.

Example using input validation:

const inputFile = document.querySelector('input[type=file]');

inputFile.addEventListener('change', e => {
  if (e.target.files.length) {
    const file = e.target.files[0];
    const maxFileSize = 1000 * 1000 * 5; // 5MB

    if (file.size > maxFileSize) {
      inputFile.setCustomValidity(
        'The selected file must not be larger than 5MB'
      );
      inputFile.reportValidity();
    } else {
      inputFile.setCustomValidity('');
    }
  } else {
    inputFile.setCustomValidity('');
  }
});

Read more about adding validation errors to input elements at https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation

Here's the result:

Example using alert:

const inputFile = document.querySelector('input[type=file]');

inputFile.addEventListener('change', e => {
  if (e.target.files.length) {
    const file = e.target.files[0];
    const maxFileSize = 1000 * 1000 * 5; // 5MB

    if (file.size > maxFileSize) {
      alert('The selected file must not be larger than 5MB');
    }
  }
});

Here's the result:

Persisting Pinia State

Ibrahim — Tue, 22 Jul 2025 06:59:44 +0000

Ibrahim

Jul 22 '25

How to Persist Pinia State

#vue #frontend #javascript #web

Comments

1 min read

How to Persist Pinia State

Ibrahim — Tue, 22 Jul 2025 06:59:30 +0000

Sometimes, we want to persist the Pinia state so that when the page is closed, the state still exists when the page is restored. This can be useful for states like authentication tokens, shopping carts, and more.

This can be implemented using a plugin called Pinia Plugin Persistedstate.

This plugin persists Pinia store state using localStorage or other storage options.

To get started, install the plugin first:

npm install pinia-plugin-persistedstate

Next, import the plugin and use it with the Pinia instance:

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

Next, add the { persist: true } option to the store that should be persisted:

import { ref } from "vue";
import { defineStore } from "pinia";

export const useStore = defineStore(
  "auth",
  () => {
    const loggedIn = ref(false);
    const accessToken = ref(null);

    return { loggedIn, accessToken };
  },
  { persist: true }
);

In the example above, the auth store's state will be automatically saved to localStorage.

For advanced usage, such as customizing the storage, read the full documentation at https://prazdevs.github.io/pinia-plugin-persistedstate.

I Finally Understand .gitkeep

Ibrahim — Mon, 21 Jul 2025 07:16:32 +0000

You may have often come across a .gitkeep file in a Git repository. Have you ever wondered what it's actually for?

After doing some research, I finally realized that .gitkeep is not an official Git feature or standard like .gitignore.

What is `.gitkeep` Used For?

By default, Git doesn't track empty directories. This means if you create a folder without any files inside, Git will ignore it.

That's where .gitkeep comes in. It's simply a placeholder file added to an empty directory so Git can include the folder in version control.

By placing a file like .gitkeep in an otherwise empty directory, Git will recognize that the directory is part of the repository.

Real-World Example

A common example is an uploads directory. This folder is often empty in the repository but required by the application to store uploaded files.

Even though it starts out empty, the directory must exist so the application can run properly. That's why a .gitkeep file is used to ensure the folder is tracked by Git.

You Can Use Any Filename

It's important to note that .gitkeep is not a Git-specific file. You can use any filename like .keep, README.md or even .gitignore as long it ensures the directory is no longer empty.

The most important is, there must be at least one file in the directory, so Git can track it.

Conclusion

.gitkeep is simply an unofficial convention used to keep empty directories in Git repositories. Git itself doesn't care about the file name, as long as the directory isn't empty, it will be tracked.

Duplicating Rows in MySQL

Ibrahim — Sat, 19 Jul 2025 08:17:02 +0000

Ibrahim

Jul 19 '25

How to Duplicate Rows in MySQL

#mysql #sql #database #data

Comments

2 min read

Forem: Ibrahim

There are two methods to duplicate a table in MySQL. Here's how:

How to Duplicate a Table in MySQL

How to Duplicate a Table in MySQL

1. Duplicate Table Structure and Data

2. Duplicate Table Structure and Definition

Setting Up ESLint, Prettier, Husky, and Lint-Staged in a TypeScript Project

How to Set Up ESLint, Prettier, Husky, and Lint-Staged in a TypeScript Project

How to Set Up ESLint, Prettier, Husky, and Lint-Staged in a TypeScript Project

1. Set Up Git

2. Set Up Eslint

3. Set Up Prettier

4. Set Up Husky and Lint-Staged

Adding a Where Condition to a Join in Laravel

How to Add a Where Condition to a Join in Laravel

How to Add a Where Condition to a Join in Laravel

How to Validate File Size in a File Input Using JavaScript

Validating File Size in a File Input Using JavaScript

Validating File Size in a File Input Using JavaScript

Persisting Pinia State

How to Persist Pinia State

How to Persist Pinia State

I Finally Understand .gitkeep

What is .gitkeep Used For?

Real-World Example

You Can Use Any Filename

Conclusion

Duplicating Rows in MySQL

How to Duplicate Rows in MySQL

What is `.gitkeep` Used For?