অদৃশ্য ফ্রন্টএন্ড: ছোট সিদ্ধান্ত যা আপনার প্রোডাক্টকে বাঁচিয়ে রাখে

সেরা ফ্রন্টএন্ড কাজগুলো কখনোই ডেমোতে ফুটে ওঠে না।

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

বড় ধরনের ক্ষতি এড়াতে সাহায্য করে এমন তিনটি ছোট ফিক্সের উদাহরণ নিচে দেওয়া হলো।

১. লগইন এরর ঠিক করা ফ্রন্টএন্ড একসময় লগইন সফল হয়েছে কি না তা দেখার জন্য একটি status ফিল্ড চেক করত। ব্যাকএন্ড একটি বৈধ টোকেন পাঠাত ঠিকই, কিন্তু সাথে একটি null status পাঠাত। ফলে ব্যবহারকারীর অ্যাক্সেস থাকা সত্ত্বেও অ্যাপটি তাকে রিজেক্ট করে দিত।

সমাধানটি ছিল সহজ। এখন ফ্রন্টএন্ড সফলতার নিশ্চিত করতে সরাসরি টোকেনটি চেক করে। একটি ডকুমেন্টের অস্পষ্ট ফিল্ড ব্যবহারকারীর জন্য একটি বন্ধ দরজার মতো হয়ে দাঁড়াতে পারে।

২. ভেরিফিকেশন লিঙ্ক ঠিক করা যখন একজন ব্যবহারকারী একটি নতুন ট্যাবে কোনো লিঙ্কে ক্লিক করেন, তখন মূল ট্যাবটি unauthenticated অবস্থায় থেকে যায়। এটি সার্ভার থেকে কোনো আপডেট চাইতে পারে না।

আমি browser storage event ব্যবহার করেছি। যখন একটি ট্যাব localStorage-এ কিছু লেখে, তখন অন্য প্রতিটি ট্যাব তাৎক্ষণিকভাবে তা জানতে পারে। এটি ট্যাবগুলোর মধ্যে একটি ফ্রি message bus হিসেবে কাজ করে। এটি আপনার অনবোর্ডিং প্রক্রিয়ার একটি বাধা দূর করে।

৩. কুলডাউন টাইমার ঠিক করা অ্যাপ স্টেটে (app state) সংরক্ষিত থাকা "৩০ সেকেন্ড পর ইমেল পুনরায় পাঠান" টাইমারটি ব্যবহারকারী পেজ রিফ্রেশ করলে রিসেট হয়ে যায়। ফলে ব্যবহারকারীরা বারবার বাটনে ক্লিক করতে থাকে, যা আপনার ইমেল খরচ বাড়িয়ে দেয়।

সমাধানটি ছিল কাউন্টডাউন (countdown) এর পরিবর্তে ডেডলাইন (deadline) সংরক্ষণ করা।

  • কুলডাউন কখন শেষ হবে তার সঠিক timestamp সংরক্ষণ করুন।
  • প্রতিবার রিফ্রেশ করার পর অবশিষ্ট সেকেন্ড পুনরায় গণনা করুন। এটি অপব্যবহার রোধ করে এবং আপনার বাজেট রক্ষা করে।

কেন এটি ফাউন্ডারদের জন্য গুরুত্বপূর্ণ:

• লগইন ফিক্স ব্যবহারকারীর অ্যাক্টিভেশন নিশ্চিত করে। • ক্রস-ট্যাব সিগন্যাল কনভার্সন রেট বজায় রাখে। • কুলডাউন আপনার প্রফিট মার্জিন রক্ষা করে এবং অপব্যবহার রোধ করে।

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

উৎস: https://dev.to/virendra2902/the-invisible-frontend-small-decisions-that-quietly-save-a-product-1pkl