Let's Encrypt ব্যবহার করে SSL Certificate ইস্যু ও ব্যবহার - Mayeenul Islam

কিভাবে Let’s Encrypt ব্যবহার করে বিনে পয়সায় ওয়েবসাইটে এসএসএল সার্টিফিকেট ইস্যু এবং অ্যাক্টিভেট করা যায়, এবং HTTP ওয়েবসাইটকে HTTPS-এ বদলে ফেলা যায় তার ধারণা দেয়া হয়েছে।

মূল ইভেন্টটি টেকনোভিস্তা লিমিটেড-এ ২৪ ফেব্রুয়ারি ২০১৯-এ অনুষ্ঠিত হয়েছিল। পরবর্তীতে সেই বক্তব্যই অডিও আকারে আলাদা করে রেকর্ড করা হয়েছে, যাতে বক্তব্যগুলো ছড়িয়ে দেয়া যায়।

ভিডিও

Continue reading

Open Source - tuts nano

“ওপেন সোর্স” (Open Source: উন্মুক্ত সোর্স, মুক্ত সোর্স) মানে হচ্ছে, সোর্সকে উন্মুক্ত করে ছেড়ে দেয়া। কথাটির বিপরীত শব্দ হচ্ছে “সংরক্ষিত সোর্স” (Closed Source)।

ওপেন সোর্স মানে ফ্রি না

কিংবা

উন্মুক্ত সোর্স মানে মাগনা না

কথাটা শুনেছি, বুঝেও ফেলেছি…

কিন্তু সত্যি বলতে কি, বুঝে ফেলার ভান করলেও, কিংবা বুঝে ফেললেও আসলে কিন্তু কিচ্ছুই বুঝতে পারিনি – এটা বুঝতে পারলাম, যখন এবিষয়ে কথা বাড়াতে গিয়ে এখানে-ওখানে ধাক্কা খাচ্ছিলাম।

  • উইন্ডোজ একটা সফ্‌টওয়্যার, যা কিনে নিতে হয়, এটা ওপেন সোর্স না। বাংলাদেশের বিজয় কীবোর্ড কিন্তু এরকমই একটা সফ্‌টওয়্যার, যা সংরক্ষিত সোর্স এবং কিনে ব্যবহার করতে হয়।
  • উবুন্ত‌ু একটা সফ্‌টওয়্যার, যা ফ্রি পাওয়া যায়, মানে মাগনা, আবার এটা ওপেন সোর্স। বাংলাদেশের অভ্র ফোনেটিক কীবোর্ড কিন্তু এরকমই একটা সফ্‌টওয়্যার, যা উন্মুক্ত সোর্স এবং বিনামূল্যও।

হিসাবটা এখানে মিলে না, তাই শিখাও হয় না।

অবশেষে লজ্জার মাথা খেয়ে যখন প্রশ্নটা শাবাব ভাইকে (Shabab Mustafa) এক সাক্ষাতে করেই ফেললাম, তখনই আসলে সত্যিকার অর্থে শিখলাম। যা শিখলাম, সেটাকে ভেঙে বলি:

Continue reading

গিটহাবে স্ট্যাটিক ডেমো সাইট বানানোর কৌশল - tuts nano

আপনি HTML, CSS, JavaScript দিয়ে একটা অপূর্ব কাজ করে ফেলেছেন। সেটা ছড়িয়ে দেবার জন্য Github-এ একটা রেপোযিটরিও করে ফেলেছেন এবং সেখানে আপলোডও করে দিয়েছেন। লোকজন এখন চাইলেই আপনার রোপোযিটরিটা ফর্ক করতে পারছেন, ক্লোন করতে পারছেন, ডাউনলোডও করতে পারছেন। কিন্তু একটা ব্যাপারে ঠিক মন ভরছে না – যদি কাজটার একটা ডেমো দেখানো যেত অনলাইনেই? তাহলে তো সোনায় সোহাগা হতো।

আমরা এখানে জানবো: কিভাবে গিটহাবে একটা স্ট্যাটিক ডেমো সাইট তৈরি করা যায়।

একটু বলে রাখি, বারবার স্ট্যাটিক সাইট কথাটা কেন বলছি? স্ট্যাটিক সাইটে সার্ভার সাইড কোনো কোড থাকছে না, পিওর এইচটিএমএল, সিএসএস আর জাভাস্ক্রিপ্ট দিয়ে আপনি সাইটটা তৈরি করছেন, আর দেখাচ্ছেন। কারণ ডাটাবেজ স্টোর করার মতো কোনো জায়গা আমরা পাচ্ছি না।

যা যা জানা থাকা লাগবে

অন্তত একটা HTML ফাইল বানানো জানা লাগবে। এছাড়া, যখন যা জানার দরকার পড়বে, একটু ঢু মেরে সেটা জেনে নিলেই চলবে।

কিভাবে কী করতে হয়?

প্রথম ধাপ: গিটহাবে কোড ডিপ্লয়

কাজটা খুবই সহজ।Continue reading

Custom Pagination for Admin $wp_query

অ্যাডমিন প্যানেলে একটা পাতায় (menu_page কিংবা submenu_page হতে পারে) একটা WP_Query() চালিয়ে কিছু তথ্য নিয়ে এসেছি। টেবিল আকারে তথ্যগুলো দেখিয়েছিও। এবং পেজিনেশনও করেছি। কিন্তু লক্ষ করলাম, পেজিনেশন কাজ করছে না। অনুসন্ধান করে দেখলাম Christine Cooper-ও একই সমস্যায় পড়েছিলেন এবং তিনি একটা সমাধানও বের করেছেন Milo’র পরামর্শকে কাজে লাগিয়ে। সমাধানটা দারুণ, এবং আমার সমস্যারও সমাধান দিলো। কিন্তু আরো কিছু বিষয়ের দরকার হয়ে পড়েছিল, তাই আমি সেটাতে আরো কাজ করে আপনাদের জন্য হাজির করলাম একটু গোছানো একটা সমাধান হিসেবে। আপনারা এটাকে আরো গুছিয়ে নিতে পারেন নিজের মতো করে।

আসলে কী হচ্ছে, কেন হচ্ছে?

এই ব্যাপারটা আগে জানা দরকার। কপি-পেস্ট সবাই করতে পারে, কোড বুঝে নিয়ে তা ব্যবহার করাটাই প্রকৃত প্রোগ্রামারের কাজ হওয়া উচিত। যা জানা গেল, তা হলো,Continue reading

পিএইচপি দিয়ে আইপি ব্লক করা - tuts nano

কেউ একজন গুগল অ্যাডসেন্স অ্যাকাউন্ট অনুমোদিত হবার পর, নিজেদের সাইটে সক্রিয় করেছেন। কিন্তু তিনদিনের মাথায় ‘ইনভ্যালিড ক্লিক’-এর কারণে তাঁর অ্যাকাউন্টটা আজীবনের জন্য রহিত (ব্যান) হয়ে যায়। কারণ হিসেবে তাঁরা যা আন্দাজ করছেন যে, হয়তো নিজেদের একই পাবলিক আইপি ঠিকানা থেকে একাধিক ক্লিকই হয়তো তাঁদের অ্যাকাউন্টটা ব্যান করে দিয়েছে। এটা হতে পারে, যখন একই ইন্টারনেট সংযোগ ব্যবহার করে একাধিক কম্পিউটার দিয়ে একাধিক ব্যবহারকারী ইন্টারনেট ব্যবহার করেন। তখন গুগল ঐ ব্যক্তিদের ক্লিককে সেই ব্যক্তিরই ক্লিক বলে ধরে নেবে, যিনি অ্যাডসেন্স অ্যাকাউন্টটা তৈরি করেছেন – সোজা বাংলায় তিনি [নিজে না করলেও ঘটনাটা এরকম দাঁড়াবে] নিজেই নিজের বিজ্ঞাপনে ক্লিক করেছেন।

আচ্ছা, এটা একটা ঘটনা হতে পারে, কিন্তু এরকম অনেক ঘটনাই দেখা দিতে পারে, যখন আপনি কোনো কোনো কন্টেন্ট নির্দিষ্ট কিছু আইপি ঠিকানার ব্যবহারকারীদের দেখাতে চান না। এই কোড স্নিপেটটি (তাবিজ! 🙂 ) আপনাকে রক্ষা করবে ইনশাল্লাহ:

Continue reading

গিটহাবে প্রোজেক্ট রিলিয দেয়া - tuts nano

Github.com আমাদেরকে সামাজিকভাবে কোডিং করার একটা ধারণা দেয়। এই সাইট ব্যবহার করে আমরা বন্ধু, সহকর্মী, গুরু এমনকি অজানা কারো সাথেও সামাজিকভাবে কোড করতে পারি। অধিকাংশ গিটহাব প্রোজেক্টই উন্মুক্ত সোর্সের, কারণ প্রোজেক্টগুলো প্রাথমিকভাবেই জনসমক্ষে উন্মুক্ত। তবে আপনি প্রাইভেট রেপোযিটোরিও তৈরি করতে পারেন, কিন্তু সেগুলো বিনামূল্য নয়। উন্মুক্ত কিংবা প্রাইভেট – যাই হোক, গিটহাবে তোলা অধিকাংশ গুছিয়ে নেয়া পণ্যও এর ডেভলপার কিংবা মালিক রিলিয করেন না। তাই আজকে আমরা দেখার চেষ্টা করবো, কিভাবে গিটহাব প্রোজেক্টকে রিলিয করতে হয়।

ধরা যাক, আপনার গিটহাব রেপোযিটোরিটাই আপনার প্রোজেক্ট। এবং আপনি এখন এর 1.0.0 সংস্করণের কাজ করছেন। আরো কয়েকজনও কমিট করছেন এই রেপোযিটোরিতে। এবারে আপনারা সবাই ঠিক করলেন এই প্রোজেক্টটির 1.0.0 সংস্করণটি রিলিয করবেন। তো এপর্যায়ে আপনারা আপনাদের কমিট করা শেষ করলেন এবং রিলিযের জন্য প্রস্তুতি নিলেন।

রিলিয দেয়ার গিট পদ্ধতি

git ব্যবহার করে প্রোডাক্ট রিলিয দেয়ার পদ্ধতি হচ্ছে git tag। কমান্ডলাইনে (git bash ব্যবহার করে) কাজটা করার উপায় হচ্ছে:

git tag -a v1.0.0 -m "First Release"

এতে যেটা হবে সর্বশেষ কমিটে v1.0.0 ট্যাগটি জুড়ে যাবে। এবারে কমান্ডলাইনে ট্যাগ পুশ করে দিলেই গিটহাবে একটা ট্যাগ তৈরি হয়ে যাবে।

git push -u origin --tags

কিন্তু এতে রিলিয নোট লেখা হবে না। তাই ট্যাগ তৈরি এবং রিলিয দেয়ার জন্য গিটহাব-এ রয়েছে রিলিয ফিচার:

কিভাবে রিলিয করতে হয়

Continue reading

ওয়ার্ডপ্রেস মাল্টিসাইটে নিজস্ব সাইনআপ পাতা তৈরি - tuts nano

ওয়ার্ডপ্রেসে আমরা সচরাচর একক সাইট পরিচালনা করি, অর্থাৎ সেখানে একটা ইন্সটলেশনে একটাই সাইট চলে। কিন্তু ওয়ার্ডপ্রেস তার একটা ইন্সটলেশনে একাধিক সাইট চালানোরও একটা সুযোগ দিয়ে রেখেছে, আর তা হলো ওয়ার্ডপ্রেস মাল্টিসাইট। প্রথমদিকে ওয়ার্ডপ্রেস মাল্টিসাইট WordPress MU নামে কাজ শুরু করলেও তা পরবর্তিতে ওয়ার্ডপ্রেস কোর-এ অন্তর্ভুক্ত করা হয়। এবং বলা যায়, সবচেয়ে বড় ওয়ার্ডপ্রেস মাল্টিসাইট ইন্সটলেশন হচ্ছে WordPress.com, যেখানে আপনি চাইলেই বিনামূল্যে একটা ব্লগ খুলে ফেলতে পারেন।

ওয়ার্ডপ্রেস মাল্টিসাইট তুলনামূলক কম জনপ্রিয় এবং এর রিসোর্সও কম পাওয়া যায়, কারণ এর ব্যবহারকারী কম। আবার, যেহেতু মাল্টিসাইটের আর্কিটেকচার ভিন্ন, তাই অনেক প্লাগইনই ওয়ার্ডপ্রেস মাল্টিসাইটে চলে না। কিংবা হয়তো অধিকাংশ মানুষই এই ভিন্ন আর্কিটেকচারের সুযোগটা নিতে জানেন না। আপনার একাধিক ভাষায় ওয়েবসাইট দরকার, সাবডোমেইন কিংবা সাবফোল্ডার করে সেখানে একাধিক ওয়ার্ডপ্রেস ইন্সটল করেই আপনি কাজ সেরে ফেলছেন – এরকম ঘটনা অহরহ ঘটে। কিন্তু যিনি এই সুবিধাটা সম্পর্কে ওয়াকিবহাল, এবং চ্যালেঞ্জটা নিতে আগ্রহী, তিনি আসলে সুযোগটা নিতে চান, এবং তখনই ওয়ার্ডপ্রেসের মাল্টিসাইট বা একই ওয়ার্ডপ্রেসে একাধিক আলাদা সত্ত্বার সাইটের জন্ম হয়।

যাহোক, এবারে মূল কথায় আসা যাক-

মাল্টিসাইটের রেজিস্ট্রেশন পাতা

কিন্তু ওয়ার্ডপ্রেসে মাল্টিসাইট ইন্সটল করা হলে খুব বিরক্তি উদ্রেক করে যে ব্যাপারটা, তা হলো এর ব্যবহারকারী রেজিস্ট্রেশন পাতাটা। সাধারণত ওয়ার্ডপ্রেস সিঙ্গেল সাইটের রেজিস্ট্রেশন পাতাটা পাওয়া যায় এই ঠিকানায়:

http://example.com/wp-login.php?action=register

আপনি যদি একটা ওয়ার্ডপ্রেস ইন্সটলেশন ফোল্ডার খুলে দেখেন, তাহলে রুট ফোল্ডারেই (অর্থাৎ যেখানে সাধারণত wp-config.php ফাইলটা থাকে) wp-login.php নামে একটা ফাইল দেখবেন, এটাই সেটা।

কিন্তু ওয়ার্ডপ্রেস মাল্টিসাইট এই পাতা থেকে রেজিস্ট্রেশন করে না। মাল্টিসাইট ইন্সটল করা হলে তখন রেজিস্ট্রেশন পাতা হয় এই ঠিকানায়:

http://example.com/wp-signup.php

যেখানে এইমাত্র wp-login.php ফাইলটা দেখেছেন, সেখানেই আপনি wp-signup.php ফাইলটাও পাবেন। যখনই আপনি “নিবন্ধন” (Register/ Sign up) লেখা কোনো লিংকে ক্লিক করবেন, ওয়ার্ডপ্রেস মাল্টিসাইট আপনাকে এই সাদামাটা পাতাটায় নিয়ে আসবে, যা অনেকেই পছন্দ করেন না।

এই পাতাটা অপছন্দ করার কারণগুলোর মধ্যে অন্যতম হলো এর মধ্যে কোনো স্টাইল করা থাকে না। আর দ্বিতীয়ত হলো, এই পাতায় যা যা ত্রুটি কিংবা সফলতার বার্তা দেখায়, সেগুলোকে ফিল্টার করে বদলে নেয়া যায় না। এজন্যই বিকল্প খোঁজা…

আজকে আমরা এই পাতাটিকে পাল্টে ফেলে নিজস্ব একটি সাইনআপ পাতা এর জায়গায় বসিয়ে দিতে হয় কিভাবে, তা-ই দেখবো। মনে রাখতে হবে, এজন্য আমরা যে কাজগুলো করছি না:

  • আমরা .htaccess ফাইলে কোনো হাত দিচ্ছি না,
  • আমরা আলাদা কোনো প্লাগইন ব্যবহার করছি না, এবং
  • অতি অবশ্যই আমরা ওয়ার্ডপ্রেসের কোনো কোর ফাইলে হাত দিচ্ছি না

Continue reading

গিট ব্রাঞ্চিং - tuts nano

গিট নিয়ে ভয়-ভীতি আমরা এবারে কাটিয়ে উঠেছি। এখন সময় এসেছে এর নতুন নতুন ফিচার জানার। তাই এই ধারাবাহিক আলোচনাকে “একেবারে প্রাথমিক জ্ঞান” আর বলছি না, বরং গিট নিয়ে খেলাধুলা বলা যেতে পারে। কিন্তু যারা এখনও গিট নিয়ে ভয়-ভীতি কিংবা দোটানার মধ্যে আছেন, এবারে তাদেরকে অনুরোধ করবো আমাদের পূর্বতন দুটো টিউটোরিয়াল দেখে নেয়ার জন্য, আগে (কথা দিচ্ছি এর চেয়ে সহজ করে কেউ বলবে না কখনও):

এবারে আমরা জানি গিট কাকে বলে, কত প্রকার, কী কী 🙂 । তাই আজকে আমরা আলোচনা করছি গিট ব্রাঞ্চিং নিয়ে।

অন্যান্য ভার্ষন নিয়ন্ত্রণ সফ্‌টওয়্যারের সাথে গিট-এর পার্থক্য করতে গেলে অনেককেই বলতে শুনি যে, গিটে ব্রাঞ্চিং যথেষ্ট cheap। এই cheap কথাটার মানে যেমন স্বল্প খরচসাপেক্ষ, তেমনি এর দ্বারা বোঝায় এটা যথেষ্ট সহজ, দ্রুত এবং ঝামেলাহীনও। স্বস্তা, কারণ খুব অল্প রিসোর্স ব্যবহার করেই গিট ব্রাঞ্চিং করা যায় অগণিত।

কী এই গিট ব্রাঞ্চিং? ব্রাঞ্চ শব্দটা শুনলেই ব্যাংকের ব্রাঞ্চের কথা মনে হয় না? ঠিকই আছে। ব্রাঞ্চিং সেরকমইতো। এবারে একটা ঘটনা দেখা যাক:

গিট-এ ব্রাঞ্চিং-এর সহজ চিত্র

গিট-এ ব্রাঞ্চিং-এর সহজ চিত্র

আমি মূল রাস্তা ধরে হাঁটছি। আমার সাথে ২জন বন্ধু আছেন।

আমি মূল রাস্তা ধরে আরো এক মাইল এগোলাম, এবারে আমার সাথে আরো ২জন বন্ধু যোগ দিলেন। অর্থাৎ মোট বন্ধুর সংখ্যা ৪জন

এবারে আমি রাস্তা বদল করলাম। ডানের গলিতে ঢুকে গেলাম। এই গলিতে আমি আরো ২জন বন্ধু জুটিয়ে নিলাম। মোট বন্ধু: [আগের] ৪জন + [নতুন] ২জন = ৬জন

আরো এক মাইল এগোলাম, আরো ৪জন বন্ধু জুটিয়ে নিলাম, মোট বন্ধু হলেন ৬+৪=১০জন

এমন সময় হঠাৎ, পথে আপনার সাথে দেখা। আপনি জিজ্ঞেস করলেন, আপনি এই রাস্তায় কেন? আপনার মূল রাস্তা কোথায়? আমি বললাম, সেটাতো ফেলে এসেছি। আপনি বললেন, বাহ, দারুণ! ১০জন বন্ধু নিয়ে পথ চলছেন! মূল রাস্তাতে আপনার কয় জন বন্ধু ছিলেন? বললাম, ৪জন। কেন, ১০জন নয় কেন? কারণ, বাকি ৬জন যে আমি ডানের গলিতে পেয়েছি।

হ্যা, ব্রাঞ্চিং-এর ক্ষেত্রে এই ব্যাপারটাই ঘটে। যতক্ষণ পর্যন্ত আপনি মূল রাস্তা ধরে হাঁটছেন, ততক্ষণ পর্যন্ত যা ঘটেছে, গলিপথে বা শাখা পথে ঢোকার সময় শাখা পথ কিন্তু ততটুকুর খবরই জানে। আর গলিপথে ঢুকে আপনি কতটুকু এগিয়েছেন, কী করেছেন, মূল পথ কিন্তু তার খবর জানে না।

স্বস্তাশ্রেণীর একটা উদাহরণ হয়ে গেল, তবু এটা বুঝলে ব্রাঞ্চিং-এর কিছুটা ধারণা পাওয়া যাবে। …কথা না বাড়িয়ে এবারে হাত নোংরা করা যাক…

Continue reading

ওয়ার্ডপ্রেস সাইটে gZip Compression চালু করার পদ্ধতি

ওয়ার্ডপ্রেস সাইট যারা পরিচালনা করেন, তাদের অনেকেই সাইটের গতি বৃদ্ধির নানান কৌশল জানতে চান। সত্যিকার অর্থে গতি বৃদ্ধির ব্যাপারটা অনেক কিছুর সাথে সম্পর্কযুক্ত, যেমন:

  • আপনি যে থিম ব্যবহার করছেন, তার কোডের মান কেমন?
  • আপনি যে প্লাগইনগুলো ব্যবহার করছেন, তার কোডের মান কেমন?
  • আপনি যে সার্ভারে সাইট হোস্ট করেছেন, তার মান/গতি কেমন?
  • কিংবা আপনি যে তথ্য আপনার সাইটে রাখছেন, তা কতটা অপটিমাইজ্‌ড, মানে প্রয়োজনানুগ গুছিয়ে রাখা?
  • কিংবা আপনার সাইটে যেসব থার্ড পার্টি রিসোর্স ব্যবহার করেছেন, সেগুলো কতটা গতিশীল?

…ইত্যাদি বহু কিছু। এসব বিষয়গুলো নিশ্চিত করার পরও অনেক সময় সাইটের গতি আশানুরূপ পাওয়া যায় না। আপনি যদি তখন Google-এর PageSpeed Insights, GTmetrix কিংবা Yahoo!’র YSlow ব্যবহার করে পরখ করে থাকেন, তাহলে দেখবেন, সেখানে আপনাকে বলা হচ্ছে, “Enable Compression” (কম্প্রেশন সক্রীয় করুন)।

এটা খায় না মাথায় দেয়

আপনি যখন একটা ওয়েবসাইটের ঠিকানা লিখে এন্টার চাপেন, আপনি তখন আসলে সার্ভারকে বলেন, অমুক সাইটের তথ্যগুলো পাঠাও তো…। সার্ভার তখন সেই সাইটের তথ্যগুলো আপনাকে পাঠাতে থাকে। 10 মেগাবাইট ডাটা থাকলে, সে 10 মেগাবাইট ডাটা আপনাকে পাঠিয়ে দেয়, আপনি তখন সাইটটা দেখতে পারেন। যদি gZip Compression চালু করা থাকে, তাহলে যা ঘটবে: আপনি সার্ভারকে বলবেন, সাইটের ডাটা পাঠাও… সে তখন দেখবে সাইটে 10 মেগাবাইট ডাটা আছে, সে সেটাকে কম্প্রেস করবে, মানে যিপ করবে, মানে গুটিয়ে নিবে, এতে ডাটার আকার কমে আসবে মাত্র 3 মেগাবাইটে, অর্থাৎ সার্ভার তখন আপনার ব্রাউযারে পাঠাবে 10 মেগাবাইটের বদলে মাত্র 3 মেগাবাইট… কতটা দ্রুত হয়ে যাবে সাইট বুঝতেই পারছেন। বাকি কাজটা হবে এবার আপনার ব্রাউযারে… ব্রাউযার সেই কম্প্রেস করা ফাইলটা পেয়ে সেটাকে আনকম্প্রেস/ডিকম্প্রেস করবে, মানে আনযিপ করবে, পোটলা খুলবে, তারপর আপনাকে সাইটটা দেখিয়ে দিবে। …এভাবে gZip কম্প্রেশন আপনার সাইট পেজের আকার ৭০% পর্যন্ত কমিয়ে আনতে পারে।

কিভাবে কম্প্রেশন সক্রীয় করতে হয়

Continue reading

CSS3 দিয়ে কলাম তৈরি - nanodesigns

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

সিএসএস৩ দিয়ে তৈরি কলাম আরো পরিচ্ছন্ন, আরো সহজ। এখানে স্তবকে স্তবকে সাজানো <div>-গুলোকে কোনো ক্লাস কিংবা সিলেক্টরের তোয়াক্কা না করে শ্রেফ সিএসএস দিয়ে ধরে ধরে কলাম আকারে সাজিয়ে ফেলা যাবে। এবং রেসপন্সিভ ডিযাইনেও একই কৌশল কাজে লাগিয়ে লেআউটকে বিভিন্ন ভিউপোর্টে ইচ্ছামতো বদলে নেয়া যাবে।

আসুন দেখা যাক, কিভাবে সেটা করা হয়। আমরা সহজ করার জন্য সবটুকু কাজ একটা ফাইলের মধ্যেই করে দেখাচ্ছি:Continue reading