💡 প্রশ্ন ১: ফ্রন্টএন্ড পারফরম্যান্স অপটিমাইজেশন
আপনার অ্যাপ্লিকেশন দ্রুত লোড এবং রেসপন্সিভ করার জন্য আপনি কী কী পারফরম্যান্স অপটিমাইজেশন কৌশল ব্যবহার করেন?
এই প্রশ্নটির মাধ্যমে আমি বুঝতে চাই, আপনি শুধু কোড লিখতেই পারেন, নাকি ব্যবহারকারীর অভিজ্ঞতা নিয়েও ভাবেন। আপনার লেখা কোড ব্যবহারকারীর ব্রাউজারে কীরকম প্রভাব ফেলবে, সেই বিষয়ে আপনার ধারণা আছে কিনা, তা যাচাই করাই আমার মূল উদ্দেশ্য। এটি আপনার আধুনিক ওয়েব ডেভেলপমেন্ট স্ট্যান্ডার্ড এবং বিল্ড প্রসেস সম্পর্কে জ্ঞান পরীক্ষা করে।
আপনার উত্তর থেকে আমি কী আশা করি?
আমি আশা করি আপনি কিছু কোর কনসেপ্ট দিয়ে উত্তর শুরু করবেন। যেমন:
- Minification ও Compression: ফাইলের সাইজ কমানোর জন্য এই দুটি পদ্ধতির কথা আপনাকে বলতেই হবে।
- Code Splitting: ব্যবহারকারীর প্রয়োজন অনুযায়ী কোডের ছোট ছোট অংশ বা “chunk” লোড করার কথা উল্লেখ করলে আমি বুঝব আপনি আধুনিক বান্ডলারের ক্ষমতা সম্পর্কে জানেন। React-এর ক্ষেত্রে
React.lazy()-এর উদাহরণ দিলে উত্তরটি আরও জোরালো হবে। - Tree Shaking: অব্যবহৃত কোড বাদ দিয়ে বান্ডেলের আকার কমানোর এই প্রক্রিয়াটির কথা বললে আপনার উত্তরের মান বাড়বে।
🖼️ প্রশ্ন ২: বড় আকারের ইমেজ অপটিমাইজেশন
ধরুন আপনি একটি ই-কমার্স সাইটে কাজ করছেন যেখানে প্রচুর হাই-ডেফিনিশন ছবি আছে। ব্যবহারকারীর জন্য সেরা পারফরম্যান্স নিশ্চিত করতে আপনি এই ছবিগুলো কীভাবে অপটিমাইজ করবেন?
আমি কেন এই প্রশ্নটি করছি?
ওয়েবসাইটের গতি কমানোর পেছনে প্রায়ই সবচেয়ে বড় কারণ হয়ে দাঁড়ায় ইমেজ। এই বাস্তবধর্মী সমস্যাটি দিয়ে আমি আপনার প্র্যাকটিক্যাল জ্ঞান যাচাই করতে চাই। আপনি ছবির কোয়ালিটি এবং ওয়েবসাইটের গতির মধ্যে ভারসাম্য রাখতে পারেন কিনা, সেটাই আমি দেখতে চাই।
আপনার উত্তর থেকে আমি কী আশা করি?
একটি শক্তিশালী উত্তরে একাধিক কৌশলের কথা থাকবে:
- Lazy Loading: যে ছবিগুলো স্ক্রিনে দেখা যাচ্ছে না, সেগুলো লোড না করার কৌশল।
- আধুনিক ফরম্যাট: JPEG/PNG-এর বদলে WebP-এর মতো আধুনিক ফরম্যাট ব্যবহারের কথা বলা।
- Responsive Images:
srcsetব্যবহার করে বিভিন্ন ডিভাইসের জন্য বিভিন্ন সাইজের ছবি লোড করার পদ্ধতি। - CDN: ব্যবহারকারীর সবচেয়ে কাছের সার্ভার থেকে ছবি দেখানোর জন্য Content Delivery Network ব্যবহারের গুরুত্ব ব্যাখ্যা করা।
🧑💻 প্রশ্ন ৩: বড় অ্যাপ্লিকেশনে কোডের মান নিয়ন্ত্রণ
একটি বড় টিমে, যেখানে একাধিক ডেভেলপার একই কোডবেজে কাজ করছেন, সেখানে কোডের মান এবং ধারাবাহিকতা বজায় রাখার জন্য আপনি কী কী পদ্ধতি বা টুল ব্যবহার করবেন?
আমি কেন এই প্রশ্নটি করছি?
বড় প্রজেক্টে কোডের মান ঠিক না থাকলে কিছুদিন পরই তা রক্ষণাবেক্ষণ করা কঠিন হয়ে পড়ে এবং বাগ বাড়তে থাকে। এই প্রশ্নের মাধ্যমে আমি জানতে চাই, আপনি একটি টিমে কাজ করার জন্য কতটা প্রস্তুত এবং কোডিং স্ট্যান্ডার্ড বজায় রাখার গুরুত্ব বোঝেন কিনা।
আপনার উত্তর থেকে আমি কী আশা করি?
- Linting: কোডিং স্টাইল এবং ভুল ধরার জন্য ESLint-এর মতো লিন্টার ব্যবহার।
- Testing: Unit Test (Jest) এবং E2E Test (Cypress) ব্যবহার করে কোডের নির্ভরযোগ্যতা যাচাই।
- Code Review: টিমে কোড রিভিউ কালচার বজায় রাখা।
🔒 প্রশ্ন ৪: নিরাপত্তা (XSS অ্যাটাক)
XSS বা Cross-Site Scripting অ্যাটাক কী? একটি React অ্যাপ্লিকেশনে আপনি এটি কীভাবে প্রতিরোধ করবেন?
আমি কেন এই প্রশ্নটি করছি?
নিরাপত্তা শুধু ব্যাকএন্ড ডেভেলপারদের কাজ নয়। একজন ফ্রন্টএন্ড ডেভেলপার হিসেবেও আপনাকে সাধারণ ওয়েব অ্যাটাকগুলো সম্পর্কে জানতে হবে। এই প্রশ্নটি ওয়েব সিকিউরিটির প্রতি আপনার সচেতনতা এবং নিরাপদ কোড লেখার ক্ষমতা পরীক্ষা করে।
আপনার উত্তর থেকে আমি কী আশা করি?
- ব্যবহারকারীর দেওয়া ইনপুট UI-তে দেখানোর আগে sanitize করা।
- React-এর
dangerouslySetInnerHTMLসতর্কতার সঙ্গে ব্যবহার করা উচিত, কারণ এটি XSS আক্রমণ ঘটাতে পারে যদি ইনপুট ভ্যালিডেট না করা হয়।
🧩 প্রশ্ন ৫: Micro-frontends আর্কিটেকচার
Micro-frontends আর্কিটেকচার বলতে কী বোঝেন? কোন ধরনের প্রজেক্টে বা কোন পরিস্থিতিতে আপনি এটি ব্যবহার করার কথা বিবেচনা করবেন?
আমি কেন এই প্রশ্নটি করছি?
এটি একটি অ্যাডভান্সড প্রশ্ন। এর মাধ্যমে আমি ফ্রন্টএন্ড আর্কিটেকচার এবং অ্যাপ্লিকেশন স্কেল করার বিষয়ে আপনার জ্ঞান পরিমাপ করতে চাই।
আপনার উত্তর থেকে আমি কী আশা করি?
- এটি খুব বড় আকারের প্রজেক্টের জন্য উপযুক্ত।
- যেখানে একাধিক টিম আলাদা ফিচার নিয়ে কাজ করে।
- প্রতিটি টিম তাদের নিজস্ব টেকনোলজি ব্যবহার করতে পারে এবং আলাদা ডেপ্লয় সাইকেল পরিচালনা করতে পারে।