August 2024 – PluginizeLab

How to Implement a WooCommerce AJAX Direct “Buy Now” Button

Posted on August 13, 2024 by Aminur Islam

When you’re running an online store using WooCommerce, making the purchasing process as seamless as possible is crucial. One effective way to do this is by adding a “Buy Now” button that allows customers to directly purchase a product without navigating through multiple pages. This blog will walk you through creating a WooCommerce AJAX “Buy Now” button using the provided code snippets.

Step 1: Add the “Buy Now” Button

First, you need to add a custom “Buy Now” button on your WooCommerce product pages. We’ll do this by hooking into the woocommerce_after_add_to_cart_button action, which places our button right after the standard “Add to Cart” button.

Here’s the PHP code snippet:

add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart' );
function add_content_after_addtocart() {
    $current_product_id = get_the_ID();
    $product = wc_get_product( $current_product_id );

    if( $product->is_type( 'simple' ) ){
        echo '<button data-id="'.$current_product_id.'" class="buy-now button"><i class="matico-icon-toys"></i>'.__('Buy Now', 'woocommerce').'</button>';
    }
}

Enter fullscreen mode

Exit fullscreen mode

Explanation:

We use the woocommerce_after_add_to_cart_button hook to insert our “Buy Now” button right after the “Add to Cart” button.
The get_the_ID() function retrieves the current product ID, and wc_get_product() gets the product details.
We check if the product is of type simple and then render the button with the appropriate data-id attribute and a custom icon.

Step 3: Enqueue the Script

Next, you need to enqueue the script in your theme to ensure it’s loaded properly on your WooCommerce pages. Here’s how to do it:

wp_enqueue_script('matico-child-script', get_stylesheet_directory_uri() . '/assets/js/script.js', array( 'jquery', 'scrollfix-script' ),  $matico_version, true);

wp_localize_script( 'matico-child-script', 'matico_child_script_obj',
    array( 
        'checkout_page_url' => wc_get_checkout_url(),
    )
);

Enter fullscreen mode

Exit fullscreen mode

Explanation:

wp_enqueue_script() is used to load our custom script file (script.js), which contains the jQuery code.
wp_localize_script() passes PHP data to the script, such as the checkout page URL, allowing us to use it within the script.

Step 2: Handle the AJAX Request

Finally, we’ll handle the button click event using jQuery. The jQuery script sends an AJAX request to WooCommerce, which adds the product to the cart and then redirects the user directly to the checkout page.

Here’s the jQuery code snippet:

(function ($) {
    var MaticoChildThemeConfig = {
        init: function () {
            this.bindEvents();
        },
        bindEvents: function () {
            $(document).on('click', '.buy-now', this.handleBuyNowClick);
        },
        handleBuyNowClick: function (event) {
            event.preventDefault();

            var $button = $(this),
                quantity = parseFloat($button.closest('.quantity').find('.qty').val()) || 1,
                productID = $button.data('id');

            var data = {
                product_id: productID,
                quantity: quantity,
            };

            $.ajax({
                type: 'POST',
                url: wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'),
                data: data,
                dataType: 'json',
                beforeSend: function () {
                    $button.addClass('loading');
                },
                success: function (res) {
                    if (res.error && res.product_url) {
                        window.location.href = res.product_url;
                    } else {
                        window.location.href = matico_child_script_obj.checkout_page_url;
                    }
                }
            });
        }
    };

    MaticoChildThemeConfig.init();
})(jQuery);

Enter fullscreen mode

Exit fullscreen mode

Explanation:

When the “Buy Now” button is clicked, we prevent the default action to avoid page reload.
We gather the product ID and quantity from the current product page.
An AJAX request is sent to WooCommerce’s add_to_cart endpoint, which adds the product to the cart.
If the product is successfully added, we redirect the user to the checkout page. If there’s an error (e.g., the product is no longer available), the user is redirected to the product page.

Conclusion

By implementing the above steps, you can create a “Buy Now” button that streamlines the purchasing process for your customers. This feature is particularly useful in boosting conversions by reducing the number of clicks and pages a customer needs to navigate before completing a purchase.

মাতৃভাষা বাংলায় সিএসএস ফ্লেক্সবক্স

Posted on August 10, 2024 by Aminur Islam

আপনি যদি সিএসএস এ নতুন হন এবং যদি পিওর সিএসএস ব্যবহার করে সুন্দর সুন্দর ফ্লেক্সিবল লেআউট তৈরি করতে চান তাহলে সিএসএস ফ্লেক্সবক্স সম্পর্কে পরিষ্কার ধারনা রাখাটা আপনার জন্য খুবই জরুরী। এমনকি জনপ্রিয় সিএসএস ফ্রেমওয়ার্ক গুলো যেমনঃ Bootstrap লেআউট গ্রিড সিস্টেম ফ্লেক্সবক্স এর মাধ্যমে হ্যান্ডেল করে এছাড়াও আপনি যদি Tailwind সিএসএস নিয়েও কাজ করতে চান তাহলেও ফ্লেক্সবক্স জানা থাকাটা জরুরী। আমি এই আর্টিকেলটিতে চেষ্টা করব সিএসএস ৩.০ এর এই গুরুত্বপূর্ণ ডিসপ্লে প্রপার্টি ফ্লেক্সবক্স সম্পর্কে খুব সহজে পূর্ণাঙ্গ ধারনা দেয়ার। তাহলে চলুন শুরু করা যাক।

সংক্ষেপে ফ্লেক্সবক্সঃ

সিএসএস ফ্লেক্সবক্স হল একটি ফ্লেক্সিবল ডিসপ্লে প্রপার্টি। ফ্লেক্সবক্স এর সাহায্যে আমরা খুব সহজে একটি কন্টেইনার এর মধ্যে থাকা আইটেম গুলোকে x-axis অথবা y-axis বরাবর layout, space এবং alignment ঠিক করতে পারি।

যে এলেমেন্ট এর ওপর display:flex প্রপার্টি অ্যাপ্লাই করা হয় সেটাকে ফ্লেক্স কন্টেইনার বলে এবং ফ্লেক্স কন্টেইনার এর মধ্যে যে আইটেম গুলো থাকে সেগুলোকে ফ্লেক্স আইটেম বলে।

একটি ফ্লেক্স কন্টেইনার এর দুইটি অক্ষ থাকে একটি হচ্ছে মেইন বা প্রধান অক্ষ এবং আরেকটি হচ্ছে ক্রস অক্ষ। এক নজরে একটি চিত্রের সাহায্যে ফ্লেক্স লেআউট দেখে নেয়া যাক।

ফ্লেক্সবক্স কন্টেইনার বিস্তারিতঃ

কোন একটি এইচটিএমএল এলেমেন্ট কে display:flex প্রপার্টি বলে দিলেই এটি ফ্লেক্স কন্টেইনার হয়ে যায় এবং ফ্লেক্স কন্টেইনার এর সরাসরি চাইল্ড এলেমেন্ট গুলো ফ্লেক্স আইটেম হয়ে যায়। সাথে সাথে ফ্লেক্স আইটেম গুলো বাম দিক থেকে ডান দিক বরাবর অবস্থান করে।

.container{
        display: flex;
}

Enter fullscreen mode

Exit fullscreen mode

ফ্লেক্স কন্টেইনার বোঝার জন্য নিচের চিত্র টি দেখুন।

flex-direction:
ফ্লেক্স আইটেম গুলোকে x-axis অথবা y-axis বরাবর অগ্রসর করানোর জন্য flex-direction প্রপার্টি ব্যবহার করা হয়। flex-direction প্রপার্টির ৪ ধরনের মান ব্যবহার করা যায়। এগুলো হল নিম্নরূপ।

.container{
        display: flex;
        flex-direction: row || row-reverse || column || column-reverse;
}

Enter fullscreen mode

Exit fullscreen mode

flex-direction: row; ফ্লেক্স আইটেম গুলো বাম থেকে ডানে অবস্থান করবে।
flex-direction: row-reverse; ফ্লেক্স আইটেম গুলো ডান থেকে বামে অবস্থান করবে।
flex-direction: column; ফ্লেক্স আইটেম গুলো উপর থেকে নিচে y-axis বরাবর অবস্থান করবে।
flex-direction: column-reverse; ফ্লেক্স আইটেম গুলো নিচে থেকে উপরে y-axis বরাবর অবস্থান করবে।

flex-wrap:
বাই ডিফল্ট ফ্লেক্স আইটেম গুলো nowrap করা থাকে যে কারণে আইটেম গুলো একটি লাইনে দেখায়। এটির একটা সমস্যা হল ডিভাইস উইড্থ ছোট হলে যে কয়েকটা আইটেম ডিভাইস এ দেখানো সম্ভব সেগুলো দেখাবে এবং অন্য আইটেম গুলোকে শেষের দিক থেকে দেখা যাবে না কারণ সেগুলো overflow হয়ে যাবে। flex-wrap ব্যবহার করে খুব সহজেই এই বেহেভিওর পরিবর্তন করা যায়। flex-wrap প্রপার্টির ৩ ধরনের মান ব্যবহার করা যায়। এগুলো হল নিম্নরূপ।

.container{
        display: flex;
        flex-wrap: nowrap || wrap || wrap-reverse;
}

Enter fullscreen mode

Exit fullscreen mode

flex-wrap: nowrap; সকল ফ্লেক্স আইটেম গুলো একটি লাইন এ অবস্থান করবে।
flex-wrap: wrap; প্রয়োজন অনুসারে ফ্লেক্স আইটেম গুলো উপর থেকে নিচে wrap হবে (এটি ডিভাইস উইড্থ এর সাথে রেস্পন্সিভলি পরিবর্তন হয়)।
flex-wrap: wrap-reverse; প্রয়োজন অনুসারে ফ্লেক্স আইটেম গুলো বিপরীত ভাবে wrap হবে (এটি ডিভাইস উইড্থ এর সাথে রেস্পন্সিভলি পরিবর্তন হয়)।

flex-flow:
flex-direction এবং flex-wrap এর শর্টহ্যান্ড হল flex-flow। প্রথমে লিখতে হবে flex-direction এবং পরে লিখতে হবে flex-wrap প্রপার্টি। flex-flow এর ডিফল্ট মান হলঃ flex-flow: row nowrap;

.container{
        display: flex;
        flex-flow: row wrap;
}

Enter fullscreen mode

Exit fullscreen mode

justify-content:
justify-content ব্যবহার করে ফ্লেক্স আইটেম গুলোকে প্রধান অক্ষ বরাবর সাজানো যায়। justify-content প্রপার্টির ৬ ধরনের মান ব্যবহার করা যায়। এগুলো হল নিম্নরূপ।

.container{
        display: flex;
        justify-content: flex-start || flex-end || center || space-between || space-around || space-evenly;
}

Enter fullscreen mode

Exit fullscreen mode

justify-content: flex-start; ফ্লেক্স আইটেম গুলো কন্টেইনার এর শুরু থেকে অবস্থান করবে।
justify-content: flex-end; ফ্লেক্স আইটেম গুলো কন্টেইনার এর শেষে থেকে অবস্থান করবে।
justify-content: center; ফ্লেক্স আইটেম গুলো কন্টেইনার এর কেন্দ্রে অবস্থান করবে।
justify-content: space-between; প্রথম ফ্লেক্স আইটেম একদম কন্টেইনার এর শুরুতে থাকবে এবং শেষ ফ্লেক্স আইটেম একদম কন্টেইনার এর শেষে থাকবে, মাঝের আইটেম গুলো নিজেদের আগে ও পরে সমান জায়গা নিয়ে অবস্থান করবে বা ছড়িয়ে যাবে।
justify-content: space-around; ফ্লেক্স আইটেম নিজেদের আগে ও পরে সমান জায়গা নিয়ে ছড়িয়ে যাবে। এক্ষেত্রে প্রথম আইটেম এর শুরুতে এবং শেষ আইটেম এর পরের ফাঁকা জায়গা এবং আইটেম গুলোর মাঝে ফাঁকা জায়গা সমান হয় না।
justify-content: space-evenly; সবগুলো ফ্লেক্স আইটেম এর আগে ও পরে সমান জায়গা থাকে। কন্টেইনার এর মোট ফাঁকা জায়গা আইটেম এর আগে ও পরে সমান ভাবে থাকে।

align-items:
ফ্লেক্স কন্টেইনার এর প্রত্যেকটা লাইন এর আইটেম গুলোকে উপর থেকে নিচে বরাবর align করার জন্য align-items প্রপার্টি ব্যবহার করা হয়। align-items প্রপার্টির ৫ ধরনের মান ব্যবহার করা যায়। এগুলো হল নিম্নরূপ।

.container{
        display: flex;
        align-items: flex-start || stretch || flex-end || center || baseline;
}

Enter fullscreen mode

Exit fullscreen mode

align-items: flex-start; ফ্লেক্স আইটেম গুলো প্রত্যেক লাইনের উপড়ে অবস্থান করবে।
align-items: stretch; একটি ফ্লেক্স কন্টেইনার এর মধ্যে যদি একটি লাইনেয় আইটেম থাকে তাহলে আইটেম গুলো পুরো কন্টেইনার এর উচ্চতা টাই নিবে আর দুই লাইন এ আইটেম থাকলে পুরো কন্টেইনার এর উচ্চতা এর অর্ধেক জায়গা নিবে।
align-items: flex-end; ফ্লেক্স আইটেম গুলো প্রত্যেক লাইনের নিচে অবস্থান করবে।
align-items: center; ফ্লেক্স আইটেম গুলো প্রত্যেক লাইনের উপর থেকে নিচ বরাবর কেন্দ্রে অবস্থান করবে।
align-items: baseline; ফ্লেক্স আইটেম গুলো তাদের baseline অনুসারে align হবে।

align-content:
ফ্লেক্স কন্টেইনার এর প্রত্যেকটা লাইনকে আলাদা আলাদা ভাবে চিন্তা না করে একটি কন্টেন্ট হিসাবে চিন্তা করে ক্রস আক্সিস বরাবর align করার জন্য align-content ব্যবহার করা হয়। এটি অনেকটা justify-content এর মত বলতে পারেন। justify-content মেইন আক্সিস বরাবর কাজ করে অপরদিকে align-content ক্রস আক্সিস বরাবর কাজ করে। align-content প্রপার্টির ৭ ধরনের মান ব্যবহার করা যায়। এগুলো হল নিম্নরূপ।

.container{
        display: flex;
        align-content: flex-start || flex-end || center || stretch || space-between || space-around || space-evenly;
}

Enter fullscreen mode

Exit fullscreen mode

align-content: flex-start; ক্রস আক্সিস বরাবর সকল ফ্লেক্স আইটেম গুলো কন্টেইনার এর শুরু থেকে অবস্থান করবে।
align-content: flex-end; ক্রস আক্সিস বরাবর সকল ফ্লেক্স আইটেম গুলো কন্টেইনার এর শেষে থেকে অবস্থান করবে।
align-content: center; ক্রস আক্সিস বরাবর সকল ফ্লেক্স আইটেম গুলো কন্টেইনার এর কেন্দ্রে অবস্থান করবে।
align-content: stretch; ক্রস আক্সিস বরাবর সকল ফ্লেক্স আইটেম গুলো stretch হয়ে যায়।
align-content: space-between; ক্রস আক্সিস বরাবর প্রথম ফ্লেক্স আইটেম একদম কন্টেইনার এর শুরুতে থাকবে এবং শেষ ফ্লেক্স আইটেম একদম কন্টেইনার এর শেষে থাকবে, মাঝের আইটেম গুলো নিজেদের আগে ও পরে সমান জায়গা নিয়ে অবস্থান করবে বা ছড়িয়ে যাবে।
align-content: space-around; ক্রস আক্সিস বরাবর ফ্লেক্স আইটেম নিজেদের আগে ও পরে সমান জায়গা নিয়ে ছড়িয়ে যাবে। এক্ষেত্রে প্রথম আইটেম এর শুরুতে এবং শেষ আইটেম এর পরের ফাঁকা জায়গা এবং আইটেম গুলোর মাঝে ফাঁকা জায়গা সমান হয় না।
align-content: space-evenly; ক্রস আক্সিস বরাবর সবগুলো ফ্লেক্স আইটেম এর আগে ও পরে সমান জায়গা থাকে। কন্টেইনার এর মোট ফাঁকা জায়গা আইটেম এর আগে ও পরে সমান ভাবে থাকে।

gap, row-gap, column-gap:
ফ্লেক্স আইটেম গুলোর মধ্যে ফাঁকা জায়গা রাখার জন্য gap প্রপার্টি ব্যবহার করা হয়।
ফ্লেক্স আইটেম গুলোর মধ্যে মেইন আক্সিস বরাবর ফাঁকা জায়গা রাখার জন্য row-gap প্রপার্টি ব্যবহার করা হয়।
ফ্লেক্স আইটেম গুলোর মধ্যে ক্রস আক্সিস বরাবর ফাঁকা জায়গা রাখার জন্য column-gap প্রপার্টি ব্যবহার করা হয়।

.container{
        display: flex;
        gap: 24px;
          /* gap: 24px 30px; */ /* row-gap column-gap */
          /* row-gap: 24px; */
          /* column-gap: 24px; */
}

Enter fullscreen mode

Exit fullscreen mode

ফ্লেক্সবক্স আইটেম বিস্তারিতঃ

ফ্লেক্স কন্টেইনার এর সরাসরি চাইল্ড এলেমেন্ট গুলোই ফ্লেক্স আইটেম।

order:
ফ্লেক্স আইটেম গুলোর ডিফল্ট অর্ডার হিসাবে ০ থাকে। এইচটিএমএল কোড অনুযায়ী আইটেম গুলোর অর্ডার থাকে কিন্তু আলাদা করে কোন একটি আইটেম এর অর্ডার এর মান নির্ধারণ করে দিলে সেই অর্ডার অনুযায়ী আইটেম গুলো অবস্থান করবে।

.container{
        display: flex;
}
/* অর্ডার পরিবর্তন করার কোড */
.item{
        order: 2;
}
.item-1{
        order: 1;
}

Enter fullscreen mode

Exit fullscreen mode

flex-grow:
মেইন আক্সিস বরাবর একটি লাইনে যতগুলো আইটেম থাকে সেই আইটেম গুলো ছাড়া যদি কোন ফাঁকা জায়গা থাকে তাহলে সেই ফাঁকা জায়গা সবগুলো আইটেম এর মধ্যে সমান ভাবে ছড়িয়ে দেওয়া অথবা কোন একটি নির্দিষ্ট আইটেম এর মধ্যে ছড়িয়ে দেওয়ার জন্য flex-grow ব্যবহার হয়। সবগুলো আইটেম এর মধ্যে ফাঁকা জায়গা সমানভাবে ছড়িয়ে দেওয়ার জন্য সবগুলো আইটেম কে flex-grow: 1; দিতে হয়। এক্ষেত্রে আইটেম গুলোর উইড্থ নির্ধারণ করা থাকলেও যখন ফাঁকা জায়গা পাবে সেই ফাঁকা যায়গা নিজেদের মধ্যে নিয়ে নিবে এবং সমান ভাবে আকৃতি পরিবর্তন করবে। অথবা কোন একটি নির্দিষ্ট আইটেম কে টার্গেট করেও flex-grow অ্যাপ্লাই করা যায়। ডিফল্ট flex-grow এর মান থাকে ০।

        display: flex;
}
.item-3{
        flex-grow: 1;
}

Enter fullscreen mode

Exit fullscreen mode

flex-shrink:
flex-shrink ঠিক flex-grow এর উল্টো। ব্রাউজার উইন্ডো ছোট করার সাথে সাথে আইটেম গুলো shrink করবে কিনা সেটা নির্ভর করে flex-shrink এর উপর। ডিফল্ট মান থাকে ১ যার কারণে আইটেম গুলো shrink করে কিন্তু shrink এর মান ০ করে দিলে রেস্পন্সিভনেস থাকবে না এবং আইটেম গুলো ব্রাউজার উইন্ডো এর বাহিরে চলে যাবে।

.item-1 {
  flex-shrink: 0; /* ডিফল্ট 1 */
}

Enter fullscreen mode

Exit fullscreen mode

flex-basis:
flex-basis হল কোন একটি আইটেম এর মিনিমাম কত উইড্থ হবে সেইটা নির্ধারণ করে দেওয়া। এটা অনেকটা min-width প্রপার্টি এর মত কিন্তু flex-basis এর সবচেয়ে বড় সুবিধা হল ব্রাউজার উইন্ডো উইড্থ যদি আইটেম গুলোর flex-basis এর মোট মানের তুলনায় ছোট হয় তাহলে আইটেম overflow না হয়ে রেস্পন্সিভলি উইড্থ টা কমিয়ে নিবে।

.item {
  flex-basis: 500px; /* ডিফল্ট auto */
}

Enter fullscreen mode

Exit fullscreen mode

flex:
flex-grow, flex-shrink এবং flex-basis একসাথে লেখার জন্য আমরা flex শর্টহ্যান্ড টা ব্যবহার করতে পারি।

.item {
  flex: flex-grow flex-shrink flex-basis;
}

Enter fullscreen mode

Exit fullscreen mode

align-self:
align-self প্রপার্টি ব্যবহার করে কোন একটা নির্দিষ্ট ফ্লেক্স আইটেম এর ডিফল্ট এলাইনমেন্ট ওভাররাইড করা যায়। align-items এর মতো align-self এ একয় রকম মান (stretch, center, flex-start, flex-end, baseline) ব্যবহার করা যায় এবং একই লজিক এ কাজ করে। তবে align-self এর ডিফল্ট মান হল auto।

.item-2 {
  align-self: auto || flex-start || flex-end || center || baseline || stretch;
}

Enter fullscreen mode

Exit fullscreen mode

ডেভেলপারদের নিত্যদিনের সঙ্গী মার্কডাউন

Posted on August 10, 2024 by Aminur Islam

আপনি যদি একজন ডেভেলপার হয়ে থাকেন তাহলে নিশ্চয়ই আপনি জানে যে, গিট বা গিটহাব কি জিনিস। সংক্ষেপে এটা একটি ভার্সন কন্ট্রোলিং সিস্টেম। যখন আমরা কোন প্রোজেক্ট গিটহাবে ভার্সন কন্ট্রোল করি তখন প্রত্যেকটা রিপোজিটোরিতে একটা কমন ফাইল থাকে যার নাম README.md। README.md ফাইলে মূলত প্রোজেক্ট এর একটা সংক্ষিপ্ত বিবরণ থাকে, যেমনঃ প্রোজেক্ট কেন করা হয়েছে, কি কি টেকনোলজি ব্যবহার করা হয়েছে, কিভাবে ইন্সটল করতে হবে, ডেমো লিঙ্ক ইত্যাদি। আর এগুলোকে যদি আপনি নিজের মত করে ফরম্যাটিং করতে চান যেমনঃ টাইটেল বানানো, লেখা বোল্ড করা, লিঙ্ক করা, ইমেজ দেখানো ইত্যাদি, তাহলে আপনাকে অবশ্যই মার্কডাউন সম্পর্কে জানতে হবে।

আবার আপনি যদি আপনার গিটহাব প্রোফাইল পেইজ টা পিন করা রিপোজিটোরির পরিবর্তে সুন্দর করে উপস্থাপন করতে চান, সুন্দর একটা প্রোফাইল রিডমি তৈরি করতে চান তাহলে আপনাকে অবশ্যই মার্কডাউন ভালো ভাবে জানতে হবে। তাহলে চলুন দেরি না করে আমরা মার্কডাউন শেখা শুরু করি।

মার্কডাউন কিঃ

মার্কডাউন হল একটি লাইটওয়েট মার্কআপ ল্যাঙ্গুয়েজ যার মাধ্যমে লেখাকে ফরম্যাটিং করা হয়। বর্তমান সময়ে এটি খুবই জনপ্রিয় মার্কআপ ল্যাঙ্গুয়েজ।

জনপ্রিয় ওয়েবসাইট যেমনঃ GitHub, Reddit, Dev.to মার্কডাউন সাপোর্ট করে। গিটহাব সম্পর্কে আমি ইতিমধ্যে বলেছি। Dev.to হল ডেভেলপার কমিউনিটি, এখানে আপনি চাইলেই টেক ব্লগ লিখতে পারেন তবে আপনাকে এখানে লেখার জন্য মার্কডাউন জানা থাকলে আপনার খুবই সুবিধা হবে। আরেকটা বিষয় না বললেই নয় সেইটা হলঃ আপনি এখন যে প্লাটফর্ম এ লেখাটি পড়ছেন, হা আপনি ঠিক ধরেছেন আমি টেকডাইরির কথা বলছি এখানে ব্লগ লেখার জন্য যে এডিটর ব্যবহার করা হয়েছে এটিও মার্কডাউন সাপোর্ট করে আর আমি এখন এই সুবিধাটি ব্যবহার করেই লিখছি 😊।

কেন মার্কডাউন ব্যবহার করবেন?

WYSIWYG এডিটর এর পরিবর্তে মার্কডাউন সাপোর্ট করে এমন এডিটর ব্যবহার দিন দিন বেড়েই যাচ্ছে। আপনি হয়তো ভাবছেন কেন সবাই WYSIWYG এডিটর এর পরিবর্তে মার্কডাউন ব্যবহার করে, এটার বেশ কিছু কারণ রয়েছে। চলুন আমরা কারণগুলো দেখিঃ

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

আরেকটি মজার বিষয় যে, এইচটিএমএল এর কোড মার্কডাউনে কাজ করে । এতো এতো সুবিধা আসলে মার্কডাউনের জনপ্রিয়তা দিন দিন বাড়িয়ে দিয়েছে বা এখনো দিচ্ছে।

মার্কডাউন কিভাবে কাজ করে?

মার্কডাউন নিম্নক্ত ৪টি ধাপে কাজ করেঃ

প্রথমে মার্কডাউন ফাইল তৈরি করতে হবে। ফাইল ফরম্যাট হবে .md।
মার্কডাউন ফাইলটিকে মার্কডাউন অ্যাপ্লিকেশানে ওপেন করতে হবে।
মার্কডাউন অ্যাপ্লিকেশান মার্কডাউন ফাইলটিকে প্রসেস করে এইচটিএমএল ফাইলে কনভার্ট করবে।
তারপর আমরা ফাইলটিকে ব্রাউজার এ দেখতে পাবো।

তবে চিন্তার কোন কারণ নেই আমাদেরকে এত গুলো প্রসেসের মধ্যে দিয়ে যেতে হবে না। আমি এখানে মার্কডাউন লেখার জন্য Dillinger এডিটর ব্যবহার করবো। Dillinger এডিটর ব্যবহার করে আপনি একপাশে মার্কডাউন কোড লিখবেন এবং অপরপাশে আউটপুট দেখতে পাবেন। আপনি চাইলে Visual Studio Code এডিটর ব্যবহার করে মার্কডাউন কোড লিখতে পারেন।

মার্কডাউন বিস্তারিতঃ

চলুন জেনে নেয়া যাক কিভাবে মার্কডাউন ব্যবহার করে টেক্সট ফরম্যাট করা যায়।

হেডিংঃ
আশা করি এইচটিএমএল হেডিং ট্যাগ সম্পর্কে আপনারা কমবেশি সবাই জানেন। এইচটিএমএল ফাইলে হেড ট্যাগ গুলো ব্যবহার করে আমরা টাইটেল তৈরি করতে পারি। এইচটিএমএলে আমরা H1 থেকে H6 (ক্রমান্বয়ে বড় থেকে ছোট) পর্যন্ত ৬টা ট্যাগ পাই টাইটেল লেখার জন্য। মার্কডাউন ব্যবহার করেও আমরা এইচটিএমএল এর মত হেডিং লিখতে পারি আরও সহজে। উদাহরণ সরূপ নিম্নের চিত্রটি দেখুন।

লেখা বোল্ড বা মোটা করাঃ
মার্কডাউন ব্যবহার করে কোন লেখাকে বোল্ড বা মোটা করার জন্য লেখাটির আগে ও পরে ফাঁকা জায়গা ব্যাতিত ২টা করে এস্টেরিস্ক বা স্টার (**) চিহ্ন দিতে হবে। উদাহরণ সরূপ নিম্নের চিত্রটি দেখুন।

লেখা ইটালিক করাঃ
মার্কডাউন ব্যবহার করে কোন লেখাকে ইটালিক করার জন্য লেখাটির আগে ও পরে ফাঁকা জায়গা ব্যাতিত ১টা করে এস্টেরিস্ক বা স্টার (*) চিহ্ন দিতে হবে। উদাহরণ সরূপ নিম্নের চিত্রটি দেখুন।

লেখা Blockquote করাঃ
মার্কডাউন ব্যবহার করে খুব সহজে Blockquote তৈরি করা যায়। কোন লেখাকে মার্কডাউন ব্যবহার করে Blockquote করার জন্য লেখাটির আগে > এই সাইন তা দিতে হয়। উদাহরণ সরূপ নিম্নের চিত্রটি দেখুন।

অর্ডার লিস্ট তৈরি করাঃ
মার্কডাউন ব্যবহার করে খুব সহজে আমরা অর্ডার লিস্ট তৈরি করতে পারি। অর্ডার লিস্ট তৈরি করার জন্য প্রত্যেক লাইন এর শুরুতে নাম্বার দিতে হবে। নাম্বার ক্রমানুসারে না হলেও চলবে কিন্তু শুরুটা এক নম্বর দিয়ে হওয়া উচিত। উদাহরণ সরূপ নিম্নের চিত্রটি দেখুন।

আনঅর্ডার লিস্ট তৈরি করাঃ
মার্কডাউন ব্যবহার করে খুব সহজে আমরা আনঅর্ডার লিস্ট তৈরি করতে পারি। আনঅর্ডার লিস্ট তৈরি করার জন্য প্রত্যেক লাইন এর শুরুতে একটি ড্যাশ (-), এস্টেরিস্ক (*), অথবা প্লাস সাইন (+) দিলেই হবে। উদাহরণ সরূপ নিম্নের চিত্রটি দেখুন।

হরাইজন্টাল রুল তৈরি করাঃ
মার্কডাউন ব্যবহার করে হরাইজন্টাল রুল তৈরি করার জন্য ৩ বা ৩ এর অধিক ড্যাশ (—), এস্টেরিস্ক (***), অথবা আন্ডারস্কোর সাইন (___) দিলেই হবে। উদাহরণ সরূপ নিম্নের চিত্রটি দেখুন।

লিঙ্ক তৈরি করাঃ
মার্কডাউন ব্যবহার করে লিঙ্ক তৈরি করা খুবই সহজ। লিঙ্ক তৈরি করার জন্য তৃতীয় ব্রাকেট এর মধ্যে টেক্সট লিখতে হবে এবং প্রথম ব্রাকেটের মধ্যে URL লিখতে হবে। উদাহরণ সরূপ নিম্নের চিত্রটি দেখুন।

ইমেজঃ
মার্কডাউনে ইমেজ ব্যবহার করা খুবই সহজ। এজন্য আমাদেরকে প্রথমে এক্সক্লামেশন মার্ক দিতে হবে, তারপর তৃতীয় ব্রাকেট এর মধ্যে ইমেজ অল্টার টেক্সট লিখতে হবে এবং প্রথম ব্রাকেটের মধ্যে ইমেজ URL লিখতে হবে। উদাহরণ সরূপ নিম্নের চিত্রটি দেখুন।

এক লাইনে কোড লেখাঃ
মার্কডাউন ব্যবহার করে কোন টেক্সট কে একই লাইন এ কোড হিসাবে দেখানোর জন্য লেখাটির আগে ও পরে ব্যাকটিক (`) দিতে হবে। উদাহরণ সরূপ নিম্নের চিত্রটি দেখুন।

কোড ব্লক তৈরি করাঃ
মার্কডাউন ব্যবহার করে কোড ব্লক তৈরি করার জন্য কোডের শুরুতে ৩টা ব্যাকটিক (`) অথবা ৩টা টিলড (~~~) এবং কোড এর শেষে ৩টা ব্যাকটিক () অথবা ৩টা টিলড (~~~) দিতে হয়। আপনি চাইলে প্রোগ্রামিং ল্যাঙ্গুয়েজ সিনট্যাক্স হাইলাইট ফিচার চালু করতে পারেন। এই জন্য আপনাকে শুরুর দিক থেকে ৩টা ব্যাকটিক (“) অথবা ৩টা টিলড (~~~) এর পরে ল্যাঙ্গুয়েজ এর নাম লিখে দিতে হবে। উদাহরণ সরূপ নিম্নের চিত্রটি দেখুন।

টেবিল তৈরি করাঃ
মার্কডাউন ব্যবহার করে টেবিল তৈরি করা যায় খুব সহজে। টেবিলের প্রত্যেক কলামের হেডার তৈরি করার জন্য ৩ বা ৩ এর অধিক হাইফেন (—) দিতে হবে। প্রত্যেক কলাম আলাদা করার জন্য একটা পাইপ (|) চিহ্ন দিতে হবে। উদাহরণ সরূপ নিম্নের চিত্রটি দেখুন।

স্ট্রাইকথ্রুঃ
মার্কডাউন ব্যবহার করে স্ট্রাইকথ্রু তৈরি করার জন্য লেখার শুরু এবং শেষে ২টা টিলড (~~) দিতে হবে। উদাহরণ সরূপ নিম্নের চিত্রটি দেখুন।

টাস্ক লিস্ট তৈরি করাঃ
মার্কডাউন ব্যবহার করে টাস্ক লিস্ট তৈরি করার জন্য লাইনের শুরুতে তৃতীয় ব্র্যাকেট এর মধ্যে ফাঁকা জায়গা রাখলে টাস্কটি আনচেক দেখাবে এবং চেক করা দেখাতে চাইলে তৃতীয় ব্র্যাকেট এর মধ্যে x লিখতে হবে। উদাহরণ সরূপ নিম্নের চিত্রটি দেখুন।

হাইলাইট টেক্সটঃ
মার্কডাউন ব্যবহার করে হাইলাইট টেক্সট করার জন্য টেক্সট এর শুরু এবং শেষে ২টা (==) সমান চিহ্ন দিতে হবে। উদাহরণ সরূপ নিম্নের চিত্রটি দেখুন।

ইমোজিঃ
আপনি যদি মার্কডাউন ব্যবহার করতে চান তাহলে আপনাকে তেমন কিছুই করতে হবে না। যে ইমোজি ব্যবহার করতে চান শুধু ইমোজিটা কপি করে এনে মার্কডাউনে পেস্ট করতে হবে।

এখানে আমি চেষ্টা করেছি মার্কডাউন নিয়ে কাজ করতে গেলে সচারচর যে বিষয় গুলো সম্পর্কে ধারনা থাকটা জরুরী সেই বিষয় গুলো নিয়ে আলোচনা করার। আপনি যদি মার্কডাউন সম্পর্কে আরও বিস্তারিত জানতে আগ্রহী হন তাহলে মার্কডাউন এর অফিসিয়াল ডকুমেন্টেশন টা দেখতে পারেন।

একদম নতুনদের জন্য বাংলায় টেইলউইন্ড সিএসএস

Posted on August 10, 2024 by Aminur Islam

আমরা যারা ওয়েব ডিজাইন সেক্টরে আছি বা আসব বলে ভাবছি তাদের সিএসএস ফ্রেমওয়ার্ক এর শুরুটা হয়ত বুটস্ট্র্যাপ দিয়েই হয়েছে বা হবে, কারণ এটি নতুনদের জন্য শুরু করাটা খুব সহজ এবং আমাদের দেশে এর চাহিদাও অনেক। কিন্তু বেশ কয়েক বছর যাবৎ একটি সিএসএস ফ্রেমওয়ার্ক এর নাম আমরা খুবই শুনে আসছি (বলতে পারেন ট্রেন্ড) সেটি হল টেইলউইন্ড সিএসএস। আর যারা বিভিন্ন জাভাস্ক্রিপ্ট লাইব্রেরি, ফ্রেমওয়ার্ক নিয়ে কাজ করেন বা শুরু করেছেন যেমনঃ React, Vue ইত্যাদি তাদের কাছেতো টেইলউইন্ড সিএসএস নামটা খুবই পরিচিত। এমনকি বর্তমান সময়ে টেইলউইন্ড সিএসএস সবচেয়ে জনপ্রিয় সিএসএস ফ্রেমওয়ার্ক। আজকে আমি চেষ্টা করব খুব সহজভাবে টেইলউইন্ড সিএসএস সম্পর্কে লিখতে, যেন নতুনরা খুব সহজে টেইলউইন্ড সিএসএস শুরু করতে পারেন।

সংক্ষেপে টেইলউইন্ড সিএসএসঃ

টেইলউইন্ড সিএসএস কে ইউটিলিটি ফার্স্ট সিএসএস ফ্রেমওয়ার্ক বলা হয়। এখানে আপনি ইউটিলিটি সিএসএস ক্লাস ডিরেক্ট এইচটিএমএল ফাইলে লিখে সব ধরনের ডিজাইন করতে পারবেন। টেইলউইন্ড সিএসএস ব্যবহার করলে আপনাকে এইচটিএমএল ফাইলের বাহিরে আসলে তেমন কিছু করতে হবে না। এটি অনেক fast, flexible এবং relaible। টেইলউইন্ড সিএসএস মূলত অনেক গুলো ইউটিলিটি সিএসএস ক্লাসের সমন্বয়ে তৈরি তাই ডেভেলপমেন্ট টাইমে সিএসএস ফাইল সাইজ বেশি হলেও যখন প্রোডাকশনের জন্য বিল্ড করা হয় তখন শুধু এইচটিএমএল ফাইলে ব্যবহৃত সিএসএস ক্লাস গুলোর জন্য যে স্টাইল গুলো আছে শুধুমাত্র সেই স্টাইল গুলোকে জেনারেট করে খুব ছোট একটা সিএসএস ফাইল আমাদেরকে দেয়। যেখানে কোন অপ্রয়োজনীয় অথবা ডুপ্লিকেট সিএসএস থাকে না।

টেইলউইন্ড সিএসএস কিভাবে কাজ করেঃ

টেইলউইন্ড সিএসএস মূলত যেকোনো এইচটিএমএল ফাইল, জাভাস্ক্রিপ্ট কম্পোনেন্ট অথবা যেকোন ধরনের টেম্পলেট ফাইল থেকে সিএসএস ক্লাস নামগুলো স্ক্যান করে তারপর স্ক্যানকৃত সিএসএস এর জন্য যে স্টাইল গুলো আছে সেগুলো জেনারেট করে আমাদের কে একটা স্ট্যাটিক সিএসএস ফাইল দেয় যে ফাইল টা এইচটিএমএল ফাইল এর হেড সেকশন এ কল করতে হয়।

টেইলউইন্ড সিএসএস ইনস্টলেশনের ধাপসমূহঃ

আমরা বেশ কয়েকভাবে প্রোজেক্ট এ টেইলউইন্ড সিএসএস ইনস্টলেশন করতে পারি। যেমনঃ Tailwind CLI ব্যবহার করে, PostCSS ব্যবহার করে এবং CDN ব্যবহার করে। আপনার কাছে মনে হতে পারে CDN ব্যবহার করা সহজ কিন্তু এখানে সবচেয়ে বড় সমস্যা হল এখানে আপনি টেইলউইন্ড কনফিগারেশন এবং কাস্টমাইজেশন ফিচার পাবেন না। আমি এখানে Tailwind CLI ব্যবহার করে কিভাবে প্রোজেক্ট এ টেইলউইন্ড সিএসএস ইন্সটল করবেন সেইটা দেখাব

ধাপ-১ঃ
প্রথমে আমাদের প্রোজেক্ট এ node (আপনার মেশিনে অবশ্যই Node.js ভার্সন 12.13.0 অথবা এর চেয়ে আপগ্রেড ভার্সন ইন্সটল থাকতে হবে) initialize করে নিতে হবে। প্রোজেক্ট ফোল্ডার তৈরি করুন এবং প্রোজেক্ট ফোল্ডার এ টার্মিনাল ওপেন করে নিম্নের কমান্ড টা টাইপ করুন এবং এন্টার বাটন এ প্রেস করুন।

npm init -y

ধাপ-২ঃ
এখন দেভ ডিপেন্ডেন্সি হিসাবে টেইলউইন্ড সিএসএস ইন্সটল করতে হবে। এই জন্য নিম্নের কমান্ড টা টার্মিনালে টাইপ করুন এবং এন্টার বাটন এ প্রেস করুন।

npm install -D tailwindcss

Enter fullscreen mode

Exit fullscreen mode

ধাপ-৩ঃ
এখন tailwind.config.js ফাইল তৈরি করতে হবে যেখানে টেইলউইন্ড সিএসএস এর সব ধরনের কনফিগারেশন থাকে। এই জন্য নিম্নের কমান্ড টা টার্মিনালে টাইপ করুন এবং এন্টার বাটন এ প্রেস করুন।

npx tailwindcss init

Enter fullscreen mode

Exit fullscreen mode

ধাপ-৪ঃ
tailwind.config.js ফাইল এর content array এর মধ্যে সকল টেম্পলেট এর এক্সটেনশন লিখে দিতে হবে যেখান থেকে টেইলউইন্ড সিএসএস ইউটিলিটি স্ক্যান করবে। মানে আমরা যে যে ফাইল এ টেইলউইন্ড সিএসএস এর সাপোর্ট চাই সেগুলো। যেমনঃ আমরা এখানে শুধু এইচটিএমএল ফাইল এ টেইলউইন্ড সিএসএস লিখব তাই এখানে .html লিখেছি content array এর মধ্যে।

//tailwind.config.js file
module.exports = {
content: ["*.{html}"],
theme: {
extend: {},
},
plugins: [],
}

Enter fullscreen mode

Exit fullscreen mode

ধাপ-৫ঃ
এখন ২টা ফোল্ডার তৈরি করতে হবে। আমি ফোল্ডার এর নাম দিলাম যথাক্রমে src এবং dist। src ফোল্ডার এর মধ্যে input.css নামে (যেকোনো নামে হতে পারে) একটা সিএসএস ফাইল তৈরি করব এবং dist ফোল্ডার এর মধ্যে output.css নামে (যেকোনো নামে হতে পারে) একটা সিএসএস ফাইল তৈরি করব। input.css ফাইলটি মূলত Tailwind নিজে ব্যবহার করবে, যেখানে টেইলউইন্ড সিএসএস এর সকল ডিরেক্টিভ গুলো থাকবে। এই ডিরেক্টিভ গুলোর মাধ্যমে টেইলউইন্ড সিএসএস এর base, components এবং utilities সিএসএস গুলো কল হবে। input.css ফাইলে আমাদের নিম্নের কোড লিখতে হবে।

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Enter fullscreen mode

Exit fullscreen mode

ধাপ-৬ঃ
এখন টেইলউইন্ড ডেভেলপার মোডে কিভাবে বিল্ড হবে সেটা বলে দেয়ার জন্য package.json ফাইলে আমাদেরকে একটি বিল্ড স্ক্রিপ্ট লিখে দিতে হবে। এই স্ক্রিপ্টের মাধ্যমে Tailwind CLI টেম্পলেট ফাইল স্ক্যান করে স্ট্যাটিক সিএসএস বিল্ড করবে।

"scripts": {
    "build": "tailwindcss -i ./src/input.css -o ./dist/output.css -w"
}

Enter fullscreen mode

Exit fullscreen mode

এখানে -i এর পরে ইনপুট সিএসএস ফাইলের এর পাথ, -o এর পরে অউটপুট সিএসএস ফাইলের পাথ নির্দেশ করে দিতে হবে এবং -w এর মাধ্যমে আমরা ওয়াচ ফ্ল্যাগ চালু করে দিয়েছি যাতে tailwind.config.js বা input.css ফাইলে কোন পরিবর্তন হলে অটোমেটিক টেইলউইন্ড বিল্ড হয়।

ধাপ-৭ঃ
এখন output.css ফাইলটি এইচটিএমএল ফাইলের হেডট্যাগ এর মধ্যে কল করতে হবে।

<link rel="stylesheet" href="dist/output.css">

Enter fullscreen mode

Exit fullscreen mode

ধাপ-৮ঃ
আমাদের প্রোজেক্ট এখন ১০০% প্রস্তুত টেইলউইন্ড সিএসএস লেখার জন্য। যেকোনো এইচটিএমএল ট্যাগের ক্লাস হিসাবে টেইলউইন্ড সিএসএস ইউটিলিটি ক্লাস গুলো লিখলেই প্রত্যাশিত অউটপুট পেয়ে যাবেন। কিন্তু এর আগে টার্মিনাল এ আপনাকে আর একটা কমান্ড চালু রাখতে হবে সেইটা নিম্নরূপঃ

npm run build

Enter fullscreen mode

Exit fullscreen mode

ধাপ-৯ঃ
এই ধাপটা একেবারে অপশনাল আপনি যদি কোড এডিটরে টেইলউইন্ড সিএসএস এর ইন্টেলিজেন্স সাপোর্ট পেতে চান তাহলে টেইলউইন্ড সিএসএস এর নিজস্ব এক্সটেনশন আপনার কোড এডিটরে ইন্সটল করে নিতে পারেন। যেমনঃ Visual Studio Code এর জন্য Tailwind CSS IntelliSense এক্সটেনশন।

ইউটিলিটি-ফার্স্ট ফান্ডামেন্টালসঃ

আমি আগেও বলেছি টেইলউইন্ড সিএসএস হল অনেক গুলো ইউটিলিটি সিএসএস ক্লাস নিয়ে গঠিত একটা সিএসএস ফ্রেমওয়ার্ক। ইউটিলিটি ফিচার টাই মূলত টেইলউইন্ড সিএসএসকে অন্য সকল সিএসএস ফ্রেমওয়ার্ক থেকে আলাদা করেছে। বুটস্ট্র্যাপ সিএসএস ফ্রেমওয়ার্ক যেমন আমাদেরকে একটা কমপ্লিট কম্পোনেন্ট দেয় অপরদিকে টেইলউইন্ড সিএসএস ফ্রেমওয়ার্ক আমাদেরকে এমন কমপ্লিট কম্পোনেন্ট দেয় না। বুটস্ট্র্যাপের একটা কম্পোনেন্ট এর মধ্যে margin, padding, width, height, font-size, color এসব আগে থেকেই বলা থাকে আমরা শুধু সেই কম্পোনেন্ট এর এইচটিএমএল মার্কআপটা আমাদের এইচটিএমএল ফাইলে বসালেই সুন্দর একটা কার্ড কম্পোনেন্ট পেয়ে যাই। অন্যদিকে টেইলউইন্ড সিএসএস এমন কম্পোনেন্ট না দিয়ে margin, padding এর মত লো লেভেল সিএসএস দিয়ে তৈরিকৃত অসংখ্য ইউটিলিটি ক্লাস আমাদেরকে প্রোভাইড করে যেগুলো ব্যবহার করে আমরা নিজেদের ইচ্ছা মতো ডিজাইন করতে পারি।

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

অন্যদিকে ইউটিলিটি সিএসএস ব্যবহার করলে আমাদেরকে আর ক্লাস নাম নিয়ে ভাবার দরকার পরে না, টেইলউইন্ড এর ইউটিলিটি ক্লাস গুলোকে ডেকে আনলেই কাজ হয়ে যায়। আপনাদের মনে হতে পারে এতো এতো ইউটিলিটি ক্লাস কিভাবে মনে রাখবো, ভয়ের কিছু নেয় কিছুই মনে রাখতে হবে না, টেইলউইন্ড এর প্রায় সব ইউটিলিটি ক্লাসই ডিক্লারেটিভ এছাড়াও টেইলউইন্ড এর নিজস্ব ইন্টেলিজেন্স সাপোর্ট আপনার কোড এডিটর এ থাকলেতো এসব নিয়ে আপনাকে তেমন কোন চিন্তাই করতে হবে না। কিছুদিন নিয়মিত প্র্যাকটিস করলে সব কিছু আপনার আয়ত্তে চলে আসবে। আরেকটা বিষয় জানা থাকা জরুরী টেইলউইন্ড সিএসএস এর সমস্ত হিসাব করা হয় rem একক দিয়ে, যেমনঃ p-6 মানে padding-1.5rem। চলুন একটা উদাহরণ দেখা যাকঃ

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
        <div class="shrink-0">
                <img class="h-12 w-12" src="https://aiarnob.com/frontend/assets/images/favicons/apple-touch-icon.png" alt="ChitChat Logo">
        </div>
        <div>
                <div class="text-xl font-medium text-black">AI Arnob</div>
                <p class="text-slate-500">You have a new message!</p>
    </div>
</div>

Enter fullscreen mode

Exit fullscreen mode

উপড়ের সুন্দর কার্ড টা ডিজাইন করার জন্য কিন্তু আমাদের কোন সিএসএস লিখতে হয় নাই জাস্ট কিছু টেইলউইন্ড ইউটিলিটি ক্লাস ব্যবহার করা হয়েছে। লক্ষ করলে দেখবেন যে, এখানে ইউটিলিটি ক্লাসগুলো কতটা ডিক্লারেটিভ, যেমনঃ

p-6 এর মাধ্যমে চারপাশে padding দিয়েছি 1.5rem।
max-w-sm এর মাধ্যমে ম্যাক্সিমাম উইড্থ দিয়েছি sm মানে 24rem।
mx-auto এর মাধ্যমে মার্জিন বামে এবং ডানে অটো করেছি।
bg-white এর মাধ্যমে ব্যাকগ্রাউন্ড কালার সাদা দিয়েছি।
rounded-xl এর মাধ্যমে বর্ডার রউন্ড করেছি।
shadow-lg এর মাধ্যমে বক্স শ্যাডো অ্যাপ্লাই করেছি।
flex এর মাধ্যমে ডিভ টাকে ডিসপ্লে ফ্লেক্স করেছি।

এতক্ষণে হয়ত বুঝে গিয়েছেন কিভাবে টেইলউইন্ড ইউটিলিটি ক্লাসগুলো কাজ করে। টেইলউইন্ড সিএসএস এর খুবই সুন্দর একটা ডকুমেন্টেশন আছে এবং সার্চ ফিচার টাও অনেক দুর্দান্ত কাজ করে, আপনার যা প্রয়োজন জাস্ট সার্চ বক্স এ লিখুন রেজাল্ট চলে আসবে চোখের পলকে।

বিভিন্ন ধরনের স্টেট হ্যান্ডল করাঃ (Hover, Focus, and Other States)

এতক্ষণে হয়ত আপনার মনে প্রশ্ন জেগেছে যে, টেইলউইন্ড সিএসএস এর মাধ্যমে আমরা কিভাবে বিভিন্ন ধরনের স্টেট ম্যানেজ করতে পারি। এটার ও একটা খুব ভালো সমাধান আছে। যেকোনো ইউটিলিটি ক্লাসের সামনে আমাদেরকে জাস্ট মডিফায়ার লিখতে হবে। নিম্নের উদাহরণ তা দেখলেই বুঝতে পারবেন।

<button class="bg-sky-600 hover:bg-sky-700 text-white px-7 py-2 rounded-full">
        Click me
</button>

Enter fullscreen mode

Exit fullscreen mode

এখানে স্বাভাবিক ভাবে বাটন ব্যাকগ্রাউন্ড কালার দেয়া হয়েছে bg-sky-600 এবং হুভার স্টেট এ ব্যাকগ্রাউন্ড কালার দেয়া হয়েছে hover:bg-sky-700। এখানে hover: টা হল মডিফায়ার। এভাবে :focus, :active, :first-child, :required, ::before, ::after, ::placeholder, ::selection এরকম আরও অনেক মডিফায়ার ব্যবহার করে ইউটিলিটি ক্লাস লেখা যায়। বিভিন্ন স্টেট সম্পর্কে আরও বিস্তারিত জানার জন্য ডকুমেন্টেশন দেখুন।

রেস্পন্সিভ ডিজাইনঃ

টেইলউইন্ড সিএসএস এর বিভিন্ন রেস্পন্সিভ ইউটিলিটি ভারিয়ান্ট আছে যেগুলো ব্যবহার করে জটিল জটিল রেস্পন্সিভ ইন্টারফেস ডিজাইন করা যায়। টেইলউইন্ড সিএসএস মোবাইল ফার্স্ট এপ্রোচ এ কাজ করে তাই রেস্পন্সিভ এর জন্য ডিফল্ট যে ৫ ধরনের ব্রেকপয়েন্ট(চাইলে আপনি ইচ্ছামত কাস্টোমাইজ করতে পারবেন) আছে সেগুলোতে min-width উল্লেখ করা। ব্রেকপয়েন্টগুলো নিম্নরূপঃ
|ব্রেকপয়েন্ট প্রিফিক্স|মিনিমাম উইড্থ|সিএসএস মিডিয়া কুয়েরি|
|-|-|-|
|sm|640px|@media (min-width: 640px) { ... }|
|md| 768px |@media (min-width: 768px) { ... }|
|lg| 1024px |@media (min-width: 1024px) { ... }|
|xl| 1280px |@media (min-width: 1280px) { ... }|
|2xl| 1536px |@media (min-width: 1536px) { ... }|

সরাসরি কোন ইউটিলিটি ক্লাস লিখলে সেটি সবগুলো ডিভাইসে কাজ করে কিন্তু যখন কোন ইউটিলিটি ক্লাসের এর আগে রেস্পন্সিভ ইউটিলিটি ভারিয়ান্ট যেমনঃ sm: লেখা হবে তখন সেটি ডিভাইস উইড্থ 768px এর সমান বা এর চেয়ে বড় হলে কাজ করবে।

<img class="w-16 md:w-32 lg:w-48" src="...">

Enter fullscreen mode

Exit fullscreen mode

এখানে ইমেজ এর ডিফল্ট উইড্থ ১৬, মিডিয়াম স্ক্রীন এর জন্য হবে ৩২ এবং লার্জ স্ক্রীন এর জন্য হবে ৪৮। রেস্পন্সিভ ডিজাইন সম্পর্কে আরও বিস্তারিত জানার জন্য ডকুমেন্টেশন দেখুন।

ডার্ক এবং লাইট মোডঃ

টেইলউইন্ড সিএসএস ব্যবহার করে খুব সহজে আপনি আপনার ওয়েবসাইটে ডার্ক মোড এনাবল করতে পারবেন। সাইটকে ডার্ক করার জন্য টেইলউইন্ড সিএসএস dark নামে একটি ভারিয়ান্ট দেয়, যেটি যেকোনো ইউটিলিটি ক্লাস এর সামনে দিলে তখন তা শুধুমাত্র ডার্ক মোডে কাজ করবে।

<button class="bg-sky-600 hover:bg-sky-700 dark:bg-sky-200">
  Save changes
</button>

Enter fullscreen mode

Exit fullscreen mode

উপরের কোডে dark:bg-sky-200 লেখা হয়েছে যার ফলে ডার্ক মোডে বাটনটির ব্যাকগ্রাউন্ড কালার হবে bg-sky-200।

ডার্ক মোড স্ট্রাটেজি
ডার্ক মোড স্ট্রাটেজি ২ ধরনের হয় class স্ট্রাটেজি এবং media স্ট্রাটেজি। tailwind.config.js ফাইলে ডার্ক মোড স্ট্রাটেজি বলে দিতে হবে।

//tailwind.config.js file
module.exports = {
  darkMode: 'class',
  // ...
}

Enter fullscreen mode

Exit fullscreen mode

আপনি যদি কাস্টম বাটন ব্যবহার করে ডার্ক এবং লাইট মোড toggle করতে চান তাহলে class স্ট্রাটেজি ব্যবহার করতে পারেন আর যদি চান যে অপারেটিং সিস্টেমের প্রেফারেন্স এর উপর নির্ভর করে সাইট ডার্ক অথবা লাইট হবে তাহলে media স্ট্রাটেজি ব্যবহার করতে হবে। ডার্ক মোড সম্পর্কে আরও বিস্তারিত জানার জন্য ডকুমেন্টেশন দেখুন।

পুনরায় ব্যবহারযোগ্য স্টাইলঃ

আমাদের প্রোজেক্ট এ অনেক সময় একই ডিজাইনের কম্পোনেন্ট একাধিক জায়গায় ব্যবহার করতে হয় তখন দেখা যায় ইউটিলিটি ক্লাসগুলোর ডুপ্লিকেশন চলে আসে। যেমনঃ নিম্নের ডিজাইনে রাউন্ডেড অবতার ডিজাইন বার বার রিপিট করা হয়েছে যার ফোলে একই ইউটিলিটি ক্লাস এর ডুপ্লিকেশন তৈরি হয়েছে।

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg">
        <div class="flex items-center space-x-2 text-base">
                <h4 class="font-semibold text-slate-900">Users</h4>
            <span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">100</span>
        </div>
        <div class="mt-3 flex -space-x-2 overflow-hidden">
                <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc" alt=""/>
                <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1550525811-e5869dd03032" alt=""/>
                <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e" alt=""/>
                <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt=""/>
                <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263" alt=""/>
        </div>
        <div class="mt-3 text-sm font-medium">
                <a href="#" class="text-blue-500">+ 95 others</a>
        </div>
</div>

Enter fullscreen mode

Exit fullscreen mode

ইউটিলিটি ক্লাস এর ডুপ্লিকেশন সমস্যা সমাধানের জন্য টেইলউইন্ড সিএসএস আমাদের সুন্দর একটা প্রসেস দিয়েছে। input.css ফাইলে @apply ডিরেক্টিভ এর মাধ্যমে আমরা আমাদের নিজেরদের পছন্দ মতো ক্লাস নাম দিয়ে নতুন একটা কম্পোনেন্ট তৈরি করতে পারি।

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
  .user-avatar {
    @apply inline-block h-12 w-12 rounded-full ring-2 ring-white object-cover;
  }
}

Enter fullscreen mode

Exit fullscreen mode

এখন আমরা শুধু user-avatar ক্লাস টা ব্যবহার করলেই রাউন্ডেড অবতার ডিজাইনটা পেয়ে যাব। আরেকটা বিষয় @layer ডিরেক্টিভের মাধ্যমে নির্ধারিত হয় আমাদের তৈরি করা স্টাইল base, components নাকি utilities এর আন্ডার এ যাবে সেইটা।

For your convenience, here’s the entire process in one continuous block of code. Just copy and paste the code below into your terminal to install WordPress and a few plugins with a single command.

wp core download --path=mywebsite
cd mywebsite
wp config create --dbname=silk --dbuser=root --dbpass=root
wp db create
wp core install --url=mywebsite.test --title="Site Title" --admin_user=admin --admin_password=admin --admin_email=mywebsite@welabs.dev
wp plugin install woocommerce --activate
wp plugin install dokan-lite --activate

Enter fullscreen mode

Exit fullscreen mode

Prerequisite: Install WP-CLI to you machine.

Month: August 2024

How to Implement a WooCommerce AJAX Direct “Buy Now” Button

Step 1: Add the “Buy Now” Button

Step 3: Enqueue the Script

Step 2: Handle the AJAX Request

Conclusion

মাতৃভাষা বাংলায় সিএসএস ফ্লেক্সবক্স

সংক্ষেপে ফ্লেক্সবক্সঃ

ফ্লেক্সবক্স কন্টেইনার বিস্তারিতঃ

ফ্লেক্সবক্স আইটেম বিস্তারিতঃ

ডেভেলপারদের নিত্যদিনের সঙ্গী মার্কডাউন

মার্কডাউন কিঃ

কেন মার্কডাউন ব্যবহার করবেন?

মার্কডাউন কিভাবে কাজ করে?

মার্কডাউন নিম্নক্ত ৪টি ধাপে কাজ করেঃ

মার্কডাউন বিস্তারিতঃ

একদম নতুনদের জন্য বাংলায় টেইলউইন্ড সিএসএস

সংক্ষেপে টেইলউইন্ড সিএসএসঃ

টেইলউইন্ড সিএসএস কিভাবে কাজ করেঃ

টেইলউইন্ড সিএসএস ইনস্টলেশনের ধাপসমূহঃ

ইউটিলিটি-ফার্স্ট ফান্ডামেন্টালসঃ

বিভিন্ন ধরনের স্টেট হ্যান্ডল করাঃ (Hover, Focus, and Other States)

রেস্পন্সিভ ডিজাইনঃ

ডার্ক এবং লাইট মোডঃ

পুনরায় ব্যবহারযোগ্য স্টাইলঃ

How to Install WordPress and Essential Plugins Using WP-CLI

Step 1: Download WordPress Core

Step 2: Create the Configuration File

Step 3: Create the Database

Step 4: Install WordPress

Step 5: Install and Activate Plugins

All-in-One Command Sequence

Need a successful project?

Contact