ডেভেলপারদের একটি খারাপ অভ্যাস হলো যখন তাদের কেবল একটি ধারালো ব্লেড প্রয়োজন, তখন তারা একটি সুইস আর্মি নাইফ (Swiss Army knife) তৈরি করতে থাকেন। HTML-এর প্রথম লাইন লেখার আগেই আমরা ভারী ফ্রন্টএন্ড ফ্রেমওয়ার্কের (frontend frameworks) দিকে ঝুঁকে পড়ি। আমরা অ্যানিমেশন লাইব্রেরি, স্টেট ম্যানেজমেন্ট টুলস এবং একটি ছোট কোম্পানি চালানোর মতো শক্তিশালী বিল্ড পাইপলাইন যুক্ত করি। তারপর আমরা অবাক হই কেন আমাদের পোর্টফোলিও সাইটগুলো রেন্ডার হতে তিন সেকেন্ড সময় নেয়, কেন মোবাইলে নেভিগেশন ভেঙে যায়, এবং কেন নিয়োগকর্তারা আমাদের মাসের পর মাস ধরে তৈরি করা প্রজেক্টগুলো দেখার আগেই সাইট থেকে বেরিয়ে যান।
আমি আমার সাম্প্রতিক পোর্টফোলিওতে ভিন্ন পথ বেছে নিয়েছি। আমি অন্তহীন ডিপেন্ডেন্সির (dependencies) ইকোসিস্টেম থেকে দূরে সরে এসেছি এবং সম্পূর্ণ সাইটটি সিম্যান্টিক HTML এবং ক্লিন CSS দিয়ে তৈরি করেছি। কোনো JavaScript ফ্রেমওয়ার্ক নেই। কোনো বিল্ড স্টেপ নেই। কোনো থার্ড-পার্টি অ্যানিমেশন ইঞ্জিন নেই। শুধু প্ল্যাটফর্মটি নিজে, লেআউটের জন্য CSS Grid এবং Flexbox, এবং একটি ডিজাইন দর্শন যা গতি এবং স্পষ্টতাকে afterthought হিসেবে নয়, বরং ফিচার হিসেবে বিবেচনা করে।
ফলাফলটি হালকা, দ্রুত এবং পেশাদার। আমি ঠিক যেভাবে এটি করেছি তা নিচে দেওয়া হলো।
ভিত্তি দিয়ে শুরু করুন
বেশিরভাগ ওভার-ইঞ্জিনিয়ারিংয়ের শুরু হয় ভিত্তি থেকে। একটি পোর্টফোলিওকে সিঙ্গেল-পেজ অ্যাপ্লিকেশন (SPA) হওয়ার প্রয়োজন নেই। এর কাজ হলো আপনার কাজ প্রদর্শন করা, মানুষকে জানানো কীভাবে আপনার সাথে যোগাযোগ করা যায় এবং অপ্রয়োজনীয় জটিলতা এড়িয়ে চলা। আমি সিম্যান্টিক HTML ব্যবহার করেছি কারণ ব্রাউজার ইতিমধ্যেই জানে কীভাবে একটি nav, একটি article, এবং একটি footer রেন্ডার করতে হয়। যখন আপনি সঠিক কাজের জন্য সঠিক এলিমেন্ট ব্যবহার করেন, তখন আপনি মূলত বিনামূল্যে অ্যাক্সেসিবিলিটি (accessibility), সার্চ ইঞ্জিন ভিজিবিলিটি এবং রেসপন্সিভ আচরণ পেয়ে যান। এতে আপনি কম কোডও লেখেন। পাঁচটি ARIA অ্যাট্রিবিউট সহ একটি div হলো একটি button-এর একটি অতিরিক্ত কোডযুক্ত অনুকরণ মাত্র। আমি তা পুরোপুরি এড়িয়ে চলেছি।
লেআউটের জন্য CSS Grid এবং Flexbox যথেষ্ট। Grid সামলায় ম্যাক্রো স্ট্রাকচার: পুরো পেজের সেকশন, প্রজেক্ট গ্যালারি, বড় ব্লকগুলোর অ্যালাইনমেন্ট। Flexbox সামলায় মাইক্রো ইন্টারঅ্যাকশন: ক্যাপসুলের ভেতরের নেভিগেশন লিঙ্ক, কার্ডের ভেতরে টেক্সট সেন্টারিং করা, ভিউপোর্টের নিচে ফুটারকে ঠেলে দেওয়া। একসাথে এগুলো সেই সব কারণের বিকল্প হয়ে দাঁড়ায় যার জন্য ২০১৮ সালে আপনার একটি ১২-কলাম গ্রিড ফ্রেমওয়ার্ক ইমপোর্ট করার প্রয়োজন হতো। কোডটি পঠনযোগ্য থাকে। CSS ফাইলটি ছোট থাকে।
রঙ, টাইপ এবং সংযম
আমি চেয়েছিলাম পোর্টফোলিওটি লোড হওয়ার মুহূর্তেই একটি শান্ত অনুভূতি দিক। ব্যাকগ্রাউন্ডে হালকা বেস এবং সূক্ষ্ম রেডিয়াল গ্রেডিয়েন্ট (radial gradients) ব্যবহার করা হয়েছে। কিছুই আক্রমণাত্মক নয়। গ্রেডিয়েন্টটি লো অপাসিটিতে (low opacity) থাকে, যা একটি নরম গভীরতা তৈরি করে যা পেজটিকে ফ্ল্যাট মনে হতে দেয় না কিন্তু মনোযোগ আকর্ষণের জন্য চিৎকারও করে না। এটি তাৎক্ষণিকভাবে লোড হয় কারণ এটি বিশুদ্ধ CSS। এখানে কম্প্রেস করার মতো কোনো হিরো ইমেজ নেই, ম্যানেজ করার জন্য কোনো WebP ফলব্যাক নেই, বা কনফিগার করার জন্য কোনো JavaScript লেজি-লোডিং লাইব্রেরি নেই।
টাইপোগ্রাফি ব্যক্তিত্ব বহন করে। আমি Outfit-এর সাথে Ovo ব্যবহার করেছি। Outfit, একটি জ্যামিতিক sans-serif, সমস্ত UI টেক্সট সামলায়: নেভিগেশন লেবেল, বাটনের টেক্সট, বডি কপি, মেটা ডিটেইলস। এটি স্ক্রিনে খুব স্পষ্ট এবং ছোট সাইজেও পঠনযোগ্য থাকে। Ovo, একটি মিডিয়াম-কন্ট্রাস্ট serif, হেডার এবং প্রধান শিরোনামের জন্য ব্যবহৃত হয়। এই সমন্বয়টি পেজটিকে একটি শান্ত এডিটোরিয়াল অনুভূতি দেয়। এটি দেখতে ডিজাইন করা মনে হয়, কোনো থিম করা নয়। সবচেয়ে বড় কথা, উভয় ফন্ট একটি মাত্র ফন্ট সার্ভিস কল বা সেলফ-হোস্টেড ফাইল থেকে লোড হয়। এতে কোনো লেআউট শিফট (layout shift) হয় না, কোনো আনস্টাইলড টেক্সটের ঝলকানি (flash of unstyled text) দেখা যায় না, এবং প্রাথমিক রেন্ডারের পরে কোনো স্ক্রিপ্ট ওয়েট পরিবর্তন করে না।
ফ্লোটিং ক্যাপসুল মেনু
নেভিগেশন হলো সেই জায়গা যেখানে পোর্টফোলিওগুলো প্রায়ই তাদের নিজস্ব ভারে ভেঙে পড়ে। ফুল-স্ক্রিন ওভারলে মেনু, স্ট্যাগার্ড অ্যানিমেশন স্ক্রিপ্ট এবং হ্যামবার্গার আইকন যা একটি ক্লাস টগল করার জন্য চল্লিশ লাইন JavaScript প্রয়োজন হয়। আমি এগুলোর কিছুই চাইনি।
আমি একটি ফ্লোটিং গ্লাসমরফিক (glassmorphic) ক্যাপসুল মেনু তৈরি করেছি। এটি একটি একক অনুভূমিক কন্টেইনার, যার প্রান্তগুলো গোলাকার এবং ভিউপোর্টের উপরের দিকে ফিক্সড (fixed) অবস্থায় থাকে। গ্লাসমরফিজম আসে একটি সেমি-ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড কালার এবং একটি backdrop-filter: blur() প্রপার্টি থেকে। এটি কন্টেন্টের উপরে ভাসমান থাকে কিন্তু কন্টেন্টকে আড়াল করে না, প্রতিটি সেকশনে তাৎক্ষণিক অ্যাক্সেস প্রদান করে এবং সম্পূর্ণ রিডিজাইন ছাড়াই ছোট ভিউপোর্টে সুন্দরভাবে সংকুচিত হয়। এই ইফেক্টটি আধুনিক দেখায় কারণ এটি কোনো ক্যানভাস লাইব্রেরি নয়, বরং ব্রাউজার নিজেই কম্পোজিটিং হ্যান্ডেল করে।