DEV Community: Jahidul Islam (Saeid)

Supercharge Your Linux Shell with Zsh, zsh-autosuggestions, and PowerLevel10k

Jahidul Islam (Saeid) — Thu, 12 Oct 2023 12:26:30 +0000

Introduction

If you're a Linux enthusiast or someone who spends a significant amount of time in the terminal, you'll know the importance of a highly customizable and efficient shell. Zsh, or Z shell, is a powerful alternative to the default bash shell that offers a plethora of features and customizations. When combined with zsh-autosuggestions and the PowerLevel10k theme, you'll transform your command-line interface into a productivity powerhouse. In this guide, we'll walk you through the steps to configure Zsh with zsh-autosuggestions and the PowerLevel10k theme.

What You'll Need

Before you get started, make sure you have the following prerequisites:

Linux-based system: This guide assumes you're running a Linux distribution, but the configurations can be adapted for other platforms.
Zsh: You need to have Zsh installed. If it's not already installed, you can usually find it in your distribution's package manager. For example, on Debian/Ubuntu, you can run sudo apt-get install zsh, and on Fedora, you can use sudo dnf install zsh.
Git: Ensure that Git is installed on your system, as we'll use it to download and update the PowerLevel10k theme.

Installing Zsh-autosuggestions

Zsh-autosuggestions is a plugin that provides intelligent suggestions as you type, making your shell experience smoother and more efficient.

First, you'll need to install a plugin manager for Zsh. We recommend using "Oh My Zsh" for its simplicity and extensive community support. To install "Oh My Zsh," run the following command:

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

This command will automatically set Zsh as your default shell and install "Oh My Zsh."

Once "Oh My Zsh" is installed, open your Zsh configuration file with your favorite text editor. The configuration file is usually located at ~/.zshrc. You can open it with the following command:

nano ~/.zshrc

In your ~/.zshrc file, locate the plugins section and add zsh-autosuggestions to the list of plugins. It should look like this:

plugins=(zsh-autosuggestions)

Save and exit the file.
Reload your Zsh configuration to apply the changes:

source ~/.zshrc

Zsh-autosuggestions should now be active. You'll notice intelligent command suggestions as you type in your terminal.

Installing PowerLevel10k Theme

The PowerLevel10k theme is a highly customizable and visually appealing Zsh theme. It provides valuable information at a glance, making your command prompt more informative and stylish.

To install the PowerLevel10k theme, clone the Git repository into your Zsh custom themes directory. Use the following command:

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

Open your ~/.zshrc file again:

nano ~/.zshrc

Change the ZSH_THEME line to set your theme to PowerLevel10k:

ZSH_THEME="powerlevel10k/powerlevel10k"

Save and exit the file.
Reload your Zsh configuration once more to apply the PowerLevel10k theme:

source ~/.zshrc

Upon restarting your Zsh session or opening a new terminal window, the PowerLevel10k theme will be active.

Configuring PowerLevel10k

The PowerLevel10k theme is highly customizable. To configure it to your liking, run the following command and follow the prompts:

Configuring PowerLevel10k

The PowerLevel10k theme is highly customizable. To configure it to your liking, run the following command and follow the prompts:

Install Font

For p10k theme icon you can use FiraCode Nerd-font
Download and install this font
After that go to the terminal Preferences select Custom font: Select Firacode Nerd Font

p10k configure

You can choose various options for prompt styles, icons, and information displayed in your prompt.

Conclusion

By combining Zsh, zsh-autosuggestions, and the PowerLevel10k theme, you've transformed your Linux shell into a powerful, efficient, and visually pleasing environment. With intelligent suggestions, a customizable prompt, and a wealth of features, you'll take your command-line productivity to the next level. Enjoy your enhanced terminal experience!

A Better Way to GitHub Commit: Simplify with a Custom .zshrc Function

Jahidul Islam (Saeid) — Thu, 12 Oct 2023 10:24:43 +0000

Version control systems like Git are essential tools for developers to track changes in their projects. Committing code changes with meaningful messages is crucial for maintaining a well-organized and easily navigable project history. While git commit -m works perfectly fine, there's a more engaging and efficient way to create commit messages using a custom script. In this blog, we'll explore how to create a custom GitHub commit script to enhance your version control workflow.

The Problem with Generic Commit Messages

When you use git commit -m, you often end up with generic commit messages like "Fixed a bug" or "Updated code." These messages lack context and don't provide meaningful insights into the changes made, which can lead to confusion down the line. Additionally, it can be challenging to maintain a consistent commit message format across a development team, making collaboration more difficult.

Simplifying GitHub Commits with a Custom .zshrc Function

Firstly, you need to understand what the .zshrc file is. It's a configuration file for the Zsh shell, a powerful, highly customizable shell. You can use it to define custom functions and aliases, which can significantly improve your command-line experience.

Here's the custom gitcommit function that you can add to your .zshrc file:

gitcommit() {
    local commit_type
    PS3="Select a commit type: "

    local -A options=(
        [initial]="🎉 Initial commit"
        [feat]="✨ New Feature"
        [fix]="🐛 Fix Bug"
        [docs]="📚 Update Documentation"
        [refactor]="🔨 Refactor code"
        [perf]="🚀 Improves performance"
        [style]="💅 Style changes"
        # Add more if you want
    )

    select commit_type in "${(k)options[@]}"; do
        if [[ -n $commit_type ]]; then
            break
        else
            echo "Invalid option. Please select a valid commit type."
        fi
    done

    commit_hint=$options[$commit_type]

    print -n "Enter your commit message ($commit_hint): "
    read commit_message
    git add .
    git commit -m "${options[$commit_type]} - $commit_message"
}

This custom gitcommit function makes it easy and fun to commit your changes. Here's how it works:

You run the gitcommit command in your terminal.
It presents you with a menu of commit types such as "Initial commit," "New Feature," "Fix Bug," and more. You can easily customize this list to match your project's needs.
You select a commit type by entering the corresponding number.
You're prompted to enter your commit message, with a default hint based on the type you selected.
The function stages all changes (with git add .) and commits them with a message in the format "Type - Your Message."

By using this custom function, you not only streamline the commit process but also maintain a consistent and informative commit history. It ensures that you and your team can quickly understand the purpose of each commit without delving into the details of the changes.

Customizing the Commit Types

In the custom gitcommit function, you can easily customize the list of commit types to match your project's conventions. Simply edit the options associative array with the types and emojis you prefer. You can also add or remove types based on your needs.

Conclusion

Improving your GitHub commit workflow doesn't have to be a complicated process. By creating a custom function in your .zshrc file, you can simplify the commit process and ensure that your commit history is more informative and consistent. This is just one example of how you can enhance your development workflow with custom scripts and functions in your shell environment. Give it a try, and see how it makes your work on GitHub repositories more efficient and enjoyable. Happy coding! 🚀

How to paginated data in ant design table

Jahidul Islam (Saeid) — Fri, 13 Jan 2023 12:04:50 +0000

In Ant Design, you can use the pagination attribute of the Table component to paginate data.

And onChange (callback function that gets called when the page number or page size changes).

Here is an example of how to use the pagination attribute in a Table component:

import { Table } from "antd";
import { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [dataSource, setDataSource] = useState([]);
  const [totalPassengers, setTotalPassengers] = useState(1);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    fetchRecords(1, 10);
  }, []);
  const columns = [
    {
      title: "ID",
      dataIndex: "_id",
      key: "_id",
    },
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "Trips",
      dataIndex: "trips",
      key: "trips",
    },
  ];

  const fetchRecords = (page, pageSize) => {
    setLoading(true);
    axios
      .get(`https://api.instantwebtools.net/v1/passenger?page=${page}&size=${pageSize}`)
      .then((res) => {
        setDataSource(res.data.data);
        setTotalPassengers(res.data.totalPassengers);
        setLoading(false);
      });
  };

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Table
        loading={loading}
        columns={columns}
        dataSource={dataSource}
        pagination={{
          total: totalPassengers,
          onChange: (page, pageSize) => {
            fetchRecords(page, pageSize);
          },
        }}
        bordered
      ></Table>
    </div>
  );
}
export default App;

You can also use the pagination.total to set the total number of records

Codesandbox Example : https://codesandbox.io/s/tender-khorana-6oww0d

Next.js and Docker configuration

Jahidul Islam (Saeid) — Mon, 09 Jan 2023 07:02:09 +0000

To configure a Docker container for a Next.js application, you will need to create a Dockerfile and a docker-compose.yml file.

Here is an example Dockerfile that you can use as a starting point:

FROM node:latest

WORKDIR ./app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD npm run dev

This Dockerfile starts from the node:latest base image, which is a latest version of Node.js. It then sets the working directory to /app and copies the package.json file to the container. It runs npm install to install the dependencies of the application. Finally, it copies the rest of the application code to the container and exposes the default Next.js port (3000) and runs the npm run dev command to start the application in development mode.

To build and run the container, you can use the following commands:

version: "3.3"

services:
  nextjs:
    ports:
      - 3000:3000
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/app

This docker-compose.yml file defines a single service called nextjs, which is built from the Dockerfile in the current directory. It exposes the container's port 3000 on the host's port 3000 and mounts the current directory and the node_modules directory as volumes in the container. This allows you to make changes to the code and have them reflected in the running container without having to rebuild the image.

To build and run the container, you can use the following commands:

$ docker-compose build
$ docker-compose up

This will build the service and start the container. You should then be able to access the Next.js application at http://localhost:3000.

8 Tips and Tricks of JavaScript

Jahidul Islam (Saeid) — Sat, 06 Nov 2021 18:23:37 +0000

1: How to remove falsy values from an array?

// Remove falsy values from any array
let miscellaneous = ['🍎', false, '🍊', NaN, 0, undefined, '🌶️', null, '', '🥭'];

// passing Boolean to array.filter() will remove falsy values from array
let fruits = miscellaneous.filter(Boolean);

console.log(fruits); // ['🍎', '🍊', '🌶️', '🥭']

Explanation:

// Boolean(expression) in JS returns true/false
Boolean(5 < 6); //  true
Boolean(100 > 200); // false
Boolean('JavaScript'); //true
Boolean(''); //false

// array example
let miscellaneous = ['🍎', false, '🍊', NaN];
let fruits = miscellaneous.filter(Boolean);

console.log(fruits); // ['🍎', '🍊']

2: How to convert any value to boolean?

// Using !! in front of any value
console.log(!!"mashrafi"); // true
console.log(!!1); // true
console.log(!!0); // false
console.log(!!undefined); // false

// We can also use Boolean() to achieve same
console.log(Boolean("mashrafi")); // true

3: How to resize an array?

// Resizing any array
let animals = ["🐕", "🐒", "🦊", "🐅"];

// We can use array's length property
animals.length = 3;

console.log(animals); // ["🐕", "🐒", "🦊"]

4: How to flatten a multidimensional array?

// How to flattern a multi-dimensional array
let smileys = ['🥰', ['😄', '😃'], '😉', ['🥲', '😑']];

// We can use array.flat() method to flattern one level array
console.log(smileys.flat()); // ['🥰', '😄', '😃', '😉', '🥲', '😑']

// Multi level array
let smileys2 = ['🥰', ['😄', '😃', ['🥲', '😑']], '😉'];

// We can pass 'Infinity' parameter to array.flat function
console.log(smileys2.flat(Infinity)); // ['🥰', '😄', '😃', '🥲', '😑', '😉']

5: How to use short conditionals?

// Short conditionals
const captain = "Mashrafi";

// Instead of doing this
if(captain === "Mashrafi") {
    console.log("❤️");
}

// We can use &&
captain === "Mashrafi" && console.log("❤️");

// And instead of doing this
if(captain !== "Mashrafi") {
    console.log("😡");
}

// We can use ||
captain === "Mashrafi" || console.log("😡");

6: How to replace all occurrences of a string?

// Replace all occurances of a string
const quote = "React is a JS framework & this framework is the most popular front-end framework right now";

// Replace all occurances of 'framework' with 'library'
console.log(quote.replace(/framework/g, "library")); // React is a JS library & this library is the most popular front-end library right now

7: How to log variables with values properly?

// Log values with variable names smartly
const library1 = "jQuery";
const library2 = "React";

// Instead of doing this
console.log(`library1 - ${library1}`); // library1 - jQuery
console.log(`library2 - ${library2}`); // library2 - React

// We can do this
console.log({ library1 }); // {library1: 'jQuery'}
console.log({ library2 }); // {library2: 'React'}

8: How to Know performance of a task

// We can wrap our task with performance.now()
const startTime = performance.now();

for(let i = 0; i <= 50; i++) {
    console.log(i);
}

const endTime = performance.now();

console.log(`loop took ${endTime - startTime} milliseconds to finish`);

Thank you Learn with Sumit Bangladesh for sharing amazing tutorials.
Check you the Bangla tutorial #1 JavaScript Tips and Tricks - JavaScript Job Interview Questions - Bangla