Forem: MUHAMMED YAZEEN AN

🚦 Automate Testing, linting and other tasks Before Every Commit: Complete Pre-Commit Setup Guide

MUHAMMED YAZEEN AN — Mon, 09 Jun 2025 13:29:57 +0000

Hey devs! 👋 Ever committed code and realized later you forgot to run your linter or formatter? 😅 Let's fix that! Husky 🐶 can automate these checks for you, so your codebase stays clean and consistent—without you even thinking about it.

🧐 What is Husky (and Git Hooks)?

Husky is a tool that lets you run scripts automatically before you commit or push code. Think of it as a helpful guard dog that barks if something's off before your code gets into the repo.

Git Hooks Explained: Git hooks are scripts that Git executes before or after events such as commit, push, and receive. They're a built-in feature of Git that allows you to customize Git's internal behavior and trigger custom actions at critical points in the development lifecycle. Husky makes it easier to manage these hooks.

💡 Use Cases for Husky

Consistent Code Style Across Teams: Enforce Prettier or your favorite formatter to maintain a uniform code style, regardless of who's contributing.
Prevent Errors in Production: Automatically lint code to catch issues before they make it to the main branch, reducing the risk of bugs.
Readable and Maintainable Commit History: Enforce commit message rules to ensure a clear and consistent commit history, making it easier to understand changes over time.
Automated Testing: Run tests before each commit to ensure that new changes don't break existing functionality.
Security Checks: Integrate security linters to automatically scan for vulnerabilities before code is committed.

🚀 Let's Set Up Husky (Step by Step)

1️⃣ Install Husky

Add Husky to your project:

npm install --save-dev husky

Husky will help you manage Git hooks for your project.

2️⃣ Enable Husky Git Hooks

Set up Husky to use Git hooks:

npm set-script prepare "husky install"
npm run prepare

npm set-script prepare "husky install": Adds a script to your package.json called "prepare". This ensures Husky is set up every time someone installs dependencies.
npm run prepare: Runs the "prepare" script right now to set up Husky immediately.

Troubleshooting: If npm run prepare fails, make sure you have the latest version of npm installed. Try running npm install -g npm@latest and then try npm run prepare again.

Set Up Pre-commit Hook with Linting Example

Let's create a pre-commit hook that runs linting before every commit.

First, install ESLint:

npm install --save-dev eslint
npx eslint --init

Add a lint script to your package.json:

"scripts": {
  "lint": "eslint ."
}

Create the pre-commit hook:

npx husky add .husky/pre-commit "npm run lint"
git add .husky/pre-commit

What these commands do:

npx husky add .husky/pre-commit "npm run lint": Creates a file called pre-commit in the .husky folder that will run npm run lint before every commit.
git add .husky/pre-commit: Stages the hook file so it gets committed to your repository and shared with your team.

You can add multiple commands to your pre-commit hook like this:

npx husky add .husky/pre-commit "npm run lint && npm run format && npm run test"

Examples of scripts you can add to your package.json:

"scripts": {
  "lint": "eslint .",
  "format": "prettier --write .",
  "test": "jest",
  "build": "webpack --mode production",
  "type-check": "tsc --noEmit"
}

Now, every time you commit, Husky will automatically run your linter first! If the linting fails, the commit will be blocked until you fix the issues.

🧩 Other Tools You Can Integrate with Husky

Code Formatting: Use Prettier to automatically format your code.
Commit Message Linting: Use commitlint to enforce commit message standards.
Security Checks: Use eslint-plugin-security to detect security vulnerabilities.
Testing: Run your test suite before commits to ensure nothing breaks.

🎉 That's It!

Now, every time you commit, Husky will make sure your code is clean and follows your project's standards. No more "oops, forgot to lint!" moments. 🚫🐛

Give it a try and let your codebase thank you!

Questions? Drop them below! 👇

📚 Further Reading

🏷️ Tags

#Husky #GitHooks #CodeQuality #Linting #JavaScript #Development #Automation

Turn Your Tablet into a Second Monitor for Ubuntu

MUHAMMED YAZEEN AN — Thu, 27 Feb 2025 04:55:45 +0000

This guide will show you how to set it up step-by-step using Remote Desktop Protocol (RDP). By the end, you'll have a fully functional extended display setup. Let’s get started!

🛠️ Step 1: Enable Remote Desktop on Ubuntu

The steps to enable Remote Desktop depend on your Ubuntu version:

For Ubuntu version below 22:

Open Settings from the menu.
Go to the Sharing section.
Turn on the Sharing switch.
Click on Screen Sharing and enable it.
Set a password for security.

For Ubuntu version above 22:

Open Settings from the menu.
Go to System > Remote Desktop.
You will see two tabs: Remote Login and Desktop Sharing.
Under Desktop Sharing, toggle Desktop Sharing to enable it.
Set or update the username and password for security.

⚙️ Step 2: Enable Extend Mode for Your Tablet

By default, RDP mirrors your Ubuntu desktop to your tablet, showing the same content on both screens. To use your tablet as a true extended display, where you can have different windows and content, you need to change the screen sharing mode to "extend."

Open the terminal on your Ubuntu computer and type this command:

gsettings set org.gnome.desktop.remote-desktop.rdp screen-share-mode extend

This command configures RDP to treat your tablet as an extended display rather than a mirrored one, allowing you to drag windows and apps to your tablet just like a second monitor.

! Important: Without this setting, you would only see a copy of your main screen on your tablet, which limits the productivity benefits of having an additional display.

🔄 Step 3: Log Out and Log Back In

After enabling Remote Desktop and running the command above, log out of your Ubuntu session and log back in. This step ensures that all the changes are applied correctly.

🌐 Step 4: Find Your Computer's Local IP Address

To connect your tablet, you need your computer's local IP address. The easiest way to find it is:

Open the terminal on your Ubuntu computer.
Type this command:

   hostname -I

The output will show your local IP address (e.g., 192.168.x.x). Write it down, as you'll need it to connect your tablet.

📱 Step 5: Connect Your Tablet Using a Remote Desktop App

Now that Remote Desktop is ready, you can connect your tablet. You'll need a Remote Desktop app:

For Android: Download the Windows App from the Google Play Store.
For iPhone/iPad: Download the Windows App from the App Store.

🔧 Step 6: Set Up the Remote Desktop App

Open the Microsoft Remote Desktop app on your tablet/iPad.
Tap Add PC or the + button to create a new connection.
In the PC Name or Hostname field, type your computer's local IP address (the one you found earlier).
When asked, enter the username and password you set in the Remote Desktop settings on Ubuntu.
Save the connection and tap to connect.

🚀 Step 7: Use Your Tablet as an Extended Monitor

Once connected, your tablet will work as an extra screen for your Ubuntu computer. You can now move windows and apps to your tablet, just like using a second monitor. This is a simple and effective way to boost your productivity!

🌟 Conclusion

Using your tablet as an extended monitor for Ubuntu is a great way to maximize your productivity and make the most of your devices. Whether you're multitasking, coding, or designing, this setup can help you work more efficiently. However, there are a few things to keep in mind:

Reconnection Issues: You may encounter problems when reconnecting the screen after disconnecting. In such cases, you might need to restart the Remote Desktop session or reapply the settings.
Slight Delay: Since this setup relies on a wireless connection, there can be a slight delay in responsiveness. It’s not as performant as a wired connection, so it’s best used when you don’t have access to a physical second monitor or a wired solution.

Despite these limitations, this method is a simple and effective way to extend your screen space when you need it.

:) Happy multitasking! 🚀

🚀 Host Your React App with Express.js: A Beginner's Guide

MUHAMMED YAZEEN AN — Tue, 11 Feb 2025 10:31:39 +0000

If you're looking for a quick and easy way to host your React app or static files, Express.js is a fantastic option. In this guide, we’ll walk you through the process step-by-step, from setting up your project to running your app locally. While this method is great for testing and small-scale deployments, we’ll also highlight why it’s not ideal for production and suggest better alternatives.

🛠️ Step 1: Set Up Your Project

Create a New Folder: Open your terminal and run:

   mkdir express-static-server
   cd express-static-server

Initialize a Node.js Project: Inside the folder, initialize a new project:

   npm init -y

This will create a package.json file to manage your project’s dependencies and scripts.

📦 Step 2: Install Dependencies

Install the required packages:

npm install express compression

Express: A lightweight framework for building web servers.
Compression (Optional): Middleware to enable GZIP compression for faster file delivery.

Note: Compression is optional but recommended for better performance.

⚛️ Step 3: Build Your React App

If you have a React app, navigate to your React project directory and build it for production:

npm run build

This will generate a build/ folder containing your app’s optimized static files.

🖥️ Step 4: Set Up the Server

Create a server.js File: In your project folder, create a file named server.js and add the following code:

   const express = require('express');
   const path = require('path');
   const compression = require('compression');

   const app = express();
   const PORT = process.env.PORT || 5000;

   // Enable GZIP compression (optional)
   app.use(compression());

   // Serve static files from the React build directory
   app.use(express.static(path.join(__dirname, 'build')));

   // Handle all other routes by serving the React app's index.html
   app.get('*', (req, res) => {
     res.sendFile(path.join(__dirname, 'build', 'index.html'));
   });

   // Start the server
   app.listen(PORT, () => {
     console.log(`Server is running on http://localhost:${PORT}`);
   });

Move the React Build Folder: Copy the build/ folder from your React project into the same directory as server.js. Your project structure should look like this:

   express-static-server/
   ├── build/          # Contains your React app's production build
   ├── node_modules/
   ├── package.json
   ├── package-lock.json
   └── server.js

🚀 Step 5: Run the Server

Start your server by running:

node server.js

Your React app will now be hosted at http://localhost:5000. Open your browser and navigate to this URL to see your app in action.

⚠️ Why This Method is Not Ideal for Production

While this setup is great for local testing or small-scale deployments, it’s not recommended for production because:

Performance: Express.js is not optimized for serving static files at scale.
Scalability: It lacks advanced features like caching and load balancing.
Security: It doesn’t provide built-in HTTPS or protection against malicious requests.

🌟 Recommended Alternatives for Production

For production hosting, consider using these tools:

Vercel
Netlify
NGINX
AWS S3 + CloudFront

These platforms are optimized for hosting React apps and provide features like global CDNs, caching, and HTTPS.

🎉 Conclusion

Using Express.js to host your React build is a simple and effective way to get started. It’s perfect for local testing or learning how servers work. However, for production, switch to a dedicated hosting solution for better performance and reliability.

:) Happy coding! 🚀

Fixing OpenVPN Connection Issues in Ubuntu

MUHAMMED YAZEEN AN — Wed, 01 Jan 2025 04:15:02 +0000

If you've recently upgraded to Ubuntu 24.04 and are experiencing issues with OpenVPN connections failing silently after importing a .ovpn profile, you're not alone. This is a common problem that many users have encountered. Fortunately, it can be resolved using one of two methods: editing the .ovpn file directly or adjusting settings through the GUI.

Method 1: Edit the `.ovpn` Profile

Step 1: Import the `.ovpn` Profile

Start by importing the .ovpn profile into Ubuntu's Network Settings:

Open Settings on your Ubuntu system.
Navigate to the Network tab.
Under the VPN section, click the + button.
Select Import from file and choose your .ovpn file.

Once imported, try connecting to the VPN. If the connection fails silently, proceed with the following steps.

Step 2: Edit the `.ovpn` File

Open the .ovpn file you imported using a text editor.
Locate the line that says:

   cipher AES-256-CBC

Comment out this line by adding a # at the beginning:

   #cipher AES-256-CBC

Save the file.

Step 3: Re-import the Edited Profile

Go back to Network Settings and remove the existing VPN profile.
Click the + button again and re-import the edited .ovpn file.

Step 4: Reconnect to the VPN

Try reconnecting to the VPN. The connection should now work without any issues.

Method 2: Change Cipher Settings via GUI

If you prefer not to edit the .ovpn file directly, you can resolve the issue through the Network Settings GUI.

Step 1: Import the `.ovpn` Profile

Follow the same steps as in Method 1 to import your .ovpn profile:

Open Settings and go to the Network section.
Click the + button under the VPN section and select Import from file.
Choose your .ovpn profile.

Step 2: Open VPN Profile Settings

After importing, click the gear icon next to the VPN profile to open its settings.

Step 3: Navigate to Advanced Settings

In the Identity tab, scroll down to the Advanced section.
Click on Advanced Options to open the advanced properties modal.

Step 4: Change the Cipher

Under the Security section, locate the dropdown for Cipher.
Change the Cipher from AES-256-CBC to Default.
Save the changes and close the modal.

Step 5: Reconnect to the VPN

After saving the changes, try reconnecting to the VPN. The connection should now work properly.

I hope this helps :)

Exploring Zsh and Its Powerful Plugins: A Guide to Supercharge Your Terminal Experience

MUHAMMED YAZEEN AN — Tue, 31 Oct 2023 04:52:35 +0000

Zsh, an upgraded version of the Bourne Shell, brings several new features like automatic cd (change directory), spell correction, themes, and plugins.

Installation:

1) Installation: Open your terminal and enter the following command to install Zsh:

sudo apt install zsh

2) Set Zsh as Your Default Shell: Make Zsh your default shell using:

chsh -s /bin/zsh

3) Log out first, then reopen the terminal.

.zshrc

The .zshrc File: Your Personalized Shell Guidebook

The .zshrc file acts as a manual for your Zsh shell, allowing you to customize your shell environment. You can create shortcuts (aliases), modify your prompt's appearance, and add extra features (plugins) through this file.

zshrc is typically located in the user's home directory.

1) To edit the zshrc

gedit ~/.zshrc

2) To reload your shell to apply changes made in the .zshrc file.

exec .zshrc

Introducing Oh My Zsh:

Oh My Zsh is a tool that makes using the Zsh shell easier and more customizable. It provides a collection of themes, plugins, and functions that enhance your command-line experience. In simple words, it's like a toolbox that helps you customize and improve how you interact with your computer using the command line.

Installation Guide for Oh My Zsh

To install Oh My Zsh, simply visit the official website and locate the provided script. Copy this script, then open your terminal and paste it there to initiate the installation process

Must-Have Plugins

Oh My Zsh opens the door to a universe of plugins, each catering to specific needs and enhancing your workflow. Here are some essential plugins to consider:

1. Git: Streamlining Version Control

This plugin provides many aliases and functions that make working with Git from the command line easier.

Usage:

For detailed usage, you can refer to the official documentation.

Installation:

1) The git plugin comes bundled with Oh My Zsh.
2) To install it, append git to the plugin list in your .zshrcfile in your home directory.

plugins=( 
    git
)

2. Sudo

The sudo plugin helps to add 'sudo' in front of previous commands by pressing the escape button twice.

Installation:

The sudo plugin comes bundled with Oh My Zsh.
To install it, append sudo to the plugin list in your .zshrcfile in your home directory.

plugins=( 
    sudo
)

3. Zsh-autosuggestions

This plugin provides fish-like autosuggestions for zsh.

Installation:

1) First, clone the zsh-autosuggestions repository into ~/.oh-my-zsh/custom/plugins.

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

2) Then, append zsh-autosuggestions to the plugin list in your .zshrc file in your home directory.

plugins=( 
    zsh-autosuggestions
)

4. History

This plugin provides several commands to work with your command history.

Usage:

h: Prints your command history.
hs: Use grep to search your command history.
hsi: Use grep to do a case-insensitive search of your command history.

Installation:

1) The history plugin comes bundled with Oh My Zsh.
2) To install it, append history to the plugin list in your .zshrc file in your home directory.

plugins=( 
    history
)

5. Copypath

The copypath plugin allows you to copy the current directory path to your system clipboard.

Installation:

1) The copypath plugin comes bundled with Oh My Zsh.
2) To install it, append copypath to the plugin list in your .zshrc file in your home directory.

plugins=( 
   copypath
)

6. Copyfile

The copyfile plugin allows you to copy the contents of a file to your system clipboard.

Installation:

1) The copyfile plugin comes bundled with Oh My Zsh.
2) To install it, append copyfile to the plugin list in your .zshrc file in your home directory.

plugins=( 
   copyfile
)

7. Copybuffer

The copybuffer plugin lets you copy the current command line to your system clipboard.

Installation:

The copybuffer plugin comes bundled with Oh My Zsh.
To install it, append copybuffer to the plugin list in your .zshrc file in your home directory.

plugins=( 
   copybuffer
)

8. Dirhistory

The dirhistory plugin provides commands for navigating directory history.

Installation:

The dirhistory plugin comes bundled with Oh My Zsh.
To install it, append dirhistory to the plugin list in your .zshrc file in your home directory.

plugins=( 
   copybuffer
)

9. JsonTools

The jsonTools plugin provides commands for validating and formatting JSON.

Installation:

The jsonTools plugin comes bundled with Oh My Zsh.
To install it, append jsonTools to the plugin list in your .zshrc file in your home directory.

plugins=( 
   jsonTools
)

Removing Applications Installed via dpkg: A Step-by-Step Guide

MUHAMMED YAZEEN AN — Tue, 31 Oct 2023 03:45:07 +0000

Introduction:

Installing software packages on Linux systems using the dpkg command is a common practice. However, sometimes you might need to uninstall these applications. This guide outlines the steps to remove applications installed via dpkg in a straightforward manner.

Steps to Uninstall an Application Installed via dpkg:

1. Identify the Package Name:

First, you need to find the exact name of the package you want to uninstall. Use the following command to list all installed packages containing a specific keyword (replace PACKAGE_NAME with the actual keyword, e.g., skype):

dpkg -l | grep PACKAGE_NAME
For example, to find Skype packages:
dpkg -l | grep skype

2. Remove the Application:

Once you've identified the correct package name, use the following command to remove the application:

sudo dpkg -r skype-package-name
Replace skype-package-name with the actual name of the package you found in the previous step.

Torrent to Google Drive Uploader

MUHAMMED YAZEEN AN — Tue, 12 Sep 2023 15:21:00 +0000

The Torrent to Google Drive Uploader is a Google Colab script that simplifies the process of uploading torrented content directly to your Google Drive.

With this script, you can conveniently add multiple torrent files or magnet links, and they will be downloaded and securely stored on your Google Drive.the Script has significant advantage in terms of speed comparing other free alternatives.

Github Repository

Forem: MUHAMMED YAZEEN AN

🚦 Automate Testing, linting and other tasks Before Every Commit: Complete Pre-Commit Setup Guide

🧐 What is Husky (and Git Hooks)?

💡 Use Cases for Husky

🚀 Let's Set Up Husky (Step by Step)

1️⃣ Install Husky

2️⃣ Enable Husky Git Hooks

Set Up Pre-commit Hook with Linting Example

🧩 Other Tools You Can Integrate with Husky

🎉 That's It!

📚 Further Reading

🏷️ Tags

Turn Your Tablet into a Second Monitor for Ubuntu

🛠️ Step 1: Enable Remote Desktop on Ubuntu

For Ubuntu version below 22:

For Ubuntu version above 22:

⚙️ Step 2: Enable Extend Mode for Your Tablet

🔄 Step 3: Log Out and Log Back In

🌐 Step 4: Find Your Computer's Local IP Address

📱 Step 5: Connect Your Tablet Using a Remote Desktop App

🔧 Step 6: Set Up the Remote Desktop App

🚀 Step 7: Use Your Tablet as an Extended Monitor

🌟 Conclusion

🚀 Host Your React App with Express.js: A Beginner's Guide

🛠️ Step 1: Set Up Your Project

📦 Step 2: Install Dependencies

⚛️ Step 3: Build Your React App

🖥️ Step 4: Set Up the Server

🚀 Step 5: Run the Server

⚠️ Why This Method is Not Ideal for Production

🌟 Recommended Alternatives for Production

🎉 Conclusion

Fixing OpenVPN Connection Issues in Ubuntu

Method 1: Edit the .ovpn Profile

Step 1: Import the .ovpn Profile

Step 2: Edit the .ovpn File

Step 3: Re-import the Edited Profile

Step 4: Reconnect to the VPN

Method 2: Change Cipher Settings via GUI

Step 1: Import the .ovpn Profile

Step 2: Open VPN Profile Settings

Step 3: Navigate to Advanced Settings

Step 4: Change the Cipher

Step 5: Reconnect to the VPN

Exploring Zsh and Its Powerful Plugins: A Guide to Supercharge Your Terminal Experience

Installation:

.zshrc

Introducing Oh My Zsh:

Installation Guide for Oh My Zsh

Must-Have Plugins

1. Git: Streamlining Version Control

Usage:

Installation:

2. Sudo

Installation:

3. Zsh-autosuggestions

Installation:

4. History

Usage:

Installation:

5. Copypath

Installation:

6. Copyfile

Installation:

7. Copybuffer

Installation:

8. Dirhistory

Installation:

9. JsonTools

Installation:

Removing Applications Installed via dpkg: A Step-by-Step Guide

Introduction:

Steps to Uninstall an Application Installed via dpkg:

1. Identify the Package Name:

2. Remove the Application:

Torrent to Google Drive Uploader

Method 1: Edit the `.ovpn` Profile

Step 1: Import the `.ovpn` Profile

Step 2: Edit the `.ovpn` File

Step 1: Import the `.ovpn` Profile