Forem: Sakib MD Nazmush

Fastest Lightweight Maintenance Plugin for WordPress

Sakib MD Nazmush — Wed, 01 Apr 2026 11:14:36 +0000

Why Your 'Maintenance Mode' Plugin Is Overkill (And What I Use Instead)

You've been there: deploying a critical WordPress update at 2 AM, flipping on "maintenance mode," and watching your site's Lighthouse score tank from 95 to 62. All because some plugin decided to load 200KB of CSS animations and a spinner that rivals a Vegas slot machine. Sound familiar? As a web performance engineer who's audited hundreds of sites, I see this bloat everywhere. Let's fix it.

The Hidden Cost of "Full-Featured" Maintenance Plugins

Most maintenance mode plugins promise the world: custom templates, countdown timers, email capture forms, SEO redirects. Sounds great, right? Wrong. They solve a dead-simple problem—show a "back soon" page—with a sledgehammer.

Here's the rub: they load on every page. That fancy JS for particle effects? It fires on your homepage, blog posts, even admin AJAX calls. Animations chew CPU. Custom CSS bloats your critical path. One popular plugin I dissected? 150KB minified JS + 80KB CSS, all inlined or enqueued globally. Your Core Web Vitals? Murdered.

Real-world example #1: A client's e-commerce site. Their maintenance plugin loaded a full Bootstrap framework (just for a coming-soon page). Result? Time to Interactive jumped 40%. Customers bounced before the site even "broke."

Simple Problem, Simple Solution

WordPress maintenance is binary: site up or down. Why complicate it? The principle is straightforward—match your tool to the task. No need for a React app when a static HTML file does the job.

Ditch the plugins. Instead, drop a single wp-maintenance-mode.php file in your root. Hook into template_redirect like this:

function maintenance_mode() {
    if (!current_user_can('administrator') && !is_user_logged_in()) {
        wp_die(
            '<h1>Site under maintenance</h1><p>Back soon!</p>',
            'Maintenance',
            ['response' => 503]
        );
    }
}
add_action('template_redirect', 'maintenance_mode');

Zero JS. Zero CSS. Zero bloat.

Real-World Wins (No BS)

Example #2: Agency site with 10k daily visitors. Swapped a 300KB plugin for the snippet above. Page weight dropped 25%. Lighthouse: 98 from 72. Bonus: Proper 503 status tells Google "temporary, chill."

Example #3: My own staging site. Plugin was enqueuing Google Fonts and analytics—on maintenance pages. Switched to minimal mode, and my local dev server sighed in relief.

If you want something a tad more polished without the hassle, check out Light Maintenance Mode. It's a 4KB drop-in that skips the fluff—I've used it on production sites without a hiccup.

Ditch the Bloat, Reclaim Your Perf Budget

Maintenance mode shouldn't be a performance regression. Next time you're tempted by shiny plugin badges, ask: "Does my hammer need a laser sight?" Keep it simple, ship faster, and watch those vitals soar.

Your sites (and users) will thank you.

Ditch the Bloat: Introducing Sakibsnaz Light Maintenance Mode for WordPress

Sakib MD Nazmush — Sun, 18 Jan 2026 06:24:34 +0000

Tired of bloated maintenance mode plugins that weigh down your WordPress site and impact your Core Web Vitals? Sakibsnaz Light Maintenance Mode is here to offer a streamlined, performance-focused solution. In a market saturated with feature-heavy plugins claiming to be the best, we've taken a minimalist approach, prioritizing speed, efficiency, and a seamless user experience.

The Problem with the Status Quo

Many maintenance mode plugins on the market are overkill. They come packed with complex drag-and-drop builders, countless customization options, and a hefty footprint of unnecessary code. This leads to:

Slower loading times: Every extra kilobyte impacts your site's performance, affecting user experience and SEO.
Code bloat: Unnecessary features and dependencies can conflict with your theme and other plugins, leading to errors and instability.
A confusing user interface: Complex builders can be overwhelming and time-consuming to learn.

Sakibsnaz Light Maintenance Mode: A Different Approach

We believe that a maintenance mode plugin should be simple, efficient, and get the job done without sacrificing performance. That's why Sakibsnaz Light Maintenance Mode is built with the following principles in mind:

Ultra-Lightweight: Our plugin is less than 10KB, ensuring minimal impact on your site's performance. Say goodbye to 5MB behemoths!
SEO Friendly: We send a proper 503 Service Unavailable header to notify search engines that your site is temporarily down for maintenance, preserving your rankings.
Native UI: We leverage the familiar WordPress interface, so there's no need to learn a new and complicated builder.
Zero Dependencies: No external scripts or fonts are loaded, ensuring maximum compatibility and performance. Developer First: Our clean code won't conflict with your theme or other plugins.

Key Features

Enable/disable maintenance mode with one checkbox.
Displays a clear "Site Under Maintenance" message.
Shows your admin email as a clickable contact link.
Returns a proper HTTP 503 status (good for SEO).
Lightweight and translation-ready.

Comparison to Competitors

While other maintenance mode plugins boast extensive customization options, they often come at the cost of performance and complexity. Sakibsnaz Light Maintenance Mode focuses on providing the essential functionality you need without the unnecessary baggage. We prioritize speed and simplicity over endless customization, making it the perfect choice for users who value performance and ease of use.

Why Choose Sakibsnaz Light Maintenance Mode?

If you're looking for a lightweight, SEO-friendly, and easy-to-use maintenance mode plugin for WordPress, Sakibsnaz Light Maintenance Mode is the perfect solution. We offer a streamlined experience that prioritizes performance and simplicity, ensuring your site stays fast and stable.

Visit our official landing page: www.lightmaintenance.site

Get Started Today!

Download Sakibsnaz Light Maintenance Mode from the WordPress plugin repository and experience the difference a lightweight plugin can make. Stop using bloated plugins and start prioritizing performance!

Automate Your Linux Downloads

Sakib MD Nazmush — Wed, 23 Jul 2025 09:56:45 +0000

If you work online a lot like I do, chances are your Downloads folder turns into a total mess by the end of the week. Mine’s usually packed with project docs, design files, code snippets, client stuff, images from random platforms, you name it. By Friday, it’s a digital junkyard.

Every weekend, I’d sit down and spend way too much time cleaning it up. Making folders, sorting files, deleting the junk. Over and over again.

So I finally decided to fix it. With the help of Claude AI, I built a simple but powerful Linux script that does all the organizing for me. Automatically and in real time. It sorts everything by where it came from (WhatsApp, Facebook, LinkedIn, etc.) and what type of file it is (images, docs, videos—you get the idea).

No more weekend cleanup sessions. Just clean folders and peace of mind.

Problem: Download Folder Chaos

Whether you're working on a big project or just learning something new, downloading files is part of daily life. From WhatsApp screenshots and Facebook images to LinkedIn documents. Your Downloads folder ends up catching it all.

Maybe you're juggling:

Social media assets like images, memes, or screenshots
Project resources such as PDFs, spreadsheets, design files, or bits of code
Client materials sent over email or chat in all kinds of formats
Research stuff—articles, reference images, even tutorial videos

Solution: Auto-Organization

I created a smart bash script that monitors your Downloads folder in real-time and automatically sorts files based on:

Source identification (WhatsApp, Facebook, Instagram, LinkedIn, etc.)
File type categorization (Images, Documents, Videos, Audio, etc.)
Smart pattern matching for platform-specific naming conventions

Prerequisites

Before we dive into the implementation, ensure you have:

A Linux system (Ubuntu, Debian, or similar)
Basic terminal knowledge
inotify-tools package for file monitoring

Step 1: Install Required Dependencies

First, install the file monitoring tools:

sudo apt update
sudo apt install inotify-tools

Step 2: Create the Folder Structure

Set up organized directories in your Downloads folder:

mkdir -p ~/Downloads/{WhatsApp,Facebook,Instagram,Twitter,LinkedIn,YouTube,Reddit,Images,Documents,Videos,Audio,Archives,Software,Torrents,PDFs,Spreadsheets,Presentations,Code,Fonts,General}

Step 3: Create the Smart Organizer Script

Navigate to your home directory and create the script:

cd ~ nano download-organizer.sh

Now, paste the following comprehensive script:

#!/bin/bash

# Create comprehensive folder structure
mkdir -p ~/Downloads/{WhatsApp,Facebook,Instagram,Twitter,LinkedIn,YouTube,Reddit,Images,Documents,Videos,Audio,Archives,Software,Torrents,PDFs,Spreadsheets,Presentations,Code,Fonts,General}

echo "Starting comprehensive download organizer..."
echo "Monitoring ~/Downloads for ALL new files..."

# Monitor Downloads folder for new files
inotifywait -m ~/Downloads -e create -e moved_to --format '%w%f' |
while read file; do
    # Skip if it's a directory or temporary/incomplete file
    if [[ -d "$file" ]] || [[ "$file" == *".tmp" ]] || [[ "$file" == *".crdownload" ]] || [[ "$file" == *".part" ]] || [[ "$file" == *".download" ]]; then
        continue
    fi

    # Wait for file to be completely written
    sleep 3

    # Check if file still exists
    if [[ ! -f "$file" ]]; then
        continue
    fi

    filename=$(basename "$file")
    extension="${filename##*.}"
    extension_lower=$(echo "$extension" | tr '[:upper:]' '[:lower:]')

    echo "New file detected: $filename"

    # First check for source-based patterns (social media, websites)
    case "$filename" in
        *WhatsApp*|*whatsapp*|*WA[0-9]*|*IMG-*-WA[0-9]*) 
            mv "$file" ~/Downloads/WhatsApp/
            echo "→ Moved to WhatsApp folder: $filename"
            continue
            ;;
        *facebook*|*Facebook*|*FB_IMG*|*fb_*) 
            mv "$file" ~/Downloads/Facebook/
            echo "→ Moved to Facebook folder: $filename"
            continue
            ;;
        *instagram*|*Instagram*|*IG_*) 
            mv "$file" ~/Downloads/Instagram/
            echo "→ Moved to Instagram folder: $filename"
            continue
            ;;
        *twitter*|*Twitter*|*tweet*) 
            mv "$file" ~/Downloads/Twitter/
            echo "→ Moved to Twitter folder: $filename"
            continue
            ;;
        *linkedin*|*LinkedIn*) 
            mv "$file" ~/Downloads/LinkedIn/
            echo "→ Moved to LinkedIn folder: $filename"
            continue
            ;;
        *youtube*|*YouTube*|*yt_*) 
            mv "$file" ~/Downloads/YouTube/
            echo "→ Moved to YouTube folder: $filename"
            continue
            ;;
        *reddit*|*Reddit*) 
            mv "$file" ~/Downloads/Reddit/
            echo "→ Moved to Reddit folder: $filename"
            continue
            ;;
    esac

    # Then organize by file type
    case "$extension_lower" in
        # Images
        jpg|jpeg|png|gif|bmp|webp|svg|tiff|tif|ico|heic|heif|raw|cr2|nef|orf|sr2|arw) 
            mv "$file" ~/Downloads/Images/
            echo "→ Moved to Images folder: $filename"
            ;;

        # PDFs
        pdf) 
            mv "$file" ~/Downloads/PDFs/
            echo "→ Moved to PDFs folder: $filename"
            ;;

        # Documents
        doc|docx|odt|rtf|txt|md|tex) 
            mv "$file" ~/Downloads/Documents/
            echo "→ Moved to Documents folder: $filename"
            ;;

        # Spreadsheets
        xls|xlsx|ods|csv) 
            mv "$file" ~/Downloads/Spreadsheets/
            echo "→ Moved to Spreadsheets folder: $filename"
            ;;

        # Presentations
        ppt|pptx|odp) 
            mv "$file" ~/Downloads/Presentations/
            echo "→ Moved to Presentations folder: $filename"
            ;;

        # Videos
        mp4|avi|mkv|mov|wmv|flv|webm|m4v|3gp|ogv|ts|m2ts|vob|f4v) 
            mv "$file" ~/Downloads/Videos/
            echo "→ Moved to Videos folder: $filename"
            ;;

        # Audio
        mp3|wav|flac|aac|ogg|wma|m4a|opus|aiff|au) 
            mv "$file" ~/Downloads/Audio/
            echo "→ Moved to Audio folder: $filename"
            ;;

        # Archives
        zip|rar|7z|tar|gz|bz2|xz|z|tgz|tbz2|txz|lzma|cab|iso|dmg) 
            mv "$file" ~/Downloads/Archives/
            echo "→ Moved to Archives folder: $filename"
            ;;

        # Software/Executables
        exe|msi|deb|rpm|pkg|dmg|app|appimage|snap|flatpak|run) 
            mv "$file" ~/Downloads/Software/
            echo "→ Moved to Software folder: $filename"
            ;;

        # Torrents
        torrent) 
            mv "$file" ~/Downloads/Torrents/
            echo "→ Moved to Torrents folder: $filename"
            ;;

        # Code files
        py|js|html|css|php|java|cpp|c|h|sh|bat|ps1|sql|json|xml|yaml|yml) 
            mv "$file" ~/Downloads/Code/
            echo "→ Moved to Code folder: $filename"
            ;;

        # Fonts
        ttf|otf|woff|woff2|eot) 
            mv "$file" ~/Downloads/Fonts/
            echo "→ Moved to Fonts folder: $filename"
            ;;

        # Everything else
        *) 
            mv "$file" ~/Downloads/General/
            echo "→ Moved to General folder: $filename"
            ;;
    esac
done

Step 4: Make the Script Executable

chmod +x download-organizer.sh

Step 5: Test the Script

Before setting up automation, test the script manually:

./download-organizer.sh

You should see:

Starting comprehensive download organizer...
Monitoring ~/Downloads for ALL new files...

Try downloading a file to test the organization!

Step 6: Set Up Automatic Startup

To make this script run automatically when your system boots, we'll create a systemd service:

Create the Service File

mkdir -p ~/.config/systemd/user
nano ~/.config/systemd/user/download-organizer.service

Add this configuration:

[Unit]
Description=Download Organizer - Auto File Organization
After=graphical-session.target

[Service]
Type=simple
ExecStart=/home/YOUR_USERNAME/download-organizer.sh
Restart=always
RestartSec=5
StandardOutput=journal
StandardError=journal

[Install]
WantedBy=default.target

Important: Replace YOUR_USERNAME with your actual username.

Enable and Start the service.

systemctl --user daemon-reload
systemctl --user enable download-organizer.service
systemctl --user start download-organizer.service

Results and Benefits

Since implementing this system, I've experienced:

90% Time Savings: No more weekend cleanup sessions
Instant Organization: Files are sorted the moment they're downloaded
Easy Cleanup: Platform-specific folders make bulk deletion effortless
Improved Productivity: Finding files is now instant and intuitive

Weekend Cleanup Made Easy

Now, instead of spending hours sorting files, my weekend cleanup is simple:

# Delete all WhatsApp files from this week
rm -rf ~/Downloads/WhatsApp/*

# Clear out temporary project files
rm -rf ~/Downloads/General/*

# Keep important documents and clean the rest

Try implementing this system, and say goodbye to download folder chaos forever. Your future self will thank you every weekend when you can focus on what matters most instead of sorting files.

Found this helpful? Give it a 🤍 and share it with fellow developers who are tired of download folder mayhem.

5 Best Booking Plugins for WordPress in 2024

Sakib MD Nazmush — Sun, 24 Mar 2024 16:26:17 +0000

Introduction
BookingPress
WooCommerce Bookings
Bookly Pro
Amelia
Simply Schedule Appointments
Conclusion

Introduction

Welcome to the Comprehensive Guide to Booking Plugins for WordPress! In today's digital age, managing appointments and reservations efficiently is crucial for businesses of all sizes. WordPress offers a plethora of booking plugins, each with its unique features and functionalities.

This guide aims to provide you with insights into the top booking plugins available for WordPress. From seamless integration to customization options, we'll explore the key features, advantages, and disadvantages of each plugin to help you make an informed decision for your business.

Let's dive into the world of booking plugins and discover the perfect solution to streamline your booking processes.

1. BookingPress

BookingPress is a versatile booking plugin seamlessly integrated with WordPress websites, catering to businesses of all sizes. It offers a robust platform for managing appointments and reservations effectively. With BookingPress, businesses effortlessly set up booking forms, manage appointments, and accept payments—all within the familiar WordPress environment. Its user-friendly interface ensures smooth navigation, making it accessible even to users with limited technical knowledge.

Additionally, BookingPress provides reliable customer support and regular updates to ensure optimal performance and security. However, while it excels in simplicity and ease of use, BookingPress may lack some advanced customization options compared to other plugins. Nevertheless, its seamless integration with WordPress and versatile features make it a valuable asset for businesses streamlining their booking processes.

Advantages:

Seamless integration with WordPress.
Versatile features suitable for various businesses.
User-friendly interface for easy navigation and setup.
Reliable customer support and regular updates.
Secure payment processing within the WordPress environment.

Disadvantages:

Limited advanced customization options.
Some features may require additional add-ons.
Support and updates may vary depending on the plan chosen.

Visit the official site for more information.

2. WooCommerce Bookings

WooCommerce Bookings seamlessly integrates with WooCommerce, offering businesses a comprehensive solution for managing appointments and reservations. It allows businesses to set up various booking options and customize the booking process to align with their brand and requirements. With its extensive features, businesses easily manage resources, staff, and time slots, ensuring efficient scheduling.

WooCommerce Bookings also provides robust customization options, allowing businesses to tailor the booking experience to meet their unique needs. However, while it excels in flexibility and customization, WooCommerce Bookings may have a steep learning curve for beginners.

Additionally, some advanced features may require purchasing add-ons, which could increase overall costs. Nevertheless, its seamless integration with WooCommerce and extensive feature set make it a top choice for businesses streamlining their booking processes.

Advantages:

Seamless integration with WooCommerce.
Flexible booking options.
Extensive customization features.
Efficient resource and staff management.
Tailored booking experience to meet unique business needs.

Disadvantages:

Steep learning curve for beginners.
Additional costs for advanced features.
Complex resource management.

Visit the official site for more info

3. Bookly Pro

Bookly Pro is a user-friendly booking plugin with a wide range of features, making appointment scheduling efficient and convenient for businesses. It offers a customizable booking process and integrates smoothly with various payment gateways and plugins. With Bookly Pro, businesses easily set up booking forms, manage appointments, and accept payments—all within a single platform. Its intuitive interface and comprehensive features make it suitable for businesses of all sizes.

However, while it offers a free version, accessing its full potential may require investing in the Pro version, which comes with additional costs.

Moreover, customization options might be limited compared to other plugins, restricting certain design aspects. Nevertheless, Bookly Pro remains a popular choice for businesses seeking a reliable and user-friendly booking solution.

Advantages:

User-friendly interface.
Comprehensive features.
Seamless integration capabilities.
Efficient booking form setup and management.
Compatibility with various payment gateways and plugins.

Disadvantages:

Additional costs for premium features.
Limited functionality in the free version.
Constraints on customization options.

Visit the official site for more info

4. Amelia

Amelia automates the booking process and provides real-time availability updates, enhancing efficiency and convenience for businesses and customers alike. It offers built-in customer management features for easy organization and access to customer information. Amelia's intuitive interface and automation capabilities make it an ideal solution for businesses seeking to streamline their booking processes. With real-time availability updates, businesses prevent overbooking and ensure a smooth booking experience for customers.

However, while it offers basic customization options, more advanced customization may require coding knowledge, limiting its flexibility for some users. Integration with third-party tools or plugins might also pose challenges, particularly if they are not officially supported.

Nevertheless, Amelia's ability to automate scheduling and provide real-time availability updates makes it a valuable asset for businesses looking to optimize their booking processes and improve customer satisfaction.

Advantages:

Automated scheduling.
Real-time availability updates.
Built-in customer management.
Prevention of overbooking.
Streamlined booking experience for customers.

Disadvantages:

Limited customization options.
Challenges with third-party integrations.
Scalability limitations for large businesses.

Visit the official site for more info

5. Simply Schedule Appointments

Simply Schedule Appointments is a straightforward booking plugin designed for easy setup and customization. It offers responsive customer support and caters to businesses seeking a simple yet effective booking solution. With Simply Schedule Appointments, businesses quickly set up booking forms, manage appointments, and provide a seamless booking experience for their customers. Its user-friendly interface ensures smooth navigation and setup, making it accessible even to users with limited technical knowledge.

Additionally, responsive customer support is available to assist businesses with any inquiries or issues they may encounter. However, while Simply Schedule Appointments offers ease of use and responsive support, it may lack some advanced features compared to other plugins.

Furthermore, its scalability for growing businesses might be limited, and it may have fewer integrations with other tools and platforms. Despite these limitations, Simply Schedule Appointments remains a popular choice for businesses looking for a reliable and hassle-free booking solution.

Advantages:

Simple setup process.
Easy customization.
Responsive customer support.
User-friendly interface for smooth navigation.
Reliable and hassle-free booking solution.

Disadvantages:

Basic features compared to competitors.
Limited scalability for growing businesses.
Fewer integrations with other tools and platforms.

Visit the official site for more info

Conclusion

In conclusion, choosing the right booking plugin for your WordPress website is essential for streamlining your appointment and reservation management processes. Each plugin offers unique features and functionalities tailored to different business needs. Whether you prioritize seamless integration, extensive customization options, or user-friendly interfaces, there's a booking plugin out there to meet your requirements. Consider the advantages and disadvantages outlined in this guide to make an informed decision.

We hope this comprehensive guide has provided valuable insights into the top booking plugins for WordPress, helping you enhance efficiency and customer satisfaction in your business operations.

Happy booking!

Sakib MD Nazmush

Visit for more

Installing Tailwind CSS as a PostCSS plugin and Vite

Sakib MD Nazmush — Mon, 26 Feb 2024 22:37:01 +0000

Ready to boost your website's building? Let's explore Tailwind CSS and Vite, two tools that make web design super fast and easy.

Installing Tailwind CSS can be straightforward, especially when using a Content Delivery Network (CDN). While it's true that CDN setups are simple, they might lack flexibility for customization. However, there's another method that might make you feel like a pro developer: using PostCSS.

Jokes aside, there are three main ways to install and use Tailwind CSS. The first method involves using a CDN, which is indeed super easy—just copy the link and paste it into your HTML file. However, customizing your setup might be challenging with this approach.

The second method involves using Tailwind's CLI (Command Line Interface) and terminal, but we won't explore those today. Instead, we'll focus on using the PostCSS plugin with the build tool Vite.

Follow these steps and install Tailwind CSS using PostCSS and Vite:

Step 1:
Open your terminal in the project folder and ensure node and npm is installed.

node -v
npm -v

By checking their version. If not installed, download Node from here.

Step 2:
Initialize your project with npm

npm init

in your terminal.

Step 3:
Install Vite using npm

npm i vite

Step 4:
Install Tailwind CSS, PostCSS, and Autoprefixer using npm:

npm install -D tailwindcss postcss autoprefixer

Step 5:
Initialize the Tailwind CSS configuration:

npx tailwindcss init

Step 6:
Create a postcss.config.js file in your project root folder and paste

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

these into it.

Step 7:
Customize your Tailwind CSS configuration in tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["*"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 8:
Add a script to your package.json for starting Vite inside scripts:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "vite"
  },

You can keep the test as it is, or if you want, you can remove it.

Step 9:
Create a CSS file (e.g., style.css or main.css) and include Tailwind CSS by adding the below 3 lines:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 10:
Run your project with:

npm start

Finally, link your CSS file to your HTML file.

Dive into the world of Tailwind CSS and Vite, experiment with different setups, and enjoy the journey of building beautiful, responsive websites. Happy coding!

References:
Google
Tailwind CSS

Thanks for reading this article, I hope you found it interesting! Feel free to follow me to get notified when new contents are out!

ডাটা টাইপ ইন জাভাস্ক্রিপ্ট

Sakib MD Nazmush — Mon, 30 Oct 2023 12:12:38 +0000

ডেটা না ডাটা? এটা নিয়ে কমিউনিটিতে অনেক কথাবার্তা শোনা যায়। প্রথমে এই ব্যাপারে একটু ক্লিয়ার করে নেই। আসলে ডেটা অথবা ডাটা দুটোই সঠিক। ডেটা (pronounciation — day.ta) ব্রিটিশ একসেন্টে বলা হয়ে থাকে। আর ডাটা (pronounciation — daa.ta) বলা হয়ে থাকে আমেরিকান একসেন্টে। আমরা দুইভাবেই বলতে পারি, এটা নিয়ে কনফিউশনে থাকার আর কোনো দরকার নেই।

এখন, আসুন দেখা যাক, জাভাস্ক্রিপ্ট প্রোগ্রামিং ল্যাংগুয়েজে ডাটা কত ধরণের হয়ে থাকে —

মোট ৮ ধরণের,

— নাম্বার, number

— স্ট্রিং, string

— বুলিয়ান, boolean

— বিগ-ইন্ট, bigint

— নাল, null

— আনডিফাইন্ড, undefined

— সিম্বল, symbol

— অবজেক্ট, object

নাম্বার, number

num এবং number দুই ভ্যারিয়েবলের সাহায্যে ইন্টিজার এবং ফ্লোটিং নাম্বার দুইটাই নেওয়া হয়েছে। অন্যান্য ডাটা টাইপ যেমন স্ট্রিং কে নাম্বারে রুপান্তর করা যায় Number() ফাংশন এর সাহায্যে, যেমন —

এখানে, স্ট্রিং “১২৩” কে নাম্বারে রুপান্তর করা হয়েছে। তবে যেগুলো রুপান্তর করা সম্ভব না, সেসবের ক্ষেত্রে নাম্বার রিটার্ন করবে না। নট এ নাম্বার রিটার্ন করবে। একে বলা হয়, nan বা নট অ্যা নাম্বার। এটি একটি স্পেশাল নিউম্যারিক ভ্যালু।

তাছাড়া যোগ, গুণ, ভাগ অপারেটর এর কাজ করা হয়ে থাকে নাম্বার ডাটা টাইপের সাহায্যে।

স্ট্রিং, string

তিনভাবে স্ট্রিং ব্যবহার করা যায়, ডাবল কোটস, সিংগেল কোটস এবং ব্যাকটিক। সিংগেল এবং ডাবল দুটোর মধ্যে কোনো পার্থক্য নেই, একইভাবে কাজ করে। তবে ব্যাকটিকের ব্যাবহার বাকি দুইটা থেকে আলাদা,

এখানে আমরা ব্যাকটিক ব্যাবহার করে একটি স্ট্রিংয়ের ভিতর অন্য একটি স্ট্রিং কল করে ব্যাকটিক স্ট্রিংটাকে কনসোল করেছি। ব্যাকটিকের ভিতর এভাবে অন্য ভ্যারিয়েবল কল ছাড়াও নরমালি ম্যাথম্যাটিকেল অপারেশন ও করতে পারি,

যোগ করা হয়েছে ব্যাকটিক ফাংশনের ভিতর। এই ফাংশনালিটি ডাবল স্ট্রিং এবং সিংগেল স্ট্রিং এর মধ্যে নেই।

বুলিয়ান, boolean

৪ এবং ৪ সমান, তাই এখানে ট্রু দেখাচ্ছে।

৬ এবং ৪ সমান নয়, এখানে ফলস দেখা যাচ্ছে। বুলিয়ান ডাটা টাইপ দুই ধরণের ভ্যালু দেখায়, ট্রু এবং ফলস।

বিগ-ইন্ট, bigint

যেসব নাম্বার নরমালি Number / নাম্বার ডাটা টাইপে স্টোর করা যাবে না সেগুলোর জন্যে বিগ-ইন্ট ব্যবহার করা হয়ে থাকে। ইন্টিজার অথবা নাম্বার ডাটা টাইপে সর্বোচ্চ ১৫ সংখ্যা পর্যন্ত ডিজিট ব্যবহার করা যাবে, এর বেশি ডিজিটের জন্যে বিগ-ইন্ট প্রয়োজন হবে, কারণ ১৫ ডিজিটের পরে আর সেটার গ্রহণযোগ্যতা কমে যায়।

নাম্বার ডাটা টাইপের সাহায্যে সঠিকভাবে সর্বোচ্চ 9007199254740991 এবং সর্বনিম্ন -9007199254740991 পর্যন্ত ইন্টিজার ভ্যালু প্রকাশ করা যায়। এর উপর বা নিচে প্রকাশ করতে বিগ-ইন্ট এর সাহায্য নিতে হবে। তবে বিগ-ইন্টে ডেসিমেল ভ্যালু এসাইন করা যায় না। এবং নাম্বার ডাটা টাইপ, বিগ-ইন্ট ডাটা টাইপের মধ্যে গাণিতিক অপারেশন চালানো যাবে না।

নাল, null

নাল হচ্ছে ইচ্ছাকৃতভাবে কোনো অব্জেক্টের ভ্যালু না দিয়ে, ফাঁকা রাখা, যেমন

এখানে num এর ভ্যালু দেওয়া হয়েছে null. তাই কন্সোল করার পরেও null রিটার্ন করছে। ভ্যারিয়েবল ফাঁকা না রেখে নাল রাখা হয়। এর মানে হচ্ছে, নাথিং বা শুণ্য।

আনডিফাইন্ড, undefined

নালের মতই কিন্তু এটা অনিচ্ছাকৃত। নালের ক্ষেত্রে ভ্যালু এসাইন করা হয়ে থাকে আর আনডিফাইন্ডের ক্ষেত্রে কোনো ভ্যালু দেওয়া না হলে, রিটার্ন করবে আনডিফাইন্ড, undefined.

এখানে name ভ্যারিয়েবলের কোনো মান দেওয়া হয় নি, তাই রিটার্ন করছে undefined / আনডিফাইন্ড।

সিম্বল, symbol

ES6 এর ফিচার হিসেবে সিম্বল এড করা হয়েছে। এটি একটি বিল্ট-ইন অবজেক্ট। যেটির কন্সট্রাক্টর একটি সিম্বল ভ্যালু রিটার্ন করে, এবং প্রতিবার ইউনিক ভ্যালু রিটার্ন করবে। সিম্বল প্রাইভেট অবজেক্ট প্রপার্টিস বানানোর ক্ষেত্রে বেশি ব্যাবহার করা হয়ে থাকে।

অবজেক্ট, object

বলা হয়ে থাকে, অবজেক্ট বুঝতে পারলে জাভাস্ক্রিপ্ট বুঝতে বাকি থাকে না। জাভাস্ক্রিপ্টের প্রায় সবই অবজেক্ট। ভ্যারিয়েবল ও অবজেক্ট, একটি ভ্যালু অথবা অনেক ভ্যালু এসাইন করা থাকলেও,

এখানে, একটি ভ্যালু সেট করা হয়েছে person ভ্যারিয়েবলে। অনেক ভ্যালুও সেট করা যায় অবজেক্ট হিসেবে,

এই পারসন ভ্যারিয়েবলে অনেকগুলো ভ্যালুর অবজেক্ট সেট করা হয়েছে। প্রতিটা অবজেক্ট আলাদা করা হয়েছে কমার সাহায্যে। এগুলো বলা হয়ে থাকে, অবজেক্ট মেথড, firstName, lastName, address and eyes হচ্ছে প্রোপার্টি এবং sakib, md nazmush, dhaka, black এগুলো হচ্ছে ভ্যালু।

পরিশেষে, আমরা জাভাস্ক্রিপ্টের ডাটা টাইপ এবং প্রকারভেদ সমন্ধে জানলাম। প্রতিটা ডেভেলাপার বা যারা প্রোগ্রামিং ল্যাঙ্গুয়েজ শিখার জার্নি শুরু করতে যাচ্ছেন তাদের সবার জন্যেই মাষ্ট একটা জিনিস হচ্ছে ডাটা টাইপ। জাভাস্ক্রিপ্ট ডাটা টাইপ জানা থাকলে ডাইনামিক এপ্লিকেশন তৈরি করতে বেগ পেতে হবে না।

রেফারেন্সঃ w3schools, mdn web docs and google.

Flexing Your Layout: An overview of CSS Flexbox

Sakib MD Nazmush — Wed, 31 May 2023 10:47:00 +0000

CSS Flexbox has evolved as a useful technique for generating dynamic and responsive layouts in the realm of web development. Understanding and mastering Flexbox will substantially improve your ability to create and implement amazing web pages, whether you are a newbie or an experienced developer. In this post, we'll go over the fundamentals of CSS Flexbox, discussing its major concepts and illustrating how it may alter the way you structure and align elements in your online projects.

What is CSS Flexbox?

A layout module called Flexbox offers a flexible approach to divide up space among elements in a container. You can design fluid and adaptable layouts that instantly change to fit various screen sizes and orientations. Flexbox makes it simple to manage the size, alignment, and positioning of components on your website.

Flex Container and Flex Items

The parent element in Flexbox is known as the flex container, and its child components are referred to as flex items. We enable the Flexbox layout by changing the display property of the container to "flex" or "inline-flex." By creating a separate context for the flex elements, we can use different Flexbox properties to change how they behave and look.

Flex Direction and Justify Content

The main axis along which the flex elements are arranged is determined by the flex-direction attribute. Row (the default), row-reverse, column, or column-reverse can all be selected. You can choose whether the objects flow horizontally or vertically by adjusting the flex direction.

Using the justify-content attribute, flex elements are aligned with the primary axis. Flex-start, flex-end, center, space-between, and space-around are among the possibilities available. This makes it simple to divide the available space between or around the objects, resulting in visually appealing and well-organized layouts.

Align Items and Align Self

The align-items attribute specifies how flex items are aligned horizontally to the main axis along the cross axis. To manage the vertical alignment of the objects within the container, utilize parameters such as flex-start, flex-end, center, baseline, or stretch.

In addition, the align-self property lets you to override the align-items property's alignment for specific flex elements. This allows you to precisely manage the vertical arrangement of each item within the container, allowing you to create unique and visually appealing layouts.

Flex Wrap and Flex Grow

Flex-wrap controls whether flex items wrap to additional lines or stay on a single line. Flex elements will try to fit within a single line by default, but you could force them to wrap as needed using flex-wrap, eliminating overflow and guaranteeing a neat and orderly layout.

The flex-grow attribute determines how much space each flex item should occupy within the container. You may adjust the distribution of available space among the objects by assigning different flex-grow values. This functionality is very useful for designing responsive designs that adapt to multiple screen sizes and resolutions dynamically.

CSS Flexbox provides a powerful and simple tool for developing flexible and adaptable layouts. Understanding the main concepts and properties of Flexbox allows you to take control of your web designs and create aesthetically attractive and adaptive interfaces. Flexbox is a must-have tool for any web developer's toolset due to its ability to manage complicated layouts and simplify the coding process. So, dive into the world of Flexbox to realize the full potential of dynamic web layouts.

You can visit CSS Tricks for more clear and better understanding Flexbox.

Sakib MD Nazmush
sakibsnaz@gmail.com

Master Tailwind CSS with These 5 Powerful VS Code Extensions

Sakib MD Nazmush — Fri, 26 May 2023 20:52:03 +0000

Web developers love Tailwind CSS because of its utility-first philosophy and wide range of pre-designed components. Utilizing Visual Studio Code (VS Code) and its extensive ecosystem of extensions is a wise decision if you want to increase your productivity while using Tailwind CSS. The five most significant VS Code extensions for Tailwind CSS will be covered in this post along with screenshots.

1. Tailwind CSS IntelliSense:

For Tailwind CSS classes, Tailwind CSS IntelliSense is a powerful addon that offers intelligent autocompletion and code snippets. It reduces the necessity of regularly check the documentation, saving you time and decreasing errors. You may easily explore and insert Tailwind CSS classes with this extension into your HTML or CSS files.

2. Tailwind Docs:

Developers that frequently use the Tailwind CSS official documentation will find Tailwind Docs to be a great companion. With the help of this extension, you may quickly and easily view the documentation within Visual Studio Code. Without leaving your coding environment, you are able to search for classes, tools, and configuration options, saving you both time and effort.

3. Tailwind Shades:

Tailwind Shades makes it easier to generate shades and tints of colors defined in your Tailwind CSS settings. This addon makes it simple to generate color variations and instantly preview them, making it simpler to select the ideal color scheme for your project. When it comes to designing visually beautiful user interfaces, this tool is efficient.

4. Inline fold:

The VS Code Inline Fold plugin replicates the folding functionality of VS Code for inline code. Tailwind CSS uses a lot of utility classes that frequently cut up the visual structure of the code. By clicking on the folds, you can expand them. Additionally, you may set the extension to focus on particular markup properties. You can customize the masking characters in the settings and change the regex expression to match any desired code pattern. The extension also permits attribute values to be folded inside HTML/JSX tags. Your code becomes more orderly and navigable as a result.

5. Headwind:

With the help of the effective extension Headwind, you may reliably sort and arrange the CSS classes in your Tailwind file. By placing classes in a logical order, eliminating duplication, and enhancing code maintainability, it assists in maintaining an organized and understandable codebase. With Headwind, you may focus on developing high-quality code since you won't have to bother about manually structuring your classes.

Lastly, Developers using Tailwind CSS have found these five VS Code extensions to be quite useful. They improve your coding effectiveness while give you rapid access to documentation, improve color selection, and effectively arrange your CSS classes. You can significantly improve your development workflow and build outstanding web interfaces with Tailwind CSS by utilizing these extensions. See the difference they make in your Tailwind CSS projects by giving them a try.

Sakib MD Nazmush
sakibsnaz@gmail.com

Forem: Sakib MD Nazmush

Fastest Lightweight Maintenance Plugin for WordPress

Why Your 'Maintenance Mode' Plugin Is Overkill (And What I Use Instead)

The Hidden Cost of "Full-Featured" Maintenance Plugins

Simple Problem, Simple Solution

Real-World Wins (No BS)

Ditch the Bloat, Reclaim Your Perf Budget

Ditch the Bloat: Introducing Sakibsnaz Light Maintenance Mode for WordPress

The Problem with the Status Quo

Sakibsnaz Light Maintenance Mode: A Different Approach

Key Features

Comparison to Competitors

Why Choose Sakibsnaz Light Maintenance Mode?

Get Started Today!

Automate Your Linux Downloads

Problem: Download Folder Chaos

Solution: Auto-Organization

Prerequisites

Step 1: Install Required Dependencies

Step 2: Create the Folder Structure

Step 3: Create the Smart Organizer Script

Step 4: Make the Script Executable

Step 5: Test the Script

Step 6: Set Up Automatic Startup

Results and Benefits

Weekend Cleanup Made Easy

5 Best Booking Plugins for WordPress in 2024

Table of Contents

Introduction

1. BookingPress

2. WooCommerce Bookings

3. Bookly Pro

4. Amelia

5. Simply Schedule Appointments

Conclusion

Installing Tailwind CSS as a PostCSS plugin and Vite

ডাটা টাইপ ইন জাভাস্ক্রিপ্ট

নাম্বার, number

স্ট্রিং, string

বুলিয়ান, boolean

বিগ-ইন্ট, bigint

নাল, null

আনডিফাইন্ড, undefined

সিম্বল, symbol

অবজেক্ট, object

Flexing Your Layout: An overview of CSS Flexbox

Master Tailwind CSS with These 5 Powerful VS Code Extensions