Grid, Flexbox, ES6 vs Progressive enhancement, Graceful degradation

ধরুন Mass People কে টার্গেট করে আপনি একটি ওয়েবসাইট ডিজাইন করছেন। আপনি সিদ্ধান্ত নিলেন Bootstrap 4 ব্যবহার করবেন, Bootstrap 4 তৈরি করা হয়েছে Flexbox এর উপর, পাশাপাশি আপনি নিজেও প্রচুর Flexbox এর কোড লিখে সুন্দরভাবে সবকিছু Align করলেন। DOM Manipulation, Ajax এর ক্ষেত্রে forEach, Promise, Arrow function ব্যাবহার করলেন। এক্ষেত্রে যদি আপনি ফলব্যাক চিন্তা না করেন তাহলে সম্ভাব্য কি ঘটতে পারে ?

• Firefox v28, Chrome v29 থেকে Flexbox পুরাপুরি সাপোর্ট করে, সুতরাং এর নিচের ভার্সন কেউ ইউজ করলে তার ক্ষেত্রে ওয়েবসাইটি ভেঙ্গে যাওয়ার সম্ভবনা আছে।
• Firefox v50, Chrome v51 এর নিচ থেকে NodeList এর জন্য forEach কাজ করবেনা, সেক্ষেত্রে আপনার জাভাস্ক্রিপ্ট Error দিয়ে কাজ করা অফ করে দিবে।

এইরকম সমস্যাগুলো থেকে বাচার জন্য Progressive enhancement, Graceful degradation ডিজাইন ফিলোসফি ফলো করা হয়। দুইটার লক্ষ্য এক হইলেও কার্যপদ্ধতি আলাদা।

Graceful degradation: এই ফিলোসফি অনুসারে আপনি মডার্ন ব্রাউজারকে বেসলাইন ধরে full functionality সহ এপ্লিকেশন ডেভেলপ করবেন। তারপর আপনি লেয়ার (ফাংশনালিটি) অফ করে করে পুরাতন ব্রাউজার গুলো তে টেস্ট করবেন কাজ করছে কিনা।

Progressive enhancement: এই ফিলোসফি অনুসারে আপনি শুরু করবেন মিনিমাম ভার্সনকে টার্গেট করে ব্যাসিক ফাংশনালিটি দিয়ে, এরপর Advanced/Enhanced ফাংশনালিটি গুলো লেয়ার এর মত করে এড করতে থাকবেন। আইডিয়াটা হচ্ছে যারা লেটেস্ট ভার্সন ইউজ করবে তারা ফুল ফাংশনালিটি পাবে, তবে যারা পুরাতন বা লো-ইন্ড ডিভাইস ইউজ করবে তারাও যেন ব্যাসিক কাজ গুলো করতে পারবে।

এই দুটা ফিলোসফির মাঝে Progressive enhancement টাই বেশি পপুলার, আসলে ব্রাউজার নিজে থেকই কিছুটা এইভাবে কাজ করে। যেমন ইমেজ ট্যাগে আমরা alt ট্যাগ ইউজ করি, SEO ছাড়াও আরএকটা উপকার যদি কোন কারনে ইমেজ না দেখায় তাহলে টেক্সট দিয়ে ইউজার কে বোঝানো। Flexbox ইউজ করার ক্ষেত্রেও আমরা সেম ফিলোসফি ফলো করতে পারি। ধরুন আমাদের একটা parent div এবং তার মাঝে তিনটা child div আছে।

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

Child div গুলো কে পাশাপাশি এইভাবে রাখতে চাইলে

প্রথমে আমরা .child এর স্টাইলে float: left; সেট করবো। যেটা সবগুলো ব্রাউজার সাপোর্ট করবে। এরপরে আমরা এর .parent এ flexbox এর প্রোপার্টি গুলো এড করব। আমাদের স্টাইল টা হবে অনেকটা এই রকম।

.parent {
   display: flex;
}
.child {
    display: block;
    float: left;
}

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

ফলব্যাকের আর একটা সুন্দর উদাহারন gradient

header {  
    background: black;  
 
    background: linear-gradient(   
        to bottom right,   
        red, rgba(255, 0, 0, 0)  );  
    color: white; 
}

এভাবে ইউজ করার ফলে যদি কোন ব্রাউজার gradient সাপোর্ট না করে সেক্ষেত্রে background: black; অংশটি কাজ করবে।

অনেকে HTML এ Block & Inline এলিমেন্ট গুলো দিয়ে CSS ছাড়া প্রথমে ডিজাইন করেন। ব্যাপারটা অনেকটা এইরকম, ধরুন আপনি টেক্সট এবং ইমেজ পাশাপাশি রাখতে চান সেক্ষেত্রে <p> ট্যাগের মাঝে <img> ট্যাগ ইউজ করতে হবে। এতে অবশ্য HTML অনেকটা messy হয়।

এইভাবে ফলব্যাক লেখার ফলে পুরাতন ব্রাউজারগুলোতে আপনার এপ্লিকেশন চললেও পুরাপুরি সেম হবেনা, যদি কোন ক্ষেত্রে আপনার পুরাপুরি সেম দরকার হয় তখন কি করবেন?

এক্ষেত্রে আমরা Feature Detection library Modernizr ইুউজ করে খুব সহজেই feature সাপোর্ট করে কিনা, সেটা ডিটেক্ট করে সেই অনুযায়ি ফলব্যাক কোড লিখতে পারব। তখন কোড কিছুটা হবে এইরকম

.vertical-centered { 
  /* Flexbox centering */ 
}
.no-flexbox .vertical-centered { 
  /* Centering without flexbox */ 
}

Now what about Javascript, Huh?

নতুন নতুন এক্সাইটিং Javascript এর features গুলো আমরা সবাই ইউজ করতে চাই, সেক্ষেত্রে আমাদের দুটা জিনিস দরকার

• Transpiling(transformation + compiling)
• Shims/Polyfills

নিচের উদাহারনটি দেখুন

var foo = [1,2,3];

var obj = {
    foo
};

obj.foo;

‌যেটা transpile হয়ে নিচের কোডে পরিনত হয়

var foo = [1,2,3];

var obj = {
    foo: foo
};

obj.foo;

কিন্তু সবগুলো new ES6 features এর জন্য transpiling কাজ করেনা কিছু কিছু features এর জন্য Polyfills ইউজ করতে হয়। যেমন NodeList এর উপর forEach loop ইউজ করতে চাইলে আপনাকে পলিফিল ইউজ করতে হবে। প্রতিটা new features ব্যাবহার করার আগে MDN এর ডকুমেন্টেশন টা ভালভাবে দেখে নেওয়া উচিত, তাছাড়াও পলিফিলের খুব সুন্দর একটি কালেকশন এখানে পাবেন।

আজ এই পর্যন্তই, সবার জন্য শুভকামনা।